refactor mobile search button when the mobile menu is open, to close the...

refactor mobile search button when the mobile menu is open, to close the mobile menu and then open the search form

opentech/static_src/src/javascript/components/mobile-menu.js

@@ -21,9 +21,6 @@ class MobileMenu {
         // toggle mobile menu
         this.mobileMenu[0].classList.toggle('is-visible');
 
-        // toggle modifier to change position of the search div when the mobile menu is open
-        this.search[0].classList.toggle('header__search--mobile-menu-open');
-
         // reset the search whenever the mobile menu is toggled
         if(this.search[0].classList.contains('is-visible')){
             this.search[0].classList.toggle('is-visible');
@@ -32,8 +29,6 @@ class MobileMenu {
 
         // reset the search show/hide icons
         if(this.mobileMenu[0].classList.contains('is-visible')){
-            document.querySelector('.header__icon--open-search-menu-open').classList.remove('is-hidden');
-            document.querySelector('.header__icon--close-search-menu-open').classList.remove('is-unhidden');
             document.querySelector('.header__icon--open-search-menu-closed').classList.remove('is-hidden');
             document.querySelector('.header__icon--close-search-menu-closed').classList.remove('is-unhidden');
         }

opentech/static_src/src/javascript/components/mobile-search.js

+class MobileSearch {
+    static selector() {
+        return '.js-mobile-search-toggle';
+    }
+
+    constructor(node, mobileMenu, searchForm, searchToggleButton) {
+        this.node = node;
+        this.mobileMenu = mobileMenu[0];
+        this.searchForm = searchForm[0];
+        this.searchToggleButton = searchToggleButton[0];
+        this.bindEventListeners();
+    }
+
+    bindEventListeners() {
+        this.node.click(this.toggle.bind(this));
+    }
+
+    toggle() {
+        // hide the mobile menu
+        this.mobileMenu.classList.remove('is-visible');
+
+        // wait for the mobile menu to close
+        setTimeout(() => {
+            // open the search
+            this.searchForm.classList.add('is-visible');
+
+            // swap the icons
+            this.searchToggleButton.querySelector('.header__icon--open-search').classList.add('is-hidden');
+            this.searchToggleButton.querySelector('.header__icon--close-search').classList.add('is-unhidden');
+        }, 250);
+    }
+}
+
+export default MobileSearch;

opentech/static_src/src/javascript/components/search.js

@@ -20,12 +20,6 @@ class Search {
         // swap the icons
         this.node[0].querySelector('.header__icon--open-search').classList.toggle('is-hidden');
         this.node[0].querySelector('.header__icon--close-search').classList.toggle('is-unhidden');
-
-        // add modifier to header__inner when the menu is open to style search element
-        document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
-
-        // add modifier to header to be able to change header icon colours
-        document.querySelector('.header').classList.toggle('search-open');
     }
 }
 

opentech/static_src/src/javascript/main.js

 import $ from './globals';
 import MobileMenu from './components/mobile-menu';
 import Search from './components/search';
+import MobileSearch from './components/mobile-search';
 
 $(function () {
     $(MobileMenu.selector()).each((index, el) => {
@@ -10,4 +11,8 @@ $(function () {
     $(Search.selector()).each((index, el) => {
         new Search($(el), $('.header__search'));
     });
+
+    $(MobileSearch.selector()).each((index, el) => {
+        new MobileSearch($(el), $('.header__menus--mobile'), $('.header__search'), $('.js-search-toggle'));
+    });
 });

opentech/static_src/src/sass/layout/_header.scss

@@ -48,10 +48,6 @@
             background: transparent;
             transition: background $transition;
         }
-
-        &--search-open {
-            background: $color--dark-blue;
-        }
     }
 
     &__menus {
@@ -164,12 +160,6 @@
         height: 180px;
         padding-bottom: 50px;
         background: $color--dark-blue;
-
-        &--mobile-menu-open {
-            top: 80px;
-            z-index: 12;
-            height: 120px;
-        }
     }
 
     &__button-container {

opentech/templates/base.html

@@ -107,9 +107,8 @@
                             <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
                         </a>
                         <div class="header__inner header__inner--mobile-buttons">
-                            <button class="button js-search-toggle" aria-haspopup="true" aria-label="Toggle mobile search">
+                            <button class="button js-mobile-search-toggle" aria-haspopup="true" aria-label="Toggle mobile search">
                                 <svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
-                                <svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
                             </button>
                             <button class="button button--left-space js-mobile-menu-close">
                                 <svg class="header__icon header__icon--cross icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
@@ -118,6 +117,7 @@
                     </div>
                     {% primarynav %}
                 </section>
+
                 <div class="header__button-container">
                     <a href="#" class="button button--transparent button--narrow button--contains-icons">
                         <svg class="icon icon--person"><use xlink:href="#person-icon"></use></svg>