mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
search: remove jQuery #452
This commit is contained in:
parent
7c6a48f6c6
commit
a95d86c03c
4 changed files with 77 additions and 47 deletions
|
@ -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
|
||||||
|
|
|
@ -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);
|
|
||||||
});
|
|
||||||
|
|
|
@ -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 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: [],
|
||||||
|
|
Loading…
Reference in a new issue