mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
feat(picker): add ios/md/wp picker styles
This commit is contained in:
Adam Bradley
@ -1,38 +1,24 @@
|
||||
import {Component, ElementRef, Input, ViewChild, Renderer, HostListener, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
|
||||
import {NgClass, NgIf, NgFor} from 'angular2/common';
|
||||
import {Component, ElementRef, Input, ViewChild, Renderer, HostListener, ViewEncapsulation} from 'angular2/core';
|
||||
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {Transition, TransitionOptions} from '../../transitions/transition';
|
||||
import {Config} from '../../config/config';
|
||||
import {isPresent} from '../../util/util';
|
||||
import {isPresent, isString, isNumber} from '../../util/util';
|
||||
import {NavParams} from '../nav/nav-params';
|
||||
import {ViewController} from '../nav/view-controller';
|
||||
import {raf, CSS, pointerCoord} from '../../util/dom';
|
||||
|
||||
import {nativeRaf, cancelRaf, CSS, pointerCoord} from '../../util/dom';
|
||||
|
||||
|
||||
/**
|
||||
* @name Picker
|
||||
* @description
|
||||
*
|
||||
* @usage
|
||||
* ```ts
|
||||
* constructor(private nav: NavController) {}
|
||||
*
|
||||
* presentSelector() {
|
||||
* let picker = Picker.create({
|
||||
*
|
||||
* });
|
||||
* this.nav.present(picker);
|
||||
* }
|
||||
*
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
export class Picker extends ViewController {
|
||||
|
||||
constructor(opts: PickerOptions = {}) {
|
||||
opts.columns = opts.columns || [];
|
||||
opts.buttons = opts.buttons || [];
|
||||
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
|
||||
|
||||
super(PickerDisplayCmp, opts);
|
||||
@ -54,6 +40,20 @@ export class Picker extends ViewController {
|
||||
return this._nav && this._nav.config.get(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} button Picker toolbar button
|
||||
*/
|
||||
addButton(button: any) {
|
||||
this.data.buttons.push(button);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} button Picker toolbar button
|
||||
*/
|
||||
addColumn(column: PickerColumn) {
|
||||
this.data.columns.push(column);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} cssClass CSS class name to add to the picker's outer wrapper.
|
||||
*/
|
||||
@ -68,95 +68,140 @@ export class Picker extends ViewController {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Component({
|
||||
selector: '.picker-column',
|
||||
selector: '.picker-col',
|
||||
template:
|
||||
'<div class="picker-offset">' +
|
||||
'<div *ngIf="col.prefix" class="picker-prefix">{{col.prefix}}</div>' +
|
||||
'<div class="picker-options" #colEle>' +
|
||||
'<div *ngFor="#o of col.options" class="picker-option">' +
|
||||
'{{o.text}}' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div *ngIf="col.suffix" class="picker-suffix">{{col.suffix}}</div>' +
|
||||
'</div>',
|
||||
'<div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>' +
|
||||
'<div class="picker-opts" #colEle [style.width]="col.optionsWidth">' +
|
||||
'<button *ngFor="#o of col.options; #i=index" (click)="optClick($event, i)" type="button" category="picker-opt">' +
|
||||
'{{o.text}}' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'<div *ngIf="col.suffix" class="picker-suffix" [style.width]="col.suffixWidth">{{col.suffix}}</div>',
|
||||
host: {
|
||||
'[style.flex]': 'col.flex',
|
||||
'[style.min-width]': 'col.columnWidth',
|
||||
'[class.picker-opts-left]': 'col.align=="left"',
|
||||
'[class.picker-opts-right]': 'col.align=="right"',
|
||||
'(touchstart)': 'pointerStart($event)',
|
||||
'(touchmove)': 'pointerMove($event)',
|
||||
'(touchend)': 'pointerEnd($event)',
|
||||
'(mousedown)': 'pointerStart($event)',
|
||||
'(mousemove)': 'pointerMove($event)',
|
||||
'(mouseup)': 'pointerEnd($event)',
|
||||
'(body:mouseup)': 'pointerEnd($event)',
|
||||
'(body:mouseout)': 'mouseOut($event)',
|
||||
}
|
||||
})
|
||||
class PickerColumnCmp {
|
||||
@ViewChild('colEle') colEle: ElementRef;
|
||||
@Input() col: PickerColumn;
|
||||
y: number;
|
||||
y: number = 0;
|
||||
colHeight: number;
|
||||
optHeight: number;
|
||||
velocity: number;
|
||||
pos: number[] = [];
|
||||
scrollingDown: boolean;
|
||||
msPrv: number = 0;
|
||||
startY: number = null;
|
||||
rafId: number;
|
||||
bounceFrom: number;
|
||||
maxY: number;
|
||||
rotateFactor: number;
|
||||
|
||||
constructor(config: Config) {
|
||||
this.rotateFactor = config.getNumber('pickerRotateFactor', 0);
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// get the scrollable element within the column
|
||||
let colEle: HTMLElement = this.colEle.nativeElement;
|
||||
|
||||
this.colHeight = colEle.clientHeight;
|
||||
|
||||
// get the height of one option
|
||||
this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0);
|
||||
|
||||
this.setY(0, true);
|
||||
// set the scroll position for the selected option
|
||||
let selectedIndex = this.col.options.indexOf(this.col.selected);
|
||||
this.setSelected(selectedIndex, 0);
|
||||
}
|
||||
|
||||
pointerStart(ev) {
|
||||
console.debug('picker, pointerStart', ev.type, this.startY);
|
||||
|
||||
if (this.isPrevented(ev)) {
|
||||
// do not both with mouse events if a touch event already fired
|
||||
return;
|
||||
}
|
||||
|
||||
// cancel any previous raf's that haven't fired yet
|
||||
cancelRaf(this.rafId);
|
||||
|
||||
// remember where the pointer started from`
|
||||
this.startY = pointerCoord(ev).y;
|
||||
|
||||
// reset everything
|
||||
this.velocity = 0;
|
||||
this.pos.length = 0;
|
||||
this.pos.push(this.startY, Date.now());
|
||||
|
||||
console.debug('picker, pointerStart', ev.type, this.startY);
|
||||
this.maxY = (this.optHeight * (this.col.options.length - 1)) * -1;
|
||||
}
|
||||
|
||||
pointerMove(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
if (this.startY !== null) {
|
||||
if (this.isPrevented(ev)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let currentY = pointerCoord(ev).y;
|
||||
console.debug('picker, pointerMove', ev.type, currentY);
|
||||
|
||||
var currentY = pointerCoord(ev).y;
|
||||
this.pos.push(currentY, Date.now());
|
||||
this.setY(this.startY + currentY, false);
|
||||
|
||||
// update the scroll position relative to pointer start position
|
||||
var y = this.y + (currentY - this.startY);
|
||||
|
||||
if (y > 0) {
|
||||
// scrolling up higher than scroll area
|
||||
y = Math.pow(y, 0.8);
|
||||
this.bounceFrom = y;
|
||||
|
||||
} else if (y < this.maxY) {
|
||||
// scrolling down below scroll area
|
||||
y = y + Math.pow(this.maxY - y, 0.9);
|
||||
this.bounceFrom = y;
|
||||
|
||||
} else {
|
||||
this.bounceFrom = 0;
|
||||
}
|
||||
|
||||
this.update(y, 0, false);
|
||||
}
|
||||
}
|
||||
|
||||
pointerEnd(ev) {
|
||||
if (this.startY !== null) {
|
||||
if (this.isPrevented(ev)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isPrevented(ev)) {
|
||||
return;
|
||||
}
|
||||
this.velocity = 0;
|
||||
|
||||
if (this.bounceFrom > 0) {
|
||||
// bounce back up
|
||||
this.update(0, 100, true);
|
||||
|
||||
} else if (this.bounceFrom < 0) {
|
||||
// bounce back down
|
||||
this.update(this.maxY, 100, true);
|
||||
|
||||
} else if (this.startY !== null) {
|
||||
var endY = pointerCoord(ev).y;
|
||||
|
||||
console.debug('picker, pointerEnd', ev.type, endY);
|
||||
|
||||
this.pos.push(endY, Date.now());
|
||||
this.velocity = 0;
|
||||
this.scrollingDown = (endY < this.startY);
|
||||
|
||||
var endPos = (this.pos.length - 1);
|
||||
var startPos = endPos;
|
||||
@ -176,45 +221,135 @@ class PickerColumnCmp {
|
||||
this.velocity = ((movedTop / timeOffset) * FRAME_MS);
|
||||
}
|
||||
|
||||
this.setY(this.startY + endY, true);
|
||||
if (Math.abs(endY - this.startY) > 3) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
this.decelerate();
|
||||
var y = this.y + (endY - this.startY);
|
||||
this.update(y, 0, true);
|
||||
}
|
||||
|
||||
this.startY = null;
|
||||
}
|
||||
|
||||
this.startY = null;
|
||||
this.decelerate();
|
||||
}
|
||||
|
||||
mouseOut(ev) {
|
||||
if (ev.target.classList.contains('picker-col')) {
|
||||
this.pointerEnd(ev);
|
||||
}
|
||||
}
|
||||
|
||||
decelerate() {
|
||||
var self = this;
|
||||
var y = 0;
|
||||
cancelRaf(this.rafId);
|
||||
|
||||
if (self.velocity) {
|
||||
self.velocity *= DECELERATION_FRICTION;
|
||||
console.log(`decelerate velocity ${self.velocity}`);
|
||||
if (isNaN(this.y) || !this.optHeight) {
|
||||
// fallback in case numbers get outta wack
|
||||
this.update(y, 0, true);
|
||||
|
||||
var y = self.y + self.velocity;
|
||||
self.setY(y, true);
|
||||
} else if (Math.abs(this.velocity) > 0) {
|
||||
// still decelerating
|
||||
this.velocity *= DECELERATION_FRICTION;
|
||||
|
||||
raf(self.decelerate.bind(self));
|
||||
// do not let it go slower than a velocity of 1
|
||||
this.velocity = (this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1));
|
||||
|
||||
} else if (self.y % this.optHeight !== 0) {
|
||||
y = Math.round(this.y - this.velocity);
|
||||
|
||||
self.y = self.y + (this.scrollingDown ? -1 : 1);
|
||||
if (y > 0) {
|
||||
// whoops, it's trying to scroll up farther than the options we have!
|
||||
y = 0;
|
||||
this.velocity = 0;
|
||||
|
||||
console.log(`lock in ${self.y}`);
|
||||
} else if (y < this.maxY) {
|
||||
// gahh, it's trying to scroll down farther than we can!
|
||||
y = this.maxY;
|
||||
this.velocity = 0;
|
||||
}
|
||||
|
||||
self.setY(self.y, true);
|
||||
console.log(`decelerate y: ${y}, velocity: ${this.velocity}, optHeight: ${this.optHeight}`);
|
||||
|
||||
raf(self.decelerate.bind(self));
|
||||
this.update(y, 0, true);
|
||||
|
||||
if (y % this.optHeight !== 0 || Math.abs(this.velocity) > 1) {
|
||||
// isn't locked in yet, keep decelerating until it is
|
||||
this.rafId = nativeRaf(this.decelerate.bind(this));
|
||||
}
|
||||
|
||||
} else if (this.y % this.optHeight !== 0) {
|
||||
// needs to still get locked into a position so options line up
|
||||
var currentPos = Math.abs(this.y % this.optHeight);
|
||||
|
||||
// create a velocity in the direction it needs to scroll
|
||||
this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1);
|
||||
|
||||
this.decelerate();
|
||||
}
|
||||
}
|
||||
|
||||
setY(yOffset: number, saveY: boolean) {
|
||||
let y = yOffset + this.y;
|
||||
optClick(ev, index: number) {
|
||||
if (!this.velocity) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
console.log(`y: ${y}, yOffset: ${yOffset}, colHeight: ${this.colHeight}, optHeight: ${this.optHeight}`);
|
||||
this.setSelected(index, 150);
|
||||
}
|
||||
}
|
||||
|
||||
let colEleStyle = this.colEle.nativeElement.style;
|
||||
colEleStyle[CSS.transform] = `translate3d(0px,${y}px,0px)`;
|
||||
setSelected(selectedIndex: number, duration: number) {
|
||||
// if there is a selected index, then figure out it's y position
|
||||
// if there isn't a selected index, then just use the top y position
|
||||
let y = (selectedIndex > -1) ? ((selectedIndex * this.optHeight) * -1) : 0;
|
||||
|
||||
cancelRaf(this.rafId);
|
||||
this.velocity = 0;
|
||||
|
||||
// so what y position we're at
|
||||
this.update(y, duration, true);
|
||||
}
|
||||
|
||||
update(y: number, duration: number, saveY: boolean) {
|
||||
// ensure we've got a good round number :)
|
||||
y = Math.round(y);
|
||||
|
||||
let selectedIndex = Math.abs(Math.round(y / this.optHeight));
|
||||
|
||||
this.col.selected = this.col.options[selectedIndex];
|
||||
|
||||
let colEle: HTMLElement = this.colEle.nativeElement;
|
||||
let optElements: any = colEle.querySelectorAll('.picker-opt');
|
||||
|
||||
for (var i = 0; i < optElements.length; i++) {
|
||||
var optEle: HTMLElement = optElements[i];
|
||||
var optTop = (i * this.optHeight);
|
||||
var optOffset = (optTop + y);
|
||||
|
||||
var rotateX = (optOffset * this.rotateFactor);
|
||||
var translateX = 0;
|
||||
var translateY = 0;
|
||||
var translateZ = 0;
|
||||
|
||||
if (this.rotateFactor !== 0) {
|
||||
translateX = 10;
|
||||
translateZ = 90;
|
||||
if (rotateX > 90 || rotateX < -90) {
|
||||
translateX = -9999;
|
||||
rotateX = 0;
|
||||
}
|
||||
|
||||
} else {
|
||||
translateY = optOffset;
|
||||
}
|
||||
|
||||
optEle.style[CSS.transform] = `rotateX(${rotateX}deg) translate3d(${translateX}px,${translateY}px,${translateZ}px)`;
|
||||
|
||||
optEle.style[CSS.transitionDuration] = (duration > 0 ? duration + 'ms' : '');
|
||||
|
||||
optEle.classList[i === selectedIndex ? 'add' : 'remove']('picker-opt-selected');
|
||||
|
||||
}
|
||||
|
||||
if (saveY) {
|
||||
this.y = y;
|
||||
@ -223,9 +358,12 @@ class PickerColumnCmp {
|
||||
|
||||
isPrevented(ev) {
|
||||
if (ev.type.indexOf('touch') > -1) {
|
||||
// this is a touch event, so prevent mouse events for a while
|
||||
this.msPrv = Date.now() + 2000;
|
||||
|
||||
} else if (this.msPrv > Date.now() && ev.type.indexOf('mouse') > -1) {
|
||||
// this is a mouse event, and a touch event already happend recently
|
||||
// prevent the calling method from continuing
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return true;
|
||||
@ -245,21 +383,21 @@ class PickerColumnCmp {
|
||||
'<div class="picker-wrapper">' +
|
||||
'<div class="picker-toolbar">' +
|
||||
'<div *ngFor="#b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">' +
|
||||
'<button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button">' +
|
||||
'<button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>' +
|
||||
'{{b.text}}' +
|
||||
'<ion-button-effect></ion-button-effect>' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="picker-columns">' +
|
||||
'<div *ngFor="#c of d.columns" [col]="c" class="picker-column"></div>' +
|
||||
'<div class="picker-above-highlight"></div>' +
|
||||
'<div *ngFor="#c of d.columns" [col]="c" class="picker-col"></div>' +
|
||||
'<div class="picker-below-highlight"></div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
host: {
|
||||
'role': 'dialog'
|
||||
},
|
||||
directives: [NgClass, NgIf, NgFor, PickerColumnCmp],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
directives: [PickerColumnCmp],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
class PickerDisplayCmp {
|
||||
@ -293,7 +431,7 @@ class PickerDisplayCmp {
|
||||
let data = this.d;
|
||||
|
||||
data.buttons = data.buttons.map(button => {
|
||||
if (typeof button === 'string') {
|
||||
if (isString(button)) {
|
||||
return { text: button };
|
||||
}
|
||||
if (button.role) {
|
||||
@ -302,10 +440,34 @@ class PickerDisplayCmp {
|
||||
return button;
|
||||
});
|
||||
|
||||
// clean up dat data
|
||||
data.columns = data.columns.map(column => {
|
||||
if (!column.flex) {
|
||||
column.flex = 1;
|
||||
if (!isPresent(column.columnWidth)) {
|
||||
column.columnWidth = (100 / data.columns.length) + '%';
|
||||
}
|
||||
if (!isPresent(column.options)) {
|
||||
column.options = [];
|
||||
}
|
||||
|
||||
column.options = column.options.map(inputOpt => {
|
||||
let opt: PickerColumnOption = {
|
||||
text: '',
|
||||
value: ''
|
||||
};
|
||||
|
||||
if (isPresent(inputOpt)) {
|
||||
if (isString(inputOpt) || isNumber(inputOpt)) {
|
||||
opt.text = inputOpt;
|
||||
opt.value = inputOpt;
|
||||
|
||||
} else {
|
||||
opt.text = isPresent(inputOpt.text) ? inputOpt.text : inputOpt.value;
|
||||
opt.value = isPresent(inputOpt.value) ? inputOpt.value : inputOpt.text;
|
||||
}
|
||||
}
|
||||
|
||||
return opt;
|
||||
});
|
||||
return column;
|
||||
});
|
||||
}
|
||||
@ -384,7 +546,7 @@ class PickerDisplayCmp {
|
||||
// return an object of all the values with the input name as the key
|
||||
let values = {};
|
||||
this.d.columns.forEach(col => {
|
||||
values[col.name] = col.value;
|
||||
values[col.name] = col.selected ? col.selected.value : null;
|
||||
});
|
||||
return values;
|
||||
}
|
||||
@ -404,19 +566,20 @@ export interface PickerOptions {
|
||||
|
||||
export interface PickerColumn {
|
||||
name?: string;
|
||||
value?: string;
|
||||
selected?: PickerColumnOption;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
options: PickerColumnOption[];
|
||||
flex?: number;
|
||||
cssClass?: string;
|
||||
columnWidth?: string;
|
||||
prefixWidth?: string;
|
||||
suffixWidth?: string;
|
||||
optionsWidth?: string;
|
||||
}
|
||||
|
||||
export interface PickerColumnOption {
|
||||
value?: string;
|
||||
text?: string;
|
||||
checked?: boolean;
|
||||
id?: string;
|
||||
value?: any;
|
||||
text?: any;
|
||||
}
|
||||
|
||||
|
||||
@ -458,7 +621,5 @@ Transition.register('picker-slide-out', PickerSlideOut);
|
||||
|
||||
|
||||
let pickerIds = -1;
|
||||
const MIN_VELOCITY_START_DECELERATION = 4;
|
||||
const MIN_VELOCITY_CONTINUE_DECELERATION = 0.12;
|
||||
const DECELERATION_FRICTION = 0.97;
|
||||
const FRAME_MS = (1000 / 60);
|
||||
|
||||
Reference in New Issue
Block a user