Preliminary "active" link styling for Zepto

* Unfortunately still a tap delay, as Zepto touch events look for a double-tap (250ms)
* Possible fix: Create custom build of Zepto without touch events, use our own
* Nix unused TransitionEnd callbacks

src/jqtouch-jquery.js

@@ -16,10 +16,10 @@
 
 (function($) {
     var SUPPORT_TOUCH = (!!window.Touch),
-        START_EVENT = SUPPORT_TOUCH? 'touchstart' : 'mousedown',
-        MOVE_EVENT = SUPPORT_TOUCH? 'touchmove' : 'mousemove',
-        END_EVENT = SUPPORT_TOUCH? 'touchend' : 'mouseup',
-        CANCEL_EVENT = SUPPORT_TOUCH? 'touchcancel' : 'mouseout', // mouseout on document
+        START_EVENT = SUPPORT_TOUCH ? 'touchstart' : 'mousedown',
+        MOVE_EVENT = SUPPORT_TOUCH ? 'touchmove' : 'mousemove',
+        END_EVENT = SUPPORT_TOUCH ? 'touchend' : 'mouseup',
+        CANCEL_EVENT = SUPPORT_TOUCH ? 'touchcancel' : 'mouseout', // mouseout on document
         lastTime = 0,
         tapReady = true,
         jQTSettings = {

src/jqtouch.js

@@ -174,7 +174,6 @@
 
                 // Bind internal "cleanup" callback
                 fromPage.bind('webkitAnimationEnd', navigationEndHandler);
-                fromPage.bind('webkitTransitionEnd', navigationEndHandler);
 
                 // Trigger animations
                 scrollTo(0, 0);
@@ -186,13 +185,10 @@
                 navigationEndHandler();
             }
 
-
-
             // Define private navigationEnd callback
             function navigationEndHandler(event) {
                 if ($.support.animationEvents && animation && jQTSettings.useAnimations) {
                     fromPage.unbind('webkitAnimationEnd', navigationEndHandler);
-                    fromPage.unbind('webkitTransitionEnd', navigationEndHandler);
                     fromPage.removeClass('current ' + finalAnimationName + ' out');
                     toPage.removeClass(finalAnimationName + ' in');
                     // scrollTo(0, 0);
@@ -488,10 +484,10 @@
             body = document.body;
 
             style = document.createElement('style');
-            style.textContent = '@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-webkit-transform-3d){#jqtTestFor3dSupport{height:3px}}';
+            style.textContent = '@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-webkit-transform-3d){#jqt-3dtest{height:3px}}';
 
             div = document.createElement('div');
-            div.id = 'jqtTestFor3dSupport';
+            div.id = 'jqt-3dtest';
 
             // Add to the page
             head.appendChild(style);
@@ -508,6 +504,23 @@
             warn('Support for 3d transforms: ' + result);
             return result;
         }
+        function touchStartHandler(e){
+            var $el = $(e.target);
+
+            // Find the nearest tappable ancestor
+            if (!$el.is(touchSelectors.join(', '))) {
+                $el = $(e.target).closest(touchSelectors.join(', '));
+            }
+
+            // Make sure we have a tappable element
+            if ($el.length && $el.attr('href')) {
+                $el.addClass('active');
+            }
+
+            $el.on('touchmove', function(){
+                $el.removeClass('active');
+            });
+        }
         function tapHandler(e){
 
             if (!tapReady) {
@@ -531,7 +544,7 @@
 
             // Init some vars
             var target = $el.attr('target'),
-                hash = $el.attr('hash') || ($el.prop && $el.prop('hash')), // jQuery 1.6+ attr vs. prop
+                hash = $el.attr('hash'),
                 animation = null;
 
             if ($el.isExternalLink()) {
@@ -574,7 +587,6 @@
                     $el.addClass('active');
                     goTo($(hash).data('referrer', $el), animation, $el.hasClass('reverse'));
                     return false;
-
                 } else {
                     // External href
                     $el.addClass('loading active');
@@ -678,6 +690,7 @@
                 .bind('orientationchange', orientationChangeHandler)
                 .bind('submit', submitHandler)
                 .bind('tap', tapHandler)
+                .bind('touchstart', touchStartHandler)
                 .trigger('orientationchange');
 
             // Determine what the "current" (initial) panel should be

themes/css/apple.css

@@ -772,7 +772,7 @@ body {
   background-image: -webkit-linear-gradient(top, #95a5bb, #768ba7 50%, #667e9d 51%, #5c718e);
   background-image: linear-gradient(top, #95a5bb, #768ba7 50%, #667e9d 51%, #5c718e);
 }
-#jqt .button.active, #jqt .button:hover, #jqt .back.active, #jqt .back:hover, #jqt .cancel.active, #jqt .cancel:hover, #jqt .add.active, #jqt .add:hover {
+#jqt .button.active, #jqt .back.active, #jqt .cancel.active, #jqt .add.active {
   border-color: #344050;
   background-image: none;
   background-color: #5c718e;
@@ -817,12 +817,12 @@ body {
   margin-left: -1px;
   background: #344050 none;
 }
-#jqt .back.active:after, #jqt .back:hover:after {
+#jqt .back.active:after {
   background-image: -webkit-gradient(linear, -45deg, -45deg, color-stop(0%, #8698b1), color-stop(50%, #667e9d), color-stop(51%, #5c718e), color-stop(100%, #52657f));
   background-image: -webkit-linear-gradient(-45deg, #8698b1, #667e9d 50%, #5c718e 51%, #52657f);
   background-image: linear-gradient(-45deg, #8698b1, #667e9d 50%, #5c718e 51%, #52657f);
 }
-#jqt .back.active:before, #jqt .back:hover:before {
+#jqt .back.active:before {
   background-color: #344050;
 }
 #jqt .blueButton {
@@ -866,19 +866,20 @@ body {
   padding: 12px 10px 12px 10px;
   margin: -10px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-transform: translateZ(0);
   color: #262626;
   text-shadow: white 0 1px 0;
 }
 #jqt ul li a * {
   pointer-events: none;
 }
-#jqt ul li a.active, #jqt ul li a:hover, #jqt ul li a.button {
+#jqt ul li a.active, #jqt ul li a.button {
   background-image: none;
   background-color: #3366cc;
   color: white;
   text-shadow: #2952a3 0 -1px 0;
 }
-#jqt ul li a.active + small, #jqt ul li a:hover + small, #jqt ul li a.button + small {
+#jqt ul li a.active + small, #jqt ul li a.button + small {
   color: #adc2eb;
   text-shadow: #0a1429 0 -1px 0;
 }