mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
feat(picker): init picker
This commit is contained in:
Adam Bradley
464
ionic/components/picker/picker.ts
Normal file
464
ionic/components/picker/picker.ts
Normal file
@ -0,0 +1,464 @@
|
||||
import {Component, ElementRef, Input, ViewChild, Renderer, HostListener, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
|
||||
import {NgClass, NgIf, NgFor} from 'angular2/common';
|
||||
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {Transition, TransitionOptions} from '../../transitions/transition';
|
||||
import {Config} from '../../config/config';
|
||||
import {isPresent} from '../../util/util';
|
||||
import {NavParams} from '../nav/nav-params';
|
||||
import {ViewController} from '../nav/view-controller';
|
||||
import {raf, 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.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
|
||||
|
||||
super(PickerDisplayCmp, opts);
|
||||
this.viewType = 'picker';
|
||||
this.isOverlay = true;
|
||||
|
||||
// by default, pickers should not fire lifecycle events of other views
|
||||
// for example, when an picker enters, the current active view should
|
||||
// not fire its lifecycle events because it's not conceptually leaving
|
||||
this.fireOtherLifecycles = false;
|
||||
this.usePortal = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getTransitionName(direction: string) {
|
||||
let key = (direction === 'back' ? 'pickerLeave' : 'pickerEnter');
|
||||
return this._nav && this._nav.config.get(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} cssClass CSS class name to add to the picker's outer wrapper.
|
||||
*/
|
||||
setCssClass(cssClass: string) {
|
||||
this.data.cssClass = cssClass;
|
||||
}
|
||||
|
||||
static create(opts: PickerOptions = {}) {
|
||||
return new Picker(opts);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Component({
|
||||
selector: '.picker-column',
|
||||
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>',
|
||||
host: {
|
||||
'[style.flex]': 'col.flex',
|
||||
'(touchstart)': 'pointerStart($event)',
|
||||
'(touchmove)': 'pointerMove($event)',
|
||||
'(touchend)': 'pointerEnd($event)',
|
||||
'(mousedown)': 'pointerStart($event)',
|
||||
'(mousemove)': 'pointerMove($event)',
|
||||
'(mouseup)': 'pointerEnd($event)',
|
||||
}
|
||||
})
|
||||
class PickerColumnCmp {
|
||||
@ViewChild('colEle') colEle: ElementRef;
|
||||
@Input() col: PickerColumn;
|
||||
y: number;
|
||||
colHeight: number;
|
||||
optHeight: number;
|
||||
velocity: number;
|
||||
pos: number[] = [];
|
||||
scrollingDown: boolean;
|
||||
msPrv: number = 0;
|
||||
startY: number = null;
|
||||
|
||||
ngAfterViewInit() {
|
||||
let colEle: HTMLElement = this.colEle.nativeElement;
|
||||
|
||||
this.colHeight = colEle.clientHeight;
|
||||
this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0);
|
||||
|
||||
this.setY(0, true);
|
||||
}
|
||||
|
||||
pointerStart(ev) {
|
||||
if (this.isPrevented(ev)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.startY = pointerCoord(ev).y;
|
||||
|
||||
this.velocity = 0;
|
||||
this.pos.length = 0;
|
||||
this.pos.push(this.startY, Date.now());
|
||||
|
||||
console.debug('picker, pointerStart', ev.type, this.startY);
|
||||
}
|
||||
|
||||
pointerMove(ev) {
|
||||
if (this.startY !== null) {
|
||||
if (this.isPrevented(ev)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let currentY = pointerCoord(ev).y;
|
||||
console.debug('picker, pointerMove', ev.type, currentY);
|
||||
|
||||
this.pos.push(currentY, Date.now());
|
||||
this.setY(this.startY + currentY, false);
|
||||
}
|
||||
}
|
||||
|
||||
pointerEnd(ev) {
|
||||
if (this.startY !== null) {
|
||||
|
||||
if (this.isPrevented(ev)) {
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
var timeRange = (Date.now() - 100);
|
||||
|
||||
// move pointer to position measured 100ms ago
|
||||
for (var i = endPos; i > 0 && this.pos[i] > timeRange; i -= 2) {
|
||||
startPos = i;
|
||||
}
|
||||
|
||||
if (startPos !== endPos) {
|
||||
// compute relative movement between these two points
|
||||
var timeOffset = (this.pos[endPos] - this.pos[startPos]);
|
||||
var movedTop = (this.pos[startPos - 1] - this.pos[endPos - 1]);
|
||||
|
||||
// based on XXms compute the movement to apply for each render step
|
||||
this.velocity = ((movedTop / timeOffset) * FRAME_MS);
|
||||
}
|
||||
|
||||
this.setY(this.startY + endY, true);
|
||||
|
||||
this.decelerate();
|
||||
|
||||
this.startY = null;
|
||||
}
|
||||
}
|
||||
|
||||
decelerate() {
|
||||
var self = this;
|
||||
|
||||
if (self.velocity) {
|
||||
self.velocity *= DECELERATION_FRICTION;
|
||||
console.log(`decelerate velocity ${self.velocity}`);
|
||||
|
||||
var y = self.y + self.velocity;
|
||||
self.setY(y, true);
|
||||
|
||||
raf(self.decelerate.bind(self));
|
||||
|
||||
} else if (self.y % this.optHeight !== 0) {
|
||||
|
||||
self.y = self.y + (this.scrollingDown ? -1 : 1);
|
||||
|
||||
console.log(`lock in ${self.y}`);
|
||||
|
||||
self.setY(self.y, true);
|
||||
|
||||
raf(self.decelerate.bind(self));
|
||||
}
|
||||
}
|
||||
|
||||
setY(yOffset: number, saveY: boolean) {
|
||||
let y = yOffset + this.y;
|
||||
|
||||
console.log(`y: ${y}, yOffset: ${yOffset}, colHeight: ${this.colHeight}, optHeight: ${this.optHeight}`);
|
||||
|
||||
let colEleStyle = this.colEle.nativeElement.style;
|
||||
colEleStyle[CSS.transform] = `translate3d(0px,${y}px,0px)`;
|
||||
|
||||
if (saveY) {
|
||||
this.y = y;
|
||||
}
|
||||
}
|
||||
|
||||
isPrevented(ev) {
|
||||
if (ev.type.indexOf('touch') > -1) {
|
||||
this.msPrv = Date.now() + 2000;
|
||||
|
||||
} else if (this.msPrv > Date.now() && ev.type.indexOf('mouse') > -1) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-picker-cmp',
|
||||
template:
|
||||
'<div (click)="bdClick()" tappable disable-activated class="backdrop" role="presentation"></div>' +
|
||||
'<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">' +
|
||||
'{{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>' +
|
||||
'</div>',
|
||||
host: {
|
||||
'role': 'dialog'
|
||||
},
|
||||
directives: [NgClass, NgIf, NgFor, PickerColumnCmp],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
class PickerDisplayCmp {
|
||||
private d: PickerOptions;
|
||||
private created: number;
|
||||
private lastClick: number;
|
||||
private id: number;
|
||||
|
||||
constructor(
|
||||
private _viewCtrl: ViewController,
|
||||
private _elementRef: ElementRef,
|
||||
private _config: Config,
|
||||
params: NavParams,
|
||||
renderer: Renderer
|
||||
) {
|
||||
this.d = params.data;
|
||||
|
||||
if (this.d.cssClass) {
|
||||
this.d.cssClass.split(' ').forEach(cssClass => {
|
||||
renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
|
||||
});
|
||||
}
|
||||
|
||||
this.id = (++pickerIds);
|
||||
this.created = Date.now();
|
||||
this.lastClick = 0;
|
||||
}
|
||||
|
||||
onPageLoaded() {
|
||||
// normalize the data
|
||||
let data = this.d;
|
||||
|
||||
data.buttons = data.buttons.map(button => {
|
||||
if (typeof button === 'string') {
|
||||
return { text: button };
|
||||
}
|
||||
if (button.role) {
|
||||
button.cssRole = `picker-toolbar-${button.role}`;
|
||||
}
|
||||
return button;
|
||||
});
|
||||
|
||||
data.columns = data.columns.map(column => {
|
||||
if (!column.flex) {
|
||||
column.flex = 1;
|
||||
}
|
||||
return column;
|
||||
});
|
||||
}
|
||||
|
||||
@HostListener('body:keyup', ['$event'])
|
||||
private _keyUp(ev: KeyboardEvent) {
|
||||
if (this.isEnabled() && this._viewCtrl.isLast()) {
|
||||
if (ev.keyCode === 13) {
|
||||
if (this.lastClick + 1000 < Date.now()) {
|
||||
// do not fire this click if there recently was already a click
|
||||
// this can happen when the button has focus and used the enter
|
||||
// key to click the button. However, both the click handler and
|
||||
// this keyup event will fire, so only allow one of them to go.
|
||||
console.debug('picker, enter button');
|
||||
let button = this.d.buttons[this.d.buttons.length - 1];
|
||||
this.btnClick(button);
|
||||
}
|
||||
|
||||
} else if (ev.keyCode === 27) {
|
||||
console.debug('picker, escape button');
|
||||
this.bdClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPageDidEnter() {
|
||||
let activeElement: any = document.activeElement;
|
||||
if (activeElement) {
|
||||
activeElement.blur();
|
||||
}
|
||||
|
||||
let focusableEle = this._elementRef.nativeElement.querySelector('button');
|
||||
if (focusableEle) {
|
||||
focusableEle.focus();
|
||||
}
|
||||
}
|
||||
|
||||
btnClick(button, dismissDelay?) {
|
||||
if (!this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// keep the time of the most recent button click
|
||||
this.lastClick = Date.now();
|
||||
|
||||
let shouldDismiss = true;
|
||||
|
||||
if (button.handler) {
|
||||
// a handler has been provided, execute it
|
||||
// pass the handler the values from the inputs
|
||||
if (button.handler(this.getValues()) === false) {
|
||||
// if the return value of the handler is false then do not dismiss
|
||||
shouldDismiss = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldDismiss) {
|
||||
setTimeout(() => {
|
||||
this.dismiss(button.role);
|
||||
}, dismissDelay || this._config.get('pageTransitionDelay'));
|
||||
}
|
||||
}
|
||||
|
||||
bdClick() {
|
||||
if (this.isEnabled() && this.d.enableBackdropDismiss) {
|
||||
this.dismiss('backdrop');
|
||||
}
|
||||
}
|
||||
|
||||
dismiss(role): Promise<any> {
|
||||
return this._viewCtrl.dismiss(this.getValues(), role);
|
||||
}
|
||||
|
||||
getValues() {
|
||||
// this is an alert with text inputs
|
||||
// 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;
|
||||
});
|
||||
return values;
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
let tm = this._config.getNumber('overlayCreatedDiff', 750);
|
||||
return (this.created + tm < Date.now());
|
||||
}
|
||||
}
|
||||
|
||||
export interface PickerOptions {
|
||||
buttons?: any[];
|
||||
columns?: PickerColumn[];
|
||||
cssClass?: string;
|
||||
enableBackdropDismiss?: boolean;
|
||||
}
|
||||
|
||||
export interface PickerColumn {
|
||||
name?: string;
|
||||
value?: string;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
options: PickerColumnOption[];
|
||||
flex?: number;
|
||||
cssClass?: string;
|
||||
}
|
||||
|
||||
export interface PickerColumnOption {
|
||||
value?: string;
|
||||
text?: string;
|
||||
checked?: boolean;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Animations for pickers
|
||||
*/
|
||||
class PickerSlideIn extends Transition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.picker-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.01, 0.26);
|
||||
wrapper.fromTo('translateY', '100%', '0%');
|
||||
|
||||
this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
|
||||
}
|
||||
}
|
||||
Transition.register('picker-slide-in', PickerSlideIn);
|
||||
|
||||
|
||||
class PickerSlideOut extends Transition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.picker-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.26, 0);
|
||||
wrapper.fromTo('translateY', '0%', '100%');
|
||||
|
||||
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
|
||||
}
|
||||
}
|
||||
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