javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Andrew Joslin
2014-05-13 07:27:54 -06:00
parent 569d7165aa
commit 3c15b118ca
4 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
js/utils/activator.js
View File

@@ -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;

4
scss/_items.scss
View File

@@ -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

8
test/html/list.html
View File

@@ -49,6 +49,14 @@
<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"

18
test/unit/utils/activator.unit.js
View File

@@ -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);
});
});