javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(input): place inputs inside of ion-item

Browse Source
This commit is contained in:
Adam Bradley
2016-01-20 21:41:54 -06:00
parent e4b200639e
commit b3a7298a52
60 changed files with 2528 additions and 1727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
ionic/components/toggle/toggle.ts
View File

@@ -1,16 +1,19 @@
import {Component, ElementRef, Renderer, Input, HostListener, Optional} from 'angular2/core';
import {Component, ElementRef, Renderer, Input, Optional} from 'angular2/core';
import {NgControl} from 'angular2/common';
import {Form} from '../../util/form';
import {Config} from '../../config/config';
import {Form} from '../../util/form';
import {Item} from '../item/item';
import {pointerCoord} from '../../util/dom';
/**
* @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.
* 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.
* Toggles can also have colors assigned to them, by adding any color
* attribute.
*
* 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
@@ -19,25 +22,23 @@ import {pointerCoord} from '../../util/dom';
* @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-item>
* <ion-label>Pepperoni</ion-label>
* <ion-toggle value="pepperoni" checked="true"></ion-toggle>
* </ion-item>
*
* <ion-toggle checked="false">
* Banana
* </ion-toggle>
* <ion-item>
* <ion-label>Sausage</ion-label>
* <ion-toggle value="sausage"></ion-toggle>
* </ion-item>
*
* <ion-toggle disabled="true">
* Cherry
* </ion-toggle>
* <ion-item>
* <ion-label>Mushrooms</ion-label>
* <ion-toggle value="mushrooms"></ion-toggle>
* </ion-item>
*
* </ion-list>
* ```
@@ -46,49 +47,48 @@ import {pointerCoord} from '../../util/dom';
*/
@Component({
selector: 'ion-toggle,ion-switch',
host: {
'role': 'checkbox',
'class': 'item',
'tappable': '',
'tabindex': '0',
'[attr.aria-disabled]': 'disabled',
'(touchstart)': 'pointerDown($event)',
'(mousedown)': 'pointerDown($event)',
'(touchend)': 'pointerUp($event)',
'(mouseup)': 'pointerUp($event)'
},
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 class="toggle-media" [class.toggle-activated]="isActivated" disable-activated>' +
'<div class="toggle-icon"></div>' +
'</div>' +
`</div>`
'<div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">' +
'<div class="toggle-inner"></div>' +
'</div>' +
'<button role="checkbox" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'(touchstart)=pointerDown($event) ' +
'(touchmove)=pointerMove($event) ' +
'(mousemove)=pointerMove($event) ' +
'(mousedown)=pointerDown($event) ' +
'(touchend)=pointerUp($event) ' +
'(mouseup)=pointerUp($event) ' +
'(mouseout)=pointerUp($event) ' +
'class="item-cover">' +
'</button>',
host: {
'[class.toggle-disabled]': '_disabled'
}
})
export class Toggle {
private _checked: boolean;
private _checked: any = false;
private _disabled: any = false;
private _labelId: string;
private _activated: boolean = false;
private _mode: string;
private _startX;
private _touched: number = 0;
private addMoveListener;
private removeMoveListener;
public isActivated: boolean;
public labelId: string;
id: string;
@Input() value: string = '';
@Input() disabled: boolean = false;
@Input() id: string;
constructor(
private _form: Form,
private _elementRef: ElementRef,
private _renderer: Renderer,
config: Config,
@Optional() ngControl: NgControl
@Optional() ngControl: NgControl,
@Optional() private _item: Item
) {
// deprecated warning
if (_elementRef.nativeElement.tagName == 'ION-SWITCH') {
@@ -103,56 +103,14 @@ export class Toggle {
ngControl.valueAccessor = this;
}
let self = this;
function pointerMove(ev) {
let currentX = pointerCoord(ev).x;
if (self.checked) {
if (currentX + 15 < self._startX) {
self.toggle();
self._startX = currentX;
}
} else if (currentX - 15 > self._startX) {
self.toggle();
self._startX = currentX;
}
if (_item) {
this.id = 'tgl-' + _item.registerInput('toggle');
this._labelId = 'lbl-' + _item.id;
}
function pointerOut(ev) {
if (ev.currentTarget === ev.target) {
self.pointerUp(ev);
}
}
let toggleEle = _elementRef.nativeElement.querySelector('.toggle-media');
this.addMoveListener = function() {
toggleEle.addEventListener('touchmove', pointerMove);
toggleEle.addEventListener('mousemove', pointerMove);
_elementRef.nativeElement.addEventListener('mouseout', pointerOut);
};
this.removeMoveListener = function() {
toggleEle.removeEventListener('touchmove', pointerMove);
toggleEle.removeEventListener('mousemove', pointerMove);
_elementRef.nativeElement.removeEventListener('mouseout', pointerOut);
};
}
/**
* @private
*/
ngOnInit() {
if (!this.id) {
this.id = 'tgl-' + this._form.nextId();
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
}
this.labelId = 'lbl-' + this.id;
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId);
}
/**
* Toggle the checked state of this toggle.
*/
toggle() {
@@ -160,14 +118,26 @@ export class Toggle {
}
@Input()
get checked(): boolean {
return !!this._checked;
get checked() {
return this._checked;
}
set checked(val: boolean) {
this._checked = !!val;
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString());
this.onChange(this._checked);
set checked(val) {
if (!this._disabled) {
this._checked = (val === true || val === 'true');
this.onChange(this._checked);
this._item && this._item.setCssClass('item-toggle-checked', this._checked);
}
}
@Input()
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = (val === true || val === 'true');
this._item && this._item.setCssClass('item-toggle-disabled', this._disabled);
}
/**
@@ -178,34 +148,59 @@ export class Toggle {
this._touched = Date.now();
}
if (this.isDisabled(ev)) return;
if (this.isDisabled(ev)) {
return;
}
this._startX = pointerCoord(ev).x;
this.removeMoveListener();
this.addMoveListener();
this._activated = true;
}
this.isActivated = true;
/**
* @private
*/
private pointerMove(ev) {
if (this._startX) {
let currentX = pointerCoord(ev).x;
console.debug('toggle move', ev.type, currentX);
if (this._checked) {
if (currentX + 15 < this._startX) {
this.toggle();
this._startX = currentX;
}
} else if (currentX - 15 > this._startX) {
this.toggle();
this._startX = currentX;
}
}
}
/**
* @private
*/
private pointerUp(ev) {
if (this.isDisabled(ev)) return;
if (this._startX) {
let endX = pointerCoord(ev).x;
if (this.isDisabled(ev)) {
return;
}
if (this.checked) {
if (this._startX + 4 > endX) {
let endX = pointerCoord(ev).x;
if (this.checked) {
if (this._startX + 4 > endX) {
this.toggle();
}
} else if (this._startX - 4 < endX) {
this.toggle();
}
} else if (this._startX - 4 < endX) {
this.toggle();
}
this.removeMoveListener();
this.isActivated = false;
this._activated = false;
this._startX = null;
}
}
/**
@@ -243,22 +238,15 @@ export class Toggle {
* @private
*/
ngOnDestroy() {
this.removeMoveListener();
this.addMoveListener = this.removeMoveListener = null;
this._form.deregister(this);
}
/**
* @private
*/
isDisabled(ev) {
return (this._touched + 999 > Date.now() && /mouse/.test(ev.type)) || (this._mode == 'ios' && ev.target.tagName == 'ION-TOGGLE');
private isDisabled(ev) {
return (this._touched + 999 > Date.now() && (ev.type.indexOf('mouse') > -1))
|| (this._mode == 'ios' && ev.target.tagName == 'ION-TOGGLE');
}
/**
* @private
*/
initFocus() {
}
}