search: remove jQuery #452

This commit is contained in:
Sören Weber 2023-01-29 23:58:43 +01:00
parent 7c6a48f6c6
commit a95d86c03c
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 77 additions and 47 deletions

View file

@ -8,6 +8,9 @@
- don't empty search input if no data-val is given - don't empty search input if no data-val is given
- don't delete search term but close suggestions when suggestions are open - don't delete search term but close suggestions when suggestions are open
- delete search term when suggestions are closed - 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 Copyright (c) 2014 Simon Steinberger / Pixabay
GitHub: https://github.com/Pixabay/JavaScript-autoComplete GitHub: https://github.com/Pixabay/JavaScript-autoComplete
License: http://www.opensource.org/licenses/mit-license.php License: http://www.opensource.org/licenses/mit-license.php
@ -240,7 +243,7 @@ var autoComplete = (function(){
that.last_val = '\n'; that.last_val = '\n';
that.keyupHandler(e) that.keyupHandler(e)
}; };
if (!o.minChars) addEvent(that, 'focus', that.focusHandler); addEvent(that, 'focus', that.focusHandler);
} }
// public destroy method // public destroy method

View file

@ -203,10 +203,11 @@ function searchDetail() {
setTimeout( adjustContentWidth, 0 ); setTimeout( adjustContentWidth, 0 );
} }
// Let's get started
initLunrJson(); initLunrJson();
initLunrJs(); initLunrJs();
$(function() {
function startSearch(){
var url = new URL( window.location ); var url = new URL( window.location );
window.history.replaceState(url.toString(), '', url); window.history.replaceState(url.toString(), '', url);
@ -245,9 +246,6 @@ $(function() {
e.preventDefault(); e.preventDefault();
} }
}); });
};
// JavaScript-autoComplete only registers the focus event when minChars is 0 which doesn't make sense, let's do it ourselves ready( startSearch );
// https://github.com/Pixabay/JavaScript-autoComplete/blob/master/auto-complete.js#L191
var selector = $('#search-by').get(0);
$(selector).focus(selector.focusHandler);
});

View file

@ -807,62 +807,89 @@ function unmark(){
psm && psm.update(); 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(); unmark();
if (value.length) { if( value.length ){
sessionStorage.setItem(baseUriFull+'search-value', value); sessionStorage.setItem( baseUriFull+'search-value', value );
mark(); mark();
} }
} }
function initSearch() { function initSearch() {
// sync input/escape between searchbox and searchdetail // sync input/escape between searchbox and searchdetail
jQuery('input.search-by').on('keydown', function(event) { var inputs = document.querySelectorAll( 'input.search-by' );
if (event.key == "Escape") { inputs.forEach( function( e ){
var input = jQuery(this); e.addEventListener( 'keydown', function( event ){
if( event.key == 'Escape' ){
var input = event.target;
input.blur(); input.blur();
searchInputHandler( '' ); searchInputHandler( '' );
jQuery('input.search-by').val(''); inputs.forEach( function( e ){
e.value = '';
});
documentFocus(); documentFocus();
} }
}); });
jQuery('input.search-by').on('input', function() { e.addEventListener( 'input', function( event ){
var input = jQuery(this); var input = event.target;
var value = input.val(); var value = input.value;
searchInputHandler( value ); searchInputHandler( value );
jQuery('input.search-by').not(this).val($(this).val()); inputs.forEach( function( e ){
if( e != input ){
e.value = value;
}
});
});
}); });
jQuery('[data-search-clear]').on('click', function() { document.querySelectorAll( '[data-search-clear]' ).forEach( function( e ){
jQuery('[data-search-input]').val('').trigger('input'); e.addEventListener( 'click', function(){
inputs.forEach( function( e ){
e.value = '';
e.dispatchEvent( new Event( 'input' ) );
});
unmark(); unmark();
}); });
});
var urlParams = new URLSearchParams(window.location.search); var urlParams = new URLSearchParams( window.location.search );
var value = urlParams.get('search-by'); var value = urlParams.get( 'search-by' );
if( value ){ if( value ){
sessionStorage.setItem(baseUriFull+'search-value', value); sessionStorage.setItem( baseUriFull+'search-value', value );
} }
mark(); mark();
// custom sizzle case insensitive "contains" pseudo selector // set initial search value on page load
$.expr[":"].contains = $.expr.createPseudo(function(arg) { if( sessionStorage.getItem( baseUriFull+'search-value' ) ){
return function( elem ) { var searchValue = sessionStorage.getItem( baseUriFull+'search-value' );
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; inputs.forEach( function( e ){
}; e.value = searchValue;
e.dispatchEvent( new Event( 'input' ) );
}); });
// set initial search value on page load var found = elementContains( searchValue, document.querySelector( '#body-inner' ) );
if (sessionStorage.getItem(baseUriFull+'search-value')) { var searchedElem = found.length && found[ 0 ];
var searchValue = sessionStorage.getItem(baseUriFull+'search-value') if( searchedElem ){
$('[data-search-input]').val(searchValue); searchedElem.scrollIntoView( true );
$('[data-search-input]').trigger('input');
var searchedElem = $('#body-inner').find(':contains(' + searchValue + ')').get(0);
if (searchedElem) {
searchedElem.scrollIntoView(true);
var scrolledY = window.scrollY; var scrolledY = window.scrollY;
if(scrolledY){ if( scrolledY ){
window.scroll(0, scrolledY - 125); window.scroll( 0, scrolledY - 125 );
} }
} }
} }

View file

@ -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 _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 = { var variants = {
variant: '', variant: '',
variants: [], variants: [],