From 870dcd6f992f62c1a34258039d2a427490aa1b6d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 27 Mar 2014 21:26:58 -0500
Subject: [PATCH] fix(active): Taps/clicks now use .activated instead of
 .active, closes #913
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 js/utils/activator.js | 5 +++--
 scss/_bar.scss        | 5 +++--
 scss/_button.scss     | 6 ++++--
 scss/_items.scss      | 6 ++++--
 scss/_mixins.scss     | 6 ++++--
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/js/utils/activator.js b/js/utils/activator.js
index ce2ba9e4e46..4564e91da66 100644
--- a/js/utils/activator.js
+++ b/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];
       }
     }
diff --git a/scss/_bar.scss b/scss/_bar.scss
index 0166de36b22..fcebd4320de 100644
--- a/scss/_bar.scss
+++ b/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;
diff --git a/scss/_button.scss b/scss/_button.scss
index 7c09cfe331f..32a668db9f4 100644
--- a/scss/_button.scss
+++ b/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;
   }
 }
diff --git a/scss/_items.scss b/scss/_items.scss
index 2e025771638..fa228b5fe58 100644
--- a/scss/_items.scss
+++ b/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
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index b4e3a64eb7a..3c78303ccd6 100644
--- a/scss/_mixins.scss
+++ b/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;