mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(toggle): renamed ion-switch to ion-toggle
This commit is contained in:
Adam Bradley
11
ionic/components/toggle/test/basic/e2e.ts
Normal file
11
ionic/components/toggle/test/basic/e2e.ts
Normal file
@ -0,0 +1,11 @@
|
||||
|
||||
it('should check apple via switch element click', function() {
|
||||
element(by.css('[ng-control=appleCtrl] .toggle-media')).click();
|
||||
});
|
||||
|
||||
|
||||
it('should enable/check grape via buttons and submit form', function() {
|
||||
element(by.css('.e2eGrapeDisabled')).click();
|
||||
element(by.css('.e2eGrapeChecked')).click();
|
||||
element(by.css('.e2eSubmit')).click();
|
||||
});
|
||||
45
ionic/components/toggle/test/basic/index.ts
Normal file
45
ionic/components/toggle/test/basic/index.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
import {
|
||||
Control,
|
||||
ControlGroup,
|
||||
NgForm,
|
||||
Validators,
|
||||
NgControl,
|
||||
ControlValueAccessor,
|
||||
NgControlName,
|
||||
NgFormModel,
|
||||
FormBuilder
|
||||
} from 'angular2/angular2';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
this.fruitsForm = new ControlGroup({
|
||||
"appleCtrl": new Control(),
|
||||
"bananaCtrl": new Control(true),
|
||||
"cherryCtrl": new Control(false),
|
||||
"grapeCtrl": new Control(true)
|
||||
});
|
||||
|
||||
this.grapeDisabled = true;
|
||||
this.grapeChecked = true;
|
||||
|
||||
this.myModel = true;
|
||||
}
|
||||
|
||||
toggleGrapeChecked() {
|
||||
this.grapeChecked = !this.grapeChecked;
|
||||
}
|
||||
|
||||
toggleGrapeDisabled() {
|
||||
this.grapeDisabled = !this.grapeDisabled;
|
||||
}
|
||||
|
||||
doSubmit(ev) {
|
||||
console.log('Submitting form', this.fruitsForm.value);
|
||||
this.formResults = JSON.stringify(this.fruitsForm.value);
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
59
ionic/components/toggle/test/basic/main.html
Normal file
59
ionic/components/toggle/test/basic/main.html
Normal file
@ -0,0 +1,59 @@
|
||||
|
||||
<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-toggle value="apple" checked="true" ng-control="appleCtrl">
|
||||
Apple, value=apple, init checked
|
||||
</ion-toggle>
|
||||
|
||||
<ion-toggle ng-control="bananaCtrl">
|
||||
Banana, init no checked/value attributes
|
||||
</ion-toggle>
|
||||
|
||||
<ion-toggle value="cherry" disabled="true" ng-control="cherryCtrl">
|
||||
Cherry, value=cherry, init disabled
|
||||
</ion-toggle>
|
||||
|
||||
<ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
|
||||
Grape, value=grape, init checked, disabled
|
||||
</ion-toggle>
|
||||
|
||||
<ion-toggle secondary checked="true">
|
||||
Secondary color
|
||||
</ion-toggle>
|
||||
|
||||
<ion-toggle value="apple" checked="true" [(ng-model)]="myModel">
|
||||
I'm an NgModel
|
||||
</ion-toggle>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</form>
|
||||
|
||||
<p aria-hidden="true" class="align-center">
|
||||
<button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
|
||||
<button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
|
||||
<button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
|
||||
</p>
|
||||
|
||||
<p aria-hidden="true" padding>
|
||||
<code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
|
||||
<code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
|
||||
<code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
|
||||
<code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
|
||||
<code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
|
||||
<code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
|
||||
<code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
|
||||
<code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
|
||||
<code>ngModel.value: {{myModel}}</code><br>
|
||||
</p>
|
||||
|
||||
<pre aria-hidden="true" padding>{{formResults}}</pre>
|
||||
|
||||
</ion-content>
|
||||
182
ionic/components/toggle/toggle.ios.scss
Normal file
182
ionic/components/toggle/toggle.ios.scss
Normal file
@ -0,0 +1,182 @@
|
||||
@import "../../globals.ios";
|
||||
|
||||
// iOS Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
$toggle-ios-width: 51px !default;
|
||||
$toggle-ios-height: 32px !default;
|
||||
$toggle-ios-border-width: 2px !default;
|
||||
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
|
||||
|
||||
$toggle-ios-background-color-off: $list-ios-background-color !default;
|
||||
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
|
||||
|
||||
$toggle-ios-background-color-on: map-get($colors-ios, primary) !default;
|
||||
|
||||
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
|
||||
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
|
||||
$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
|
||||
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
|
||||
|
||||
$toggle-ios-media-margin: 0 !default;
|
||||
$toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
|
||||
|
||||
$toggle-ios-transition-duration: 300ms !default;
|
||||
|
||||
$toggle-ios-disabled-opacity: 0.5 !default;
|
||||
$toggle-ios-disabled-text-color: $subdued-text-ios-color !default;
|
||||
|
||||
|
||||
// Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
display: block;
|
||||
@include user-select-none();
|
||||
|
||||
&.item.activated {
|
||||
background: $list-ios-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle Wrapper
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-media {
|
||||
margin: $toggle-ios-media-margin;
|
||||
padding: $toggle-ios-media-padding;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Toggle Background Track
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon {
|
||||
// bg track, when not checked
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $toggle-ios-width;
|
||||
height: $toggle-ios-height;
|
||||
border-radius: $toggle-ios-border-radius;
|
||||
pointer-events: none;
|
||||
|
||||
background-color: $toggle-ios-border-color-off;
|
||||
transition: background-color $toggle-ios-transition-duration;
|
||||
}
|
||||
|
||||
|
||||
// Toggle Background Track, Inner Oval
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon:before {
|
||||
// inner bg track's oval, when not checked
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $toggle-ios-border-width;
|
||||
right: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
bottom: $toggle-ios-border-width;
|
||||
|
||||
border-radius: $toggle-ios-border-radius;
|
||||
background-color: $toggle-ios-background-color-off;
|
||||
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition: transform $toggle-ios-transition-duration;
|
||||
}
|
||||
|
||||
|
||||
// Toggle Knob
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon:after {
|
||||
// knob, when not checked
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
|
||||
width: $toggle-ios-handle-width;
|
||||
height: $toggle-ios-handle-height;
|
||||
|
||||
border-radius: $toggle-ios-handle-border-radius;
|
||||
background-color: $toggle-ios-handle-background-color;
|
||||
box-shadow: $toggle-ios-handle-box-shadow;
|
||||
|
||||
transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
|
||||
}
|
||||
|
||||
|
||||
// Toggle Checked
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle[aria-checked=true] {
|
||||
.toggle-icon {
|
||||
// bg track, when checked
|
||||
background-color: $toggle-ios-background-color-on;
|
||||
|
||||
&:before {
|
||||
// inner bg track's oval, when checked
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
&:after {
|
||||
// knob, when checked
|
||||
transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-activated .toggle-icon {
|
||||
&:before {
|
||||
// inner bg track's oval, when checked
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
&:after {
|
||||
// when pressing down on the toggle and IS checked
|
||||
// make the knob wider and move it left a bit
|
||||
left: $toggle-ios-border-width - 6;
|
||||
|
||||
// when pressing down on the toggle and NOT checked
|
||||
// then make the knob wider
|
||||
width: $toggle-ios-handle-width + 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle[aria-disabled=true] {
|
||||
opacity: $toggle-ios-disabled-opacity;
|
||||
color: $toggle-ios-disabled-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-toggle-theme($color-name, $bg-on) {
|
||||
|
||||
ion-toggle[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .toggle-icon {
|
||||
background-color: $bg-on;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Toggle Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in $colors-ios {
|
||||
@include ios-toggle-theme($color-name, $value);
|
||||
}
|
||||
140
ionic/components/toggle/toggle.md.scss
Normal file
140
ionic/components/toggle/toggle.md.scss
Normal file
@ -0,0 +1,140 @@
|
||||
@import "../../globals.md";
|
||||
|
||||
// Material Design Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
$toggle-md-active-color: map-get($colors-md, primary) !default;
|
||||
|
||||
$toggle-md-track-width: 36px !default;
|
||||
$toggle-md-track-height: 14px !default;
|
||||
$toggle-md-track-background-color-off: $list-md-border-color !default;
|
||||
$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
|
||||
|
||||
$toggle-md-handle-width: 20px !default;
|
||||
$toggle-md-handle-height: 20px !default;
|
||||
$toggle-md-handle-background-color-off: $background-md-color !default;
|
||||
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
|
||||
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$toggle-md-handle-border-radius: 50% !default;
|
||||
|
||||
$toggle-md-media-margin: 0 !default;
|
||||
$toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
|
||||
|
||||
$toggle-md-transition-duration: 300ms !default;
|
||||
|
||||
$toggle-md-disabled-opacity: 0.5 !default;
|
||||
$toggle-md-disabled-text-color: $subdued-text-md-color !default;
|
||||
|
||||
|
||||
// Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
display: block;
|
||||
@include user-select-none();
|
||||
}
|
||||
|
||||
|
||||
// Toggle Wrapper
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-media {
|
||||
margin: $toggle-md-media-margin;
|
||||
padding: $toggle-md-media-padding;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Toggle Background Track
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon {
|
||||
// bg track, when not checked
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $toggle-md-track-width;
|
||||
height: $toggle-md-track-height;
|
||||
pointer-events: none;
|
||||
border-radius: $toggle-md-track-height;
|
||||
|
||||
background-color: $toggle-md-track-background-color-off;
|
||||
transition: background-color $toggle-md-transition-duration
|
||||
}
|
||||
|
||||
|
||||
// Toggle Knob
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-icon:after {
|
||||
// knob, when not checked
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
|
||||
left: 0;
|
||||
|
||||
width: $toggle-md-handle-width;
|
||||
height: $toggle-md-handle-height;
|
||||
|
||||
border-radius: $toggle-md-handle-border-radius;
|
||||
box-shadow: $toggle-md-handle-box-shadow;
|
||||
|
||||
background-color: $toggle-md-handle-background-color-off;
|
||||
|
||||
transition-property: transform, background-color;
|
||||
transition-duration: $toggle-md-transition-duration;
|
||||
}
|
||||
|
||||
|
||||
// Toggle Checked
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle[aria-checked=true] .toggle-icon {
|
||||
// bg track, when not checked
|
||||
background-color: $toggle-md-track-background-color-on;
|
||||
|
||||
&:after {
|
||||
// knob, when not checked
|
||||
background-color: $toggle-md-handle-background-color-on;
|
||||
transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
ion-toggle[aria-disabled=true] {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
color: $toggle-md-disabled-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin toggle-theme-md($color-name, $bg-on) {
|
||||
|
||||
ion-toggle[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .toggle-icon {
|
||||
background-color: lighten($bg-on, 25%);
|
||||
}
|
||||
|
||||
&[aria-checked=true] .toggle-icon:after {
|
||||
background-color: $bg-on;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Toggle Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in $colors-md {
|
||||
|
||||
@include toggle-theme-md($color-name, $value);
|
||||
|
||||
}
|
||||
262
ionic/components/toggle/toggle.ts
Normal file
262
ionic/components/toggle/toggle.ts
Normal file
@ -0,0 +1,262 @@
|
||||
import {Component, Directive, ElementRef, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
|
||||
|
||||
import {Form} from '../../util/form';
|
||||
import {Config} from '../../config/config';
|
||||
import {pointerCoord} from '../../util/dom';
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Directive({
|
||||
selector: '.toggle-media',
|
||||
host: {
|
||||
'[class.toggle-activated]': 'toggle.isActivated'
|
||||
}
|
||||
})
|
||||
class MediaToggle {
|
||||
/**
|
||||
* TODO
|
||||
* @param {Toggle} toggle TODO
|
||||
* @param {} elementRef TODO
|
||||
* @param {Config} config TODO
|
||||
*/
|
||||
constructor(
|
||||
@Host() @Inject(forwardRef(() => Toggle)) toggle: Toggle,
|
||||
elementRef: ElementRef
|
||||
) {
|
||||
toggle.toggleEle = elementRef.nativeElement;
|
||||
this.toggle = toggle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @name Toggle
|
||||
* @description
|
||||
* A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
|
||||
* Togglees can also have colors assigned to them, by adding any color attribute to them.
|
||||
*
|
||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||
* @property {any} [value] - the inital value of the toggle
|
||||
* @property {boolean} [checked] - whether the toggle it toggled or not
|
||||
* @property {boolean} [disabled] - whether the toggle is disabled or not
|
||||
* @property {string} [id] - a unique ID for a toggle
|
||||
* @usage
|
||||
* ```html
|
||||
* // Create a single toggle
|
||||
* <ion-toggle checked="true">
|
||||
* Pineapple
|
||||
* </ion-toggle>
|
||||
*
|
||||
* // Create a list of togglees:
|
||||
* <ion-list>
|
||||
*
|
||||
* <ion-toggle checked="true">
|
||||
* Apple
|
||||
* </ion-toggle>
|
||||
*
|
||||
* <ion-toggle checked="false">
|
||||
* Banana
|
||||
* </ion-toggle>
|
||||
*
|
||||
* <ion-toggle disabled="true">
|
||||
* Cherry
|
||||
* </ion-toggle>
|
||||
*
|
||||
* </ion-list>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/toggle/
|
||||
* @see {@link /docs/v2/components#toggle Toggle Component Docs}
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-toggle,ion-switch',
|
||||
inputs: [
|
||||
'value',
|
||||
'checked',
|
||||
'disabled',
|
||||
'id'
|
||||
],
|
||||
host: {
|
||||
'role': 'checkbox',
|
||||
'tappable': 'true',
|
||||
'[attr.tab-index]': 'tabIndex',
|
||||
'[attr.aria-checked]': 'checked',
|
||||
'[attr.aria-disabled]': 'disabled',
|
||||
'[attr.aria-labelledby]': 'labelId',
|
||||
'(touchstart)': 'pointerDown($event)',
|
||||
'(mousedown)': 'pointerDown($event)',
|
||||
'(touchend)': 'pointerUp($event)',
|
||||
'(mouseup)': 'pointerUp($event)',
|
||||
'class': 'item'
|
||||
},
|
||||
template:
|
||||
'<ng-content select="[item-left]"></ng-content>' +
|
||||
'<div class="item-inner">' +
|
||||
'<ion-item-content id="{{labelId}}">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</ion-item-content>' +
|
||||
'<div disable-activated class="toggle-media">' +
|
||||
'<div class="toggle-icon"></div>' +
|
||||
'</div>' +
|
||||
`</div>`,
|
||||
directives: [MediaToggle]
|
||||
})
|
||||
export class Toggle {
|
||||
|
||||
constructor(
|
||||
form: Form,
|
||||
elementRef: ElementRef,
|
||||
config: Config,
|
||||
@Optional() private ngControl: NgControl
|
||||
) {
|
||||
// deprecated warning
|
||||
if (elementRef.nativeElement.tagName == 'ION-SWITCH') {
|
||||
console.warn('<ion-switch> has been renamed to <ion-toggle>, please update your HTML');
|
||||
}
|
||||
|
||||
|
||||
this.form = form;
|
||||
form.register(this);
|
||||
|
||||
this.lastTouch = 0;
|
||||
this.mode = config.get('mode');
|
||||
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
|
||||
if (ngControl) {
|
||||
ngControl.valueAccessor = this;
|
||||
}
|
||||
|
||||
let self = this;
|
||||
function pointerMove(ev) {
|
||||
let currentX = pointerCoord(ev).x;
|
||||
|
||||
if (self.checked) {
|
||||
if (currentX + 15 < self.startX) {
|
||||
self.toggle(ev);
|
||||
self.startX = currentX;
|
||||
}
|
||||
} else if (currentX - 15 > self.startX) {
|
||||
self.toggle(ev);
|
||||
self.startX = currentX;
|
||||
}
|
||||
}
|
||||
|
||||
function pointerOut(ev) {
|
||||
if (ev.currentTarget === ev.target) {
|
||||
self.pointerUp(ev);
|
||||
}
|
||||
}
|
||||
|
||||
this.addMoveListener = function() {
|
||||
self.toggleEle.addEventListener('touchmove', pointerMove);
|
||||
self.toggleEle.addEventListener('mousemove', pointerMove);
|
||||
elementRef.nativeElement.addEventListener('mouseout', pointerOut);
|
||||
};
|
||||
|
||||
this.removeMoveListener = function() {
|
||||
self.toggleEle.removeEventListener('touchmove', pointerMove);
|
||||
self.toggleEle.removeEventListener('mousemove', pointerMove);
|
||||
elementRef.nativeElement.removeEventListener('mouseout', pointerOut);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.labelId = 'label-' + this.inputId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set checked state of this toggle.
|
||||
* @param {boolean} value Boolean to set this toggle's checked state to.
|
||||
* @private
|
||||
*/
|
||||
check(value) {
|
||||
this.checked = !!value;
|
||||
this.onChange(this.checked);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the checked state of this toggle.
|
||||
* @private
|
||||
*/
|
||||
toggle(ev) {
|
||||
this.check(!this.checked);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
writeValue(value) {
|
||||
this.checked = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
pointerDown(ev) {
|
||||
if (/touch/.test(ev.type)) {
|
||||
this.lastTouch = Date.now();
|
||||
}
|
||||
|
||||
if (this.isDisabled(ev)) return;
|
||||
|
||||
this.startX = pointerCoord(ev).x;
|
||||
|
||||
this.removeMoveListener();
|
||||
this.addMoveListener();
|
||||
|
||||
this.isActivated = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
pointerUp(ev) {
|
||||
if (this.isDisabled(ev)) return;
|
||||
|
||||
let endX = pointerCoord(ev).x;
|
||||
|
||||
if (this.checked) {
|
||||
if (this.startX + 4 > endX) {
|
||||
this.toggle(ev);
|
||||
}
|
||||
} else if (this.startX - 4 < endX) {
|
||||
this.toggle(ev);
|
||||
}
|
||||
|
||||
this.removeMoveListener();
|
||||
this.isActivated = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
registerOnChange(fn) { this.onChange = fn; }
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
registerOnTouched(fn) { this.onTouched = fn; }
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
this.removeMoveListener();
|
||||
this.toggleEle = this.addMoveListener = this.removeMoveListener = null;
|
||||
this.form.deregister(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
isDisabled(ev) {
|
||||
return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ion-toggle');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user