mirror of
https://github.com/zotero/zotero.git
synced 2026-09-27 01:21:27 +00:00
Make XULElementBase into a mixin to reduce code duplication (#5270)
This commit is contained in:
parent
0b339a3a30
commit
c42e144f56
2 changed files with 52 additions and 71 deletions
|
|
@ -23,47 +23,63 @@
|
|||
***** END LICENSE BLOCK *****
|
||||
*/
|
||||
|
||||
class XULElementBase extends XULElement {
|
||||
initialized = false;
|
||||
|
||||
/**
|
||||
* @return {DocumentFragment | null}
|
||||
*/
|
||||
get content() {
|
||||
return null;
|
||||
}
|
||||
/**
|
||||
* Add utility functions to XULElement or a subclass.
|
||||
* @param {{ new(): XULElement }} Class
|
||||
*/
|
||||
function XULElementMixin(Class) {
|
||||
return class extends Class {
|
||||
initialized = false;
|
||||
|
||||
init() {}
|
||||
|
||||
destroy() {}
|
||||
|
||||
connectedCallback() {
|
||||
let content = this.content;
|
||||
if (content) {
|
||||
content = document.importNode(content, true);
|
||||
this.append(content);
|
||||
/**
|
||||
* @return {DocumentFragment | null}
|
||||
*/
|
||||
get content() {
|
||||
return null;
|
||||
}
|
||||
|
||||
MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
|
||||
MozXULElement.insertFTLIfNeeded("zotero.ftl");
|
||||
if (document.l10n && this.shadowRoot) {
|
||||
document.l10n.connectRoot(this.shadowRoot);
|
||||
init() {}
|
||||
|
||||
destroy() {}
|
||||
|
||||
connectedCallback() {
|
||||
if (typeof super.connectedCallback === 'function') {
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
let content = this.content;
|
||||
if (content) {
|
||||
content = document.importNode(content, true);
|
||||
this.append(content);
|
||||
}
|
||||
|
||||
MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
|
||||
MozXULElement.insertFTLIfNeeded("zotero.ftl");
|
||||
if (document.l10n && this.shadowRoot) {
|
||||
document.l10n.connectRoot(this.shadowRoot);
|
||||
}
|
||||
|
||||
window.addEventListener("unload", this._handleWindowUnload);
|
||||
|
||||
this.initialized = true;
|
||||
this.init();
|
||||
}
|
||||
|
||||
window.addEventListener("unload", this._handleWindowUnload);
|
||||
disconnectedCallback() {
|
||||
if (typeof super.disconnectedCallback === 'function') {
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
this.initialized = true;
|
||||
this.init();
|
||||
}
|
||||
this.replaceChildren();
|
||||
this.destroy();
|
||||
window.removeEventListener("unload", this._handleWindowUnload);
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.replaceChildren();
|
||||
this.destroy();
|
||||
window.removeEventListener("unload", this._handleWindowUnload);
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
_handleWindowUnload = () => {
|
||||
this.disconnectedCallback();
|
||||
_handleWindowUnload = () => {
|
||||
this.disconnectedCallback();
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
var XULElementBase = XULElementMixin(XULElement);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
delete document.createXULElement("panel");
|
||||
}
|
||||
const XULPanelElement = customElements.get("panel");
|
||||
class TabsMenuPanel extends XULPanelElement {
|
||||
class TabsMenuPanel extends XULElementMixin(XULPanelElement) {
|
||||
content = MozXULElement.parseXULToFragment(`
|
||||
<vbox id="zotero-tabs-menu-wrapper" class="focus-states-target">
|
||||
<html:input id="zotero-tabs-menu-filter"
|
||||
|
|
@ -89,36 +89,6 @@
|
|||
this.openPopup(elem, "after_start", -20, -2, false, false);
|
||||
}
|
||||
|
||||
// From XULElementBase
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
let content = this.content;
|
||||
if (content) {
|
||||
content = document.importNode(content, true);
|
||||
this.append(content);
|
||||
}
|
||||
|
||||
MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
|
||||
MozXULElement.insertFTLIfNeeded("zotero.ftl");
|
||||
if (document.l10n && this.shadowRoot) {
|
||||
document.l10n.connectRoot(this.shadowRoot);
|
||||
}
|
||||
|
||||
window.addEventListener("unload", this._handleWindowUnload);
|
||||
|
||||
this.initialized = true;
|
||||
this.init();
|
||||
}
|
||||
|
||||
// From XULElementBase
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.replaceChildren();
|
||||
this.destroy();
|
||||
window.removeEventListener("unload", this._handleWindowUnload);
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the list of opened tabs in tabs menu.
|
||||
*/
|
||||
|
|
@ -374,11 +344,6 @@
|
|||
this._filterInput.focus();
|
||||
}
|
||||
|
||||
// From XULElementBase
|
||||
_handleWindowUnload = () => {
|
||||
this.disconnectedCallback();
|
||||
};
|
||||
|
||||
_handleShowing = (event) => {
|
||||
if (event.originalTarget !== this) return;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue