feat(overlays): close overlay with back-button

ionic-team · Sep 3, 2018 · 4ccbefa · 4ccbefa
1 parent dfac9dc
commit 4ccbefa
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md
@@ -38,6 +38,7 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea
 
 | Method       | Description                   |
 | ------------ | ----------------------------- |
+| `goBack`     |                               |
 | `navChanged` |                               |
 | `printDebug` |                               |
 | `push`       | Navigate to the specified URL |

diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
@@ -41,7 +41,7 @@ export type ComponentRef = Function | HTMLElement | string;
 export type ComponentProps<T = null> = T extends ComponentTags ? StencilIntrinsicElements[T] : {[key: string]: any};
 export type CssClassMap = { [className: string]: boolean };
 export type BackButtonEvent = CustomEvent<{
-  register(priority: number, handler: () => Promise<void> | void): void;
+  register(priority: number, handler: () => Promise<any> | void): void;
 }>
 
 declare global {

diff --git a/core/src/utils/hardware-back-button.ts b/core/src/utils/hardware-back-button.ts
@@ -1,6 +1,6 @@
 import { BackButtonEvent } from '../interface';
 
-type Handler = () => Promise<void> | void;
+type Handler = () => Promise<any> | void;
 
 interface HandlerRegister {
   priority: number;

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -1,4 +1,4 @@
-import { AnimationBuilder, HTMLIonOverlayElement, IonicConfig, OverlayInterface } from '../interface';
+import { AnimationBuilder, HTMLIonOverlayElement, IonicConfig, OverlayInterface, BackButtonEvent } from '../interface';
 
 let lastId = 0;
 
@@ -19,19 +19,28 @@ export function createOverlay<T extends HTMLIonOverlayElement>(element: T, opts:
   // append the overlay element to the document body
   getAppRoot(doc).appendChild(element);
 
+  doc.body.addEventListener('ionBackButton', ev => {
+    (ev as BackButtonEvent).detail.register(100, () => closeTopOverlay(doc));
+  });
+
   doc.body.addEventListener('keyup', ev => {
     if (ev.key === 'Escape') {
-      const lastOverlay = getOverlay(doc);
-      if (lastOverlay && lastOverlay.backdropDismiss) {
-        // tslint:disable-next-line:no-floating-promises
-        lastOverlay.dismiss(null, BACKDROP);
-      }
+      // tslint:disable-next-line:no-floating-promises
+      closeTopOverlay(doc);
     }
   });
 
   return element.componentOnReady();
 }
 
+function closeTopOverlay(doc: Document) {
+  const lastOverlay = getOverlay(doc);
+  if (lastOverlay && lastOverlay.backdropDismiss) {
+    return lastOverlay.dismiss(null, BACKDROP);
+  }
+  return Promise.resolve();
+}
+
 export function connectListeners(doc: Document) {
   if (lastId === 0) {
     lastId = 1;