mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 19:29:58 +02:00
Made compact mode float
This commit is contained in:
parent
2b163c397c
commit
43ed740d69
1 changed files with 30 additions and 32 deletions
|
@ -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) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue