JKM-2 search post now work
thanks to chinchang - superSearch
This commit is contained in:
Oscar Cortez
parent
ac418afd3d
commit
ecaadedbb0
6 changed files with 198 additions and 139 deletions
|
|
@ -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" />
|
||||
<ul class="super-search__results" id="js-search__results"></ul>
|
||||
|
||||
<div class="mdl-textfield__expandable-holder" >
|
||||
<input class="mdl-textfield__input super-search__input" type="text" id="js-search__input" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
8
_includes/search_result.html
Normal file
8
_includes/search_result.html
Normal file
|
|
@ -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 -->
|
||||
|
|
@ -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 %}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
57
_sass/_search.scss
Normal file
57
_sass/_search.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -21,5 +21,6 @@ $grey-color-dark: darken($grey-color, 25%);
|
|||
"base",
|
||||
"layout",
|
||||
"syntax-highlighting",
|
||||
"post"
|
||||
"post",
|
||||
"search"
|
||||
;
|
||||
|
|
|
|||
31
js/search.js
31
js/search.js
|
|
@ -1,3 +1,7 @@
|
|||
/* super-search
|
||||
Author: Kushagra Gour (http://kushagragour.in)
|
||||
MIT Licensed
|
||||
*/
|
||||
(function () {
|
||||
var searchFile = '/feed.xml',
|
||||
searchEl,
|
||||
|
|
@ -18,14 +22,11 @@
|
|||
|
||||
// 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;
|
||||
});
|
||||
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()) {
|
||||
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;
|
||||
|
|
@ -80,16 +81,15 @@
|
|||
}
|
||||
});
|
||||
if (!matchingPosts.length) {
|
||||
searchResultsEl.classList.add('is-hidden');
|
||||
// searchResultsEl.classList.add('is-hidden');
|
||||
searchEl.classList.toggle('is-active');
|
||||
}
|
||||
currentResultHash = matchingPosts.reduce(function(hash, post) {
|
||||
return post.title + hash;
|
||||
}, '');
|
||||
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>';
|
||||
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;
|
||||
|
|
@ -105,9 +105,7 @@
|
|||
xmlhttp.open('GET', searchFile);
|
||||
xmlhttp.onreadystatechange = function () {
|
||||
if (xmlhttp.readyState != 4) return;
|
||||
if (xmlhttp.status != 200 && xmlhttp.status != 304) {
|
||||
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);
|
||||
|
|
@ -120,6 +118,7 @@
|
|||
toggleSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// Open on '/' key
|
||||
window.addEventListener('keypress', function onKeyPress(e) {
|
||||
if (e.which === 47 && !searchEl.classList.contains('is-active')) {
|
||||
|
|
@ -134,6 +133,6 @@
|
|||
|
||||
init.toggle = toggleSearch;
|
||||
|
||||
window.mdlSearch = init;
|
||||
window.superSearch = init;
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue