Skip to content

Commit 0e11a08

Browse files
adamdbradleyadamdbradley
committed
refactor(toggle): platform config toggle styles
1 parent 65aa2af commit 0e11a08

5 files changed

Lines changed: 97 additions & 67 deletions

File tree

‎js/angular/directive/toggle.js‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
*/
2525
IonicModule
2626
.directive('ionToggle', [
27-
'$ionicGesture',
2827
'$timeout',
29-
function($ionicGesture, $timeout) {
28+
'$ionicConfig',
29+
function($timeout, $ionicConfig) {
3030

3131
return {
3232
restrict: 'E',
@@ -65,34 +65,32 @@ function($ionicGesture, $timeout) {
6565
element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
6666
}
6767

68-
return function($scope, $element, $attr) {
69-
var el, checkbox, track, handle;
68+
element.addClass('toggle-' + $ionicConfig.form.toggle());
7069

71-
el = $element[0].getElementsByTagName('label')[0];
72-
checkbox = el.children[0];
73-
track = el.children[1];
74-
handle = track.children[0];
70+
return function($scope, $element) {
71+
var el = $element[0].getElementsByTagName('label')[0];
72+
var checkbox = el.children[0];
73+
var track = el.children[1];
74+
var handle = track.children[0];
7575

76-
var ngModelController = jqLite(checkbox).controller('ngModel');
76+
var ngModelController = jqLite(checkbox).controller('ngModel');
7777

78-
$scope.toggle = new ionic.views.Toggle({
79-
el: el,
80-
track: track,
81-
checkbox: checkbox,
82-
handle: handle,
83-
onChange: function() {
84-
if(checkbox.checked) {
85-
ngModelController.$setViewValue(true);
86-
} else {
87-
ngModelController.$setViewValue(false);
88-
}
89-
$scope.$apply();
90-
}
91-
});
78+
$scope.toggle = new ionic.views.Toggle({
79+
el: el,
80+
track: track,
81+
checkbox: checkbox,
82+
handle: handle,
83+
onChange: function() {
84+
if (ngModelController) {
85+
ngModelController.$setViewValue(checkbox.checked);
86+
$scope.$apply();
87+
}
88+
}
89+
});
9290

93-
$scope.$on('$destroy', function() {
94-
$scope.toggle.destroy();
95-
});
91+
$scope.$on('$destroy', function() {
92+
$scope.toggle.destroy();
93+
});
9694
};
9795
}
9896

‎js/angular/service/ionicConfig.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,22 @@
113113
* @returns {boolean}
114114
*/
115115

116+
/**
117+
* @ngdoc method
118+
* @name $ionicConfigProvider#form.checkbox
119+
* @description Checkbox style. Android defaults to `square` and iOS defaults to `circle`.
120+
* @param {string} value
121+
* @returns {string}
122+
*/
123+
124+
/**
125+
* @ngdoc method
126+
* @name $ionicConfigProvider#form.toggle
127+
* @description Toggle item style. Android defaults to `small` and iOS defaults to `large`.
128+
* @param {string} value
129+
* @returns {string}
130+
*/
131+
116132
/**
117133
* @ngdoc method
118134
* @name $ionicConfigProvider#tabs.style
@@ -220,7 +236,8 @@ IonicModule
220236
previousTitleText: PLATFORM
221237
},
222238
form: {
223-
checkbox: PLATFORM
239+
checkbox: PLATFORM,
240+
toggle: PLATFORM
224241
},
225242
scrolling: {
226243
jsScrolling: PLATFORM
@@ -262,7 +279,8 @@ IonicModule
262279
},
263280

264281
form: {
265-
checkbox: 'circle'
282+
checkbox: 'circle',
283+
toggle: 'large'
266284
},
267285

268286
scrolling: {
@@ -309,7 +327,8 @@ IonicModule
309327
},
310328

311329
form: {
312-
checkbox: 'square'
330+
checkbox: 'square',
331+
toggle: 'small'
313332
},
314333

315334
tabs: {

‎scss/_mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@
150150
background-color: $on-bg-color;
151151
}
152152
}
153-
@mixin toggle-android-style($on-bg-color) {
153+
@mixin toggle-small-style($on-bg-color) {
154154
// the track when the toggle is "on"
155155
& input:checked + .track {
156156
background-color: rgba($on-bg-color, .5);

‎scss/_toggle.scss‎

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -56,36 +56,6 @@
5656
}
5757
}
5858

59-
.platform-android .toggle {
60-
&.toggle-light {
61-
@include toggle-android-style($toggle-on-light-bg);
62-
}
63-
&.toggle-stable {
64-
@include toggle-android-style($toggle-on-stable-bg);
65-
}
66-
&.toggle-positive {
67-
@include toggle-android-style($toggle-on-positive-bg);
68-
}
69-
&.toggle-calm {
70-
@include toggle-android-style($toggle-on-calm-bg);
71-
}
72-
&.toggle-assertive {
73-
@include toggle-android-style($toggle-on-assertive-bg);
74-
}
75-
&.toggle-balanced {
76-
@include toggle-android-style($toggle-on-balanced-bg);
77-
}
78-
&.toggle-energized {
79-
@include toggle-android-style($toggle-on-energized-bg);
80-
}
81-
&.toggle-royal {
82-
@include toggle-android-style($toggle-on-royal-bg);
83-
}
84-
&.toggle-dark {
85-
@include toggle-android-style($toggle-on-dark-bg);
86-
}
87-
}
88-
8959
.toggle input {
9060
// hide the actual input checkbox
9161
display: none;
@@ -172,28 +142,57 @@
172142
opacity: .6;
173143
}
174144

175-
.platform-android {
176-
.toggle .track {
145+
.toggle-small {
146+
147+
.track {
177148
border: 0;
178149
width: 34px;
179150
height: 15px;
180151
background: #9e9e9e;
181152
}
182-
.toggle input:checked + .track {
153+
input:checked + .track {
183154
background: rgba(0,150,137,.5);
184155
}
185-
.toggle .handle {
156+
.handle {
186157
top: 2px;
187158
left: 4px;
188159
width: 21px;
189160
height: 21px;
190161
box-shadow: 0 2px 5px rgba(0,0,0,.25);
191162
}
192-
.toggle input:checked + .track .handle {
163+
input:checked + .track .handle {
193164
@include translate3d(16px, 0, 0);
194165
background: rgb(0,150,137);
195166
}
196-
.item-toggle .toggle {
167+
&.item-toggle .toggle {
197168
top: 19px;
198169
}
170+
171+
.toggle-light {
172+
@include toggle-small-style($toggle-on-light-bg);
173+
}
174+
.toggle-stable {
175+
@include toggle-small-style($toggle-on-stable-bg);
176+
}
177+
.toggle-positive {
178+
@include toggle-small-style($toggle-on-positive-bg);
179+
}
180+
.toggle-calm {
181+
@include toggle-small-style($toggle-on-calm-bg);
182+
}
183+
.toggle-assertive {
184+
@include toggle-small-style($toggle-on-assertive-bg);
185+
}
186+
.toggle-balanced {
187+
@include toggle-small-style($toggle-on-balanced-bg);
188+
}
189+
.toggle-energized {
190+
@include toggle-small-style($toggle-on-energized-bg);
191+
}
192+
.toggle-royal {
193+
@include toggle-small-style($toggle-on-royal-bg);
194+
}
195+
.toggle-dark {
196+
@include toggle-small-style($toggle-on-dark-bg);
197+
}
199198
}

‎test/unit/angular/directive/toggle.unit.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ describe('Ionic Toggle', function() {
6666
expect(toggle.val()).toBe(true);
6767
ionic.trigger('click', {target: label});
6868
expect(toggle.val()).toBe(false);
69-
7069
});
7170

7271
it('Should have toggle class', function() {
@@ -80,4 +79,19 @@ describe('Ionic Toggle', function() {
8079
expect(label.hasClass('toggle-dark')).toEqual(true);
8180
});
8281

82+
it('Should add config class', inject(function($ionicConfig){
83+
el = compile('<ion-toggle>')(rootScope);
84+
expect(el.hasClass('toggle-large')).toBe(true);
85+
86+
$ionicConfig.form.toggle('small');
87+
el = compile('<ion-toggle>')(rootScope);
88+
expect(el.hasClass('toggle-small')).toBe(true);
89+
90+
$ionicConfig.form.toggle('whatever');
91+
el = compile('<ion-toggle>')(rootScope);
92+
expect(el.hasClass('toggle-large')).toBe(false);
93+
expect(el.hasClass('toggle-sall')).toBe(false);
94+
expect(el.hasClass('toggle-whatever')).toBe(true);
95+
}));
96+
8397
});

0 commit comments

Comments
 (0)