feat(bsSwitch): enable indeterminate state for switch

Fixes #76
frapontillo · Jun 13, 2015 · 3efa68c · 3efa68c
1 parent d1227da
commit 3efa68c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
diff --git a/example/index.html b/example/index.html
@@ -25,7 +25,7 @@
 
 <form name="form" class="container" ng-controller="MainCtrl">
 
-  <input
+  <!--<input
     bs-switch
     ng-model="isSelected"
     type="radio"
@@ -68,12 +68,36 @@
     ng-value="'dos'"
     ng-true-value="'yep'"
     ng-false-value="'nope'"
-    switch-inverse="{{ !inverse }}">
+    switch-inverse="{{ !inverse }}">-->
 
   {{ isSelected }}
 
+  <br>
+
+  <input
+    bs-switch
+    ng-model="isSelected"
+    type="checkbox"
+    switch-active="{{ isActive }}"
+    switch-on-text="{{ onText }}"
+    switch-off-text="{{ offText }}"
+    switch-on-color="{{ onColor }}"
+    switch-off-color="{{ offColor }}"
+    switch-animate="{{ animate }}"
+    switch-size="{{ size }}"
+    switch-label="{{ label }}"
+    switch-icon="{{ icon }}"
+    switch-radio-off="{{ radioOff }}"
+    switch-label-width="{{ labelWidth }}"
+    switch-handle-width="{{ handleWidth }}"
+    switch-wrapper="{{ wrapper }}"
+    ng-true-value="'yep'"
+    ng-false-value="'nope'"
+    switch-inverse="{{ !inverse }}">
+
   <input type="button" value="toggle value" ng-click="toggle()">
   <input type="button" value="toggle value / activation" ng-click="toggle(); toggleActivation();">
+  <input type="button" value="set undefined value" ng-click="setUndefined()">
 </form>
 </div>
 

diff --git a/example/scripts/controllers/main.js b/example/scripts/controllers/main.js
@@ -21,6 +21,10 @@ angular.module('bsSwitchApp')
       $scope.isSelected = $scope.isSelected === 'yep' ? 'nope' : 'yep';
     };
 
+    $scope.setUndefined = function() {
+      $scope.isSelected = undefined;
+    };
+
     $scope.toggleActivation = function() {
       $scope.isActive = !$scope.isActive;
     }

diff --git a/src/directives/bsSwitch.js b/src/directives/bsSwitch.js
@@ -165,6 +165,8 @@ angular.module('frapontillo.bootstrap-switch')
             initMaybe();
             if (newValue !== undefined) {
               element.bootstrapSwitch('state', newValue === getTrueValue(), false);
+            } else {
+              element.bootstrapSwitch('toggleIndeterminate', true, false);
             }
           }, true);
 

diff --git a/test/spec/directives/bsSwitchSpec.js b/test/spec/directives/bsSwitchSpec.js
@@ -95,6 +95,7 @@ describe('Directive: bsSwitch', function () {
     SWITCH_WRAPPER_CLASS: 'bootstrap-switch-wrapper',
     SWITCH_CONTAINER_CLASS: 'bootstrap-switch-container',
     SWITCH_INVERSE_CLASS: 'bootstrap-switch-inverse',
+    SWITCH_INDETERMINATE_CLASS: 'bootstrap-switch-indeterminate',
     SWITCH_ON_CLASS: 'bootstrap-switch-on',
     SWITCH_OFF_CLASS: 'bootstrap-switch-off',
     SWITCH_DISABLED_CLASS: 'bootstrap-switch-disabled',
@@ -288,6 +289,22 @@ describe('Directive: bsSwitch', function () {
   it('should move the switch when the model changes', inject(makeTestChangeModel()));
   it('should move the switch when the model changes (input)', inject(makeTestChangeModel(true)));
 
+  // Test the undefined model (the on/off class is untouched when the indeterminate class is added)
+  function makeTestIndeterminateModel(input) {
+    return function () {
+      var element = compileDirective(undefined, input);
+      expect(element.hasClass(CONST.SWITCH_OFF_CLASS)).toBeFalsy();
+      expect(element.hasClass(CONST.SWITCH_ON_CLASS)).toBeTruthy();
+      scope.model = undefined;
+      scope.$apply();
+      expect(element.hasClass(CONST.SWITCH_INDETERMINATE_CLASS)).toBeTruthy();
+      expect(element.hasClass(CONST.SWITCH_OFF_CLASS)).toBeFalsy();
+      expect(element.hasClass(CONST.SWITCH_ON_CLASS)).toBeTruthy();
+    };
+  }
+  it('should set the indeterminate state when the model is undefined', inject(makeTestIndeterminateModel()));
+  it('should set the indeterminate state when the model is undefined (input)', inject(makeTestIndeterminateModel(true)));
+
   // Test the view change
   function makeTestChangeView(input) {
     return function () {