From e538fa77c995bd73cc6673ab4706bd6362db585f Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 15:52:47 -0600 Subject: [PATCH 01/12] Draggable slider working --- js/ext/angular/src/directive/ionicToggle.js | 48 +++++++----- .../test/directive/ionicToggle.unit.js | 13 +++- js/ext/angular/test/toggle.html | 5 +- js/views/toggleView.js | 78 ++++++++++++++++--- test/unit/views/toggleView.unit.js | 30 +++++++ 5 files changed, 141 insertions(+), 33 deletions(-) create mode 100644 test/unit/views/toggleView.unit.js diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js index 6c217027dad..ca410e4c141 100644 --- a/js/ext/angular/src/directive/ionicToggle.js +++ b/js/ext/angular/src/directive/ionicToggle.js @@ -5,7 +5,7 @@ angular.module('ionic.ui.toggle', []) // The Toggle directive is a toggle switch that can be tapped to change // its value -.directive('ionToggle', function() { +.directive('ionToggle', ['$ionicGesture', '$timeout', function($ionicGesture, $timeout) { return { restrict: 'E', @@ -36,30 +36,38 @@ angular.module('ionic.ui.toggle', []) if(attr.ngTrueValue) input.attr('ng-true-value', attr.ngTrueValue); if(attr.ngFalseValue) input.attr('ng-false-value', attr.ngFalseValue); - // return function link($scope, $element, $attr, ngModel) { - // var el, checkbox, track, handle; + return function($scope, $element, $attr) { + var el, checkbox, track, handle; - // el = $element[0].getElementsByTagName('label')[0]; - // checkbox = el.children[0]; - // track = el.children[1]; - // handle = track.children[0]; + el = $element[0].getElementsByTagName('label')[0]; + checkbox = el.children[0]; + track = el.children[1]; + handle = track.children[0]; + + var ngModelController = angular.element(checkbox).controller('ngModel'); - // $scope.toggle = new ionic.views.Toggle({ - // el: el, - // track: track, - // checkbox: checkbox, - // handle: handle - // }); + $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(); + } + }); - // ionic.on('drag', function(e) { - // console.log('drag'); - // $scope.toggle.drag(e); - // }, handle); - - // } + $scope.$on('$destroy', function() { + $scope.toggle.destroy(); + }); + }; } }; -}); +}]); })(window.ionic); diff --git a/js/ext/angular/test/directive/ionicToggle.unit.js b/js/ext/angular/test/directive/ionicToggle.unit.js index e36e1e330d3..6657571bbde 100644 --- a/js/ext/angular/test/directive/ionicToggle.unit.js +++ b/js/ext/angular/test/directive/ionicToggle.unit.js @@ -1,7 +1,7 @@ describe('Ionic Toggle', function() { var el, rootScope, compile; - beforeEach(module('ionic.ui.toggle')); + beforeEach(module('ionic')); beforeEach(inject(function($compile, $rootScope) { compile = $compile; @@ -9,14 +9,21 @@ describe('Ionic Toggle', function() { el = $compile('')($rootScope); })); - /* - it('Should load', function() { + iit('Should load', function() { var toggleView = el.isolateScope().toggle; expect(toggleView).not.toEqual(null); expect(toggleView.checkbox).not.toEqual(null); expect(toggleView.handle).not.toEqual(null); }); + iit('Should destroy', function() { + var toggleView = el.isolateScope().toggle; + spyOn(toggleView, 'destroy'); + el.isolateScope().$destroy(); + expect(toggleView.destroy).toHaveBeenCalled(); + }); + + /* it('Should toggle', function() { var toggle = el.isolateScope().toggle; expect(toggle.val()).toBe(false); diff --git a/js/ext/angular/test/toggle.html b/js/ext/angular/test/toggle.html index 058808adf02..d17479c96c6 100644 --- a/js/ext/angular/test/toggle.html +++ b/js/ext/angular/test/toggle.html @@ -18,6 +18,7 @@

Toggle

myModel ({{!!myModel}}) + Cats or dogs? ({{catModel}}) Disable myModel ({{!!isDisabled}})
@@ -25,7 +26,9 @@

Toggle

