Added overlay when Global Search is open (#6876)

* WIP * Overlay is present when global search is open * Update the header state for handling overlay show/hide logic (#6907) * Update the header state for the overlay * Fix linter error Co-authored-by: Ans <[email protected]>
cfpb · Feb 28, 2022 · 81f62d3 · 81f62d3
1 parent a562242
commit 81f62d3
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 8 deletions.
diff --git a/cfgov/unprocessed/js/molecules/GlobalSearch.js b/cfgov/unprocessed/js/molecules/GlobalSearch.js
@@ -72,15 +72,17 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
     const clearableInput = new ClearableInput( inputContainsLabel );
     clearableInput.init();
     const handleExpandBeginBinded = _handleExpandBegin.bind( this );
+    const handleCollapseEndBinded = _handleCollapseEnd.bind( this );
+
     _flyoutMenu.addEventListener( 'expandBegin', handleExpandBeginBinded );
     _flyoutMenu.addEventListener( 'collapseBegin', _handleCollapseBegin );
-    _flyoutMenu.addEventListener( 'collapseEnd', _handleCollapseEnd );
+    _flyoutMenu.addEventListener( 'collapseEnd', handleCollapseEndBinded );
 
     _tabTrigger.init();
     _tabTrigger.addEventListener( 'tabPressed', _handleTabPress );
 
     // Set initial collapse state.
-    _handleCollapseEnd();
+    handleCollapseEndBinded();
 
     return this;
   }
@@ -166,6 +168,7 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
    * Use this to perform post-collapseEnd actions.
    */
   function _handleCollapseEnd() {
+    this.dispatchEvent( 'collapseEnd', { target: this } );
 
     /* TODO: When tabbing is used to collapse the search flyout
        it will not animate with the below line.

diff --git a/cfgov/unprocessed/js/organisms/Header.js b/cfgov/unprocessed/js/organisms/Header.js
@@ -23,6 +23,8 @@ function Header( element ) {
   let _globalSearch;
   let _megaMenu;
   let _overlay;
+  let _menuOpen = false;
+  let _searchOpen = false;
 
   /**
    * @param {HTMLNode} overlay
@@ -44,10 +46,12 @@ function Header( element ) {
       _megaMenu = new MegaMenu( _dom );
       _megaMenu.addEventListener( 'rootExpandBegin', _megaMenuExpandBegin );
       _megaMenu.addEventListener( 'rootCollapseEnd', _megaMenuCollapseEnd );
-      _megaMenu.init();
 
       // If we have a mega menu, it needs to be collapsed when search is expanded.
-      _globalSearch.addEventListener( 'expandBegin', _megaMenu.collapse );
+      _globalSearch.addEventListener( 'expandBegin', _globalSearchExpandBegin );
+      _globalSearch.addEventListener( 'collapseEnd', _globalSearchCollapseEnd );
+
+      _megaMenu.init();
     }
 
     _globalSearch.init();
@@ -57,21 +61,68 @@ function Header( element ) {
 
   /**
    * Handler for when the mega menu begins expansion.
-   * Collapse the global search.
    */
   function _megaMenuExpandBegin() {
+    // Update state.
+    _menuOpen = true;
+    _searchOpen = false;
+
     _globalSearch.collapse();
-    _overlay.classList.remove( 'u-hidden' );
+    _showOverlay();
   }
 
   /**
    * Handler for when the mega menu ends collapsing.
-   * Show an overlay.
    */
   function _megaMenuCollapseEnd() {
-    _overlay.classList.add( 'u-hidden' );
+    // Update state.
+    _menuOpen = false;
+
+    _hideOverlay();
+  }
+
+  /**
+   * Handler for when the global search begins expansion.
+   */
+  function _globalSearchExpandBegin() {
+    // Update state.
+    _menuOpen = false;
+    _searchOpen = true;
+
+    _megaMenu.collapse();
+    _showOverlay();
   }
 
+  /**
+   * Handler for when the global search ends collapsing.
+   */
+  function _globalSearchCollapseEnd() {
+    // Update state.
+    _searchOpen = false;
+
+    _hideOverlay();
+  }
+
+
+  /**
+   * Shows the overlay.
+   */
+  function _showOverlay() {
+    if ( _menuOpen || _searchOpen ) {
+      _overlay.classList.remove( 'u-hidden' );
+    }
+  }
+
+  /**
+   * Hides the overlay.
+   */
+  function _hideOverlay() {
+    if ( !_menuOpen && !_searchOpen ) {
+      _overlay.classList.add( 'u-hidden' );
+    }
+  }
+
+
   this.init = init;
 
   return this;