* 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

@@ -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 (this.enabled && this._viewCtrl.isLast()) {
-      if (ev.keyCode === 27) {
+      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 {

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 (this.enabled && this._viewCtrl.isLast()) {
-      if (ev.keyCode === 13) {
+      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 {

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<any> {
     return this._viewCtrl.dismiss(null, role);
   }
-
-  isEnabled() {
-    let tm = this._config.getNumber('overlayCreatedDiff', 750);
-    return (this.created + tm < Date.now());
-  }
 }
 
 export interface LoadingOptions {

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<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 (this.enabled && this._viewCtrl.isLast()) {
-      if (ev.keyCode === 13) {
+      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 {

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<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 {

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 {

src/util/key.ts

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

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