feat(active): Removing use of :active in favor of .active for more co…

…ntrol of active state

Using the :active pseudo works fine for desktop, but mobile is a
completely different beast, especially with the quirks of each
platform. By intentionally not using any :active selectors and manually
adding/removing a .active class, it gives us a precise control on how
the active state works for ALL platforms. Additionally, this places
less selectors in the css, and reduces the possibility of unnecessary
repaints. Currently this method of using .active instead of :active is
being applied to .button and .item elements.

js/utils/tap.js

@@ -175,6 +175,13 @@
       var tap = isRecentTap(e);
       if(tap) delete tapCoordinates[tap.id];
     }, REMOVE_PREVENT_DELAY);
+
+    setTimeout(function(){
+      for(var hitKey in hitElements) {
+        hitElements[hitKey] && hitElements[hitKey].classList.remove('active');
+        delete hitElements[hitKey];
+      }
+    }, 150);
   }
 
   function stopEvent(e){
@@ -197,13 +204,29 @@
 
   function recordStartCoordinates(e) {
     startCoordinates = getCoordinates(e);
+
+    var x, ele = e.target;
+    for(x=0; x<5; x++) {
+      if(!ele || ele.tagName === 'LABEL') break;
+      if( ele.classList.contains('item') || ele.classList.contains('button') ) {
+        hitElements[hitCounts] = ele;
+        hitCounts = (hitCounts > 24 ? 0 : hitCounts + 1);
+        ionic.requestAnimationFrame(function(){
+          ele.classList.add('active');
+        });
+        break;
+      }
+      ele = ele.parentElement;
+    }
   }
 
   var tapCoordinates = {}; // used to remember coordinates to ignore if they happen again quickly
   var startCoordinates = {}; // used to remember where the coordinates of the start of the tap
   var CLICK_PREVENT_DURATION = 1500; // max milliseconds ghostclicks in the same area should be prevented
   var REMOVE_PREVENT_DELAY = 375; // delay after a touchend/mouseup before removing the ghostclick prevent
   var HIT_RADIUS = 15;
+  var hitElements = {};
+  var hitCounts = 0;
 
   // set global click handler and check if the event should stop or not
   document.addEventListener('click', preventGhostClick, true);

scss/_action-sheet.scss

@@ -69,7 +69,7 @@
     border-width: 1px 0px 0px 0px;
     border-radius: 0;
 
-    &.active, &:active {
+    &.active {
       background-color: transparent;
       color: inherit;
     }

scss/_bar.scss

@@ -173,7 +173,6 @@
       }
     }
 
-    &.back-button:active,
     &.back-button.active {
       opacity: 1;
     }

scss/_button.scss

@@ -164,7 +164,6 @@
   border-color: transparent;
   background: none;
 
-  &.button:active,
   &.button.active {
     border-color: transparent;
     background: none;
@@ -187,7 +186,7 @@
   background: none;
   box-shadow: none;
 
-  &:active, &.active {
+  &.active {
     opacity: 0.3;
   }
 }

scss/_checkbox.scss

@@ -100,8 +100,7 @@
 .item-checkbox {
   padding-left: ($item-padding * 2) + $checkbox-width;
 
-  &.active,
-  &:active {
+  &.active {
     box-shadow: none;
   }
 }

scss/_form.scss

@@ -68,12 +68,6 @@ textarea {
     font-size: 16px;
   }
 
-  &.item.active,
-  .ionic-pseudo &.item:active {
-    border-color: $item-default-border;
-    background-color: transparent;
-  }
-
   .button-bar {
     @include border-radius(0);
     @include flex(1, 0, 220px);

scss/_items.scss

@@ -95,8 +95,7 @@
 }
 
 // Link and Button Active States
-.item.active:not(.item-divider):not(.item-input-inset),
-.item:active:not(.item-divider):not(.item-input-inset),
+.item.active:not(.item-divider):not(.item-input):not(.item-input-inset),
 .item-complex.active .item-content {
   @include item-active-style($item-default-active-bg, $item-default-active-border);
 

scss/_mixins.scss

@@ -12,7 +12,7 @@
     color: $color;
     text-decoration: none;
   }
-  &.active, &:active {
+  &.active {
     background-color: $active-bg-color;
     box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
     border-color: $active-border-color;
@@ -44,7 +44,7 @@
       $text-color: $color;
     }
     color: $text-color;
-    &.active, &:active {
+    &.active {
       background-color: $color;
       color: #fff;
       box-shadow: none;

scss/_tabs.scss

@@ -168,8 +168,7 @@
 /* Navigational tab */
 
 /* Active state for tab */
-.tab-item.active,
-.tab-item:active {
+.tab-item.active {
   opacity: 1;
 
   &.tab-item-light {

scss/_toggle.scss

@@ -104,8 +104,7 @@
 .item-toggle {
   padding-right: ($item-padding * 3) + $toggle-width;
 
-  &.active,
-  &:active {
+  &.active {
     box-shadow: none;
   }
 }