diff options
Diffstat (limited to '_includes/scripts/components/search.js')
-rw-r--r-- | _includes/scripts/components/search.js | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/_includes/scripts/components/search.js b/_includes/scripts/components/search.js new file mode 100644 index 0000000..e1c8c27 --- /dev/null +++ b/_includes/scripts/components/search.js @@ -0,0 +1,86 @@ + +(function () { + var SOURCES = window.TEXT_VARIABLES.sources; + window.Lazyload.js(SOURCES.jquery, function() { + // search panel + var search = (window.search || (window.search = {})); + var useDefaultSearchBox = window.useDefaultSearchBox === undefined ? + true : window.useDefaultSearchBox ; + + var $searchModal = $('.js-page-search-modal'); + var $searchToggle = $('.js-search-toggle'); + var searchModal = $searchModal.modal({ onChange: handleModalChange, hideWhenWindowScroll: true }); + var modalVisible = false; + search.searchModal = searchModal; + + var $searchBox = null; + var $searchInput = null; + var $searchClear = null; + + function getModalVisible() { + return modalVisible; + } + search.getModalVisible = getModalVisible; + + function handleModalChange(visible) { + modalVisible = visible; + if (visible) { + search.onShow && search.onShow(); + useDefaultSearchBox && $searchInput[0] && $searchInput[0].focus(); + } else { + search.onShow && search.onHide(); + useDefaultSearchBox && $searchInput[0] && $searchInput[0].blur(); + setTimeout(function() { + useDefaultSearchBox && ($searchInput.val(''), $searchBox.removeClass('not-empty')); + search.clear && search.clear(); + window.pageAsideAffix && window.pageAsideAffix.refresh(); + }, 400); + } + } + + $searchToggle.on('click', function() { + modalVisible ? searchModal.hide() : searchModal.show(); + }); + // Char Code: 83 S, 191 / + $(window).on('keyup', function(e) { + if (!modalVisible && !window.isFormElement(e.target || e.srcElement) && (e.which === 83 || e.which === 191)) { + modalVisible || searchModal.show(); + } + }); + + if (useDefaultSearchBox) { + $searchBox = $('.js-search-box'); + $searchInput = $searchBox.children('input'); + $searchClear = $searchBox.children('.js-icon-clear'); + search.getSearchInput = function() { + return $searchInput.get(0); + }; + search.getVal = function() { + return $searchInput.val(); + }; + search.setVal = function(val) { + $searchInput.val(val); + }; + + $searchInput.on('focus', function() { + $(this).addClass('focus'); + }); + $searchInput.on('blur', function() { + $(this).removeClass('focus'); + }); + $searchInput.on('input', window.throttle(function() { + var val = $(this).val(); + if (val === '' || typeof val !== 'string') { + search.clear && search.clear(); + } else { + $searchBox.addClass('not-empty'); + search.onInputNotEmpty && search.onInputNotEmpty(val); + } + }, 400)); + $searchClear.on('click', function() { + $searchInput.val(''); $searchBox.removeClass('not-empty'); + search.clear && search.clear(); + }); + } + }); +})(); |