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

42
ionic/components/toggle/test/basic/main.html
View File

@@ -8,29 +8,35 @@
<ion-list>
<ion-toggle value="apple" checked="true" ngControl="appleCtrl">
Apple, value=apple, init checked
</ion-toggle>
<ion-item>
<ion-label>Apple, value=apple, init checked</ion-label>
<ion-toggle value="apple" checked="true" ngControl="appleCtrl"></ion-toggle>
</ion-item>
<ion-toggle ngControl="bananaCtrl">
Banana, init no checked/value attributes
</ion-toggle>
<ion-item>
<ion-label>Banana, init no checked/value attributes</ion-label>
<ion-toggle ngControl="bananaCtrl"></ion-toggle>
</ion-item>
<ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl">
Cherry, value=cherry, init disabled
</ion-toggle>
<ion-item>
<ion-label>Cherry, value=cherry, init disabled</ion-label>
<ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl"></ion-toggle>
</ion-item>
<ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl">
Grape, value=grape, init checked, disabled
</ion-toggle>
<ion-item>
<ion-label>Grape, value=grape, init checked, disabled</ion-label>
<ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
</ion-item>
<ion-toggle secondary checked="true">
Secondary color
</ion-toggle>
<ion-item>
<ion-label>Secondary color</ion-label>
<ion-toggle secondary checked="true"></ion-toggle>
</ion-item>
<ion-toggle value="apple" checked="true" [(ngModel)]="myModel">
I'm an NgModel
</ion-toggle>
<ion-item>
<ion-label>I'm an NgModel</ion-label>
<ion-toggle value="apple" checked="true" [(ngModel)]="myModel"></ion-toggle>
</ion-item>
</ion-list>

155
ionic/components/toggle/toggle.ios.scss
View File

