Fix issue #517: Menusheet (Menu Sheet) broken in Chrome

extensions/jqt.actionsheet.js

@@ -19,7 +19,7 @@
     jQTouch may be freely distributed under the MIT license.
 */
 
-(function($) {
+$(function() {
     // load css
     var src = $("head script").last().attr("src") || '';
     var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/';
@@ -29,20 +29,30 @@
 
     function hide(callback) {
         var $target = $(this),
-            $jqt = $('#jqt');
+            $jqt = $('#jqt'),
+            watchdogTimer = 0,
+            $this = this,
+            transition_names = 'webkitTransitionEnd msTransitionEnd transitionend';
 
         $target
             .addClass('transition')
             .removeClass('shown')
-            .one('webkitTransitionEnd', function(event) {
+            .one(transition_names, function(event) {
+                event.preventDefault();
                 if (event.target === this) {
-                    $target.removeClass('transition');              
+                    $(this).off('webkitTransitionEnd transitionend');
+                    clearTimeout(watchdogTimer);
+                    $target.removeClass('transition');
                     !callback || callback.apply(this, arguments);
                 }
             });
 
+        watchdogTimer = setTimeout(function() {
+                $target.trigger('transitionend');
+        }, 750);
+
         $jqt
-            .addClass('transition') 
+            .addClass('transition')
             .removeClass('modal')
             .find('.current')
                 .one('webkitTransitionEnd watchdog', function(event) {
@@ -56,25 +66,34 @@
                     var $current = $(this);
                     setTimeout(function() {
                         $current.trigger('watchdog');
-                    }, 500);                  
+                    }, 500);
                 });
 
         return $target;
     }
-      
+
     function show(callback) {
         var $target = $(this),
-            $jqt = $('#jqt');
+            $jqt = $('#jqt'),
+            watchdogTimer = 0,
+            $this = this,
+            transition_names = 'webkitTransitionEnd msTransitionEnd transitionend';
 
         $target
             .addClass('transition')
-            .one('webkitTransitionEnd', function(event) {
+            .one(transition_names, function(event) {
+                event.preventDefault();
                 if (event.target === this) {
-                    $target.removeClass('transition');              
+                    $(this).off('webkitTransitionEnd transitionend');
+                    clearTimeout(watchdogTimer);
                     !callback || callback.apply(this, arguments);
                 }
             });
 
+         watchdogTimer = setTimeout(function() {
+                $target.trigger('transitionend');
+        }, 750);
+
         $jqt
             .addClass('transition')
             .find('.current')
@@ -90,15 +109,15 @@
         }, 25);
         return $target;
     }
-    
+
     var methods = {
         init: function(options) {
             $(this).addClass('actionsheet');
         },
         show: show,
         hide: hide
     };
-    
+
     $.fn.actionsheet = function(method) {
       if (methods[method]) {
           if ($(this).is('.actionsheet')) {
@@ -111,7 +130,7 @@
           return methods.init.apply(this, arguments);
       } else {
           $.error('Method "' + method + '" does not exist on jqt.actionsheet' );
-      }        
+      }
     };
 
     if ($.jQT) {
@@ -155,4 +174,4 @@
     } else {
         console.error('Extension `jqt.actionsheet` failed to load. jQT not found');
     }
-})($);
+}());

extensions/jqt.floaty.js

