diff --git a/js/angular/directive/toggle.js b/js/angular/directive/toggle.js index 234e16a890..2757cc8d29 100644 --- 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 index 7dfbf8fb9e..3ff4fb566b 100644 --- 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 index b5dd5fc241..46b3ecceed 100644 --- 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 index d84571a533..907cab4519 100644 --- 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 index 7fb1a37ffe..44f2552739 100644 --- 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('')(rootScope); + expect(el.hasClass('toggle-large')).toBe(true); + + $ionicConfig.form.toggle('small'); + el = compile('')(rootScope); + expect(el.hasClass('toggle-small')).toBe(true); + + $ionicConfig.form.toggle('whatever'); + el = compile('')(rootScope); + expect(el.hasClass('toggle-large')).toBe(false); + expect(el.hasClass('toggle-sall')).toBe(false); + expect(el.hasClass('toggle-whatever')).toBe(true); + })); + });