diff --git a/js/views/toggleView.js b/js/views/toggleView.js index cb238959116..224632f8f1a 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -3,11 +3,41 @@ ionic.views.Toggle = ionic.views.View.inherit({ initialize: function(opts) { + var self = this; + this.el = opts.el; this.checkbox = opts.checkbox; this.track = opts.track; this.handle = opts.handle; this.openPercent = -1; + this.onChange = opts.onChange || function() {}; + + this.triggerThreshold = opts.triggerThreshold || 10; + + this.dragStartHandler = function(e) { + self.dragStart(e); + }; + this.dragHandler = function(e) { + self.drag(e); + }; + this.holdHandler = function(e) { + self.hold(e); + }; + this.releaseHandler = function(e) { + self.release(e); + }; + + this.dragStartGesture = ionic.onGesture('dragstart', this.dragStartHandler, this.el); + this.dragGesture = ionic.onGesture('drag', this.dragHandler, this.el); + this.dragHoldGesture = ionic.onGesture('hold', this.holdHandler, this.el); + this.dragReleaseGesture = ionic.onGesture('release', this.releaseHandler, this.el); + }, + + destroy: function() { + ionic.offGesture(this.dragStartGesture, 'dragstart', this.dragStartGesture); + ionic.offGesture(this.dragGesture, 'drag', this.dragGesture); + ionic.offGesture(this.dragHoldGesture, 'hold', this.holdHandler); + ionic.offGesture(this.dragReleaseGesture, 'release', this.releaseHandler); }, tap: function(e) { @@ -16,19 +46,52 @@ } }, + dragStart: function(e) { + this._dragInfo = { + width: this.el.offsetWidth, + left: this.el.offsetLeft, + right: this.el.offsetLeft + this.el.offsetWidth, + triggerX: this.el.offsetWidth / 2, + initialState: this.checkbox.checked + } + + // Trigger hold styles + this.hold(e); + }, + drag: function(e) { + if(!this._dragInfo) { return; } + var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2); var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2); + var dx = e.gesture.deltaX; - if(e.pageX >= slidePageRight - 4) { - this.val(true); - } else if(e.pageX <= slidePageLeft) { - this.val(false); + var px = e.gesture.touches[0].pageX - this._dragInfo.left; + var mx = this._dragInfo.width - this.triggerThreshold; + + // The initial state was on, so "tend towards" on + if(this._dragInfo.initialState) { + if(px < this.triggerThreshold) { + this.setOpenPercent(0); + } else if(px > this._dragInfo.triggerX) { + this.setOpenPercent(100); + } } else { - this.setOpenPercent( Math.round( (1 - ((slidePageRight - e.pageX) / (slidePageRight - slidePageLeft) )) * 100) ); + // The initial state was off, so "tend towards" off + if(px < this._dragInfo.triggerX) { + this.setOpenPercent(0); + } else if(px > mx) { + this.setOpenPercent(100); + } } }, + hold: function(e) { + }, + release: function(e) { + }, + + setOpenPercent: function(openPercent) { // only make a change if the new open percent has changed if(this.openPercent < 0 || (openPercent < (this.openPercent - 3) || openPercent > (this.openPercent + 3) ) ) { @@ -46,10 +109,6 @@ } }, - release: function(e) { - this.val( this.openPercent >= 50 ); - }, - val: function(value) { if(value === true || value === false) { if(this.handle.style[ionic.CSS.TRANSFORM] !== "") { @@ -57,6 +116,7 @@ } this.checkbox.checked = value; this.openPercent = (value ? 100 : 0); + this.onChange && this.onChange(); } return this.checkbox.checked; } diff --git a/test/unit/views/toggleView.unit.js b/test/unit/views/toggleView.unit.js new file mode 100644 index 00000000000..65893086e03 --- /dev/null +++ b/test/unit/views/toggleView.unit.js @@ -0,0 +1,30 @@ +describe('Toggle view', function() { + var element, toggle; + + beforeEach(function() { + element = $('
' + + '
Cats
' + + '' + + '
'); + + el = element[0].getElementsByTagName('label')[0]; + checkbox = el.children[0]; + track = el.children[1]; + handle = track.children[0]; + toggle = new ionic.views.Toggle({ + el: el, + checkbox: checkbox, + track: track, + handle: handle + }); + }); + + it('Should init', function() { + expect(toggle.el).not.toBe(undefined); + }); +}); From 618bbcb08458b98c0c0e9c5324688cda2524d03a Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 15:55:36 -0600 Subject: [PATCH 02/12] Removed iit on unit test --- js/ext/angular/test/directive/ionicToggle.unit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/ext/angular/test/directive/ionicToggle.unit.js b/js/ext/angular/test/directive/ionicToggle.unit.js index 6657571bbde..6bee5e5342b 100644 --- a/js/ext/angular/test/directive/ionicToggle.unit.js +++ b/js/ext/angular/test/directive/ionicToggle.unit.js @@ -9,14 +9,14 @@ describe('Ionic Toggle', function() { el = $compile('')($rootScope); })); - iit('Should load', function() { + it('Should load', function() { var toggleView = el.isolateScope().toggle; expect(toggleView).not.toEqual(null); expect(toggleView.checkbox).not.toEqual(null); expect(toggleView.handle).not.toEqual(null); }); - iit('Should destroy', function() { + it('Should destroy', function() { var toggleView = el.isolateScope().toggle; spyOn(toggleView, 'destroy'); el.isolateScope().$destroy(); From 9f15b9810fcd72cf03f8b5064c7e14b550bdddce Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 15:56:18 -0600 Subject: [PATCH 03/12] Fixed linter issues --- js/views/toggleView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/views/toggleView.js b/js/views/toggleView.js index 224632f8f1a..38d298d16d3 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -53,7 +53,7 @@ right: this.el.offsetLeft + this.el.offsetWidth, triggerX: this.el.offsetWidth / 2, initialState: this.checkbox.checked - } + }; // Trigger hold styles this.hold(e); From 1974bb534229e7ecc5a702795b89f4a88ac1a4c7 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 16:00:08 -0600 Subject: [PATCH 04/12] Prevent parent scrolling --- js/views/toggleView.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/views/toggleView.js b/js/views/toggleView.js index 38d298d16d3..7893e61ad90 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -55,6 +55,9 @@ initialState: this.checkbox.checked }; + // Stop any parent dragging + e.gesture.srcEvent.preventDefault(); + // Trigger hold styles this.hold(e); }, @@ -62,6 +65,9 @@ drag: function(e) { if(!this._dragInfo) { return; } + // Stop any parent dragging + e.gesture.srcEvent.preventDefault(); + var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2); var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2); var dx = e.gesture.deltaX; From c53cd7f9d8de146a9b915f3cdde39e814babea4d Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 16:07:08 -0600 Subject: [PATCH 05/12] Added slight darkening during drag --- js/views/toggleView.js | 2 ++ scss/_toggle.scss | 6 ++++++ scss/_variables.scss | 2 ++ 3 files changed, 10 insertions(+) diff --git a/js/views/toggleView.js b/js/views/toggleView.js index 7893e61ad90..f68b2f0b69d 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -93,8 +93,10 @@ }, hold: function(e) { + this.el.classList.add('dragging'); }, release: function(e) { + this.el.classList.remove('dragging'); }, diff --git a/scss/_toggle.scss b/scss/_toggle.scss index 6076f39de95..db6e7c4dd87 100644 --- a/scss/_toggle.scss +++ b/scss/_toggle.scss @@ -8,6 +8,12 @@ .toggle { position: relative; display: inline-block; + + &.dragging { + .handle { + background-color: $toggle-handle-dragging-bg-color !important; + } + } } /* hide the actual input checkbox */ diff --git a/scss/_variables.scss b/scss/_variables.scss index fa1ffbfd07f..6f97b75053c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -419,6 +419,7 @@ $toggle-border-radius: 20px !default; $toggle-handle-width: $toggle-height - ($toggle-border-width * 2) !default; $toggle-handle-height: $toggle-handle-width !default; $toggle-handle-radius: 50% !default; +$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default; $toggle-off-bg-color: #E5E5E5 !default; $toggle-off-border-color: #E5E5E5 !default; @@ -426,6 +427,7 @@ $toggle-off-border-color: #E5E5E5 !default; $toggle-on-bg-color: #4A87EE !default; $toggle-on-border-color: $toggle-on-bg-color !default; + $toggle-handle-off-bg-color: $light !default; $toggle-handle-on-bg-color: $toggle-handle-off-bg-color !default; From 2db2729af960a29ca6128baa2dc87231f51cd67b Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 18:59:52 -0600 Subject: [PATCH 06/12] Decreased animation speed --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 6f97b75053c..b2724771946 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -431,7 +431,7 @@ $toggle-on-border-color: $toggle-on-bg-color !default; $toggle-handle-off-bg-color: $light !default; $toggle-handle-on-bg-color: $toggle-handle-off-bg-color !default; -$toggle-transition-duration: .1s !default; +$toggle-transition-duration: .2s !default; // Checkbox From a8af0958f3a15c6ab2d74ad4fab8b1a50abe0c5e Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 19:06:14 -0600 Subject: [PATCH 07/12] Expanded clickable area for toggle --- scss/_toggle.scss | 6 ++++-- scss/_variables.scss | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/scss/_toggle.scss b/scss/_toggle.scss index db6e7c4dd87..7f8753ec3e8 100644 --- a/scss/_toggle.scss +++ b/scss/_toggle.scss @@ -8,6 +8,8 @@ .toggle { position: relative; display: inline-block; + margin: -$toggle-hit-area-expansion; + padding: $toggle-hit-area-expansion; &.dragging { .handle { @@ -43,8 +45,8 @@ .toggle .handle { @include transition($toggle-transition-duration ease-in-out); position: absolute; - top: $toggle-border-width; - left: $toggle-border-width; + top: $toggle-border-width + $toggle-hit-area-expansion; + left: $toggle-border-width + $toggle-hit-area-expansion; display: block; width: $toggle-handle-width; height: $toggle-handle-height; diff --git a/scss/_variables.scss b/scss/_variables.scss index b2724771946..13eba0e8c14 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -433,6 +433,8 @@ $toggle-handle-on-bg-color: $toggle-handle-off-bg-color !default; $toggle-transition-duration: .2s !default; +$toggle-hit-area-expansion: 5px; + // Checkbox // ------------------------------- From 00dbb3e2da9a9e088b12386ba1429f9f72cc5b65 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 1 Mar 2014 19:09:27 -0600 Subject: [PATCH 08/12] Added requestAnimationFrame --- js/views/toggleView.js | 45 ++++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/js/views/toggleView.js b/js/views/toggleView.js index f68b2f0b69d..b1b74ac6a96 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -63,33 +63,36 @@ }, drag: function(e) { + var self = this; if(!this._dragInfo) { return; } - // Stop any parent dragging - e.gesture.srcEvent.preventDefault(); + ionic.requestAnimationFrame(function(amount) { + // Stop any parent dragging + e.gesture.srcEvent.preventDefault(); - var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2); - var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2); - var dx = e.gesture.deltaX; + var slidePageLeft = self.track.offsetLeft + (self.handle.offsetWidth / 2); + var slidePageRight = self.track.offsetLeft + self.track.offsetWidth - (self.handle.offsetWidth / 2); + var dx = e.gesture.deltaX; - var px = e.gesture.touches[0].pageX - this._dragInfo.left; - var mx = this._dragInfo.width - this.triggerThreshold; + var px = e.gesture.touches[0].pageX - self._dragInfo.left; + var mx = self._dragInfo.width - self.triggerThreshold; - // The initial state was on, so "tend towards" on - if(this._dragInfo.initialState) { - if(px < this.triggerThreshold) { - this.setOpenPercent(0); - } else if(px > this._dragInfo.triggerX) { - this.setOpenPercent(100); - } - } else { - // The initial state was off, so "tend towards" off - if(px < this._dragInfo.triggerX) { - this.setOpenPercent(0); - } else if(px > mx) { - this.setOpenPercent(100); + // The initial state was on, so "tend towards" on + if(self._dragInfo.initialState) { + if(px < self.triggerThreshold) { + self.setOpenPercent(0); + } else if(px > self._dragInfo.triggerX) { + self.setOpenPercent(100); + } + } else { + // The initial state was off, so "tend towards" off + if(px < self._dragInfo.triggerX) { + self.setOpenPercent(0); + } else if(px > mx) { + self.setOpenPercent(100); + } } - } + }); }, hold: function(e) { From 74e8f18eecc671cb29a5fc7777faf452a8ef6e48 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 3 Mar 2014 11:03:14 -0600 Subject: [PATCH 09/12] Increased threshold, fixed prevent default again --- js/views/toggleView.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/views/toggleView.js b/js/views/toggleView.js index b1b74ac6a96..8f4dc4893c2 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -12,7 +12,7 @@ this.openPercent = -1; this.onChange = opts.onChange || function() {}; - this.triggerThreshold = opts.triggerThreshold || 10; + this.triggerThreshold = opts.triggerThreshold || 20; this.dragStartHandler = function(e) { self.dragStart(e); @@ -66,9 +66,10 @@ var self = this; if(!this._dragInfo) { return; } + // Stop any parent dragging + e.gesture.srcEvent.preventDefault(); + ionic.requestAnimationFrame(function(amount) { - // Stop any parent dragging - e.gesture.srcEvent.preventDefault(); var slidePageLeft = self.track.offsetLeft + (self.handle.offsetWidth / 2); var slidePageRight = self.track.offsetLeft + self.track.offsetWidth - (self.handle.offsetWidth / 2); From 2559acfb1ba85c4a242f8ec2782084c4e0becf8b Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 3 Mar 2014 11:11:12 -0600 Subject: [PATCH 10/12] Fixed disabled mode --- js/views/toggleView.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/views/toggleView.js b/js/views/toggleView.js index 8f4dc4893c2..468c598d18f 100644 --- a/js/views/toggleView.js +++ b/js/views/toggleView.js @@ -47,6 +47,8 @@ }, dragStart: function(e) { + if(this.checkbox.disabled) return; + this._dragInfo = { width: this.el.offsetWidth, left: this.el.offsetLeft, @@ -96,11 +98,16 @@ }); }, + endDrag: function(e) { + this._dragInfo = null; + }, + hold: function(e) { this.el.classList.add('dragging'); }, release: function(e) { this.el.classList.remove('dragging'); + this.endDrag(e); }, From 9ef52edb2601f52bd33f18557d90aa3e9635f2de Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 3 Mar 2014 11:17:00 -0600 Subject: [PATCH 11/12] Added tests for toggle --- .../test/directive/ionicToggle.unit.js | 45 ++++++++++++------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/js/ext/angular/test/directive/ionicToggle.unit.js b/js/ext/angular/test/directive/ionicToggle.unit.js index 6bee5e5342b..1519639ba8e 100644 --- a/js/ext/angular/test/directive/ionicToggle.unit.js +++ b/js/ext/angular/test/directive/ionicToggle.unit.js @@ -23,36 +23,49 @@ describe('Ionic Toggle', function() { expect(toggleView.destroy).toHaveBeenCalled(); }); - /* - it('Should toggle', function() { - var toggle = el.isolateScope().toggle; - expect(toggle.val()).toBe(false); - el.click(); - expect(toggle.val()).toBe(true); - el.click(); - expect(toggle.val()).toBe(false); - }); - it('Should disable and enable', function() { + // Init with not disabled rootScope.data = { isDisabled: false }; el = compile('')(rootScope); + + // Grab fields + var label = el[0].querySelector('label'); var toggle = el.isolateScope().toggle; + var input = el[0].querySelector('input'); + + // Not disabled, we can toggle expect(toggle.val()).toBe(false); - el.click(); + label.click(); expect(toggle.val()).toBe(true); + // Disable it rootScope.data.isDisabled = true; rootScope.$apply(); - expect(toggle.el.getAttribute('disabled')).toBe('disabled'); - el.click(); + expect(input.getAttribute('disabled')).toBe('disabled'); + + // We shouldn't be able to toggle it now + label.click(); expect(toggle.val()).toBe(true); + // Re-enable it rootScope.data.isDisabled = false; rootScope.$apply(); - el.click(); - expect(toggle.el.getAttribute('disabled')).not.toBe('disabled'); + + // Should be able to toggle it now + label.click(); + expect(toggle.val()).toBe(false); + expect(input.getAttribute('disabled')).not.toBe('disabled'); + }); + + it('Should toggle', function() { + var toggle = el.isolateScope().toggle; + var label = el[0].querySelector('label'); + expect(toggle.val()).toBe(false); + label.click(); + expect(toggle.val()).toBe(true); + label.click(); + expect(toggle.val()).toBe(false); }); - */ }); From 739292d5195657ee367e667a293b22242ef7b4dd Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 3 Mar 2014 11:34:04 -0600 Subject: [PATCH 12/12] Fixed click event for PhantomJS --- js/ext/angular/test/directive/ionicToggle.unit.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/ext/angular/test/directive/ionicToggle.unit.js b/js/ext/angular/test/directive/ionicToggle.unit.js index 1519639ba8e..d05a3d5b096 100644 --- a/js/ext/angular/test/directive/ionicToggle.unit.js +++ b/js/ext/angular/test/directive/ionicToggle.unit.js @@ -36,7 +36,7 @@ describe('Ionic Toggle', function() { // Not disabled, we can toggle expect(toggle.val()).toBe(false); - label.click(); + ionic.trigger('click', {target: label}) expect(toggle.val()).toBe(true); // Disable it @@ -45,7 +45,7 @@ describe('Ionic Toggle', function() { expect(input.getAttribute('disabled')).toBe('disabled'); // We shouldn't be able to toggle it now - label.click(); + ionic.trigger('click', {target: label}) expect(toggle.val()).toBe(true); // Re-enable it @@ -53,7 +53,7 @@ describe('Ionic Toggle', function() { rootScope.$apply(); // Should be able to toggle it now - label.click(); + ionic.trigger('click', {target: label}) expect(toggle.val()).toBe(false); expect(input.getAttribute('disabled')).not.toBe('disabled'); }); @@ -62,9 +62,9 @@ describe('Ionic Toggle', function() { var toggle = el.isolateScope().toggle; var label = el[0].querySelector('label'); expect(toggle.val()).toBe(false); - label.click(); + ionic.trigger('click', {target: label}) expect(toggle.val()).toBe(true); - label.click(); + ionic.trigger('click', {target: label}) expect(toggle.val()).toBe(false); });