ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-08 16:49:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made compact mode float

Browse source
This commit is contained in:
mauro-balades 2024-10-09 20:01:50 +02:00
parent 2b163c397c
commit 43ed740d69
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
1 changed files with 30 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/ZenCompactMode.mjs
View file

@ -178,6 +178,19 @@ var gZenCompactModeManager = {
this._flashTimeouts[id] = null; 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() { addMouseActions() {
for (let i = 0; i < this.hoverableElements.length; i++) { for (let i = 0; i < this.hoverableElements.length; i++) {
let target = this.hoverableElements[i].element; let target = this.hoverableElements[i].element;
@ -185,50 +198,35 @@ var gZenCompactModeManager = {
this.clearFlashTimeout('has-hover' + target.id); this.clearFlashTimeout('has-hover' + target.id);
window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true')); window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true'));
}); });
target.addEventListener('mouseleave', (event) => { target.addEventListener('mouseleave', (event) => {
if (this.hoverableElements[i].keepHoverDuration) { const screenEdgeCrossed = this._getCrossedEdge(event.pageX, event.pageY, event.target);
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; if (!screenEdgeCrossed) return;
for (let entry of this.hoverableElements) { for (let entry of this.hoverableElements) {
if (screenEdgeCrossed !== entry.screenEdge) continue; if (this.shouldCloseFromEdge(entry.screenEdge, screenEdgeCrossed)) {
const target = entry.element; this.closeEntry(entry, 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 = 10) { _fixCrossedEdge(edge) {
if (edge == "top") return "bottom";
if (edge == "bottom") return "top";
if (edge == "left") return "right";
if (edge == "right") return "left";
return edge;
},
_getCrossedEdge(posX, posY, element = document.documentElement, maxDistance = 5) {
const targetBox = element.getBoundingClientRect(); const targetBox = element.getBoundingClientRect();
posX = Math.max(targetBox.left, Math.min(posX, targetBox.right)); posX = Math.max(targetBox.left, Math.min(posX, targetBox.right));
posY = Math.max(targetBox.top, Math.min(posY, targetBox.bottom)); posY = Math.max(targetBox.top, Math.min(posY, targetBox.bottom));
return ['top', 'bottom', 'left', 'right'].find((edge, i) => { const edge = ['top', 'bottom', 'left', 'right'].find((edge, i) => {
const distance = Math.abs((i < 2 ? posY : posX) - targetBox[edge]); const distance = Math.abs((i < 2 ? posY : posX) - targetBox[edge]);
return distance <= maxDistance; return distance <= maxDistance;
}); });
return edge;
}, },
_positionInBounds(axis = 'x', element, x, y, error = 0) { _positionInBounds(axis = 'x', element, x, y, error = 0) {