From 2be96f29b2b4d4ade7f48eb90e2246511dce0950 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Thu, 9 Jun 2016 13:35:03 -0500 Subject: [PATCH] * 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 --- src/components/action-sheet/action-sheet.ts | 18 ++++++------- src/components/alert/alert.ts | 28 +++++++++------------ src/components/loading/loading.ts | 7 ------ src/components/picker/picker.ts | 20 ++++++--------- src/components/popover/popover.ts | 11 +++----- src/components/toast/toast.ts | 15 ++++------- src/util/key.ts | 5 ++++ src/util/keyboard.ts | 3 ++- 8 files changed, 42 insertions(+), 65 deletions(-) create mode 100644 src/util/key.ts diff --git a/src/components/action-sheet/action-sheet.ts b/src/components/action-sheet/action-sheet.ts index ba834d9799..aa6e5abe5f 100644 --- a/src/components/action-sheet/action-sheet.ts +++ b/src/components/action-sheet/action-sheet.ts @@ -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 { return this._viewCtrl.dismiss(null, role); } - - isEnabled() { - let tm = this._config.getNumber('overlayCreatedDiff', 750); - return (this.created + tm < Date.now()); - } } export interface ActionSheetOptions { diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index d11efd4f5a..49c0a500d3 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -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 { diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts index 57ac6c48d7..1275d27678 100644 --- a/src/components/loading/loading.ts +++ b/src/components/loading/loading.ts @@ -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 { return this._viewCtrl.dismiss(null, role); } - - isEnabled() { - let tm = this._config.getNumber('overlayCreatedDiff', 750); - return (this.created + tm < Date.now()); - } } export interface LoadingOptions { diff --git a/src/components/picker/picker.ts b/src/components/picker/picker.ts index efd70f0976..c0ca56235f 100644 --- a/src/components/picker/picker.ts +++ b/src/components/picker/picker.ts @@ -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; 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 { diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index 1f4c498178..a759de98a5 100644 --- a/src/components/popover/popover.ts +++ b/src/components/popover/popover.ts @@ -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 { @@ -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 { diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index cf36d0906b..8e0bde408e 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -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 { diff --git a/src/util/key.ts b/src/util/key.ts new file mode 100644 index 0000000000..1af40604b0 --- /dev/null +++ b/src/util/key.ts @@ -0,0 +1,5 @@ +export enum Key { + ENTER = 13, + ESCAPE = 27, + TAB = 9 +}; diff --git a/src/util/keyboard.ts b/src/util/keyboard.ts index 7194bb3b21..bbdf869d9f 100644 --- a/src/util/keyboard.ts +++ b/src/util/keyboard.ts @@ -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(); }