github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the page flickers when the search dialog pops up (#860)

Browse Source
This commit is contained in:
Tony Peng 2025-04-15 15:26:50 +08:00 committed by GitHub
parent 934baf98e2
commit a6f3be5d82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
source/css/_common/components/third-party/search.styl vendored
View File

@ -1,6 +1,7 @@
if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable')) {
.search-active {
overflow: hidden;
margin-right: var(--dialog-scrollgutter, 0);
}
.search-pop-overlay {

3
source/js/third-party/search/algolia-search.js vendored
View File

@ -100,6 +100,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Handle and trigger popup window
document.querySelectorAll('.popup-trigger').forEach(element => {
element.addEventListener('click', () => {
NexT.utils.setGutter();
document.body.classList.add('search-active');
// Wait for search-popup animation to complete
setTimeout(() => input.focus(), 500);
@ -108,6 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Monitor main search box
const onPopupClose = () => {
NexT.utils.setGutter('0');
document.body.classList.remove('search-active');
};
@ -121,6 +123,7 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('keydown', event => {
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
event.preventDefault();
NexT.utils.setGutter();
document.body.classList.add('search-active');
setTimeout(() => input.focus(), 500);
}

5
source/js/third-party/search/local-search.js vendored
View File

@ -1,4 +1,4 @@
/* global CONFIG, pjax, LocalSearch */
/* global CONFIG, NexT, pjax, LocalSearch */
document.addEventListener('DOMContentLoaded', () => {
if (!CONFIG.path) {
@ -57,6 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Handle and trigger popup window
document.querySelectorAll('.popup-trigger').forEach(element => {
element.addEventListener('click', () => {
NexT.utils.setGutter();
document.body.classList.add('search-active');
// Wait for search-popup animation to complete
setTimeout(() => input.focus(), 500);
@ -66,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Monitor main search box
const onPopupClose = () => {
NexT.utils.setGutter('0');
document.body.classList.remove('search-active');
};
@ -82,6 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('keydown', event => {
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
event.preventDefault();
NexT.utils.setGutter();
document.body.classList.add('search-active');
setTimeout(() => input.focus(), 500);
if (!localSearch.isfetched) localSearch.fetchData();

12
source/js/utils.js
View File

@ -442,6 +442,18 @@ NexT.utils = {
window.addEventListener('scroll', updateFooterPosition, { passive: true });
},
/**
* Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
* If no gap is provided, it calculates the gap as the difference between
* the window's inner width and the document body's client width.
*
* @param {string} [gap] - The gap value to be set. If not provided, the
* default gap is calculated automatically.
*/
setGutter(gap) {
document.body.style.setProperty('--dialog-scrollgutter', gap || `${window.innerWidth - document.body.clientWidth}px`);
},
getScript(src, options = {}, legacyCondition) {
if (typeof options === 'function') {
return this.getScript(src, {