New method NexT.utils.activateSidebarPanel

* See: https://github.com/next-theme/hexo-theme-next/issues/368
This commit is contained in:
Mimi 2021-09-13 14:25:49 +08:00
parent debbe5bdc9
commit 292b8a258e
4 changed files with 31 additions and 26 deletions

View File

@ -1,6 +1,6 @@
'use strict';
const merge = require('hexo-util').deepMerge || require('lodash/merge');
const merge = require('hexo-util').deepMerge;
module.exports = hexo => {
const data = hexo.locals.get('data');

View File

@ -16,32 +16,9 @@ NexT.boot.registerEvents = function() {
document.body.classList.toggle('site-nav-on');
});
const duration = 200;
document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
element.addEventListener('click', () => {
if (element.matches('.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview')) return;
const sidebar = document.querySelector('.sidebar-inner');
const panel = document.querySelector('.sidebar-panel-container');
const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active'];
window.anime({
duration,
targets : panel,
easing : 'linear',
opacity : 0,
translateY: [0, -20],
complete : () => {
// Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
window.anime({
duration,
targets : panel,
easing : 'linear',
opacity : [0, 1],
translateY: [-20, 0]
});
}
});
NexT.utils.activateSidebarPanel(index);
});
});

View File

@ -27,6 +27,6 @@ document.addEventListener('pjax:success', () => {
}
const hasTOC = document.querySelector('.post-toc');
document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
document.querySelector(hasTOC ? '.sidebar-nav-toc' : '.sidebar-nav-overview').click();
NexT.utils.activateSidebarPanel(hasTOC ? 0 : 1);
NexT.utils.updateSidebarPosition();
});

View File

@ -305,6 +305,34 @@ NexT.utils = {
}
},
activateSidebarPanel: function(index) {
const duration = 200;
const sidebar = document.querySelector('.sidebar-inner');
const panel = document.querySelector('.sidebar-panel-container');
const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active'];
if (sidebar.classList.contains(activeClassName[index])) return;
window.anime({
duration,
targets : panel,
easing : 'linear',
opacity : 0,
translateY: [0, -20],
complete : () => {
// Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
window.anime({
duration,
targets : panel,
easing : 'linear',
opacity : [0, 1],
translateY: [-20, 0]
});
}
});
},
getScript: function(src, options = {}, legacyCondition) {
if (typeof options === 'function') {
return this.getScript(src, {