feat: add closeDrawerOn property to handle navigation (#184)

Fixes vaadin/vaadin-app-layout#140

Author: Artur-

packages/vaadin-app-layout/src/vaadin-app-layout.d.ts

@@ -17,7 +17,6 @@ export type AppLayoutOverlayChanged = CustomEvent<{ value: boolean }>;
  */
 export type AppLayoutPrimarySectionChanged = CustomEvent<{ value: 'navbar' | 'drawer' }>;
 
-
 export interface AppLayoutElementEventMap {
   'drawer-opened-changed': AppLayoutDrawerOpenedChanged;
 
@@ -94,6 +93,7 @@ export type AppLayoutEventMap = HTMLElementEventMap & AppLayoutElementEventMap;
  * ### Navigation
  *
  * As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
+ * If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.
  *
  * In order to do so, there are two options:
  * - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
@@ -139,6 +139,14 @@ declare class AppLayoutElement extends ElementMixin(ThemableMixin(HTMLElement))
    */
   readonly overlay: boolean;
 
+  /**
+   * A global event that causes the drawer to close (be hidden) when it is in overlay mode.
+   * - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
+   *
+   * @attr {string} close-drawer-on
+   */
+  closeDrawerOn: string;
+
   /**
    * Helper static method that dispatches a `close-overlay-drawer` event
    */

packages/vaadin-app-layout/src/vaadin-app-layout.js

@@ -77,6 +77,7 @@ import './detect-ios-navbar.js';
  * ### Navigation
  *
  * As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
+ * If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.
  *
  * In order to do so, there are two options:
  * - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
@@ -349,6 +350,19 @@ class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         readOnly: true,
         value: false,
         reflectToAttribute: true
+      },
+
+      /**
+       * A global event that causes the drawer to close (be hidden) when it is in overlay mode.
+       * - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
+       *
+       * @attr {string} close-drawer-on
+       * @type {string}
+       */
+      closeDrawerOn: {
+        type: String,
+        value: 'vaadin-router-location-changed',
+        observer: '_closeDrawerOnChanged'
       }
     };
   }
@@ -530,6 +544,16 @@ class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     // TODO(jouni): ARIA attributes. The drawer should act similar to a modal dialog when in ”overlay” mode
   }
 
+  /** @private */
+  _closeDrawerOnChanged(closeDrawerOn, oldCloseDrawerOn) {
+    if (oldCloseDrawerOn) {
+      window.removeEventListener(oldCloseDrawerOn, this.__closeOverlayDrawerListener);
+    }
+    if (closeDrawerOn) {
+      window.addEventListener(closeDrawerOn, this.__closeOverlayDrawerListener);
+    }
+  }
+
   /** @protected */
   _close() {
     this.drawerOpened = false;

packages/vaadin-app-layout/test/app-layout.test.js

@@ -157,6 +157,12 @@ describe('vaadin-app-layout', () => {
       expect(drawer.hasAttribute('hidden')).to.be.true;
     });
 
+    it('should not close on navigation event when not in overlay mode', () => {
+      layout.drawerOpened = true;
+      window.dispatchEvent(new CustomEvent('vaadin-router-location-changed'));
+      expect(layout.drawerOpened).to.be.true;
+    });
+
     describe('overlay mode', () => {
       beforeEach(() => {
         // force overlay=true to show backdrop
@@ -208,6 +214,21 @@ describe('vaadin-app-layout', () => {
         layout._updateOverlayMode();
         expect(layout.drawerOpened).to.be.true;
       });
+
+      it('should close on navigation event when in overlay mode', () => {
+        layout.drawerOpened = true;
+        window.dispatchEvent(new CustomEvent('vaadin-router-location-changed'));
+        expect(layout.drawerOpened).to.be.false;
+      });
+
+      it('should only close on custom navigation event when in overlay mode', () => {
+        layout.drawerOpened = true;
+        layout.closeDrawerOn = 'foo-bar';
+        window.dispatchEvent(new CustomEvent('vaadin-router-location-changed'));
+        expect(layout.drawerOpened).to.be.true;
+        window.dispatchEvent(new CustomEvent('foo-bar'));
+        expect(layout.drawerOpened).to.be.false;
+      });
     });
   });
 });