mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
switch updates
This commit is contained in:
Adam Bradley
@ -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 {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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>
|
||||
|
||||
63
ionic/components/switch/test/basic/main2.html
Normal file
63
ionic/components/switch/test/basic/main2.html
Normal file
@ -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>
|
||||
@ -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',
|
||||
|
||||
@ -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,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user