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

extensions/jqt.menusheet.css

@@ -3,7 +3,6 @@
 #jqt > div.menusheet {
     -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
     height: 100%;
-    width: 260px;
 }
 #jqt.black-translucent > div.menusheet {
     padding-top: 20px;
@@ -21,7 +20,7 @@
 }
 
 #jqt.menuopened > .current {
-    -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);
     -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5);
     border-left: 0.5px solid rgba(127, 127, 127, 0.01);
     z-index: 20;

extensions/jqt.menusheet.js

@@ -19,33 +19,74 @@
     jQTouch may be freely distributed under the MIT license.
 */
 
+
+var transition = {
+
+	// Determines proper transition property per browser
+	whichTransitionEvent: function(){
+
+		var el = document.createElement('menuelement');
+
+		var transitions = {
+            'WebkitTransition':'webkitTransitionEnd', // Saf 6, Android Browser
+			'OTransition':'oTransitionEnd otransitionend',
+			'MozTransition':'transitionend',  // only for FF < 15
+			'transition':'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+
+		};
+
+		for(t in transitions){
+			if( el.style[t] !== undefined ){
+				return transitions[t];
+			}
+		}
+
+        return false;
+	}
+
+};
+
 (function($) {
     var src = $("head script").last().attr("src") || '';
     var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/';
     var csspath = scriptpath + 'jqt.menusheet.css';
     var link = $('<link href="' + csspath + '" rel="stylesheet">');
+
     $('head').append($(link));
 
     function hide(callback) {
         var $target = $(this);
         var data = $(this).data('menusheet');
+
         if (data.shown) {
             $(this).data('menusheet', {});
             var $source = data.source;
+            var transitionEnd = transition.whichTransitionEvent();
+
             $target.trigger('pageAnimationStart', {
                 direction: 'out', animation: undefined, back: true
             });
+
+            var watchdogTimer;
+
             $source.unbind('touchstart mousedown', data.closehandler);
-            $source.one('webkitTransitionEnd', function() {
-                $source.removeClass('inmotion transition in');
-                $target.removeClass('inmotion out');
-                $target.trigger('pageAnimationEnd', {
-                    direction: 'out', animation: undefined, back: true
-                });
-                !callback || callback.apply(this, arguments);
+            $source.on(transitionEnd , function menu(event) {
+                if (event.target === this) {
+                    $(this).off(transitionEnd, menu);
+                    clearTimeout(watchdogTimer);
+                    $source.removeClass('inmotion transition in');
+                    $target.removeClass('inmotion out');
+                    $target.trigger('pageAnimationEnd', {
+                        direction: 'out', animation: undefined, back: true
+                    });
+                    !callback || callback.apply(this, arguments);
+                }
             });
-
-            $source.addClass('inmotion transition in');
+
+            watchdogTimer = setTimeout(function() {
+                $source.trigger(transitionEnd);
+            }, 750);
+
+            $source.addClass('inmotion transition in'); 
             $target.addClass('inmotion out').removeClass('current');
             $('#jqt').removeClass('menuopened');
         }
@@ -55,6 +96,9 @@
     function show(callback) {
         var $target = $(this);
         var data = $(this).data('menusheet') || {};
+        var watchdogTimer;
+        var transitionEnd = transition.whichTransitionEvent();
+
         if (!data.shown) {
             var $source = $('#jqt .current:not(.menusheet)');
             $target.trigger('pageAnimationStart', {
@@ -65,22 +109,32 @@
                 return false;
             };
 
-            $source.one('webkitTransitionEnd', function() {
-                $source.one('touchstart mousedown', closehandler);
-                $source.removeClass('inmotion transition out');
-                $target.removeClass('inmotion in');
-                $target.trigger('pageAnimationEnd', {
-                    direction: 'in', animation: undefined, back: false
-                });
-                !callback || callback.apply(this, arguments);
+                $source.on(transitionEnd , function menu(event) {
+                if (event.target === this) {
+                    $(this).off(transitionEnd, menu);
+                    clearTimeout(watchdogTimer);
+                    $source.one('touchstart mousedown', closehandler);
+                    $source.removeClass('inmotion transition out');
+
+                    $target.removeClass('inmotion in');
+                    $target.trigger('pageAnimationEnd', {
+                        direction: 'in', animation: undefined, back: false
+                    });
+                    !callback || callback.apply(this, arguments);
+                }
             });
-
+
+             watchdogTimer = setTimeout(function() {
+                $source.trigger(transitionEnd);
+            }, 750);
+
             data.shown = true;
             data.closehandler = closehandler;
             data.source = $source;
             $(this).data('menusheet', data);
-
+            
             $source.addClass('inmotion transition out');
+
             $target.addClass('current in');
             $('#jqt').addClass('menuopened');
         }
@@ -119,7 +173,7 @@
             },
             fn: function(e, params) {
                 params.$el.removeClass('active');
-
+                
                 var $target = $(params.hash);
                 $target.menusheet('show');
 
@@ -149,4 +203,4 @@
     } else {
         console.error('Extension `jqt.menusheet` failed to load. jQT not found');
     }
-})($);
+}( jQuery || $ )); // jQuery or jQuery-like library, such as Zepto