Add search overlay

Author: carstene1ns

content/css/easyrpg.scss

@@ -246,25 +246,94 @@ $darkgrey: #202020;
 	}
 
 	/* Search box and results */
-	form#search-form {
-		margin: 1em 0;
 
-		input {
+	form.search, #search-overlay {
+		input, button {
 			border: 2px solid $normalgreen;
-			margin: 4px 2px;
+			margin: 4px 0 2px;
 			padding: 10px 12px;
 			border-radius: 5px;
 		}
+
 		input[type=text] {
 			border-collapse: collapse;
-			width: 300px;
+			width: 400px;
 		}
-		input[type=submit] {
+
+		button {
 			background-color: $lightgrey;
 			color: black;
 			cursor: pointer;
 		}
 	}
+
+	form.search {
+		margin: 1em 0;
+	}
+
+	#show-search {
+		display: inline-block;
+		background-color: $darkgrey;
+		color: $lightgrey;
+		border: none;
+		height: 40px;
+		padding: 0 1em;
+		font-size: 1em;
+		cursor: pointer;
+		opacity: 0.8;
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	#search-overlay {
+		height: 100%;
+		width: 100%;
+		position: fixed;
+		z-index: 2;
+		top: 0;
+		left: 0;
+		background-color: rgba(40, 40, 40, 0.8);
+		transition: opacity 0.5s ease-in-out;
+
+		&.visible {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		&.hidden {
+			position: absolute;
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		&.transitioning {
+			visibility: visible;
+		}
+
+		#search-bar {
+			position: relative;
+			top: 46%;
+			width: 80%;
+			text-align: center;
+			margin: auto;
+		}
+
+		#hide-search {
+			position: absolute;
+			top: 20px;
+			right: 20px;
+			opacity: 0.8;
+			&:hover {
+				opacity: 1;
+			}
+		}
+
+		input, button {
+			font-size: 2em;
+		}
+	}
+
 	ul#search-results {
 		// entry height
 		$eheight: 32px;

content/js/search.js

@@ -0,0 +1,28 @@
+/*
+ * Adds a toggle-able search overlay
+ */
+document.addEventListener("DOMContentLoaded", function(event) {
+  // ignore on search page
+  if (window.location.href.indexOf("/search/") === -1) {
+    var overlay = document.getElementById('search-overlay')
+    var input = document.getElementById("search-input")
+
+    function searchBox(e) {
+      if (e.target.id === "show-search") {
+        overlay.className = "visible transitioning"
+        input.focus();
+      } else {
+        overlay.className = "hidden transitioning"
+      }
+    }
+
+    document.getElementById('show-search').addEventListener('click', searchBox)
+    document.getElementById('hide-search').addEventListener('click', searchBox)
+    input.addEventListener('keyup', function(e) {
+      if (e.keyCode == 27) searchBox(e)
+    })
+    overlay.addEventListener('transitionend', function() {
+      overlay.classList.remove("transitioning")
+    })
+  }
+})

content/search/index.html

@@ -1,12 +1,7 @@
 ---
 title: Search on this site
-menu_name: 🔍 Site search
-menu_weight: -1
 ---
-<form action="/search/" id="search-form" class="search" method="get" >
-  <input name="q" type="text" id="search-input" placeholder="enter search term..." autofocus required>
-  <input type="submit" value="Search">
-</form>
+<%= render '/searchform.*' %>
 <h2 id="search-heading"></h2>
 <ul id="search-results"></ul>
 <script src="/js/vendor/lunr.min.js"></script>

layouts/default.slim

@@ -20,6 +20,7 @@ html lang="en"
     link rel="stylesheet" href="/css/easyrpg.css"
     link rel="stylesheet" href="/css/rouge-github-dark.css"
     script src="/js/vendor/jquery-2.2.4.min.js"
+    script src="/js/search.js"
   body
     #header
       .maxwidth

layouts/menu.html

@@ -4,5 +4,16 @@
   <% navigation_for(@item).each do |index, target| %>
     <li><%= link_to_unless_current(target[:text], target[:link]) %></li>
   <% end %>
+  <% if @item.identifier.components[0] != "search" %>
+    <li><button title="Search Site" id="show-search">🔍</button></li>
+  <% end %>
   </ul>
+  <% if @item.identifier.components[0] != "search" %>
+  <div id="search-overlay" class="hidden">
+    <button id="hide-search">×</button>
+    <div id="search-bar">
+    <%= render '/searchform.*' %>
+    </div>
+  </div>
+  <% end %>
 <% end %>

layouts/searchform.html

@@ -0,0 +1,4 @@
+<form action="/search/" id="search-form" class="search" method="get">
+  <input name="q" type="search" id="search-input" placeholder="enter search term..." autofocus required>
+  <button type="submit">🔍</button>
+</form>

lib/helpers/navigation.rb

@@ -1,9 +1,4 @@
 
-# allow partial layouts (menu/submenu)
-include Nanoc::Helpers::Rendering
-# generate links to specific items
-include Nanoc::Helpers::LinkTo
-
 def link_to_upper_page(attributes = {})
   p = @item_rep.path
 
@@ -45,7 +40,8 @@ def navigation_for(item)
     next if not it.identifier.to_s.end_with?(".html", ".md")
     next if it[:is_hidden] # e.g. 404
     next if it[:no_menu] # e.g. contact
-    next if it.identifier.to_s == "/index.html" # homepage
+    next if it.identifier =~ "/index.*" # homepage
+    next if it.identifier =~ '/search/*' # search
 
     # defaults
     subsection = it.identifier.components[part].split(".")[0]
@@ -55,14 +51,7 @@ def navigation_for(item)
 
     # special case subsection index
     if subsection == "index"
-      case section
-      when "/search/"
-        menu_name = "🔍 Site search"
-      when "/contribute/"
-        menu_name = "Introduction"
-      else
-        menu_name = "Overview"
-      end
+      menu_name = it[:title].include?(":") ? it[:title].split(":")[1].strip : "Start"
       link = section
       menu_weight = 100
     end

lib/helpers_.rb

@@ -1 +1,3 @@
 use_helper CreateSearchIndex
+use_helper Nanoc::Helpers::Rendering
+use_helper Nanoc::Helpers::LinkTo