diff options
Diffstat (limited to '_includes/search-providers')
6 files changed, 201 insertions, 0 deletions
diff --git a/_includes/search-providers/custom/search.html b/_includes/search-providers/custom/search.html new file mode 100644 index 0000000..1d7eba3 --- /dev/null +++ b/_includes/search-providers/custom/search.html @@ -0,0 +1,3 @@ +<!-- start custom search snippet --> + +<!-- end custom search snippet --> diff --git a/_includes/search-providers/default/search-data.js b/_includes/search-providers/default/search-data.js new file mode 100644 index 0000000..f20e0c5 --- /dev/null +++ b/_includes/search-providers/default/search-data.js @@ -0,0 +1,14 @@ +window.TEXT_SEARCH_DATA={ + {%- for _collection in site.collections -%} + {%- unless forloop.first -%},{%- endunless -%} + '{{ _collection.label }}':[ + {%- for _article in _collection.docs -%} + {%- unless forloop.first -%},{%- endunless -%} + {'title':{{ _article.title | jsonify }}, + {%- include snippets/prepend-baseurl.html path=_article.url -%} + {%- assign _url = __return -%} + 'url':{{ _url | jsonify }}} + {%- endfor -%} + ] + {%- endfor -%} +}; diff --git a/_includes/search-providers/default/search.html b/_includes/search-providers/default/search.html new file mode 100644 index 0000000..a21512c --- /dev/null +++ b/_includes/search-providers/default/search.html @@ -0,0 +1,18 @@ +<div class="search search--dark"> + <div class="main"> + <div class="search__header">{{ _locale_search }}</div> + <div class="search-bar"> + <div class="search-box js-search-box"> + <div class="search-box__icon-search"><i class="fas fa-search"></i></div> + <input type="text" /> + <div class="search-box__icon-clear js-icon-clear"> + <a><i class="fas fa-times"></i></a> + </div> + </div> + <button class="button button--theme-dark button--pill search__cancel js-search-toggle"> + {{ _locale_cancel }}</button> + </div> + <div class="search-result js-search-result"></div> + </div> +</div> +<script>{%- include search-providers/default/search.js -%}</script> diff --git a/_includes/search-providers/default/search.js b/_includes/search-providers/default/search.js new file mode 100644 index 0000000..bf69c28 --- /dev/null +++ b/_includes/search-providers/default/search.js @@ -0,0 +1,112 @@ +var SOURCES = window.TEXT_VARIABLES.sources; +var PAHTS = window.TEXT_VARIABLES.paths; +window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() { + var search = (window.search || (window.search = {})); + var searchData = window.TEXT_SEARCH_DATA || {}; + + function memorize(f) { + var cache = {}; + return function () { + var key = Array.prototype.join.call(arguments, ','); + if (key in cache) return cache[key]; + else return cache[key] = f.apply(this, arguments); + }; + } + + /// search + function searchByQuery(query) { + var i, j, key, keys, cur, _title, result = {}; + keys = Object.keys(searchData); + for (i = 0; i < keys.length; i++) { + key = keys[i]; + for (j = 0; j < searchData[key].length; j++) { + cur = searchData[key][j], _title = cur.title; + if ((result[key] === undefined || result[key] && result[key].length < 4 ) + && _title.toLowerCase().indexOf(query.toLowerCase()) >= 0) { + if (result[key] === undefined) { + result[key] = []; + } + result[key].push(cur); + } + } + } + return result; + } + + var renderHeader = memorize(function(header) { + return $('<p class="search-result__header">' + header + '</p>'); + }); + + var renderItem = function(index, title, url) { + return $('<li class="search-result__item" data-index="' + index + '"><a class="button" href="' + url + '">' + title + '</a></li>'); + }; + + function render(data) { + if (!data) { return null; } + var $root = $('<ul></ul>'), i, j, key, keys, cur, itemIndex = 0; + keys = Object.keys(data); + for (i = 0; i < keys.length; i++) { + key = keys[i]; + $root.append(renderHeader(key)); + for (j = 0; j < data[key].length; j++) { + cur = data[key][j]; + $root.append(renderItem(itemIndex++, cur.title, cur.url)); + } + } + return $root; + } + + // search box + var $result = $('.js-search-result'), $resultItems; + var lastActiveIndex, activeIndex; + + function clear() { + $result.html(null); + $resultItems = $('.search-result__item'); activeIndex = 0; + } + function onInputNotEmpty(val) { + $result.html(render(searchByQuery(val))); + $resultItems = $('.search-result__item'); activeIndex = 0; + $resultItems.eq(0).addClass('active'); + } + + search.clear = clear; + search.onInputNotEmpty = onInputNotEmpty; + + function updateResultItems() { + lastActiveIndex >= 0 && $resultItems.eq(lastActiveIndex).removeClass('active'); + activeIndex >= 0 && $resultItems.eq(activeIndex).addClass('active'); + } + + function moveActiveIndex(direction) { + var itemsCount = $resultItems ? $resultItems.length : 0; + if (itemsCount > 1) { + lastActiveIndex = activeIndex; + if (direction === 'up') { + activeIndex = (activeIndex - 1 + itemsCount) % itemsCount; + } else if (direction === 'down') { + activeIndex = (activeIndex + 1 + itemsCount) % itemsCount; + } + updateResultItems(); + } + } + + // Char Code: 13 Enter, 37 ⬅, 38 ⬆, 39 ➡, 40 ⬇ + $(window).on('keyup', function(e) { + var modalVisible = search.getModalVisible && search.getModalVisible(); + if (modalVisible) { + if (e.which === 38) { + modalVisible && moveActiveIndex('up'); + } else if (e.which === 40) { + modalVisible && moveActiveIndex('down'); + } else if (e.which === 13) { + modalVisible && $resultItems && activeIndex >= 0 && $resultItems.eq(activeIndex).children('a')[0].click(); + } + } + }); + + $result.on('mouseover', '.search-result__item > a', function() { + var itemIndex = $(this).parent().data('index'); + itemIndex >= 0 && (lastActiveIndex = activeIndex, activeIndex = itemIndex, updateResultItems()); + }); +}); diff --git a/_includes/search-providers/google-custom-search-engine/search.html b/_includes/search-providers/google-custom-search-engine/search.html new file mode 100644 index 0000000..cf132ab --- /dev/null +++ b/_includes/search-providers/google-custom-search-engine/search.html @@ -0,0 +1,21 @@ +{%- if site.search.google.custom_search_engine_id -%} + <div class="search search--dark search--google-custom-search-engine"> + <div class="main"> + <div class="content js-gcse"> + <!-- <gcse:search enableAutoComplete="true" gname="search-box"></gcse:search> + <gcse:searchresults-only gname="results"></gcse:searchresults-only> --> + </div> + </div> + </div> + <script> + var gcse = document.getElementsByClassName('js-gcse')[0]; + var gcseSearch = document.createElement('gcse:search'); + gcseSearch.setAttribute('enableAutoComplete', 'true'); + gcseSearch.setAttribute('gname', 'search-box'); + var gcseSearchresults = document.createElement('gcse:searchresults-only'); + gcseSearchresults.setAttribute('gname', 'results'); + gcse.appendChild(gcseSearch); + gcse.appendChild(gcseSearchresults); + </script> + <script>{%- include search-providers/google-custom-search-engine/search.js -%}</script> +{%- endif -%} diff --git a/_includes/search-providers/google-custom-search-engine/search.js b/_includes/search-providers/google-custom-search-engine/search.js new file mode 100644 index 0000000..09e5273 --- /dev/null +++ b/_includes/search-providers/google-custom-search-engine/search.js @@ -0,0 +1,33 @@ +var SOURCES = window.TEXT_VARIABLES.sources; +window.Lazyload.js(SOURCES.jquery, function() { + /* global google */ + var search = (window.search || (window.search = {})); + var searchBox, searchInput, clearIcon, searchModal; + + search.clear = function() { + searchBox && searchBox.clearAllResults(); + }; + search.onShow = function() { + searchInput && searchInput.focus(); + }; + search.onHide = function() { + searchInput && searchInput.blur(); + }; + + window.__gcse = { + callback: function() { + searchBox = google.search.cse.element.getElement('search-box'); + searchInput = document.getElementById('gsc-i-id1'); + clearIcon = document.getElementById('gs_cb50'); + searchModal = search.searchModal; + searchModal && searchModal.$el && searchModal.$el.on('click', function(e) { + (e.target === this || e.target === clearIcon || e.target.className === 'gs-title') && searchModal.hide(); + }); + } + }; + var cx = '{{ site.search.google.custom_search_engine_id }}'; // Insert your own Custom Search Engine ID here + var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; + gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + + '//cse.google.com/cse.js?cx=' + cx; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); +}); |