+
-
diff --git a/_includes/search_result.html b/_includes/search_result.html
new file mode 100644
index 0000000..5cf7982
--- /dev/null
+++ b/_includes/search_result.html
@@ -0,0 +1,8 @@
+
+
+
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 05c5b16..2e7aef9 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -11,6 +11,7 @@
{% include header_fixed.html %}
{% else %}
-
+
@@ -29,10 +30,10 @@
{% endif %}
diff --git a/_sass/_search.scss b/_sass/_search.scss
new file mode 100644
index 0000000..aebd3cb
--- /dev/null
+++ b/_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;
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index bc70726..318bad4 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -21,5 +21,6 @@ $grey-color-dark: darken($grey-color, 25%);
"base",
"layout",
"syntax-highlighting",
- "post"
+ "post",
+ "search"
;
diff --git a/js/search.js b/js/search.js
index 75c7da1..2c70f1c 100644
--- a/js/search.js
+++ b/js/search.js
@@ -1,139 +1,138 @@
-(function() {
- var searchFile = '/feed.xml',
- searchEl,
- searchInputEl,
- searchResultsEl,
- currentInputValue = '',
- lastSearchResultHash,
- posts = [];
+/* 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;
+ // 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;
}
- function getPostsFromXml(xml) {
- var json = xmlToJson(xml);
- return json.channel.item;
+ // 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; }, '');
}
-
- window.toggleSearch = function toggleSearch() {
- searchEl.classList.toggle('is-active');
- if (searchEl.classList.contains('is-active')) {
- // while opening
- searchInputEl.value = '';
+ 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 {
- // while closing
- searchResultsEl.classList.add('is-hidden');
+ if (typeof(obj[nodeName].push) == "undefined") {
+ var old = obj[nodeName];
+ obj[nodeName] = [];
+ obj[nodeName].push(old);
+ }
+ obj[nodeName].push(xmlToJson(item));
}
- setTimeout(function() {
- searchInputEl.focus();
- }, 210);
+ }
}
+ return obj;
+ }
- function handleInput() {
- var currentResultHash, d;
+ function getPostsFromXml(xml) {
+ var json = xmlToJson(xml);
+ return json.channel.item;
+ }
- 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.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 '
' + post.title + '' + d.toUTCString().replace(/.*(\d{2})\s+(\w{3})\s+(\d{4}).*/, '$2 $1, $3') + '';
- }).join('');
- }
- lastSearchResultHash = currentResultHash;
+ 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 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');
+ function handleInput() {
+ var currentResultHash, d;
- 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();
- });
+ currentInputValue = searchInputEl.value;
+ if (!currentInputValue || currentInputValue.length < 3) {
+ lastSearchResultHash = '';
+ searchResultsEl.classList.add('is-hidden');
+ return;
}
+ 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 '
' + post.title + ' - ' + d.toUTCString().replace(/.*(\d{2})\s+(\w{3})\s+(\d{4}).*/,'$2 $1, $3') + '';
+ }).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;
})();
\ No newline at end of file