diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl index 7498c609b..273d63e0b 100644 --- a/source/css/_common/components/third-party/search.styl +++ b/source/css/_common/components/third-party/search.styl @@ -29,7 +29,6 @@ transform: scale(0); transition: transform .2s; width: 700px; - z-index: $zindex-5; .search-active & { transform: scale(1); diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl index 259556525..6fb5aa35f 100644 --- a/source/css/_common/outline/sidebar/sidebar-toggle.styl +++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl @@ -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; +} diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js index 72349b1df..7860487ca 100644 --- a/source/js/schemes/muse.js +++ b/source/js/schemes/muse.js @@ -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();