diff --git a/static/js/auto-complete.js b/static/js/auto-complete.js index c098944358..52b8ce138c 100644 --- a/static/js/auto-complete.js +++ b/static/js/auto-complete.js @@ -8,6 +8,9 @@ - don't empty search input if no data-val is given - don't delete search term but close suggestions when suggestions are open - delete search term when suggestions are closed + McShelby/hugo-theme-relearn#452 + - register focus event ignoring minChars because that doesn't make sense + Copyright (c) 2014 Simon Steinberger / Pixabay GitHub: https://github.com/Pixabay/JavaScript-autoComplete License: http://www.opensource.org/licenses/mit-license.php @@ -240,7 +243,7 @@ var autoComplete = (function(){ that.last_val = '\n'; that.keyupHandler(e) }; - if (!o.minChars) addEvent(that, 'focus', that.focusHandler); + addEvent(that, 'focus', that.focusHandler); } // public destroy method diff --git a/static/js/search.js b/static/js/search.js index 25af6243bb..ce07cf705f 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -203,10 +203,11 @@ function searchDetail() { setTimeout( adjustContentWidth, 0 ); } -// Let's get started initLunrJson(); initLunrJs(); -$(function() { + + +function startSearch(){ var url = new URL( window.location ); window.history.replaceState(url.toString(), '', url); @@ -245,9 +246,6 @@ $(function() { e.preventDefault(); } }); +}; - // JavaScript-autoComplete only registers the focus event when minChars is 0 which doesn't make sense, let's do it ourselves - // https://github.com/Pixabay/JavaScript-autoComplete/blob/master/auto-complete.js#L191 - var selector = $('#search-by').get(0); - $(selector).focus(selector.focusHandler); -}); +ready( startSearch ); diff --git a/static/js/theme.js b/static/js/theme.js index bedce01da2..58608126cb 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -807,62 +807,89 @@ function unmark(){ psm && psm.update(); } -function searchInputHandler(value) { +// replace jQuery.createPseudo with https://stackoverflow.com/a/66318392 +function elementContains( txt, e ){ + var regex = RegExp( txt, 'i' ); + var nodes = []; + if( e ){ + var tree = document.createTreeWalker( e, 4 /* NodeFilter.SHOW_TEXT */, function( node ){ + return regex.test( node.data ); + }); + var node = null; + while( node = tree.nextNode() ){ + nodes.push( node.parentElement ); + } + } + return nodes; +} + +function searchInputHandler( value ){ unmark(); - if (value.length) { - sessionStorage.setItem(baseUriFull+'search-value', value); + if( value.length ){ + sessionStorage.setItem( baseUriFull+'search-value', value ); mark(); } } function initSearch() { // sync input/escape between searchbox and searchdetail - jQuery('input.search-by').on('keydown', function(event) { - if (event.key == "Escape") { - var input = jQuery(this); - input.blur(); - searchInputHandler( '' ); - jQuery('input.search-by').val(''); - documentFocus(); - } - }); - jQuery('input.search-by').on('input', function() { - var input = jQuery(this); - var value = input.val(); - searchInputHandler( value ); - jQuery('input.search-by').not(this).val($(this).val()); + var inputs = document.querySelectorAll( 'input.search-by' ); + inputs.forEach( function( e ){ + e.addEventListener( 'keydown', function( event ){ + if( event.key == 'Escape' ){ + var input = event.target; + input.blur(); + searchInputHandler( '' ); + inputs.forEach( function( e ){ + e.value = ''; + }); + documentFocus(); + } + }); + e.addEventListener( 'input', function( event ){ + var input = event.target; + var value = input.value; + searchInputHandler( value ); + inputs.forEach( function( e ){ + if( e != input ){ + e.value = value; + } + }); + }); }); - jQuery('[data-search-clear]').on('click', function() { - jQuery('[data-search-input]').val('').trigger('input'); - unmark(); + document.querySelectorAll( '[data-search-clear]' ).forEach( function( e ){ + e.addEventListener( 'click', function(){ + inputs.forEach( function( e ){ + e.value = ''; + e.dispatchEvent( new Event( 'input' ) ); + }); + unmark(); + }); }); - var urlParams = new URLSearchParams(window.location.search); - var value = urlParams.get('search-by'); + var urlParams = new URLSearchParams( window.location.search ); + var value = urlParams.get( 'search-by' ); if( value ){ - sessionStorage.setItem(baseUriFull+'search-value', value); + sessionStorage.setItem( baseUriFull+'search-value', value ); } mark(); - // custom sizzle case insensitive "contains" pseudo selector - $.expr[":"].contains = $.expr.createPseudo(function(arg) { - return function( elem ) { - return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; - }; - }); - // set initial search value on page load - if (sessionStorage.getItem(baseUriFull+'search-value')) { - var searchValue = sessionStorage.getItem(baseUriFull+'search-value') - $('[data-search-input]').val(searchValue); - $('[data-search-input]').trigger('input'); - var searchedElem = $('#body-inner').find(':contains(' + searchValue + ')').get(0); - if (searchedElem) { - searchedElem.scrollIntoView(true); + if( sessionStorage.getItem( baseUriFull+'search-value' ) ){ + var searchValue = sessionStorage.getItem( baseUriFull+'search-value' ); + inputs.forEach( function( e ){ + e.value = searchValue; + e.dispatchEvent( new Event( 'input' ) ); + }); + + var found = elementContains( searchValue, document.querySelector( '#body-inner' ) ); + var searchedElem = found.length && found[ 0 ]; + if( searchedElem ){ + searchedElem.scrollIntoView( true ); var scrolledY = window.scrollY; - if(scrolledY){ - window.scroll(0, scrolledY - 125); + if( scrolledY ){ + window.scroll( 0, scrolledY - 125 ); } } } diff --git a/static/js/variant.js b/static/js/variant.js index 6869aeb1a7..167e9e1120 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -25,6 +25,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o = function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } +function ready(fn) { if (document.readyState !== 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded',fn); } } + var variants = { variant: '', variants: [],