From 9c9a498a321886ce11ef8ebc75bea333b7f1c512 Mon Sep 17 00:00:00 2001
From: Rik Veenboer <rik.veenboer@gmail.com>
Date: Fri, 22 Jan 2016 22:31:43 +0000
Subject: [PATCH] Add client-side search, modified from atom from
 https://github.com/chinchang/super-search

---
 _includes/header.html   |  20 +++++-
 blog/atom.xml           |  20 +++---
 static/super-search.css |  80 +++++++++++++++++++++++
 static/super-search.js  | 137 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 246 insertions(+), 11 deletions(-)
 create mode 100644 static/super-search.css
 create mode 100644 static/super-search.js
diff --git a/_includes/header.html b/_includes/header.html
index fdaec64..20fc038 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -8,6 +8,7 @@
         <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
         <link href="{{ site.static_prefix }}/style/default-common.css" rel="stylesheet" type="text/css" />
         <link href="{{ site.static_prefix }}/style/default-print.css" media="print" rel="stylesheet" type="text/css" />
+        <link href="{{ site.static_prefix }}/super-search.css" rel="stylesheet" type="text/css" />
         <link href="/{{ site.baseurl }}/blog/atom.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }}" />
 
         {% if page.description %}
@@ -28,6 +29,7 @@
             <meta property="og:description" content="{{ page.description }}" />
         {% endif %}
 
+        <script src="{{ site.static_prefix }}/super-search.js" type="text/javascript"></script>
         <script type="text/javascript">
             var _gaq = _gaq || [];
             _gaq.push(['_setAccount', '{{ site.analytics }}']);
@@ -36,10 +38,19 @@
                 var headers = {{ site.headers | implode }};
                 var header = headers[Math.floor(Math.random() * headers.length)];                
                 document.getElementById('masthead').style.backgroundImage = "url('/asset/header/" + header + ".jpg')";
+                
+                superSearch({
+                    searchFile: '/blog/atom.xml'
+                });
             }   
         </script>
     </head>
     <body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">  
+        <div class="super-search" id="js-super-search">
+            <a href="javascript:void(0)" onclick="superSearch.toggle()" class="super-search__close-btn">X</a>
+            <input type="text" placeholder="Type here to search" class="super-search__input" id="js-super-search__input">
+            <ul class="super-search__results" id="js-super-search__results"></ul>
+        </div>
         <header id="masthead" role="banner">
             <a href="/{{ site.baseurl }}" title="{{ site.title }}" rel="home"></a>
         </header>
@@ -49,6 +60,13 @@
                     <li><a href="/{{ site.baseurl }}/blog/">blog</a></li>
                     <li><a href="/{{ site.baseurl }}/gallery/">gallery</a></li>
                     <li><a href="/{{ site.baseurl }}/about.html">about</a></li>
+                    <li>
+                        <a href="javascript:void(0)" title="or press '/' to search" onclick="toggleSearch()" class="search-btn">
+                            <svg style="width:20px;height:20px" viewBox="0 0 24 24">
+                                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+                            </svg>
+                        </a>
+                    </li>
                 </ul>
                 {% if page.print_blurb %}
                     <ul class="print-only">
@@ -63,6 +81,6 @@
                     &middot;
                     <a href="mailto:{{ site.email }}">email</a>
                 </div>
-                </div>
+            </div>
         </header>
         <article>
diff --git a/blog/atom.xml b/blog/atom.xml
index 4e68106..bb7aa00 100644
--- a/blog/atom.xml
+++ b/blog/atom.xml
@@ -5,20 +5,20 @@ layout: null
 <feed xmlns="http://www.w3.org/2005/Atom">
    <id>{{ site.absolute }}/{{ site.baseurl }}/</id>
    <title>{{ site.author }}</title>
-   <link href="{{ site.absolute }}/{{ site.baseurl }}/blog/atom.xml" rel="self" />
-   <link href="{{ site.absolute }}/{{ site.baseurl }}/" />
-   <updated>{{ site.time|date_to_xmlschema }}</updated>
+   <link href="{{ site.absolute }}{{ site.baseurl }}/blog/atom.xml" rel="self" />
+   <link href="{{ site.absolute }}{{ site.baseurl }}/" />
+   <updated>{{ site.time | date_to_xmlschema }}</updated>
    <author>
        <name>{{ site.author }}</name>
        <email>{{ site.email }}</email>
    </author>
    {% for post in site.posts %}
