lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: optimize left side page toggle

This commit is contained in:
XPoet 2021-01-25 10:08:52 +08:00
parent d9c4d973b3
commit 28a568f748
2 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
source/js/left-side-toggle.js
View File

@ -1,39 +1,39 @@
/* global KEEP */
function initLeftSideToggle() { function initLeftSideToggle() {
KEEP.utils.leftSideToggle = { KEEP.utils.leftSideToggle = {
init() { toggleBar: document.querySelector('.page-aside-toggle'),
this.toggleBar = document.querySelector('.page-aside-toggle'); pageTopDom: document.querySelector('.page-main-content-top'),
this.pageTopDom = document.querySelector('.page-main-content-top'); containerDom: document.querySelector('.page-container'),
this.containerDom = document.querySelector('.page-container'); leftAsideDom: document.querySelector('.page-aside'),
this.leftAsideDom = document.querySelector('.page-aside'); toggleBarIcon: document.querySelector('.page-aside-toggle i'),
this.isOpenPageAside = false;
}, isOpenPageAside: false,
initToggleBarButton() { initToggleBarButton() {
if (this.toggleBar) { this.toggleBar && this.toggleBar.addEventListener('click', () => {
const toggleBarIcon = this.toggleBar.querySelector('i');
this.toggleBar.addEventListener('click', () => {
this.isOpenPageAside = !this.isOpenPageAside; this.isOpenPageAside = !this.isOpenPageAside;
if (this.isOpenPageAside) { KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside;
toggleBarIcon.classList.add('fa-outdent'); KEEP.setStyleStatus();
toggleBarIcon.classList.remove('fa-indent');
} else {
toggleBarIcon.classList.add('fa-indent');
toggleBarIcon.classList.remove('fa-outdent');
}
this.changePageLayoutWhenOpenToggle(this.isOpenPageAside); this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
}) });
}
}, },
changePageLayoutWhenOpenToggle(isOpen) { changePageLayoutWhenOpenToggle(isOpen) {
this.toggleBarIcon && (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent');
const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'; const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px';
this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`; this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`;
}, },
pageAsideHandleOfTOC(isOpen) {
this.toggleBar.style.display = 'flex';
this.isOpenPageAside = isOpen;
this.changePageLayoutWhenOpenToggle(isOpen);
}
} }
KEEP.utils.leftSideToggle.init();
KEEP.utils.leftSideToggle.initToggleBarButton(); KEEP.utils.leftSideToggle.initToggleBarButton();
} }

11
source/js/toc.js
View File

@ -1,3 +1,4 @@
/* global KEEP */
function initTOC() { function initTOC() {
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li'); KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
@ -66,9 +67,13 @@ function initTOC() {
}, },
showPageAsideWhenHasTOC() { showPageAsideWhenHasTOC() {
KEEP.utils.leftSideToggle.toggleBar.style.display = 'flex'; const styleStatus = KEEP.getStyleStatus();
KEEP.utils.leftSideToggle.isOpenPageAside = true; const key = 'isOpenPageAside';
KEEP.utils.leftSideToggle.changePageLayoutWhenOpenToggle(KEEP.utils.leftSideToggle.isOpenPageAside); if (styleStatus && styleStatus.hasOwnProperty(key)) {
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key]);
} else {
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true);
}
} }
} }