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

Optimize sidebar-panel animation

Browse Source
This commit is contained in:
Mimi 2020-06-28 13:47:30 +08:00
parent 0259b95123
commit 327d8bf2be
5 changed files with 40 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
layout/_macro/sidebar.njk
View File

@ -6,14 +6,14 @@
</div>
<aside class="sidebar">
<div class="sidebar-inner">
{%- set display_toc = page.toc.enable and display_toc %}
{%- if display_toc %}
{%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
{%- set display_toc = toc.length > 1 and display_toc %}
{%- endif %}
{%- set display_toc = page.toc.enable and display_toc %}
{%- if display_toc %}
{%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
{%- set display_toc = toc.length > 1 and display_toc %}
{%- endif %}
<ul class="sidebar-nav motion-element">
<div class="sidebar-inner {% if display_toc %}sidebar-nav-active sidebar-toc-active{% else %}sidebar-overview-active{% endif %}">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
{{ __('sidebar.toc') }}
</li>
@ -23,18 +23,18 @@
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
<section class="post-toc-wrap sidebar-panel">
{%- if display_toc %}
<div class="post-toc motion-element">{{ toc }}</div>
{%- endif %}
</div>
</section>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<section class="site-overview-wrap sidebar-panel">
{{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
{{- next_inject('sidebar') }}
</div>
</section>
{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top motion-element">

10
layout/_scripts/pjax.njk
View File

@ -8,9 +8,6 @@ var pjax = new Pjax({
'.languages',
'#pjax'
],
switches: {
'.post-toc-wrap': Pjax.switches.innerHTML
},
analytics: false,
cacheBust: false,
scrollTo : !CONFIG.bookmark.enable
@ -27,6 +24,13 @@ document.addEventListener('pjax:success', () => {
.add(NexT.motion.middleWares.postList)
.bootstrap();
}
const hasTOC = document.querySelector('.post-toc');
document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
if (hasTOC) {
document.querySelector('.sidebar-nav-toc').click();
} else {
document.querySelector('.sidebar-nav-overview').click();
}
NexT.utils.updateSidebarPosition();
});
</script>

19
source/css/_common/outline/sidebar/sidebar-nav.styl
View File

@ -1,9 +1,14 @@
// Sidebar Navigation
.sidebar-nav {
display: none;
margin: 0;
padding-bottom: 20px;
padding-left: 0;
.sidebar-nav-active & {
display: block;
}
li {
border-bottom: 1px solid transparent;
color: $sidebar-nav-color;
@ -19,14 +24,14 @@
color: $sidebar-nav-hover-color;
}
}
}
.sidebar-nav-active {
border-bottom-color: $sidebar-highlight;
.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview {
border-bottom-color: $sidebar-highlight;
color: $sidebar-highlight;
&:hover {
color: $sidebar-highlight;
&:hover {
color: $sidebar-highlight;
}
}
}
@ -37,6 +42,6 @@
overflow-y: auto;
}
.sidebar-panel-active {
.sidebar-toc-active .post-toc-wrap, .sidebar-overview-active .site-overview-wrap {
display: block;
}

24
source/js/next-boot.js
View File

@ -30,35 +30,29 @@ NexT.boot.registerEvents = function() {
document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
element.addEventListener('click', event => {
const item = event.currentTarget;
const activeTabClassName = 'sidebar-nav-active';
const activePanelClassName = 'sidebar-panel-active';
if (item.classList.contains(activeTabClassName)) return;
if (item.matches('.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview')) return;
const sidebar = document.querySelector('.sidebar-inner');
const panel = document.querySelectorAll('.sidebar-panel');
const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active'];
const targets = document.querySelectorAll('.sidebar-panel');
const target = targets[index];
const currentTarget = targets[1 - index];
window.anime({
targets : currentTarget,
targets : panel[1 - index],
duration: TAB_ANIMATE_DURATION,
easing : 'linear',
opacity : 0,
complete: () => {
// Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
currentTarget.classList.remove(activePanelClassName);
target.style.opacity = 0;
target.classList.add(activePanelClassName);
sidebar.classList.remove(activeClassName[1 - index]);
panel[index].style.opacity = 0;
sidebar.classList.add(activeClassName[index]);
window.anime({
targets : target,
targets : panel[index],
duration: TAB_ANIMATE_DURATION,
easing : 'linear',
opacity : 1
});
}
});
[...item.parentNode.children].forEach(element => {
element.classList.toggle(activeTabClassName, element === item);
});
});
});

12
source/js/utils.js
View File

@ -298,20 +298,10 @@ NexT.utils = {
},
updateSidebarPosition: function() {
const sidebarNav = document.querySelector('.sidebar-nav');
const hasTOC = document.querySelector('.post-toc');
if (hasTOC) {
sidebarNav.style.display = '';
sidebarNav.classList.add('motion-element');
document.querySelector('.sidebar-nav-toc').click();
} else {
sidebarNav.style.display = 'none';
sidebarNav.classList.remove('motion-element');
document.querySelector('.sidebar-nav-overview').click();
}
NexT.utils.initSidebarDimension();
if (window.screen.width < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
// Expand sidebar on post detail page by default, when post has a toc.
const hasTOC = document.querySelector('.post-toc');
let display = CONFIG.page.sidebar;
if (typeof display !== 'boolean') {
// There's no definition sidebar in the page front-matter.