feat: Search WIP (#47)

riboseinc · Nov 8, 2018 · 091acb2 · 091acb2
1 parent 1deaa8d
commit 091acb2
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/_includes/nav-links.html b/_includes/nav-links.html
@@ -28,5 +28,10 @@
     {% include nav-page-link.html url="/blog/" title="Blog" active_for_nested=true %}
   {% endif %}
 
-  {% include nav-page-link.html url=contact_link title="Contact" %}
+  <a href="javascript: void 0;" class="search"><i class="fas fa-search"></i></a>
+
+  <div class="search-widget">
+    <input type="search" id="siteSearchInput">
+    <button type="button"><i class="fas fa-search"></i></a>
+  </div>
 {% endif %}
diff --git a/_sass/open-project-header-footer.scss b/_sass/open-project-header-footer.scss
@@ -252,13 +252,51 @@ body > .underlay > header {
   > .top-menu {
     flex: 1;
 
-    > * {
+    > :not(.search-widget) {
       display: inline-block;
       font-weight: 600;
       margin-right: 20px;
       padding: 6px 10px 6px 10px;
       white-space: nowrap;
     }
+    > .search-widget {
+      transition: width .2s ease-in-out;
+      width: 0;
+      overflow: hidden;
+      display: none;
+      position: relative;
+
+      > input[type=search] {
+        margin-right: 1rem;
+        padding: 6px 10px 6px 10px;
+        border: 0;
+        border-radius: 1em;
+        flex: 1;
+      }
+      > button {
+        border: 0;
+        font-size: inherit;
+        font-family: inherit;
+        position: absolute;
+        color: $primary-dark-color;
+        top: 50%;
+        background: transparent;
+        right: 1rem;
+        transform: translateY(-50%);
+      }
+    }
+    &.with-expanded-search {
+      > a {
+        display: none;
+      }
+      > .search-widget {
+        width: 90%;
+        display: inline-flex;
+
+        > input[type=search] {
+        }
+      }
+    }
   }
 
   > .top-menu,

diff --git a/assets/js/opf.js b/assets/js/opf.js
@@ -6,6 +6,28 @@
 
 
 
+  /* Search box */
+
+  var initSearchWidget = function(containerEl, triggerEl, inputEl) {
+    var showSearch = function() {
+      containerEl.classList.add('with-expanded-search');
+      inputEl.focus();
+    };
+    var hideSearch = function() {
+      containerEl.classList.remove('with-expanded-search');
+    };
+    triggerEl.addEventListener('click', showSearch);
+  };
+
+  var topMenuEl = body.querySelector('.top-menu');
+  var triggerEl = topMenuEl.querySelector('.search');
+  var inputEl = topMenuEl.querySelector('input[type=search]');
+  console.debug(topMenuEl, triggerEl, inputEl);
+
+  initSearchWidget(topMenuEl, triggerEl, inputEl);
+
+
+
   /* Topmost hamburger menu */
 
   var initCollapsibleMenu = function(triggerEl, menuEl) {