diff --git a/ionic/components/switch/extensions/ios.scss b/ionic/components/switch/extensions/ios.scss index 107ba4a4d6..acc136db91 100644 --- a/ionic/components/switch/extensions/ios.scss +++ b/ionic/components/switch/extensions/ios.scss @@ -29,7 +29,7 @@ $switch-ios-transition-duration: 200ms !default; .item-media { margin: 0; - padding: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left; + padding: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom ($item-ios-padding-left + 20); } .switch-icon { diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index a91872af6d..754d859733 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -14,55 +14,81 @@ import {Ion} from '../ion'; import {IonInputItem} from '../form/input'; import {IonicConfig} from '../../config/config'; import {IonicComponent, IonicView} from '../../config/annotations'; -import * as dom from '../../util/dom'; +import {pointerCoord} from '../../util/dom'; @Directive({ - selector: '.media-switch' + selector: '.media-switch', + host: { + '(^touchstart)': 'pointerDown($event)', + '(^mousedown)': 'pointerDown($event)', + '(^touchend)': 'pointerUp($event)', + '(^mouseup)': 'pointerUp($event)', + '[class.activated]': 'isActivated' + } }) class MediaSwitch { constructor( @Ancestor() @Inject(forwardRef(() => Switch)) swtch: Switch, elementRef: ElementRef, - renderer: Renderer, config: IonicConfig ) { + this.swtch = swtch; + let self = this; let element = elementRef.nativeElement; - let touchEnabled = config.setting('touchEnabled'); - let startCoord = null; - - function pointerDown(ev) { - startCoord = dom.pointerCoord(ev); - renderer.setElementClass(elementRef, ACTIVATED, true); - element.removeEventListener(touchEnabled ? TOUCHMOVE : MOUSEMOVE, pointerMove); - element.addEventListener(touchEnabled ? TOUCHMOVE : MOUSEMOVE, pointerMove); - } function pointerMove(ev) { - let moveCoord = dom.pointerCoord(ev); - console.log('pointerMove', moveCoord); + let currentX = pointerCoord(ev).x; + + if (swtch.checked) { + if (currentX + 15 < self.startX) { + swtch.toggle(); + self.startX = currentX; + } + } else if (currentX - 15 > self.startX) { + swtch.toggle(); + self.startX = currentX; + } } - function pointerUp(ev) { - let endCoord = dom.pointerCoord(ev); - renderer.setElementClass(elementRef, ACTIVATED, false); - element.removeEventListener(touchEnabled ? TOUCHMOVE : MOUSEMOVE, pointerMove); + this.addMoveListener = function() { + element.addEventListener('touchmove', pointerMove); + element.addEventListener('mousemove', pointerMove); + }; - swtch.toggle(); + this.removeMoveListener = function() { + element.removeEventListener('touchmove', pointerMove); + element.removeEventListener('mousemove', pointerMove); + }; + } + + pointerDown(ev) { + this.startX = pointerCoord(ev).x; + + this.removeMoveListener(); + this.addMoveListener(); + + this.isActivated = true; + } + + pointerUp(ev) { + let endX = pointerCoord(ev).x; + + if (this.swtch.checked) { + if (this.startX + 4 > endX) { + this.swtch.toggle(); + } + } else if (this.startX - 4 < endX) { + this.swtch.toggle(); } - element.addEventListener(touchEnabled ? TOUCHSTART : MOUSEDOWN, pointerDown); - element.addEventListener(touchEnabled ? TOUCHEND : MOUSEUP, pointerUp); - - this.dereg = function() { - element.removeEventListener(touchEnabled ? TOUCHSTART : MOUSEDOWN, pointerDown); - element.removeEventListener(touchEnabled ? TOUCHEND : MOUSEUP, pointerUp); - element.removeEventListener(touchEnabled ? TOUCHMOVE : MOUSEMOVE, pointerMove); - } + this.removeMoveListener(); + this.isActivated = false; } onDestroy() { - this.dereg(); + this.removeMoveListener(); + this.swtch = this.addMoveListener = this.removeMoveListener = null; } } @@ -143,11 +169,3 @@ export class Switch extends IonInputItem { registerOnTouched(fn) { this.onTouched = fn; } } - -const ACTIVATED = 'activated'; -const MOUSEDOWN = 'mousedown'; -const MOUSEMOVE = 'mousemove'; -const MOUSEUP = 'mouseup'; -const TOUCHSTART = 'touchstart'; -const TOUCHMOVE = 'touchmove'; -const TOUCHEND = 'touchend'; diff --git a/ionic/components/switch/test/basic/main.html b/ionic/components/switch/test/basic/main.html index 2f9fbaa6fa..4dc652accb 100644 --- a/ionic/components/switch/test/basic/main.html +++ b/ionic/components/switch/test/basic/main.html @@ -8,54 +8,6 @@ -
-
- Unchecked -
-
-
-
-
-
-
-
- -
-
- Unchecked activated -
-
-
-
-
-
-
-
- -
-
- Checked -
-
-
-
-
-
-
-
- -
-
- Checked activated -
-
-
-
-
-
-
-
- Apple, value=apple, init checked diff --git a/ionic/components/switch/test/basic/main2.html b/ionic/components/switch/test/basic/main2.html new file mode 100644 index 0000000000..68c9af718f --- /dev/null +++ b/ionic/components/switch/test/basic/main2.html @@ -0,0 +1,63 @@ + +Switches + + + + +
+ + + +
+
+ Unchecked +
+
+
+
+
+
+
+
+ +
+
+ Unchecked activated +
+
+
+
+
+
+
+
+ +
+
+ Checked +
+
+
+
+
+
+
+
+ +
+
+ Checked activated +
+
+
+
+
+
+
+
+ + + +
+ + diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index fa7bf733e1..0b43d39b6a 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -63,8 +63,7 @@ Platform.register({ mdRipple: true, tabBarPlacement: 'top', navTitleAlign: 'left', - viewTransition: 'md', - touchEnabled: true + viewTransition: 'md' }, isMatch(p) { // "silk" is kindle fire @@ -95,7 +94,6 @@ Platform.register({ // and not just an a spoofed user-agent string return /iphone|ipad|ipod/i.test(Platform.navigatorPlatform()); }, - touchEnabled: true, keyboardScrollAssist: true, viewTransition: 'ios', navTitleAlign: 'center', diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js index 318efb21e0..c1d3af9f35 100644 --- a/scripts/snapshot/snapshot.config.js +++ b/scripts/snapshot/snapshot.config.js @@ -8,8 +8,8 @@ exports.config = { domain: 'ionic-snapshot-go.appspot.com', //domain: 'localhost:8080', - specs: 'dist/e2e/**/*e2e.js', - //specs: 'dist/e2e/nav/basic/*e2e.js', + //specs: 'dist/e2e/**/*e2e.js', + specs: 'dist/e2e/switch/basic/*e2e.js', sleepBetweenSpecs: 1200,