From c762e841b9b24a4bd24169f015e180c45f5aef5e Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Thu, 4 Jan 2018 10:34:34 +0000
Subject: [PATCH] adding desktop search functionality

---
 .../javascript/components/desktop-search.js   | 23 +++++++++++++++
 opentech/static_src/src/javascript/main.js    |  5 ++++
 .../static_src/src/sass/layout/_header.scss   | 28 +++++++++++++++++++
 opentech/templates/base.html                  | 14 ++++++++++
 4 files changed, 70 insertions(+)
 create mode 100644 opentech/static_src/src/javascript/components/desktop-search.js

diff --git a/opentech/static_src/src/javascript/components/desktop-search.js b/opentech/static_src/src/javascript/components/desktop-search.js
new file mode 100644
index 000000000..49055cdfb
--- /dev/null
+++ b/opentech/static_src/src/javascript/components/desktop-search.js
@@ -0,0 +1,23 @@
+class DesktopSearch {
+    static selector() {
+        return '.js-desktop-search-toggle';
+    }
+
+    constructor(node, searchForm) {
+        this.node = node;
+        this.searchForm = searchForm;
+        this.bindEventListeners();
+    }
+
+    bindEventListeners() {
+        this.node.click(this.toggle.bind(this));
+    }
+
+    toggle() {
+        this.searchForm[0].classList.toggle('is-visible');
+        this.node[0].querySelector('.header__icon--magnifying-glass').classList.toggle('is-hidden');
+        this.node[0].querySelector('.header__icon--cross').classList.toggle('is-unhidden');
+    }
+}
+
+export default DesktopSearch;
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index f02bc0be4..48fba5e67 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 MobileSubMenu from './components/mobile-sub-menu';
+import DesktopSearch from './components/desktop-search';
 
 // Open the mobile menu callback
 function openMobileMenu() {
@@ -23,6 +24,10 @@ $(function () {
         new MobileSubMenu($(el));
     });
 
+    $(DesktopSearch.selector()).each((index, el) => {
+        new DesktopSearch($(el), $('.header__search--desktop'));
+    });
+
     // Toggle subnav visibility
     $('.js-subnav-back').on('click', function(){
         this.parentNode.classList.remove('is-visible');
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index 5aea1a35a..6fe7b3df7 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/opentech/static_src/src/sass/layout/_header.scss
@@ -114,6 +114,19 @@
     }
 
     &__icon {
+        &--cross {
+            @extend %is-hidden;
+        }
+
+        &--pixels {
+            position: absolute;
+            bottom: 0;
+            display: none;
+
+            @include media-query(tablet-portrait) {
+                display: block;
+            }
+        }
 
         &--pixels-left {
             left: 0;
@@ -130,4 +143,19 @@
         }
     }
 
+    &__search {
+        &--desktop {
+            @extend %is-invisible;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            width: 100%;
+            height: 180px;
+            padding-bottom: 50px;
+            background: $color--dark-blue;
+        }
+    }
 }
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 86c1f9102..daf3a0e65 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -89,12 +89,26 @@
                     <div class="header__inner--top">
                         {% primarynav %}
 
+                        <button class="button js-desktop-search-toggle">
+                            <svg class="header__icon header__icon--magnifying-glass icon"><use xlink:href="#magnifying-glass"></use></svg>
+                            <svg class="header__icon header__icon--cross icon"><use xlink:href="#cross"></use></svg>
+                        </button>
                     </div>
                 </section>
 
                 <section class="header__menus header__menus--mobile">
                     {% primarynav %}
                 </section>
+
+            </div>
+
+            <div class="header__search header__search--desktop">
+                <form action="{% url 'search' %}" method="get" role="search" class="form form--header-search-desktop">
+                    <button class="button" type="submit">
+                        <svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
+                    </button>
+                    <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
+                </form>
             </div>
 
             <div class="wrapper wrapper--small">
-- 
GitLab