* refactor(overlays): overlays now are enabled via ionViewDidEnter (#6811) closes #6753

overalys now are enabled via ionViewDidEnter

* style(overlays): fixed tslint error

fixed tslint error

* style(overlays): formatting

formatting

* refactor(overlays): minor refactor to match style

minor refactor to match style
This commit is contained in:
Dan Bucholtz
2016-06-09 13:35:03 -05:00
committed by GitHub
parent 7a3477b782
commit 2be96f29b2
8 changed files with 42 additions and 65 deletions

View File

@ -5,6 +5,7 @@ import {Transition, TransitionOptions} from '../../transitions/transition';
import {Config} from '../../config/config';
import {Icon} from '../icon/icon';
import {isPresent} from '../../util/util';
import {Key} from '../../util/key';
import {NavParams} from '../nav/nav-params';
import {ViewController} from '../nav/view-controller';
@ -244,9 +245,9 @@ export class ActionSheet extends ViewController {
class ActionSheetCmp {
private d: any;
private descId: string;
private enabled: boolean;
private hdrId: string;
private id: number;
private created: number;
constructor(
private _viewCtrl: ViewController,
@ -256,7 +257,6 @@ class ActionSheetCmp {
renderer: Renderer
) {
this.d = params.data;
this.created = Date.now();
if (this.d.cssClass) {
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
@ -315,12 +315,13 @@ class ActionSheetCmp {
if (focusableEle) {
focusableEle.focus();
}
this.enabled = true;
}
@HostListener('body:keyup', ['$event'])
private _keyUp(ev: KeyboardEvent) {
if (this.isEnabled() && this._viewCtrl.isLast()) {
if (ev.keyCode === 27) {
if (this.enabled && this._viewCtrl.isLast()) {
if (ev.keyCode === Key.ESCAPE) {
console.debug('actionsheet, escape button');
this.bdClick();
}
@ -328,7 +329,7 @@ class ActionSheetCmp {
}
click(button: any, dismissDelay?: number) {
if (!this.isEnabled()) {
if (! this.enabled ) {
return;
}
@ -350,7 +351,7 @@ class ActionSheetCmp {
}
bdClick() {
if (this.isEnabled() && this.d.enableBackdropDismiss) {
if (this.enabled && this.d.enableBackdropDismiss) {
if (this.d.cancelButton) {
this.click(this.d.cancelButton, 1);
@ -363,11 +364,6 @@ class ActionSheetCmp {
dismiss(role: any): Promise<any> {
return this._viewCtrl.dismiss(null, role);
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface ActionSheetOptions {

View File

@ -4,6 +4,7 @@ import {Animation} from '../../animations/animation';
import {Transition, TransitionOptions} from '../../transitions/transition';
import {Config} from '../../config/config';
import {isPresent} from '../../util/util';
import {Key} from '../../util/key';
import {NavParams} from '../nav/nav-params';
import {ViewController} from '../nav/view-controller';
@ -375,13 +376,13 @@ class AlertCmp {
inputs?: any[];
enableBackdropDismiss?: boolean;
};
private enabled: boolean;
private hdrId: string;
private id: number;
private subHdrId: string;
private msgId: string;
private inputType: string;
private created: number;
private lastClick: number;
private msgId: string;
private subHdrId: string;
constructor(
private _viewCtrl: ViewController,
@ -404,7 +405,6 @@ class AlertCmp {
this.subHdrId = 'alert-subhdr-' + this.id;
this.msgId = 'alert-msg-' + this.id;
this.activeId = '';
this.created = Date.now();
this.lastClick = 0;
if (this.d.message) {
@ -466,8 +466,8 @@ class AlertCmp {
@HostListener('body:keyup', ['$event'])
private _keyUp(ev: KeyboardEvent) {
if (this.isEnabled() && this._viewCtrl.isLast()) {
if (ev.keyCode === 13) {
if (this.enabled && this._viewCtrl.isLast()) {
if (ev.keyCode === Key.ENTER) {
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
@ -478,7 +478,7 @@ class AlertCmp {
this.btnClick(button);
}
} else if (ev.keyCode === 27) {
} else if (ev.keyCode === Key.ESCAPE) {
console.debug('alert, escape button');
this.bdClick();
}
@ -495,10 +495,11 @@ class AlertCmp {
if (focusableEle) {
focusableEle.focus();
}
this.enabled = true;
}
btnClick(button: any, dismissDelay?: number) {
if (!this.isEnabled()) {
if (!this.enabled) {
return;
}
@ -524,7 +525,7 @@ class AlertCmp {
}
rbClick(checkedInput: any) {
if (this.isEnabled()) {
if (this.enabled) {
this.d.inputs.forEach(input => {
input.checked = (checkedInput === input);
});
@ -533,13 +534,13 @@ class AlertCmp {
}
cbClick(checkedInput: any) {
if (this.isEnabled()) {
if (this.enabled) {
checkedInput.checked = !checkedInput.checked;
}
}
bdClick() {
if (this.isEnabled() && this.d.enableBackdropDismiss) {
if (this.enabled && this.d.enableBackdropDismiss) {
let cancelBtn = this.d.buttons.find(b => b.role === 'cancel');
if (cancelBtn) {
this.btnClick(cancelBtn, 1);
@ -576,11 +577,6 @@ class AlertCmp {
});
return values;
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface AlertOptions {

View File

@ -171,7 +171,6 @@ export class Loading extends ViewController {
class LoadingCmp {
private d: any;
private id: number;
private created: number;
private showSpinner: boolean;
constructor(
@ -182,7 +181,6 @@ class LoadingCmp {
renderer: Renderer
) {
this.d = params.data;
this.created = Date.now();
if (this.d.cssClass) {
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
@ -215,11 +213,6 @@ class LoadingCmp {
dismiss(role: any): Promise<any> {
return this._viewCtrl.dismiss(null, role);
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface LoadingOptions {

View File

@ -5,6 +5,7 @@ import {Animation} from '../../animations/animation';
import {Transition, TransitionOptions} from '../../transitions/transition';
import {Config} from '../../config/config';
import {isPresent, isString, isNumber, clamp} from '../../util/util';
import {Key} from '../../util/key';
import {NavParams} from '../nav/nav-params';
import {ViewController} from '../nav/view-controller';
import {raf, cancelRaf, CSS, pointerCoord} from '../../util/dom';
@ -459,7 +460,7 @@ class PickerColumnCmp {
class PickerDisplayCmp {
@ViewChildren(PickerColumnCmp) private _cols: QueryList<PickerColumnCmp>;
private d: PickerOptions;
private created: number;
private enabled: boolean;
private lastClick: number;
private id: number;
@ -479,7 +480,6 @@ class PickerDisplayCmp {
}
this.id = (++pickerIds);
this.created = Date.now();
this.lastClick = 0;
}
@ -544,8 +544,8 @@ class PickerDisplayCmp {
@HostListener('body:keyup', ['$event'])
private _keyUp(ev: KeyboardEvent) {
if (this.isEnabled() && this._viewCtrl.isLast()) {
if (ev.keyCode === 13) {
if (this.enabled && this._viewCtrl.isLast()) {
if (ev.keyCode === Key.ENTER) {
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
@ -556,7 +556,7 @@ class PickerDisplayCmp {
this.btnClick(button);
}
} else if (ev.keyCode === 27) {
} else if (ev.keyCode === Key.ESCAPE) {
console.debug('picker, escape button');
this.bdClick();
}
@ -573,10 +573,11 @@ class PickerDisplayCmp {
if (focusableEle) {
focusableEle.focus();
}
this.enabled = true;
}
btnClick(button: any, dismissDelay?: number) {
if (!this.isEnabled()) {
if (!this.enabled) {
return;
}
@ -602,7 +603,7 @@ class PickerDisplayCmp {
}
bdClick() {
if (this.isEnabled() && this.d.enableBackdropDismiss) {
if (this.enabled && this.d.enableBackdropDismiss) {
this.dismiss('backdrop');
}
}
@ -623,11 +624,6 @@ class PickerDisplayCmp {
});
return selected;
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface PickerOptions {

View File

@ -170,8 +170,8 @@ class PopoverCmp {
@ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef;
private d: any;
private enabled: boolean;
private id: number;
private created: number;
private showSpinner: boolean;
constructor(
@ -183,7 +183,6 @@ class PopoverCmp {
private _viewCtrl: ViewController
) {
this.d = _navParams.data.opts;
this.created = Date.now();
if (this.d.cssClass) {
_renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
@ -210,6 +209,7 @@ class PopoverCmp {
if (document.activeElement) {
activeElement.blur();
}
this.enabled = true;
}
dismiss(role: any): Promise<any> {
@ -222,15 +222,10 @@ class PopoverCmp {
}
bdClick() {
if (this.isEnabled() && this.d.enableBackdropDismiss) {
if (this.enabled && this.d.enableBackdropDismiss) {
this.dismiss('backdrop');
}
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface PopoverOptions {

View File

@ -161,10 +161,10 @@ const TOAST_POSITION_BOTTOM: string = 'bottom';
class ToastCmp implements AfterViewInit {
private d: any;
private descId: string;
private hdrId: string;
private created: number;
private id: number;
private dismissTimeout: number = undefined;
private enabled: boolean;
private hdrId: string;
private id: number;
constructor(
private _nav: NavController,
@ -176,7 +176,6 @@ class ToastCmp implements AfterViewInit {
) {
this.d = params.data;
this.created = Date.now();
if (this.d.cssClass) {
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
@ -209,10 +208,11 @@ class ToastCmp implements AfterViewInit {
if (focusableEle) {
focusableEle.focus();
}
this.enabled = true;
}
cbClick() {
if (this.isEnabled()) {
if (this.enabled) {
this.dismiss('close');
}
}
@ -223,11 +223,6 @@ class ToastCmp implements AfterViewInit {
return this._viewCtrl.dismiss(null, role);
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface ToastOptions {

5
src/util/key.ts Normal file
View File

@ -0,0 +1,5 @@
export enum Key {
ENTER = <any> 13,
ESCAPE = <any> 27,
TAB = <any> 9
};

View File

@ -3,6 +3,7 @@ import {Injectable, NgZone} from '@angular/core';
import {Config} from '../config/config';
import {Form} from './form';
import {hasFocusedTextInput, nativeRaf, rafFrames, nativeTimeout} from './dom';
import {Key} from './key';
/**
* @name Keyboard
@ -152,7 +153,7 @@ export class Keyboard {
// default is to add the focus-outline when the tab key is used
function keyDown(ev: KeyboardEvent) {
if (!isKeyInputEnabled && ev.keyCode === 9) {
if (!isKeyInputEnabled && ev.keyCode === Key.TAB) {
isKeyInputEnabled = true;
enableKeyInput();
}