refactor(toggle): platform config toggle styles

ionic-team · Jan 21, 2015 · 0e11a08 · 0e11a08
1 parent 65aa2af
commit 0e11a08
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 67 deletions.
diff --git a/js/angular/directive/toggle.js b/js/angular/directive/toggle.js
@@ -24,9 +24,9 @@
  */
 IonicModule
 .directive('ionToggle', [
-  '$ionicGesture',
   '$timeout',
-function($ionicGesture, $timeout) {
+  '$ionicConfig',
+function($timeout, $ionicConfig) {
 
   return {
     restrict: 'E',
@@ -65,34 +65,32 @@ function($ionicGesture, $timeout) {
         element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
       }
 
-      return function($scope, $element, $attr) {
-         var el, checkbox, track, handle;
+      element.addClass('toggle-' + $ionicConfig.form.toggle());
 
-         el = $element[0].getElementsByTagName('label')[0];
-         checkbox = el.children[0];
-         track = el.children[1];
-         handle = track.children[0];
+      return function($scope, $element) {
+        var el = $element[0].getElementsByTagName('label')[0];
+        var checkbox = el.children[0];
+        var track = el.children[1];
+        var handle = track.children[0];
 
-         var ngModelController = jqLite(checkbox).controller('ngModel');
+        var ngModelController = jqLite(checkbox).controller('ngModel');
 
-         $scope.toggle = new ionic.views.Toggle({
-           el: el,
-           track: track,
-           checkbox: checkbox,
-           handle: handle,
-           onChange: function() {
-             if(checkbox.checked) {
-               ngModelController.$setViewValue(true);
-             } else {
-               ngModelController.$setViewValue(false);
-             }
-             $scope.$apply();
-           }
-         });
+        $scope.toggle = new ionic.views.Toggle({
+          el: el,
+          track: track,
+          checkbox: checkbox,
+          handle: handle,
+          onChange: function() {
+            if (ngModelController) {
+              ngModelController.$setViewValue(checkbox.checked);
+              $scope.$apply();
+            }
+          }
+        });
 
-         $scope.$on('$destroy', function() {
-           $scope.toggle.destroy();
-         });
+        $scope.$on('$destroy', function() {
+          $scope.toggle.destroy();
+        });
       };
     }
 

diff --git a/js/angular/service/ionicConfig.js b/js/angular/service/ionicConfig.js
@@ -113,6 +113,22 @@
  * @returns {boolean}
  */
 
+/**
+ * @ngdoc method
+ * @name $ionicConfigProvider#form.checkbox
+ * @description Checkbox style. Android defaults to `square` and iOS defaults to `circle`.
+ * @param {string} value
+ * @returns {string}
+ */
+
+/**
+ * @ngdoc method
+ * @name $ionicConfigProvider#form.toggle
+ * @description Toggle item style. Android defaults to `small` and iOS defaults to `large`.
+ * @param {string} value
+ * @returns {string}
+ */
+
 /**
  * @ngdoc method
  * @name $ionicConfigProvider#tabs.style
@@ -220,7 +236,8 @@ IonicModule
       previousTitleText: PLATFORM
     },
     form: {
-      checkbox: PLATFORM
+      checkbox: PLATFORM,
+      toggle: PLATFORM
     },
     scrolling: {
       jsScrolling: PLATFORM
@@ -262,7 +279,8 @@ IonicModule
     },
 
     form: {
-      checkbox: 'circle'
+      checkbox: 'circle',
+      toggle: 'large'
     },
 
     scrolling: {
@@ -309,7 +327,8 @@ IonicModule
     },
 
     form: {
-      checkbox: 'square'
+      checkbox: 'square',
+      toggle: 'small'
     },
 
     tabs: {

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -150,7 +150,7 @@
     background-color: $on-bg-color;
   }
 }
-@mixin toggle-android-style($on-bg-color) {
+@mixin toggle-small-style($on-bg-color) {
   // the track when the toggle is "on"
   & input:checked + .track {
     background-color: rgba($on-bg-color, .5);

diff --git a/scss/_toggle.scss b/scss/_toggle.scss
@@ -56,36 +56,6 @@
   }
 }
 
-.platform-android .toggle {
-  &.toggle-light  {
-    @include toggle-android-style($toggle-on-light-bg);
-  }
-  &.toggle-stable  {
-    @include toggle-android-style($toggle-on-stable-bg);
-  }
-  &.toggle-positive  {
-    @include toggle-android-style($toggle-on-positive-bg);
-  }
-  &.toggle-calm  {
-    @include toggle-android-style($toggle-on-calm-bg);
-  }
-  &.toggle-assertive  {
-    @include toggle-android-style($toggle-on-assertive-bg);
-  }
-  &.toggle-balanced  {
-    @include toggle-android-style($toggle-on-balanced-bg);
-  }
-  &.toggle-energized  {
-    @include toggle-android-style($toggle-on-energized-bg);
-  }
-  &.toggle-royal  {
-    @include toggle-android-style($toggle-on-royal-bg);
-  }
-  &.toggle-dark  {
-    @include toggle-android-style($toggle-on-dark-bg);
-  }
-}
-
 .toggle input {
   // hide the actual input checkbox
   display: none;
@@ -172,28 +142,57 @@
   opacity: .6;
 }
 
-.platform-android {
-  .toggle .track {
+.toggle-small {
+
+  .track {
     border: 0;
     width: 34px;
     height: 15px;
     background: #9e9e9e;
   }
-  .toggle input:checked + .track {
+  input:checked + .track {
     background: rgba(0,150,137,.5);
   }
-  .toggle .handle {
+  .handle {
     top: 2px;
     left: 4px;
     width: 21px;
     height: 21px;
     box-shadow: 0 2px 5px rgba(0,0,0,.25);
   }
-  .toggle input:checked + .track .handle {
+  input:checked + .track .handle {
     @include translate3d(16px, 0, 0);
     background: rgb(0,150,137);
   }
-  .item-toggle .toggle {
+  &.item-toggle .toggle {
     top: 19px;
   }
+
+  .toggle-light  {
+    @include toggle-small-style($toggle-on-light-bg);
+  }
+  .toggle-stable  {
+    @include toggle-small-style($toggle-on-stable-bg);
+  }
+  .toggle-positive  {
+    @include toggle-small-style($toggle-on-positive-bg);
+  }
+  .toggle-calm  {
+    @include toggle-small-style($toggle-on-calm-bg);
+  }
+  .toggle-assertive  {
+    @include toggle-small-style($toggle-on-assertive-bg);
+  }
+  .toggle-balanced  {
+    @include toggle-small-style($toggle-on-balanced-bg);
+  }
+  .toggle-energized  {
+    @include toggle-small-style($toggle-on-energized-bg);
+  }
+  .toggle-royal  {
+    @include toggle-small-style($toggle-on-royal-bg);
+  }
+  .toggle-dark  {
+    @include toggle-small-style($toggle-on-dark-bg);
+  }
 }
diff --git a/test/unit/angular/directive/toggle.unit.js b/test/unit/angular/directive/toggle.unit.js
@@ -66,7 +66,6 @@ describe('Ionic Toggle', function() {
     expect(toggle.val()).toBe(true);
     ionic.trigger('click', {target: label});
     expect(toggle.val()).toBe(false);
-
   });
 
   it('Should have toggle class', function() {
@@ -80,4 +79,19 @@ describe('Ionic Toggle', function() {
     expect(label.hasClass('toggle-dark')).toEqual(true);
   });
 
+  it('Should add config class', inject(function($ionicConfig){
+    el = compile('<ion-toggle>')(rootScope);
+    expect(el.hasClass('toggle-large')).toBe(true);
+
+    $ionicConfig.form.toggle('small');
+    el = compile('<ion-toggle>')(rootScope);
+    expect(el.hasClass('toggle-small')).toBe(true);
+
+    $ionicConfig.form.toggle('whatever');
+    el = compile('<ion-toggle>')(rootScope);
+    expect(el.hasClass('toggle-large')).toBe(false);
+    expect(el.hasClass('toggle-sall')).toBe(false);
+    expect(el.hasClass('toggle-whatever')).toBe(true);
+  }));
+
 });