Attempt to fix ghost clicks with CSS after element.

Nixing tapReady, lastAnimationTime, mouseDownHandler, etc. Also lightening jQT toolbar
usteiner9 · Dec 20, 2011 · 7ce366d · 7ce366d
1 parent 93c2a70
commit 7ce366d
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 42 deletions.
diff --git a/src/jqtouch.js b/src/jqtouch.js
@@ -31,11 +31,9 @@
             jQTSettings={},
             $currentPage='',
             orientation='portrait',
-            tapReady=true,
-            lastAnimationTime=0,
             touchSelectors=[],
             publicObj={},
-            tapBuffer=351,
+            tapBuffer=150,
             extensions=jQTouchCore.prototype.extensions,
             animations=[],
             hairExtensions='',
@@ -98,12 +96,6 @@
         // is being used for links, forms, etc.
         function clickHandler(e) {
 
-            if (!tapReady) {
-                warn('ClickHandler handler aborted because tap is not ready (probably still animating).');
-                e.preventDefault();
-                return false;
-            }
-
             // Figure out whether to prevent default
             var $el = $(e.target);
 
@@ -156,7 +148,6 @@
 
             if ($.support.animationEvents && animation && jQTSettings.useAnimations) {
 
-                tapReady = false;
 
                 // Fail over to 2d animation if need be
                 if (!$.support.transform3d && animation.is3d) {
@@ -182,22 +173,32 @@
                 fromPage.addClass(finalAnimationName + ' out');
 
             } else {
-                toPage.addClass('current');
+                toPage.addClass('current in');
                 navigationEndHandler();
             }
 
             // Private navigationEnd callback
             function navigationEndHandler(event) {
+
+                var bufferTime = tapBuffer;
+
                 if ($.support.animationEvents && animation && jQTSettings.useAnimations) {
                     fromPage.unbind('webkitAnimationEnd', navigationEndHandler);
                     fromPage.removeClass('current ' + finalAnimationName + ' out');
-                    toPage.removeClass(finalAnimationName + ' in');
+
+                    toPage.removeClass(finalAnimationName);
                     // scrollTo(0, 0);
                     // toPage.css('top', 0);
                 } else {
                     fromPage.removeClass(finalAnimationName + ' out current');
+                    tapBuffer += 201;
                 }
 
+                // In class is intentionally delayed, as it is our ghost click hack
+                setTimeout(function(){
+                    toPage.removeClass('in');
+                }, tapBuffer);
+
                 // Housekeeping
                 $currentPage = toPage;
                 if (goingBack) {
@@ -207,9 +208,8 @@
                 }
 
                 fromPage.unselect();
-                lastAnimationTime = (new Date()).getTime();
+
                 setHash($currentPage.attr('id'));
-                tapReady = true;
 
                 // Trigger custom events
                 toPage.trigger('pageAnimationEnd', {direction:'in', animation:animation});
@@ -296,8 +296,10 @@
         function hashChangeHandler(e) {
             if (location.hash === history[0].hash) {
                 warn('We are on the right panel');
+                return true;
             } else if (location.hash === '') {
                 goBack();
+                return true;
             } else {
 
                 // TODO: Check for forward here!
@@ -411,15 +413,8 @@
                 return false;
             }
         }
-        function mousedownHandler(e) {
-            var timeDiff = (new Date()).getTime() - lastAnimationTime;
-            if (timeDiff < tapBuffer) {
-                e.preventDefault();
-                return false;
-            }
-        }
-        function orientationChangeHandler() {
 
+        function orientationChangeHandler() {
             $body.css('minHeight', 1000);
             scrollTo(0,0);
             var bodyHeight = window.innerHeight;
@@ -537,6 +532,7 @@
             return result;
         }
         function touchStartHandler(e){
+
             var $el = $(e.target);
 
             // Find the nearest tappable ancestor
@@ -549,17 +545,13 @@
                 $el.addClass('active');
             }
 
+            // Remove our active class if we move
             $el.on($.support.touch ? 'touchmove' : 'mousemove', function(){
                 $el.removeClass('active');
             });
         }
         function tapHandler(e){
 
-            if (!tapReady) {
-                warn('Tap is not ready');
-                return false;
-            }
-
             // Grab the target element
             var $el = $(e.target);
 
@@ -679,7 +671,6 @@
             }
 
             // Create an array of stuff that needs touch event handling
-            // touchSelectors.push('input');
             touchSelectors.push(jQTSettings.touchSelector);
             touchSelectors.push(jQTSettings.backSelector);
             touchSelectors.push(jQTSettings.submitSelector);
@@ -708,13 +699,14 @@
             $(window).bind('hashchange', hashChangeHandler);
             $body
                 .bind('click', clickHandler)
-                .bind('mousedown', mousedownHandler)
                 .bind('orientationchange', orientationChangeHandler)
                 .bind('submit', submitHandler)
                 .bind('tap', tapHandler)
                 .bind( $.support.touch ? 'touchstart' : 'mousedown', touchStartHandler)
                 .trigger('orientationchange');
 
+
+
             // Determine what the "current" (initial) panel should be
 
             if ($('#jqt > .current').length === 0) {

diff --git a/themes/css/apple.css b/themes/css/apple.css
@@ -690,15 +690,25 @@ body {
   z-index: 10;
 }
 /* line 85, ../scss/include/_base.scss */
+#jqt .in:after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+/* line 94, ../scss/include/_base.scss */
 #jqt .out {
   z-index: 0 !important;
 }
-/* line 89, ../scss/include/_base.scss */
+/* line 98, ../scss/include/_base.scss */
 #jqt.supports3d {
   -webkit-perspective: 1000;
   -webkit-transform-style: preserve-3d;
 }
-/* line 93, ../scss/include/_base.scss */
+/* line 102, ../scss/include/_base.scss */
 #jqt.supports3d > * {
   -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);
 }