feat(active): Removing use of :active in favor of .active for more control 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.

Author: adamdbradley

Diff for: 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);

Diff for: 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;
     }

Diff for: scss/_bar.scss

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

Diff for: 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;
   }
 }

Diff for: scss/_checkbox.scss

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

Diff for: 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);

Diff for: 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);
 

Diff for: 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;

Diff for: 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 {

Diff for: scss/_toggle.scss

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