f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-24 00:23:10 +00:00
Code Issues Packages Releases Activity

perf: replace jQuery with Vanilla JS (#1681)

Browse Source 
Also replaced `magnific-popup` with `GLightbox`
This commit is contained in:
Cotes Chung
2024-04-17 06:10:01 +08:00
committed by GitHub
parent c85e9e2394
commit fe7afa379f
22 changed files with 274 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
_javascript/modules/components/search-display.js
View File

@@ -1,121 +1,109 @@
/**
* This script make #search-result-wrapper switch to unloaded or shown automatically.
*/
const $btnSbTrigger = $('#sidebar-trigger');
const $btnSearchTrigger = $('#search-trigger');
const $btnCancel = $('#search-cancel');
const $content = $('#main-wrapper>.container>.row');
const $topbarTitle = $('#topbar-title');
const $search = $('search');
const $resultWrapper = $('#search-result-wrapper');
const $results = $('#search-results');
const $input = $('#search-input');
const $hints = $('#search-hints');
const $viewport = $('html,body');
// class names
const C_LOADED = 'loaded';
const C_UNLOADED = 'unloaded';
const C_FOCUS = 'input-focus';
const C_FLEX = 'd-flex';
const btnSbTrigger = document.getElementById('sidebar-trigger');
const btnSearchTrigger = document.getElementById('search-trigger');
const btnCancel = document.getElementById('search-cancel');
const content = document.querySelectorAll('#main-wrapper>.container>.row');
const topbarTitle = document.getElementById('topbar-title');
const search = document.getElementById('search');
const resultWrapper = document.getElementById('search-result-wrapper');
const results = document.getElementById('search-results');
const input = document.getElementById('search-input');
const hints = document.getElementById('search-hints');
class ScrollBlocker {
static offset = 0;
static resultVisible = false;
// CSS class names
const LOADED = 'loaded';
const UNLOADED = 'unloaded';
const FOCUS = 'input-focus';
const FLEX = 'd-flex';
static on() {
ScrollBlocker.offset = window.scrollY;
$viewport.scrollTop(0);
}
static off() {
$viewport.scrollTop(ScrollBlocker.offset);
}
}
/*--- Actions in mobile screens (Sidebar hidden) ---*/
/* Actions in mobile screens (Sidebar hidden) */
class MobileSearchBar {
static on() {
$btnSbTrigger.addClass(C_UNLOADED);
$topbarTitle.addClass(C_UNLOADED);
$btnSearchTrigger.addClass(C_UNLOADED);
$search.addClass(C_FLEX);
$btnCancel.addClass(C_LOADED);
btnSbTrigger.classList.add(UNLOADED);
topbarTitle.classList.add(UNLOADED);
btnSearchTrigger.classList.add(UNLOADED);
search.classList.add(FLEX);
btnCancel.classList.add(LOADED);
}
static off() {
$btnCancel.removeClass(C_LOADED);
$search.removeClass(C_FLEX);
$btnSbTrigger.removeClass(C_UNLOADED);
$topbarTitle.removeClass(C_UNLOADED);
$btnSearchTrigger.removeClass(C_UNLOADED);
btnCancel.classList.remove(LOADED);
search.classList.remove(FLEX);
btnSbTrigger.classList.remove(UNLOADED);
topbarTitle.classList.remove(UNLOADED);
btnSearchTrigger.classList.remove(UNLOADED);
}
}
class ResultSwitch {
static resultVisible = false;
static on() {
if (!ScrollBlocker.resultVisible) {
// the block method must be called before $(#main-wrapper>.container) unloaded.
ScrollBlocker.on();
$resultWrapper.removeClass(C_UNLOADED);
$content.addClass(C_UNLOADED);
ScrollBlocker.resultVisible = true;
if (!this.resultVisible) {
resultWrapper.classList.remove(UNLOADED);
content.forEach((el) => {
el.classList.add(UNLOADED);
});
this.resultVisible = true;
}
}
static off() {
if (ScrollBlocker.resultVisible) {
$results.empty();
if ($hints.hasClass(C_UNLOADED)) {
$hints.removeClass(C_UNLOADED);
if (this.resultVisible) {
results.innerHTML = '';
if (hints.classList.contains(UNLOADED)) {
hints.classList.remove(UNLOADED);
}
$resultWrapper.addClass(C_UNLOADED);
$content.removeClass(C_UNLOADED);
// now the release method must be called after $(#main-wrapper>.container) display
ScrollBlocker.off();
$input.val('');
ScrollBlocker.resultVisible = false;
resultWrapper.classList.add(UNLOADED);
content.forEach((el) => {
el.classList.remove(UNLOADED);
});
input.textContent = '';
this.resultVisible = false;
}
}
}
function isMobileView() {
return $btnCancel.hasClass(C_LOADED);
return btnCancel.classList.contains(LOADED);
}
export function displaySearch() {
$btnSearchTrigger.on('click', function () {
btnSearchTrigger.addEventListener('click', () => {
MobileSearchBar.on();
ResultSwitch.on();
$input.trigger('focus');
input.focus();
});
$btnCancel.on('click', function () {
btnCancel.addEventListener('click', () => {
MobileSearchBar.off();
ResultSwitch.off();
});
$input.on('focus', function () {
$search.addClass(C_FOCUS);
input.addEventListener('focus', () => {
search.classList.add(FOCUS);
});
$input.on('focusout', function () {
$search.removeClass(C_FOCUS);
input.addEventListener('focusout', () => {
search.classList.remove(FOCUS);
});
$input.on('input', () => {
if ($input.val() === '') {
input.addEventListener('input', () => {
if (input.value === '') {
if (isMobileView()) {
$hints.removeClass(C_UNLOADED);
hints.classList.remove(UNLOADED);
} else {
ResultSwitch.off();
}
} else {
ResultSwitch.on();
if (isMobileView()) {
$hints.addClass(C_UNLOADED);
hints.classList.add(UNLOADED);
}
}
});