switch updates

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 {

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);
+      let currentX = pointerCoord(ev).x;
-      console.log('pointerMove', moveCoord);
+
+      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) {
+    this.addMoveListener = function() {
-      let endCoord = dom.pointerCoord(ev);
+      element.addEventListener('touchmove', pointerMove);
-      renderer.setElementClass(elementRef, ACTIVATED, false);
+      element.addEventListener('mousemove', pointerMove);
-      element.removeEventListener(touchEnabled ? TOUCHMOVE : 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);
+    this.removeMoveListener();
-    element.addEventListener(touchEnabled ? TOUCHEND : MOUSEUP, pointerUp);
+    this.isActivated = false;
-
-    this.dereg = function() {
-      element.removeEventListener(touchEnabled ? TOUCHSTART : MOUSEDOWN, pointerDown);
-      element.removeEventListener(touchEnabled ? TOUCHEND : MOUSEUP, pointerUp);
-      element.removeEventListener(touchEnabled ? TOUCHMOVE : MOUSEMOVE, pointerMove);
-    }
   }
 
   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';

ionic/components/switch/test/basic/main.html

@@ -8,54 +8,6 @@
 
     <ion-list>
 
-      <div class="item switch" mode="ios">
-        <div class="item-content">
-          Unchecked
-        </div>
-        <div class="item-media media-switch">
-          <div class="switch-icon">
-            <div class="switch-track"></div>
-            <div class="switch-handle"></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="item switch" mode="ios">
-        <div class="item-content">
-          Unchecked activated
-        </div>
-        <div class="item-media media-switch activated">
-          <div class="switch-icon">
-            <div class="switch-track"></div>
-            <div class="switch-handle"></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="item switch" mode="ios" aria-checked="true">
-        <div class="item-content">
-          Checked
-        </div>
-        <div class="item-media media-switch">
-          <div class="switch-icon">
-            <div class="switch-track"></div>
-            <div class="switch-handle"></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="item switch" mode="ios" aria-checked="true">
-        <div class="item-content">
-          Checked activated
-        </div>
-        <div class="item-media media-switch activated">
-          <div class="switch-icon">
-            <div class="switch-track"></div>
-            <div class="switch-handle"></div>
-          </div>
-        </div>
-      </div>
-
       <ion-switch value="apple" checked="true" ng-control="appleCtrl" id="e2eAppleCheckbox">
         Apple, value=apple, init checked
       </ion-switch>

ionic/components/switch/test/basic/main2.html

@@ -0,0 +1,63 @@
+
+<ion-toolbar><ion-title>Switches</ion-title></ion-toolbar>
+
+
+<ion-content>
+
+  <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+
+    <ion-list>
+
+      <div class="item switch" mode="ios">
+        <div class="item-content">
+          Unchecked
+        </div>
+        <div class="item-media media-switch">
+          <div class="switch-icon">
+            <div class="switch-track"></div>
+            <div class="switch-handle"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="item switch" mode="ios">
+        <div class="item-content">
+          Unchecked activated
+        </div>
+        <div class="item-media media-switch activated">
+          <div class="switch-icon">
+            <div class="switch-track"></div>
+            <div class="switch-handle"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="item switch" mode="ios" aria-checked="true">
+        <div class="item-content">
+          Checked
+        </div>
+        <div class="item-media media-switch">
+          <div class="switch-icon">
+            <div class="switch-track"></div>
+            <div class="switch-handle"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="item switch" mode="ios" aria-checked="true">
+        <div class="item-content">
+          Checked activated
+        </div>
+        <div class="item-media media-switch activated">
+          <div class="switch-icon">
+            <div class="switch-track"></div>
+            <div class="switch-handle"></div>
+          </div>
+        </div>
+      </div>
+
+    </ion-list>
+
+  </form>
+
+</ion-content>

ionic/platform/registry.ts

@@ -63,8 +63,7 @@ Platform.register({
     mdRipple: true,
     tabBarPlacement: 'top',
     navTitleAlign: 'left',
-    viewTransition: 'md',
+    viewTransition: 'md'
-    touchEnabled: true
   },
   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',

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/**/*e2e.js',
-  //specs: 'dist/e2e/nav/basic/*e2e.js',
+  specs: 'dist/e2e/switch/basic/*e2e.js',
 
   sleepBetweenSpecs: 1200,