mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 16:19:58 +02:00
Refactor ZenCompactMode to add event listeners and flashSidebar enhancements
This commit is contained in:
parent
80a8904bbc
commit
e14fbd8e5c
3 changed files with 22 additions and 7 deletions
|
@ -1,5 +1,6 @@
|
||||||
var gZenCompactModeManager = {
|
var gZenCompactModeManager = {
|
||||||
_flashSidebarTimeout: {},
|
_flashSidebarTimeout: {},
|
||||||
|
_evenListeners: [],
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
|
Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
|
||||||
|
@ -26,7 +27,12 @@ var gZenCompactModeManager = {
|
||||||
return this._sidebar;
|
return this._sidebar;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
addEventListener(callback) {
|
||||||
|
this._evenListeners.push(callback);
|
||||||
|
},
|
||||||
|
|
||||||
_updateEvent() {
|
_updateEvent() {
|
||||||
|
this._evenListeners.forEach((callback) => callback());
|
||||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
|
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -63,7 +69,7 @@ var gZenCompactModeManager = {
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
||||||
flashSidebar(element = null, duration = null, id = null) {
|
flashSidebar(element = null, duration = null, id = null, forFlash = true) {
|
||||||
if (!element) {
|
if (!element) {
|
||||||
element = this.sidebar;
|
element = this.sidebar;
|
||||||
}
|
}
|
||||||
|
@ -74,18 +80,23 @@ var gZenCompactModeManager = {
|
||||||
id = this.sidebar.id;
|
id = this.sidebar.id;
|
||||||
}
|
}
|
||||||
let tabPanels = document.getElementById('tabbrowser-tabpanels');
|
let tabPanels = document.getElementById('tabbrowser-tabpanels');
|
||||||
if (element.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
|
if (element.matches(':hover') || (forFlash && tabPanels.matches("[zen-split-view='true']"))) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this._flashSidebarTimeout[id]) {
|
if (this._flashSidebarTimeout[id]) {
|
||||||
clearTimeout(this._flashSidebarTimeout[id]);
|
clearTimeout(this._flashSidebarTimeout[id]);
|
||||||
} else {
|
} else if (forFlash) {
|
||||||
window.requestAnimationFrame(() => element.setAttribute('flash-popup', ''));
|
window.requestAnimationFrame(() => element.setAttribute('flash-popup', ''));
|
||||||
|
} else {
|
||||||
|
window.requestAnimationFrame(() => element.setAttribute('zen-has-hover', 'true'));
|
||||||
}
|
}
|
||||||
this._flashSidebarTimeout[id] = setTimeout(() => {
|
this._flashSidebarTimeout[id] = setTimeout(() => {
|
||||||
window.requestAnimationFrame(() => {
|
window.requestAnimationFrame(() => {
|
||||||
|
if (forFlash) {
|
||||||
element.removeAttribute('flash-popup');
|
element.removeAttribute('flash-popup');
|
||||||
|
} else {
|
||||||
element.removeAttribute('zen-has-hover');
|
element.removeAttribute('zen-has-hover');
|
||||||
|
}
|
||||||
this._flashSidebarTimeout[id] = null;
|
this._flashSidebarTimeout[id] = null;
|
||||||
});
|
});
|
||||||
}, duration);
|
}, duration);
|
||||||
|
@ -95,12 +106,12 @@ var gZenCompactModeManager = {
|
||||||
for (let i = 0; i < this.hoverableElements.length; i++) {
|
for (let i = 0; i < this.hoverableElements.length; i++) {
|
||||||
this.hoverableElements[i].addEventListener('mouseenter', (event) => {
|
this.hoverableElements[i].addEventListener('mouseenter', (event) => {
|
||||||
let target = this.hoverableElements[i];
|
let target = this.hoverableElements[i];
|
||||||
target.setAttribute('zen-has-hover', 'true', target.id);
|
target.setAttribute('zen-has-hover', 'true');
|
||||||
});
|
});
|
||||||
|
|
||||||
this.hoverableElements[i].addEventListener('mouseleave', (event) => {
|
this.hoverableElements[i].addEventListener('mouseleave', (event) => {
|
||||||
let target = this.hoverableElements[i];
|
let target = this.hoverableElements[i];
|
||||||
this.flashSidebar(target, this.hideAfterHoverDuration, target.id);
|
this.flashSidebar(target, this.hideAfterHoverDuration, target.id, false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -133,6 +133,7 @@ var gZenBrowserManagerSidebar = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const button = document.getElementById('zen-sidepanel-button');
|
const button = document.getElementById('zen-sidepanel-button');
|
||||||
|
if (!button) return;
|
||||||
if (Services.prefs.getBoolPref('zen.sidebar.enabled')) {
|
if (Services.prefs.getBoolPref('zen.sidebar.enabled')) {
|
||||||
button.removeAttribute('hidden');
|
button.removeAttribute('hidden');
|
||||||
} else {
|
} else {
|
||||||
|
@ -187,6 +188,7 @@ var gZenBrowserManagerSidebar = {
|
||||||
|
|
||||||
_updateSidebarButton() {
|
_updateSidebarButton() {
|
||||||
let button = document.getElementById('zen-sidepanel-button');
|
let button = document.getElementById('zen-sidepanel-button');
|
||||||
|
if (!button) return;
|
||||||
if (!document.getElementById('zen-sidebar-web-panel').hasAttribute('hidden')) {
|
if (!document.getElementById('zen-sidebar-web-panel').hasAttribute('hidden')) {
|
||||||
button.setAttribute('open', 'true');
|
button.setAttribute('open', 'true');
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -515,6 +515,8 @@ var ZenWorkspaces = {
|
||||||
icon?.removeAttribute('selected');
|
icon?.removeAttribute('selected');
|
||||||
await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
|
await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
|
||||||
document.getElementById('PanelUI-zen-workspaces').hidePopup(true);
|
document.getElementById('PanelUI-zen-workspaces').hidePopup(true);
|
||||||
|
await this._updateWorkspacesButton();
|
||||||
|
await this._propagateWorkspaceData();
|
||||||
},
|
},
|
||||||
|
|
||||||
async saveWorkspaceFromEdit() {
|
async saveWorkspaceFromEdit() {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue