From 93ddc20c2cd3100e39682d07d7401691bacfd767 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 16 Jan 2018 14:55:34 +0000
Subject: [PATCH] refactor mobile search button when the mobile menu is open,
to close the mobile menu and then open the search form
---
.../src/javascript/components/mobile-menu.js | 5 ---
.../javascript/components/mobile-search.js | 34 +++++++++++++++++++
.../src/javascript/components/search.js | 6 ----
opentech/static_src/src/javascript/main.js | 5 +++
.../static_src/src/sass/layout/_header.scss | 10 ------
opentech/templates/base.html | 4 +--
6 files changed, 41 insertions(+), 23 deletions(-)
create mode 100644 opentech/static_src/src/javascript/components/mobile-search.js
diff --git a/opentech/static_src/src/javascript/components/mobile-menu.js b/opentech/static_src/src/javascript/components/mobile-menu.js
index 3c01a858d..56de75c65 100644
--- a/opentech/static_src/src/javascript/components/mobile-menu.js
+++ b/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');
}
diff --git a/opentech/static_src/src/javascript/components/mobile-search.js b/opentech/static_src/src/javascript/components/mobile-search.js
new file mode 100644
index 000000000..b72e2d83a
--- /dev/null
+++ b/opentech/static_src/src/javascript/components/mobile-search.js
@@ -0,0 +1,34 @@
+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;
diff --git a/opentech/static_src/src/javascript/components/search.js b/opentech/static_src/src/javascript/components/search.js
index b36fff10f..124b78661 100644
--- a/opentech/static_src/src/javascript/components/search.js
+++ b/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');
}
}
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 743ab06f1..a3d4f3a4a 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -1,6 +1,7 @@
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'));
+ });
});
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index bd29594e3..08c08c0f9 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/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 {
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 97cbd38e5..e2699382f 100644
--- a/opentech/templates/base.html
+++ b/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>
--
GitLab