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

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

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

11
source/js/toc.js
View File

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