@@ -0,0 +1,62 @@
+(function() {
+  if ($.jQT) {
+    $.jQT.addExtension(function(jQT) {
+      $.fn.makeFloaty = function(options) {
+        var settings;
+        settings = $.extend({}, {
+          align: 'top',
+          spacing: 20,
+          time: '.3s'
+        }, options);
+        if (settings.align !== 'top') {
+          settings.align = 'bottom';
+        }
+        return this.each(function() {
+          var $el;
+          $el = $(this);
+          $el.css({
+            'transition': 'top ' + settings.time + ' ease-in-out',
+            'display': 'block',
+            'min-height': '0 !important'
+          }).data('settings', settings);
+          $(document).scroll(function() {
+            if ($el.data('floatyVisible')) {
+              return $el.scrollFloaty();
+            }
+          });
+          return $el.scrollFloaty();
+        });
+      };
+      $.fn.scrollFloaty = function() {
+        return this.each(function() {
+          var $el, newY, settings, wHeight;
+          $el = $(this);
+          settings = $el.data('settings');
+          wHeight = $('html').attr('clientHeight');
+          newY = window.pageYOffset + (settings.align === 'top' ? settings.spacing : wHeight - settings.spacing - $el.get(0).offsetHeight);
+          return $el.css('top', newY).data('floatyVisible', true);
+        });
+      };
+      $.fn.hideFloaty = function() {
+        return this.each(function() {
+          var $el, oh;
+          $el = $(this);
+          oh = $el.get(0).offsetHeight;
+          return $el.css('top', -oh - 10).data('floatyVisible', false);
+        });
+      };
+      return $.fn.toggleFloaty = function() {
+        return this.each(function() {
+          var $el;
+          $el = $(this);
+          if ($el.data('floatyVisible')) {
+            return $el.hideFloaty();
+          } else {
+            return $el.scrollFloaty();
+          }
+        });
+      };
+    });
+  }
+
+}).call(this);

extensions/jqt.menusheet.css

@@ -1,28 +1,38 @@
 /* @group Menu Sheet */
 
 #jqt > div.menusheet {
-    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+    box-sizing: border-box;
     height: 100%;
     width: 260px;
 }
+
 #jqt.black-translucent > div.menusheet {
     padding-top: 20px;
 }
+
 #jqt.menuopened {
     width: 100%;
     overflow: hidden;
 }
 
 #jqt > .transition {
     -webkit-transition-property: translate3d, opacity, background-color;
+    transition-property: translate3d, opacity, background-color;
     -webkit-transition-duration: 250ms;
-    -webkit-transition-fill-mode: both;
+            transition-duration: 250ms;
+    transition-fill-mode: both;
     -webkit-transition-timing-function: ease-in-out;
+            transition-timing-function: ease-in-out;
 }
 
 #jqt.menuopened > .current {
     -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1);
-    -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5);
+            transform: translate3d(260px, 0, 0) rotate(0) scale(1);
+    box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5);
+    -webkit-transform-origin: 50% 50% 50%;
+            transform-origin: 50% 50% 50%;
+    -webkit-transform-style: flat;
+            transform-style: flat;
     border-left: 0.5px solid rgba(127, 127, 127, 0.01);
     z-index: 20;
 }
@@ -38,8 +48,13 @@
 }
 
 #jqt.menuopened > .menusheet.current {
-    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);  
-    -webkit-box-shadow: none;
+    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);
+            transform: translate3d(0, 0, 0) rotate(0) scale(1);
+    box-shadow: none;
+    -webkit-transform-origin: 50% 50% 50%;
+            transform-origin: 50% 50% 50%;
+    -webkit-transform-style: flat;
+            transform-style: flat;
     border-left: none;
     z-index: 0;
 }
@@ -61,7 +76,8 @@
     padding-bottom: 10px;
     border-top: 1px solid #333;
     background-color: rgba(0, 0, 0, 0.25);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(160, 168, 172, 0.75)), color-stop(0.08, rgba(112, 120, 128, 0.5)), color-stop(0.08, rgba(96, 102, 114, 0.5)), to(rgba(96, 102, 114, 0.5)));
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(160, 168, 172, 0.75)), color-stop(0.08, rgba(112, 120, 128, 0.5)), color-stop(0.08, rgba(96, 102, 114, 0.5)), to(rgba(96, 102, 114, 0.5)));  /* FF3.6+ */
+    background: -ms-linear-gradient(top,  #A0A8AC 75%, #707880 50%, #606672 50%, #606672 50%);  /* IE10+ */
 }
 
 /* @end */