Fix sidebar display

* See: https://github.com/next-theme/hexo-theme-next/issues/397
This commit is contained in:
Mimi 2021-10-29 15:43:29 +08:00
parent f84e5304ce
commit c698e50fc9

View File

@ -3,12 +3,11 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const isRight = CONFIG.sidebar.position === 'right'; const isRight = CONFIG.sidebar.position === 'right';
const mousePos = {};
const sidebarToggleMotion = { const sidebarToggleMotion = {
lines: document.querySelector('.sidebar-toggle'), mouse: {},
init : function() { init : function() {
window.addEventListener('mousedown', this.mousedownHandler); window.addEventListener('mousedown', this.mousedownHandler.bind(this));
window.addEventListener('mouseup', this.mouseupHandler.bind(this)); window.addEventListener('mouseup', this.mouseupHandler.bind(this));
document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
@ -16,12 +15,12 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('sidebar:hide', this.hideSidebar); window.addEventListener('sidebar:hide', this.hideSidebar);
}, },
mousedownHandler: function(event) { mousedownHandler: function(event) {
mousePos.X = event.pageX; this.mouse.X = event.pageX;
mousePos.Y = event.pageY; this.mouse.Y = event.pageY;
}, },
mouseupHandler: function(event) { mouseupHandler: function(event) {
const deltaX = event.pageX - mousePos.X; const deltaX = event.pageX - this.mouse.X;
const deltaY = event.pageY - mousePos.Y; const deltaY = event.pageY - this.mouse.Y;
const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
// Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
@ -47,7 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
document.body.classList.remove('sidebar-active'); document.body.classList.remove('sidebar-active');
} }
}; };
sidebarToggleMotion.init(); if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
function updateFooterPosition() { function updateFooterPosition() {
const footer = document.querySelector('.footer'); const footer = document.querySelector('.footer');