JKM-2 search post now work

thanks to chinchang - superSearch

_includes/header.html

@@ -5,22 +5,15 @@
       <span class="mdl-layout-title">{{ site.title }}</span>
       <!-- Add spacer, to align navigation to the right -->
       <div class="mdl-layout-spacer"></div>
-      <!-- Navigation. We hide it in small screens. -->
-      <nav class="mdl-navigation mdl-layout--large-screen-only">
-      {% for page in site.pages %}
-        {% if page.title %}
-        <a class="mdl-navigation__link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-        {% endif %}
-      {% endfor %}
-      </nav>
       
-      <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
+
-        <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable is-upgraded">
+        <label class="mdl-button mdl-js-button mdl-button--icon" for="js-search__input">
           <i class="material-icons">search</i>
         </label>
-        <div class="mdl-textfield__expandable-holder" id="js-search">
+
-          <input class="mdl-textfield__input" type="text" id="search-field" />
+        <div class="mdl-textfield__expandable-holder" >
-          <ul class="super-search__results" id="js-search__results"></ul>
+          <input class="mdl-textfield__input super-search__input" type="text" id="js-search__input" />
         </div>
       </div>
 

_includes/search_result.html

@@ -0,0 +1,8 @@
+<!-- search layout -->
+<div class="super-search" id="js-search">
+  <ul class="super-search__results" id="js-search__results"></ul>        
+  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored super-search__close-btn" onclick="superSearch.toggle()">
+    <i class="material-icons">close</i>
+  </button>
+</div>
+<!-- /end search -->

_layouts/default.html

@@ -11,6 +11,7 @@
       {% include header_fixed.html %}
     {% else %}
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+      {% include search_result.html %}
       {% include header.html %}
     {% endif %}
 
@@ -20,7 +21,7 @@
       </main>
 
     </div>
-    <!-- /End Layout-->
+    <!-- /End Layout -->
 
     <!-- Material Design Lite js Library -->
     <script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
@@ -29,10 +30,10 @@
     {% endif %}
     <script rel="javascript" type="text/javascript" src="{{ "/js/search.js" | prepend: site.baseurl }}"></script>
     <script rel="javascript" type="text/javascript">
