From b0d8e8c484a0a1a8ef163d4f10c260c4cadc01e6 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Thu, 10 Oct 2024 13:54:37 +0200 Subject: [PATCH] Fix floating compact mode: revert logic in ZenCompactMode.mjs, use invisible padding. --- src/ZenCompactMode.mjs | 51 +++++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/src/ZenCompactMode.mjs b/src/ZenCompactMode.mjs index 30ec85f..de14e9a 100644 --- a/src/ZenCompactMode.mjs +++ b/src/ZenCompactMode.mjs @@ -178,19 +178,6 @@ var gZenCompactModeManager = { this._flashTimeouts[id] = null; }, - closeEntry(entry, target) { - if (entry.keepHoverDuration) { - this.flashElement(target, this.hideAfterHoverDuration, 'has-hover' + target.id, 'zen-has-hover'); - } else { - this._removeHoverFrames[target.id] = window.requestAnimationFrame(() => target.removeAttribute('zen-has-hover')); - } - }, - - shouldCloseFromEdge(expected, actual) { - return (expected === 'top' && actual === 'bottom') || (expected === 'bottom' && actual === 'top') - || (expected === 'left' && actual === 'right') || (expected === 'right' && actual === 'left'); - }, - addMouseActions() { for (let i = 0; i < this.hoverableElements.length; i++) { let target = this.hoverableElements[i].element; @@ -198,19 +185,43 @@ var gZenCompactModeManager = { this.clearFlashTimeout('has-hover' + target.id); window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true')); }); + target.addEventListener('mouseleave', (event) => { - const screenEdgeCrossed = this._getCrossedEdge(event.pageX, event.pageY, event.target); - if (!screenEdgeCrossed) return; - for (let entry of this.hoverableElements) { - if (this.shouldCloseFromEdge(entry.screenEdge, screenEdgeCrossed)) { - this.closeEntry(entry, entry.element); - } + if (this.hoverableElements[i].keepHoverDuration) { + this.flashElement(target, keepHoverDuration, 'has-hover' + target.id, 'zen-has-hover'); + } else { + this._removeHoverFrames[target.id] = window.requestAnimationFrame(() => target.removeAttribute('zen-has-hover')); } }); } + + document.documentElement.addEventListener('mouseleave', (event) => { + const screenEdgeCrossed = this._getCrossedEdge(event.pageX, event.pageY); + if (!screenEdgeCrossed) return; + for (let entry of this.hoverableElements) { + if (screenEdgeCrossed !== entry.screenEdge) continue; + const target = entry.element; + const boundAxis = entry.screenEdge === 'right' || entry.screenEdge === 'left' ? 'y' : 'x'; + if (!this._positionInBounds(boundAxis, target, event.pageX, event.pageY, 7)) { + continue; + } + window.cancelAnimationFrame(this._removeHoverFrames[target.id]); + + this.flashElement(target, this.hideAfterHoverDuration, 'has-hover' + target.id, 'zen-has-hover'); + document.addEventListener( + 'mousemove', + () => { + if (target.matches(':hover')) return; + target.removeAttribute('zen-has-hover'); + this.clearFlashTimeout('has-hover' + target.id); + }, + { once: true } + ); + } + }); }, - _getCrossedEdge(posX, posY, element = document.documentElement, maxDistance = 5) { + _getCrossedEdge(posX, posY, element = document.documentElement, maxDistance = 10) { const targetBox = element.getBoundingClientRect(); posX = Math.max(targetBox.left, Math.min(posX, targetBox.right)); posY = Math.max(targetBox.top, Math.min(posY, targetBox.bottom));