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

Use CSS :hover instead of mouse event

Browse Source
This commit is contained in:
Mimi 2020-06-20 15:22:58 +08:00
parent 8fd0c5a0fd
commit 7014193963
3 changed files with 15 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
source/css/_common/components/third-party/search.styl vendored
View File

@ -29,7 +29,6 @@
transform: scale(0);
transition: transform .2s;
width: 700px;
z-index: $zindex-5;
.search-active & {
transform: scale(1);

8
source/css/_common/outline/sidebar/sidebar-toggle.styl
View File

@ -9,3 +9,11 @@
.sidebar-toggle:hover .toggle-line {
background: $sidebar-highlight;
}
body:not(.sidebar-active) .sidebar-toggle:hover {
@extend .toggle.toggle-arrow;
}
.sidebar-active .sidebar-toggle {
@extend .toggle.toggle-close;
}

48
source/js/schemes/muse.js
View File

@ -5,34 +5,15 @@ document.addEventListener('DOMContentLoaded', () => {
const isRight = CONFIG.sidebar.position === 'right';
const mousePos = {};
const sidebarToggleLines = {
const sidebarToggleMotion = {
lines: document.querySelector('.sidebar-toggle'),
init : function() {
this.lines.classList.remove('toggle-arrow', 'toggle-close');
},
arrow: function() {
this.lines.classList.remove('toggle-close');
this.lines.classList.add('toggle-arrow');
},
close: function() {
this.lines.classList.remove('toggle-arrow');
this.lines.classList.add('toggle-close');
}
};
const sidebarToggleMotion = {
isSidebarVisible: false,
init : function() {
sidebarToggleLines.init();
window.addEventListener('mousedown', this.mousedownHandler.bind(this));
window.addEventListener('mousedown', this.mousedownHandler);
window.addEventListener('mouseup', this.mouseupHandler.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('mouseenter', this.mouseEnterHandler.bind(this));
document.querySelector('.sidebar-toggle').addEventListener('mouseleave', this.mouseLeaveHandler.bind(this));
window.addEventListener('sidebar:show', this.showSidebar.bind(this));
window.addEventListener('sidebar:hide', this.hideSidebar.bind(this));
window.addEventListener('sidebar:show', this.showSidebar);
window.addEventListener('sidebar:hide', this.hideSidebar);
},
mousedownHandler: function(event) {
mousePos.X = event.pageX;
@ -42,25 +23,15 @@ document.addEventListener('DOMContentLoaded', () => {
const deltaX = event.pageX - mousePos.X;
const deltaY = event.pageY - mousePos.Y;
const clickingBlankPart = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) < 20 && event.target.matches('.main');
if (this.isSidebarVisible && (clickingBlankPart || event.target.matches('img.medium-zoom-image, .fancybox img'))) {
// 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')) {
this.hideSidebar();
}
},
clickHandler: function() {
this.isSidebarVisible ? this.hideSidebar() : this.showSidebar();
},
mouseEnterHandler: function() {
if (!this.isSidebarVisible) {
sidebarToggleLines.arrow();
}
},
mouseLeaveHandler: function() {
if (!this.isSidebarVisible) {
sidebarToggleLines.init();
}
document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
},
showSidebar: function() {
this.isSidebarVisible = true;
document.body.classList.add('sidebar-active');
if (typeof Velocity === 'function') {
Velocity(document.querySelectorAll('.sidebar .motion-element'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
@ -68,14 +39,9 @@ document.addEventListener('DOMContentLoaded', () => {
drag : true
});
}
sidebarToggleLines.close();
},
hideSidebar: function() {
this.isSidebarVisible = false;
document.body.classList.remove('sidebar-active');
sidebarToggleLines.init();
}
};
sidebarToggleMotion.init();