fix(activator): properly activate elements nested inside an item.

Addresses #1373.

Before: if an `<a>`, `ng-click`, or `<button>` inside of a .item,
was clicked, the activator would walk up .item and activate it.

Now:  If an `<a>`, `ng-click`, or `<button>` inside of a
.item is clicked, the activator will activate that element.

Additionally, CSS was added so `a.item-content.activated` would look
activated.

Author: ajoslin

js/utils/activator.js

@@ -26,6 +26,7 @@
           }
           if( ele.tagName == 'A' || ele.tagName == 'BUTTON' || ele.hasAttribute('ng-click') ) {
             eleToActivate = ele;
+            break;
           }
           if( ele.classList.contains('button') ) {
             eleToActivate = ele;

scss/_items.scss

@@ -104,7 +104,9 @@
 .item.active,
 .item.activated,
 .item-complex.active .item-content,
-.item-complex.activated .item-content {
+.item-complex.activated .item-content,
+.item .item-content.active,
+.item .item-content.activated {
   @include item-active-style($item-default-active-bg, $item-default-active-border);
 
   // Different active themes for <a> and <button> items

test/html/list.html

@@ -49,6 +49,14 @@ <h1 class="title">Ionic Delete/Option Buttons</h1>
   		<div class="item item-divider">
   		Type 1
   		</div>
+      <ion-item href="#">
+        <button class="button button-energized">
+          Hello
+        </button>
+      </ion-item>
+      <ion-item href="hello">
+        Woah!
+      </ion-item>
         <ion-item ng-repeat="item in items"
                   ng-click="alert(item.id)"
                   class="item item-avatar-left item-icon-right"

test/unit/utils/activator.unit.js

@@ -44,7 +44,7 @@ describe('Ionic Element Activator', function() {
     expect(e.target.classList.contains('activated')).toEqual(false);
   });
 
-  it('Should activate .item with a child "a"', function() {
+  it('Should activate "a" in a .item', function() {
     var itemEle = document.createElement('div');
     itemEle.className = 'item';
 
@@ -54,11 +54,11 @@ describe('Ionic Element Activator', function() {
     var e = { target: aEle };
 
     ionic.activator.start(e);
-    expect(itemEle.classList.contains('activated')).toEqual(true);
-    expect(aEle.classList.contains('activated')).toEqual(false);
+    expect(itemEle.classList.contains('activated')).toEqual(false);
+    expect(aEle.classList.contains('activated')).toEqual(true);
   });
 
-  it('Should activate .item with a child "div.item-content a"', function() {
+  it('Should activate "div.item-content a" child of .item', function() {
     var itemEle = document.createElement('div');
     itemEle.className = 'item';
 
@@ -72,12 +72,12 @@ describe('Ionic Element Activator', function() {
     var e = { target: aEle };
 
     ionic.activator.start(e);
-    expect(itemEle.classList.contains('activated')).toEqual(true);
+    expect(itemEle.classList.contains('activated')).toEqual(false);
     expect(itemContentEle.classList.contains('activated')).toEqual(false);
-    expect(aEle.classList.contains('activated')).toEqual(false);
+    expect(aEle.classList.contains('activated')).toEqual(true);
   });
 
-  it('Should activate .item with a child "div.item-content div[ng-click]"', function() {
+  it('Should activate child "div.item-content div[ng-click]" of a .item', function() {
     var itemEle = document.createElement('div');
     itemEle.className = 'item';
 
@@ -92,9 +92,9 @@ describe('Ionic Element Activator', function() {
     var e = { target: divEle };
 
     ionic.activator.start(e);
-    expect(itemEle.classList.contains('activated')).toEqual(true);
+    expect(itemEle.classList.contains('activated')).toEqual(false);
     expect(itemContentEle.classList.contains('activated')).toEqual(false);
-    expect(divEle.classList.contains('activated')).toEqual(false);
+    expect(divEle.classList.contains('activated')).toEqual(true);
   });
 
 });