m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

rewrite search.js without jQuery

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-09-09 20:02:12 +02:00
parent 11dd15c584
commit 3ebfa122b8
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 27 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
_src/_assets/js/_search.js
View File

@ -7,76 +7,66 @@
const krlcSearch = (() => { // eslint-disable-line no-unused-vars const krlcSearch = (() => { // eslint-disable-line no-unused-vars
const _config = { const _config = {
searchlink: $('.search-btn, .js-search-init'), searchlink: document.getElementsByClassName('search-btn')[0],
searcharea: $('.search-area'), searcharea: document.getElementsByClassName('search-area')[0],
searchfield: $('#search-input'), searchclose: document.getElementsByClassName('search-close')[0],
searchpop: $('#search-popover') searchfield: document.getElementById('search-input'),
searchpop: document.getElementById('search-popover'),
searchresults: document.getElementById('search-results')
} }
const _private = { const _private = {
searchHide() { searchHide() {
// Revert all search elements // Revert all search elements
_config.searcharea _config.searcharea.classList.remove('animation-slidedown')
.removeClass('animation-slidedown') _config.searcharea.classList.add('animation-bounceOutUp')
.addClass('animation-bounceOutUp') _config.searchpop.classList.add('hide')
.on('animationend webkitAnimationEnd oAnimationEnd', () => { document.body.classList.remove('has-search-open')
$('body').removeClass('has-search-open')
})
_config.searchpop.addClass('hide')
}, },
searchClose() { searchClose() {
$('.search-close').on('click', e => { _config.searchclose.addEventListener('click', e => {
e.preventDefault() e.preventDefault()
_private.searchHide() _private.searchHide()
// Empty search field // Empty search field
_config.searchfield.val('').blur() _config.searchfield.value = ''
_config.searchfield.blur()
}) })
}, },
searchShow() { searchShow() {
_config.searchlink.on('click', e => { _config.searchlink.addEventListener('click', e => {
e.preventDefault() e.preventDefault()
// Show search field // Show search field
_config.searcharea _config.searcharea.classList.remove('is-ready', 'animation-bounceOutUp')
.removeClass('is-ready animation-bounceOutUp') _config.searcharea.classList.add('is-ready', 'animation-slidedown')
.addClass('is-ready animation-slidedown') document.body.classList.add('has-search-open')
.on('animationend webkitAnimationEnd oAnimationEnd', () => {
$('body').addClass('has-search-open')
})
_config.searchfield.focus() _config.searchfield.focus()
SimpleJekyllSearch({ // eslint-disable-line new-cap SimpleJekyllSearch({ // eslint-disable-line new-cap
searchInput: document.getElementById('search-input'), searchInput: _config.searchfield,
resultsContainer: document.getElementById('search-results'), resultsContainer: _config.searchresults,
json: '/api/search.json', json: '/api/search.json',
searchResultTemplate: '<a class="search-link" href="{url}">{title}</a>', searchResultTemplate: '<a class="search-link" href="{url}">{title}</a>',
fuzzy: false fuzzy: false
}) })
// Hide menu too just in case // Hide menu too just in case
if ($('body').hasClass('has-menu-open')) { if (document.body.classList.contains('has-menu-open')) {
$('body').removeClass('has-menu-open') document.body.classList.remove('has-menu-open')
} }
// Bind the hide controls
$(document).bind('click.hidethepop', () => {
_private.searchHide()
// Unbind the hide controls
$(document).unbind('click.hidethepop')
})
// Dont close thepop when click on thepop // Dont close thepop when click on thepop
_config.searchpop.on('click', e => { _config.searchpop.addEventListener('click', e => {
e.stopPropagation() e.stopPropagation()
}) })
// Dont close thepop when click on search field // Dont close thepop when click on search field
_config.searchfield.on('click', e => { _config.searchfield.addEventListener('click', e => {
e.stopPropagation() e.stopPropagation()
}) })
@ -85,8 +75,8 @@ const krlcSearch = (() => { // eslint-disable-line no-unused-vars
}) })
// Show popup upon first keypress // Show popup upon first keypress
_config.searchfield.on('keyup', () => { _config.searchfield.addEventListener('keyup', () => {
_config.searchpop.removeClass('hide') _config.searchpop.classList.remove('hide')
}) })
// Listen for close icon // Listen for close icon

10
_src/_assets/js/kremalicious3.js
View File

@ -11,18 +11,10 @@
//=include _modals.js //=include _modals.js
/* eslint-enable spaced-comment */ /* eslint-enable spaced-comment */
//
// Init jQuery-based modules
//
$(document).ready(() => {
krlcSearch.init()
})
// //
// Init js modules // Init js modules
// //
krlcSearch.init()
krlcMenu.init() krlcMenu.init()
krlcModals.init() krlcModals.init()