@@ -26,37 +26,20 @@ $toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($i
$toggle-ios-transition-duration: 300ms !default;
$toggle-ios-disabled-opacity: 0.5 !default;
$toggle-ios-disabled-text-color: $subdued-text-ios-color !default;
// Toggle
// iOS Toggle
// -----------------------------------------
ion-toggle {
display: block;
@include user-select-none();
&.item.activated {
background: $list-ios-background-color;
}
position: relative;
}
// Toggle Wrapper
// -----------------------------------------
.toggle-media {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-media-padding;
cursor: pointer;
}
// Toggle Background Track
// iOS Toggle Background Track: Unchecked
// -----------------------------------------
.toggle-icon {
// bg track, when not checked
position: relative;
display: block;
width: $toggle-ios-width;
@@ -69,11 +52,10 @@ ion-toggle {
}
// Toggle Background Track, Inner Oval
// iOS Toggle Background Oval: Unchecked
// -----------------------------------------
.toggle-icon:before {
// inner bg track's oval, when not checked
content: '';
position: absolute;
top: $toggle-ios-border-width;
@@ -89,12 +71,10 @@ ion-toggle {
}
// Toggle Knob
// iOS Toggle Inner Knob: Unchecked
// -----------------------------------------
.toggle-icon:after {
// knob, when not checked
content: '';
.toggle-inner {
position: absolute;
top: $toggle-ios-border-width;
left: $toggle-ios-border-width;
@@ -110,65 +90,96 @@ ion-toggle {
}
// Toggle Checked
// iOS Toggle Background Track: 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-checked {
background-color: $toggle-ios-background-color-on;
}
// Toggle Disabled
// iOS Toggle Background Oval: Activated or Checked
// -----------------------------------------
ion-toggle[aria-disabled=true] {
.toggle-activated:before,
.toggle-checked:before {
transform: scale3d(0, 0, 0);
}
// iOS Toggle Inner Knob: Checked
// -----------------------------------------
.toggle-checked .toggle-inner {
transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
}
// iOS Toggle Background Oval: Activated and Checked
// -----------------------------------------
.toggle-activated.toggle-checked:before {
transform: scale3d(0, 0, 0);
}
// iOS Toggle Inner Knob: Activated and Unchecked
// -----------------------------------------
.toggle-activated .toggle-inner {
width: $toggle-ios-handle-width + 6;
}
// iOS Toggle Inner Knob: Activated and Checked
// -----------------------------------------
.toggle-activated.toggle-checked .toggle-inner {
// 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;
}
// iOS Toggle: Disabled
// -----------------------------------------
.toggle-disabled,
.item-toggle-disabled ion-label {
opacity: $toggle-ios-disabled-opacity;
color: $toggle-ios-disabled-text-color;
pointer-events: none;
}
.toggle-disabled ion-radio {
opacity: $toggle-ios-disabled-opacity;
}
// iOS Toggle within an item
// -----------------------------------------
.item ion-toggle {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-media-padding;
}
// iOS Toggle Within An Item
// -----------------------------------------
.item ion-toggle {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-media-padding;
}
// 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;
}
@mixin ios-toggle-theme($color-name, $color-value) {
ion-toggle[#{$color-name}] .toggle-checked {
background-color: $color-value;
}
}
@@ -177,6 +188,8 @@ ion-toggle[aria-disabled=true] {
// Generate iOS Toggle Colors
// --------------------------------------------------
@each $color-name, $value in $colors-ios {
@include ios-toggle-theme($color-name, $value);
@each $color-name, $color-value in $colors-ios {
@include ios-toggle-theme($color-name, $color-value);
}

89
ionic/components/toggle/toggle.md.scss
View File

@@ -23,33 +23,20 @@ $toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px
$toggle-md-transition-duration: 300ms !default;
$toggle-md-disabled-opacity: 0.5 !default;
$toggle-md-disabled-text-color: $subdued-text-md-color !default;
// Toggle
// Material Design Toggle
// -----------------------------------------
ion-toggle {
display: block;
@include user-select-none();
position: relative;
}
// Toggle Wrapper
// -----------------------------------------
.toggle-media {
margin: $toggle-md-media-margin;
padding: $toggle-md-media-padding;
cursor: pointer;
}
// Toggle Background Track
// Material Design Toggle Background Track: Unchecked
// -----------------------------------------
.toggle-icon {
// bg track, when not checked
position: relative;
display: block;
width: $toggle-md-track-width;
@@ -62,12 +49,10 @@ ion-toggle {
}
// Toggle Knob
// Material Design Toggle Inner Knob: Unchecked
// -----------------------------------------
.toggle-icon:after {
// knob, when not checked
content: '';
.toggle-inner {
position: absolute;
top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
left: 0;
@@ -85,44 +70,70 @@ ion-toggle {
}
// Toggle Checked
// Material Design Toggle Background Track: Checked
// -----------------------------------------
ion-toggle[aria-checked=true] .toggle-icon {
// bg track, when not checked
.toggle-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
// Material Design Toggle Inner Knob: Checked
// -----------------------------------------
ion-toggle[aria-disabled=true] {
.toggle-checked .toggle-inner {
background-color: $toggle-md-handle-background-color-on;
transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
}
// Material Design Toggle: Disabled
// -----------------------------------------
.toggle-disabled,
.item-toggle-disabled ion-label {
opacity: $toggle-md-disabled-opacity;
color: $toggle-md-disabled-text-color;
pointer-events: none;
}
.toggle-disabled ion-radio {
opacity: $toggle-md-disabled-opacity;
}
// Material Design Toggle within an item
// -----------------------------------------
.item ion-toggle {
margin: $toggle-md-media-margin;
padding: $toggle-md-media-padding;
cursor: pointer;
}
// Material Design Toggle Within An Item
// -----------------------------------------
.item ion-toggle {
margin: $toggle-md-media-margin;
padding: $toggle-md-media-padding;
cursor: pointer;
}
// Material Design Color Mixin
// --------------------------------------------------
@mixin toggle-theme-md($color-name, $bg-on) {
@mixin toggle-theme-md($color-name, $color-value) {
ion-toggle[#{$color-name}] {
&[aria-checked=true] .toggle-icon {
background-color: lighten($bg-on, 25%);
.toggle-checked {
background-color: lighten($color-value, 25%);
}
&[aria-checked=true] .toggle-icon:after {
background-color: $bg-on;
.toggle-checked .toggle-inner {
background-color: $color-value;
}
}
@@ -133,8 +144,8 @@ ion-toggle[aria-disabled=true] {
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in $colors-md {
@each $color-name, $color-value in $colors-md {
@include toggle-theme-md($color-name, $value);
@include toggle-theme-md($color-name, $color-value);
}

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() {
}
}