-       <entry>
-           <id>{{ site.absolute }}/{{ post.id }}</id>
-           <title>{{ post.title }}</title>
-           <link href="{{ site.absolute }}/{{ site.baseurl }}{{ post.url }}"/>
-           <updated>{{ post.date|date_to_xmlschema }}</updated>
-           <content type="html">{{ post.content|xml_escape }}</content>
-       </entry>
+   <entry>
+       <id>{{ site.absolute }}/{{ site.baseurl }}{{ post.url }}</id>
+       <title>{{ post.title | xml_escape }}</title>
+       <link href="{{ site.absolute }}/{{ site.baseurl }}{{ post.url }}"/>
+       <updated>{{ post.date | date_to_xmlschema }}</updated>
+       <content type="html">{{ post.content | xml_escape }}</content>
+   </entry>
    {% endfor %}
 </feed>
diff --git a/static/super-search.css b/static/super-search.css
new file mode 100644
index 0000000..b12a226
--- /dev/null
+++ b/static/super-search.css
@@ -0,0 +1,80 @@
+/* super-search
+Author: Kushagra Gour (http://kushagragour.in)
+MIT Licensed
+*/
+.super-search-btn {
+	position: fixed;
+	right: 10px;
+	top: 15px;
+	fill: #DDD;
+}
+.super-search-btn:hover {
+	fill: #BBB;
+}
+
+.super-search {
+	position: fixed;
+	background-color: rgba(100, 100, 100, 0.85);
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 1;
+	transition: 0.2s ease;
+	visibility: hidden;
+	opacity: 0;
+}
+.super-search__close-btn {
+	fill: #DDD;
+	position: absolute;
+	right: 10px;
+	top: 15px;
+	z-index: 1;
+    text-decoration: none;
+}
+.super-search__input {
+	border: 0;
+	font-size: 50px;
+	border-left: none;
+	border-right: none;
+	color: #999;
+	width: 100%;
+	padding: 10px 31px;
+	text-align: center;
+	transform: translateY(-100%);
+	transition: 0.15s ease-out 150ms;
+}
+.is-active .super-search__input {
+	transform: translateY(0);
+}
+.super-search__results {
+	text-align: center;
+	list-style: none;
+	padding: 0;
+	overflow-x: hidden;
+	height: calc(100% - 110px);
+	transition: 0.2s ease;
+}
+.super-search__results.is-hidden {
+	opacity: 0;
+	transform: translateY(-1vh);
+}
+
+.super-search__results > li > a {
+	display: block;
+	position: relative;
+	background-color: #f9f9f9;
+	color: #666;
+	padding: 17px;
+	margin: 12px 14px;
+	box-shadow: 0 3px 4px rgba(0,0,0,0.1);
+}
+.super-search__result-date {
+	color: #BBB;
+	position: absolute;
+	right: 12px;
+}
+.super-search.is-active {
+	opacity: 1;
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/static/super-search.js b/static/super-search.js
new file mode 100644
index 0000000..8e7d273
--- /dev/null
+++ b/static/super-search.js
@@ -0,0 +1,137 @@
+/* super-search
+Author: Kushagra Gour (http://kushagragour.in)
+MIT Licensed
+*/
+(function () {
+	var searchFile = '/feed.xml',
+		searchEl,
+		searchInputEl,
+		searchResultsEl,
+		currentInputValue = '',
+		lastSearchResultHash,
+		posts = [];
+
+	// Changes XML to JSON
+	// Modified version from here: http://davidwalsh.name/convert-xml-json
+	function xmlToJson(xml) {
+		// Create the return object
+		var obj = {};
+		if (xml.nodeType == 3) { // text
+			obj = xml.nodeValue;
+		}
+
+		// do children
+		// If all text nodes inside, get concatenated text from them.
+		var textNodes = [].slice.call(xml.childNodes).filter(function (node) { return node.nodeType === 3; });
+		if (xml.hasChildNodes() && xml.childNodes.length === textNodes.length) {
+			obj = [].slice.call(xml.childNodes).reduce(function (text, node) { return text + node.nodeValue; }, '');
+		}
+		else if (xml.hasChildNodes()) {
+			for(var i = 0; i < xml.childNodes.length; i++) {
+				var item = xml.childNodes.item(i);
+				var nodeName = item.nodeName;
+				if (typeof(obj[nodeName]) == "undefined") {
+					obj[nodeName] = xmlToJson(item);
+				} else {
+					if (typeof(obj[nodeName].push) == "undefined") {
+						var old = obj[nodeName];
+						obj[nodeName] = [];
+						obj[nodeName].push(old);
+					}
+					obj[nodeName].push(xmlToJson(item));
+				}
+			}
+		}
+		return obj;
+	}
+
+	function getPostsFromXml(xml) {
+		var json = xmlToJson(xml);
+		return json.entry;
+	}
+
+	window.toggleSearch = function toggleSearch() {
+		searchEl.classList.toggle('is-active');
+		if (searchEl.classList.contains('is-active')) {
+			// while opening
+			searchInputEl.value = '';
+		} else {
+			// while closing
+			searchResultsEl.classList.add('is-hidden');
+		}
+		setTimeout(function () {
+			searchInputEl.focus();
+		}, 210);
+	}
+
+	function handleInput() {
+		var currentResultHash, d;
+
+		currentInputValue = searchInputEl.value;
+		if (!currentInputValue || currentInputValue.length < 3) {
+			lastSearchResultHash = '';
+			searchResultsEl.classList.add('is-hidden');
+			return;
+		}
+		searchResultsEl.style.offsetWidth;
+
+		var matchingPosts = posts.filter(function (post) {
+			if (post.title.indexOf(currentInputValue) !== -1 || post.content.indexOf(currentInputValue) !== -1) {
+                console.log(post)
+				return true;
+			}
+		});
+		if (!matchingPosts.length) {
+			searchResultsEl.classList.add('is-hidden');
+		}
+		currentResultHash = matchingPosts.reduce(function(hash, post) { return post.title + hash; }, '');
+		if (matchingPosts.length && currentResultHash !== lastSearchResultHash) {
+			searchResultsEl.classList.remove('is-hidden');
+			searchResultsEl.innerHTML = matchingPosts.map(function (post) {
+				d = new Date(post.updated);
+				return '<li><a href="' + post.id + '">' + post.title + ' <span class="search__result-date">[' + d.toUTCString().replace(/.*(\d{2})\s+(\w{3})\s+(\d{4}).*/,'$2 $1, $3') + ']</span></a></li>';
+			}).join('');
+		}
+		lastSearchResultHash = currentResultHash;
+	}
+
+	function init(options) {
+		searchFile = options.searchFile || searchFile;
+		searchEl = document.querySelector(options.searchSelector || '#js-super-search');
+		searchInputEl = document.querySelector(options.inputSelector || '#js-super-search__input');
+		searchResultsEl = document.querySelector(options.resultsSelector || '#js-super-search__results');
+
+		var xmlhttp=new XMLHttpRequest();
+		xmlhttp.open('GET', searchFile);
+		xmlhttp.onreadystatechange = function () {
+			if (xmlhttp.readyState != 4) return;
+			if (xmlhttp.status != 200 && xmlhttp.status != 304) { return; }
+			var node = (new DOMParser).parseFromString(xmlhttp.responseText, 'text/xml');
+			node = node.children[0];
+			posts = getPostsFromXml(node);
+		}
+		xmlhttp.send();
+
+		// Toggle on ESC key
+		window.addEventListener('keyup', function onKeyPress(e) {
+			if (e.which === 27) {
+				toggleSearch();
+			}
+		});
+		// Open on '/' key
+		window.addEventListener('keypress', function onKeyPress(e) {
+			if (e.which === 47 && !searchEl.classList.contains('is-active')) {
+				toggleSearch();
+			}
+		});
+
+		searchInputEl.addEventListener('input', function onInputChange() {
+			handleInput();
+		});
+	}
+
+	init.toggle = toggleSearch;
+
+	window.superSearch = init;
+
+})();
\ No newline at end of file
