From 6fbd1a43067fbaf9a2d9c2f4098220e6dd1d7605 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 6 Aug 2014 08:40:56 -0500
Subject: [PATCH] fix(toggle): fix toggle-class attribute

Closes #1851
---
 demos/directive/toggle/simple/index.html      | 25 ++++++++++++++++
 demos/directive/toggle/simple/index.js        | 30 +++++++++++++++++++
 .../directive/toggle/simple/test.scenario.js  | 16 ++++++++++
 js/angular/directive/toggle.js                |  4 +++
 test/unit/angular/directive/toggle.unit.js    | 11 +++++++
 5 files changed, 86 insertions(+)
 create mode 100644 demos/directive/toggle/simple/index.html
 create mode 100644 demos/directive/toggle/simple/index.js
 create mode 100644 demos/directive/toggle/simple/test.scenario.js

diff --git a/demos/directive/toggle/simple/index.html b/demos/directive/toggle/simple/index.html
new file mode 100644
index 00000000000..0a4fbc9a2fc
--- /dev/null
+++ b/demos/directive/toggle/simple/index.html
@@ -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>
diff --git a/demos/directive/toggle/simple/index.js b/demos/directive/toggle/simple/index.js
new file mode 100644
index 00000000000..7fd0375a6b9
--- /dev/null
+++ b/demos/directive/toggle/simple/index.js
@@ -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';
+    }
+  };
+});
diff --git a/demos/directive/toggle/simple/test.scenario.js b/demos/directive/toggle/simple/test.scenario.js
new file mode 100644
index 00000000000..67a59730f98
--- /dev/null
+++ b/demos/directive/toggle/simple/test.scenario.js
@@ -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();
+});
diff --git a/js/angular/directive/toggle.js b/js/angular/directive/toggle.js
index df94342d042..234e16a890e 100644
--- a/js/angular/directive/toggle.js
+++ b/js/angular/directive/toggle.js
@@ -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;
 
diff --git a/test/unit/angular/directive/toggle.unit.js b/test/unit/angular/directive/toggle.unit.js
index 906b5cfa8be..7fb1a37ffe0 100644
--- a/test/unit/angular/directive/toggle.unit.js
+++ b/test/unit/angular/directive/toggle.unit.js
@@ -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);
+  });
+
 });