-      mdlSearch({
+      superSearch({
         searchFile: '/feed.xml',
         searchSelector: '#js-search', // CSS Selector for search container element.
-        inputSelector: '#search-field', // CSS selector for <input>
+        inputSelector: '#js-search__input', // CSS selector for <input>
         resultsSelector: '#js-search__results' // CSS selector for results container
       });
     </script>

_sass/_search.scss

@@ -0,0 +1,57 @@
+/* super-search
+Author: Kushagra Gour (http://kushagragour.in)
+MIT Licensed
+*/
+
+.super-search {
+  background-color: rgba(0, 191, 255, 0.85);
+  z-index: 999;
+  transition: 0.2s ease;
+  visibility: hidden;
+  opacity: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  will-change: transform, opacity;
+}
+.super-search__close-btn {
+  float: right;
+  margin-right: 15px;
+}
+.super-search__input {
+  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;
+}

css/main.scss

@@ -21,5 +21,6 @@ $grey-color-dark:  darken($grey-color, 25%);
         "base",
         "layout",
         "syntax-highlighting",
-        "post"
+        "post",
+        "search"
 ;

js/search.js

@@ -1,139 +1,138 @@
-(function() {
+/* super-search
-    var searchFile = '/feed.xml',
+Author: Kushagra Gour (http://kushagragour.in)
-        searchEl,
+MIT Licensed
-        searchInputEl,
+*/
-        searchResultsEl,
+(function () {
-        currentInputValue = '',
+  var searchFile = '/feed.xml',
-        lastSearchResultHash,
+    searchEl,
-        posts = [];
+    searchInputEl,
+    searchResultsEl,
+    currentInputValue = '',
+    lastSearchResultHash,
+    posts = [];
 
-    // Changes XML to JSON
+  // Changes XML to JSON
-    // Modified version from here: http://davidwalsh.name/convert-xml-json
+  // Modified version from here: http://davidwalsh.name/convert-xml-json
-    function xmlToJson(xml) {
+  function xmlToJson(xml) {
-        // Create the return object
+    // Create the return object
-        var obj = {};
+    var obj = {};
-        if (xml.nodeType == 3) { // text
+    if (xml.nodeType == 3) { // text
-            obj = xml.nodeValue;
+      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) {
+    // do children
-        var json = xmlToJson(xml);
+    // If all text nodes inside, get concatenated text from them.
-        return json.channel.item;
+    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()) {
-    window.toggleSearch = function toggleSearch() {
+      for(var i = 0; i < xml.childNodes.length; i++) {
-        searchEl.classList.toggle('is-active');
+        var item = xml.childNodes.item(i);
-        if (searchEl.classList.contains('is-active')) {
+        var nodeName = item.nodeName;
-            // while opening
+        if (typeof(obj[nodeName]) == "undefined") {
-            searchInputEl.value = '';
+          obj[nodeName] = xmlToJson(item);
         } else {
-            // while closing
+          if (typeof(obj[nodeName].push) == "undefined") {
-            searchResultsEl.classList.add('is-hidden');
+            var old = obj[nodeName];
+            obj[nodeName] = [];
+            obj[nodeName].push(old);
+          }
+          obj[nodeName].push(xmlToJson(item));
         }
-        setTimeout(function() {
+      }
-            searchInputEl.focus();
-        }, 210);
     }
+    return obj;
+  }
 
-    function handleInput() {
+  function getPostsFromXml(xml) {
-        var currentResultHash, d;
+    var json = xmlToJson(xml);
+    return json.channel.item;
+  }
 
-        currentInputValue = searchInputEl.value;
+  window.toggleSearch = function toggleSearch() {
-        if (!currentInputValue || currentInputValue.length < 3) {
+    searchEl.classList.toggle('is-active');
-            lastSearchResultHash = '';
+    if (searchEl.classList.contains('is-active')) {
-            searchResultsEl.classList.add('is-hidden');
+      // while opening
-            return;
+      searchInputEl.value = '';
-        }
+    } else {
-        searchResultsEl.style.offsetWidth;
+      // while closing
-
+      searchResultsEl.classList.add('is-hidden');
-        var matchingPosts = posts.filter(function(post) {
-            if (post.title.indexOf(currentInputValue) !== -1 || post.description.indexOf(currentInputValue) !== -1) {
-                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.pubDate);
-                return '<li><a href="' + post.link + '">' + 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;
     }
+    setTimeout(function () {
+      searchInputEl.focus();
+    }, 210);
+  }
 
-    function init(options) {
+  function handleInput() {
-        searchFile = options.searchFile || searchFile;
+    var currentResultHash, d;
-        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();
+    currentInputValue = searchInputEl.value;
-        xmlhttp.open('GET', searchFile);
+    if (!currentInputValue || currentInputValue.length < 3) {
-        xmlhttp.onreadystatechange = function() {
+      lastSearchResultHash = '';
-            if (xmlhttp.readyState != 4) return;
+      searchResultsEl.classList.add('is-hidden');
-            if (xmlhttp.status != 200 && xmlhttp.status != 304) {
+      return;
-                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();
-        });
     }
+    searchResultsEl.style.offsetWidth;
 
-    init.toggle = toggleSearch;
+    var matchingPosts = posts.filter(function (post) {
+      if (post.title.indexOf(currentInputValue) !== -1 || post.description.indexOf(currentInputValue) !== -1) {
+        return true;
+      }
+    });
+    if (!matchingPosts.length) {
+      // searchResultsEl.classList.add('is-hidden');
+      searchEl.classList.toggle('is-active');
+    }
+    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.pubDate);
+        return '<li><a href="' + post.link + '">' + 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;
+  }
 
-    window.mdlSearch = init;
+  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;
 
 })();