Skip to content

Commit

Permalink
fix(toggle): fix toggle-class attribute
Browse files Browse the repository at this point in the history
Closes #1851
  • Loading branch information
adamdbradley committed Aug 6, 2014
1 parent 93d586d commit 6fbd1a4
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 0 deletions.
25 changes: 25 additions & 0 deletions demos/directive/toggle/simple/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
name: simple
component: ionToggle
---

<ion-header-bar class="bar-positive">
<h1 class="title">
Toggle: Simple Usage
</h1>
</ion-header-bar>
<ion-content ng-controller="MainCtrl" class="padding">
<h4>Your pizza has {{toppings()}}!</h4>
<ion-toggle ng-model="pizza.pepperoni">
Pepperoni?
</ion-toggle>
<ion-toggle ng-model="pizza.sausage" toggle-class="toggle-energized">
Sausage?
</ion-toggle>
<ion-toggle ng-model="pizza.jalapenos" toggle-class="toggle-calm">
Jalapeno?
</ion-toggle>
<ion-toggle ng-model="pizza.anchovies" toggle-class="toggle-royal">
Anchovies?
</ion-toggle>
</ion-content>
30 changes: 30 additions & 0 deletions demos/directive/toggle/simple/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
name: simple
component: ionToggle
---

var app = angular.module('simple', ['ionic']);
app.controller('MainCtrl', function($scope) {
$scope.pizza = {
pepperoni: true,
sausage: false,
anchovies: true,
jalapenos: false
};

$scope.toppings = function() {
var toppings = Object.keys($scope.pizza).filter(function(flavor) {
return $scope.pizza[flavor];
});
if (toppings.length > 1) {
toppings[toppings.length - 1] = 'and ' + toppings[toppings.length - 1];
}
if (toppings.length > 2) {
return toppings.join(', ');
} else if (toppings.length) {
return toppings.join(' ');
} else {
return 'nothing';
}
};
});
16 changes: 16 additions & 0 deletions demos/directive/toggle/simple/test.scenario.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
name: simple
component: ionToggle
---

it('should uncheck 1st and check 2nd checkbox by clicking its label', function(){
var ele = element.all(by.css('label.toggle'));
ele.get(0).click();
ele.get(1).click();
});

it('should check 1st and uncheck 2nd checkbox by clicking its label', function(){
var ele = element.all(by.css('label.toggle'));
ele.get(0).click();
ele.get(1).click();
});
4 changes: 4 additions & 0 deletions js/angular/directive/toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ function($ionicGesture, $timeout) {
}
});

if(attr.toggleClass) {
element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
}

return function($scope, $element, $attr) {
var el, checkbox, track, handle;

Expand Down
11 changes: 11 additions & 0 deletions test/unit/angular/directive/toggle.unit.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,15 @@ describe('Ionic Toggle', function() {

});

it('Should have toggle class', function() {

// Init with not disabled
rootScope.data = { isDisabled: false };
el = compile('<ion-toggle toggle-class="toggle-dark" ng-model="data.name" ng-disabled="data.isDisabled"></ion-toggle>')(rootScope);

// Grab fields
var label = el.find('label');
expect(label.hasClass('toggle-dark')).toEqual(true);
});

});

0 comments on commit 6fbd1a4

Please sign in to comment.