fix(active): Taps/clicks now use .activated instead of .active, closes #913

Both .active and .activated classes exist within the css now. When a
button/link/item is “active”, the .activated class gets added and
removed. This is so Ionic is not removing any user defined .active
classes, but also so users can use Ionic’s active classes (but not have
to worry about them being removed automatically by Ionic). Styled the
same by default, but easily overridden.

Author: adamdbradley

js/utils/activator.js

@@ -4,6 +4,7 @@
   var queueElements = {};   // elements that should get an active state in XX milliseconds
   var activeElements = {};  // elements that are currently active
   var keyId = 0;            // a counter for unique keys for the above ojects
+  var ACTIVATED_CLASS = 'activated';
 
   ionic.activator = {
 
@@ -56,7 +57,7 @@
     // activate all elements in the queue
     for(var key in queueElements) {
       if(queueElements[key]) {
-        queueElements[key].classList.add('active');
+        queueElements[key].classList.add(ACTIVATED_CLASS);
         activeElements[key] = queueElements[key];
       }
     }
@@ -66,7 +67,7 @@
   function deactivateElements() {
     for(var key in activeElements) {
       if(activeElements[key]) {
-        activeElements[key].classList.remove('active');
+        activeElements[key].classList.remove(ACTIVATED_CLASS);
         delete activeElements[key];
       }
     }

scss/_bar.scss

@@ -173,7 +173,8 @@
       }
     }
 
-    &.back-button.active {
+    &.back-button.active,
+    &.back-button.activated {
       opacity: 1;
     }
   }
@@ -193,7 +194,7 @@
   .title + .button:last-child,
   > .button + .button:last-child,
   > .button.pull-right,
-  .buttons.pull-right, 
+  .buttons.pull-right,
   .title + .buttons {
     position: absolute;
     top: 5px;

scss/_button.scss

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

scss/_items.scss

@@ -101,8 +101,10 @@
 }
 
 // Link and Button Active States
-.item.active:not(.item-divider):not(.item-input):not(.item-input-inset),
-.item-complex.active .item-content {
+.item.active,
+.item.activated,
+.item-complex.active .item-content,
+.item-complex.activated .item-content {
   @include item-active-style($item-default-active-bg, $item-default-active-border);
 
   // Different active themes for <a> and <button> items

scss/_mixins.scss

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