mirror of
https://github.com/zen-browser/components.git
synced 2025-07-07 21:19:57 +02:00
Only flash sidebar when mouse leaves the browser, refactor flashSidebar
This commit is contained in:
parent
b84a9418c2
commit
be25636bc6
1 changed files with 88 additions and 23 deletions
|
@ -1,5 +1,5 @@
|
|||
var gZenCompactModeManager = {
|
||||
_flashSidebarTimeout: null,
|
||||
_flashTimeouts: {},
|
||||
|
||||
init() {
|
||||
Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
|
||||
|
@ -8,6 +8,7 @@ var gZenCompactModeManager = {
|
|||
gZenUIManager.addPopupTrackingAttribute(this.sidebar);
|
||||
gZenUIManager.addPopupTrackingAttribute(document.getElementById('zen-appcontent-navbar-container'));
|
||||
|
||||
Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
|
||||
this.addMouseActions();
|
||||
},
|
||||
|
||||
|
@ -19,6 +20,13 @@ var gZenCompactModeManager = {
|
|||
Services.prefs.setBoolPref('zen.view.compact', value);
|
||||
},
|
||||
|
||||
get sidebarIsOnRight() {
|
||||
if (this._sidebarIsOnRight) {
|
||||
return this._sidebarIsOnRight;
|
||||
}
|
||||
return Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
|
||||
},
|
||||
|
||||
get sidebar() {
|
||||
if (!this._sidebar) {
|
||||
this._sidebar= document.getElementById('navigator-toolbox');
|
||||
|
@ -38,6 +46,10 @@ var gZenCompactModeManager = {
|
|||
this._flashSidebarDuration = Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration');
|
||||
},
|
||||
|
||||
_updateSidebarIsOnRight() {
|
||||
this._sidebarIsOnRight = Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
|
||||
},
|
||||
|
||||
toggleSidebar() {
|
||||
this.sidebar.toggleAttribute('zen-user-show');
|
||||
},
|
||||
|
@ -58,47 +70,100 @@ var gZenCompactModeManager = {
|
|||
|
||||
get hoverableElements() {
|
||||
return [
|
||||
this.sidebar,
|
||||
document.getElementById('zen-appcontent-navbar-container'),
|
||||
{
|
||||
element: this.sidebar,
|
||||
getScreenEdge: () => this.sidebarIsOnRight ? "right" : "left",
|
||||
},
|
||||
{
|
||||
element: document.getElementById('zen-appcontent-navbar-container'),
|
||||
getScreenEdge: () => "top",
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
flashSidebar(element = null, duration = null) {
|
||||
if (!element) {
|
||||
element = this.sidebar;
|
||||
}
|
||||
if (!duration) {
|
||||
duration = this.flashSidebarDuration;
|
||||
}
|
||||
flashSidebar(duration = this.flashSidebarDuration) {
|
||||
let tabPanels = document.getElementById('tabbrowser-tabpanels');
|
||||
if (element.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
|
||||
if (!tabPanels.matches("[zen-split-view='true']")) {
|
||||
this.flashElement(this.sidebar, duration, this.sidebar.id);
|
||||
}
|
||||
},
|
||||
|
||||
flashElement(element, duration, id, attrName = 'flash-popup') {
|
||||
if (element.matches(':hover')) {
|
||||
return;
|
||||
}
|
||||
if (this._flashSidebarTimeout) {
|
||||
clearTimeout(this._flashSidebarTimeout);
|
||||
if (this._flashTimeouts[id]) {
|
||||
clearTimeout(this._flashTimeouts[id]);
|
||||
} else {
|
||||
window.requestAnimationFrame(() => element.setAttribute('flash-popup', ''));
|
||||
requestAnimationFrame(() => element.setAttribute(attrName, ''));
|
||||
}
|
||||
this._flashSidebarTimeout = setTimeout(() => {
|
||||
this._flashTimeouts[id] = setTimeout(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
element.removeAttribute('flash-popup');
|
||||
this._flashSidebarTimeout = null;
|
||||
element.removeAttribute(attrName);
|
||||
this._flashTimeouts[id] = null;
|
||||
});
|
||||
}, duration);
|
||||
},
|
||||
|
||||
clearFlashTimeout(id) {
|
||||
clearTimeout(this._flashTimeouts[id]);
|
||||
this._flashTimeouts[id] = null;
|
||||
},
|
||||
|
||||
addMouseActions() {
|
||||
for (let i = 0; i < this.hoverableElements.length; i++) {
|
||||
this.hoverableElements[i].addEventListener('mouseenter', (event) => {
|
||||
let target = this.hoverableElements[i];
|
||||
const target = this.hoverableElements[i].element;
|
||||
target.addEventListener('mouseenter', (event) => {
|
||||
target.setAttribute('zen-user-hover', 'true');
|
||||
});
|
||||
|
||||
this.hoverableElements[i].addEventListener('mouseleave', (event) => {
|
||||
let target = this.hoverableElements[i];
|
||||
this.flashSidebar(target, this.hideAfterHoverDuration);
|
||||
});
|
||||
if (this.hoverableElements[i].keepHoverDuration) {
|
||||
target.addEventListener('mouseleave', (event) => {
|
||||
this.flashSidebar(target, keepHoverDuration, target.id, 'hover-timeout');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('mouseleave', (event) => {
|
||||
for (let i = 0; i < this.hoverableElements.length; i++) {
|
||||
const target = this.hoverableElements[i].element;
|
||||
const edge = this.hoverableElements[i].getScreenEdge();
|
||||
if (!edge) return;
|
||||
const orient = (edge === "left" || edge === "right" ? "vertical" : "horizontal");
|
||||
if (
|
||||
this._getNearestEdge(document.body, event.pageX, event.pageY) === edge
|
||||
&& this._positionIsAligned(orient, target, event.pageX, event.pageY, 7)
|
||||
) {
|
||||
this.flashElement(target, this.hideAfterHoverDuration, target.id);
|
||||
|
||||
document.addEventListener('mousemove', () => {
|
||||
target.removeAttribute('flash-popup');
|
||||
this.clearFlashTimeout(target.id);
|
||||
}, {once: true});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_getNearestEdge(element, posX, posY) {
|
||||
const targetBox = element.getBoundingClientRect();
|
||||
let smallestDistance = Infinity;
|
||||
let closestEdge = "";
|
||||
for (let edge of ["top", "bottom", "left", "right"]) {
|
||||
const onXAxis = edge === "left" || edge === "right";
|
||||
const distance = Math.abs( (onXAxis ? posX : posY) - targetBox[edge]);
|
||||
if (smallestDistance > distance) {
|
||||
smallestDistance = distance;
|
||||
closestEdge = edge;
|
||||
}
|
||||
}
|
||||
return closestEdge;
|
||||
},
|
||||
|
||||
_positionIsAligned(axis = "x", element, x, y, error = 0) {
|
||||
const bBox = element.getBoundingClientRect();
|
||||
if (axis === "x") return bBox.top - error < y && y < bBox.bottom + error;
|
||||
else return bBox.left - error < x && x < bBox.right + error;
|
||||
},
|
||||
|
||||
toggleToolbar() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue