Use private methods in TabGroup constructor
This commit is contained in:
Thomas Brouard
parent
5fc15ab42b
commit
55e9c00d3c
5 changed files with 107 additions and 101 deletions
3
dist/electron-tabs.d.ts
vendored
3
dist/electron-tabs.d.ts
vendored
|
|
@ -38,6 +38,7 @@ export class TabGroup extends HTMLElement {
|
|||
on(type: string, fn: (...detail: any[]) => void): void;
|
||||
once(type: string, fn: (detail: string) => void): void;
|
||||
connectedCallback(): void;
|
||||
initSortable(): void;
|
||||
setDefaultTab(tab: TabOptions): void;
|
||||
addTab(args?: TabOptions | ((tabGroup: TabGroup) => TabOptions)): Tab;
|
||||
getTab(id: number): Tab;
|
||||
|
|
@ -81,7 +82,7 @@ export class Tab extends EventTarget {
|
|||
getBadge(): string;
|
||||
setIcon(iconURL: string, icon: string): this;
|
||||
getIcon(): string;
|
||||
setPosition(newPosition: number): void;
|
||||
setPosition(newPosition: number): this;
|
||||
getPosition(fromRight?: boolean): number;
|
||||
activate(): this;
|
||||
show(flag?: boolean): this;
|
||||
|
|
|
|||
2
dist/electron-tabs.d.ts.map
vendored
2
dist/electron-tabs.d.ts.map
vendored
File diff suppressed because one or more lines are too long
89
dist/electron-tabs.js
vendored
89
dist/electron-tabs.js
vendored
|
|
@ -2534,7 +2534,33 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
|
|||
viewClass: this.getAttribute("view-class") || "etabs-view",
|
||||
visibilityThreshold: Number(this.getAttribute("visibility-threshold")) || 0
|
||||
};
|
||||
// Create custom element
|
||||
this.tabs = [];
|
||||
this.newTabId = 0;
|
||||
this.createComponent();
|
||||
this.initVisibility();
|
||||
if (this.options.sortable) this.initSortable();
|
||||
this.emit("ready", this);
|
||||
}
|
||||
emit(type, ...args) {
|
||||
return $eda442ba39f881a8$var$emit(this, type, args);
|
||||
}
|
||||
on(type, fn) {
|
||||
return $eda442ba39f881a8$var$on(this, type, fn);
|
||||
}
|
||||
once(type, fn) {
|
||||
return $eda442ba39f881a8$var$on(this, type, fn, {
|
||||
once: true
|
||||
});
|
||||
}
|
||||
connectedCallback() {
|
||||
// Support custom styles
|
||||
const style = this.querySelector("style");
|
||||
if (style) {
|
||||
const clone = style.cloneNode(true);
|
||||
this.shadow.appendChild(clone);
|
||||
}
|
||||
}
|
||||
createComponent() {
|
||||
const shadow = this.attachShadow({
|
||||
mode: "open"
|
||||
});
|
||||
|
|
@ -2552,6 +2578,12 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
|
|||
buttonContainer.setAttribute("class", "etabs-buttons");
|
||||
tabgroup.appendChild(buttonContainer);
|
||||
this.buttonContainer = buttonContainer;
|
||||
if (this.options.newTabButton) {
|
||||
const button = this.buttonContainer.appendChild(document.createElement("button"));
|
||||
button.classList.add(`${this.options.tabClass}-button-new`);
|
||||
button.innerHTML = this.options.newTabButtonText;
|
||||
button.addEventListener("click", this.addTab.bind(this, undefined), false);
|
||||
}
|
||||
const viewContainer = document.createElement("div");
|
||||
viewContainer.setAttribute("class", "etabs-views");
|
||||
wrapper.appendChild(viewContainer);
|
||||
|
|
@ -2560,49 +2592,6 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
|
|||
style.textContent = (/*@__PURE__*/$parcel$interopDefault($0648b347057451f2$exports));
|
||||
shadow.appendChild(style);
|
||||
shadow.appendChild(wrapper);
|
||||
this.tabs = [];
|
||||
this.newTabId = 0;
|
||||
this.initNewTabButton();
|
||||
this.initVisibility();
|
||||
// Init sortable tabs
|
||||
if (this.options.sortable) {
|
||||
const initSortable = ()=>{
|
||||
const options = Object.assign({
|
||||
direction: "horizontal",
|
||||
animation: 150,
|
||||
swapThreshold: 0.20
|
||||
}, this.options.sortableOptions);
|
||||
new $64afbd09cd65a300$export$2e2bcd8739ae039(this.tabContainer, options);
|
||||
};
|
||||
if ($64afbd09cd65a300$export$2e2bcd8739ae039) initSortable();
|
||||
else document.addEventListener("DOMContentLoaded", initSortable);
|
||||
}
|
||||
this.emit("ready", this);
|
||||
}
|
||||
emit(type, ...args) {
|
||||
return $eda442ba39f881a8$var$emit(this, type, args);
|
||||
}
|
||||
on(type, fn) {
|
||||
return $eda442ba39f881a8$var$on(this, type, fn);
|
||||
}
|
||||
once(type, fn) {
|
||||
return $eda442ba39f881a8$var$on(this, type, fn, {
|
||||
once: true
|
||||
});
|
||||
}
|
||||
connectedCallback() {
|
||||
const style = this.querySelector("style");
|
||||
if (style) {
|
||||
const clone = style.cloneNode(true);
|
||||
this.shadow.appendChild(clone);
|
||||
}
|
||||
}
|
||||
initNewTabButton() {
|
||||
if (!this.options.newTabButton) return;
|
||||
const button = this.buttonContainer.appendChild(document.createElement("button"));
|
||||
button.classList.add(`${this.options.tabClass}-button-new`);
|
||||
button.innerHTML = this.options.newTabButtonText;
|
||||
button.addEventListener("click", this.addTab.bind(this, undefined), false);
|
||||
}
|
||||
initVisibility() {
|
||||
function toggleTabsVisibility(tab, tabGroup) {
|
||||
|
|
@ -2614,6 +2603,18 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
|
|||
this.on("tab-added", toggleTabsVisibility);
|
||||
this.on("tab-removed", toggleTabsVisibility);
|
||||
}
|
||||
initSortable() {
|
||||
const createNewSortable = ()=>{
|
||||
const options = Object.assign({
|
||||
direction: "horizontal",
|
||||
animation: 150,
|
||||
swapThreshold: 0.20
|
||||
}, this.options.sortableOptions);
|
||||
new $64afbd09cd65a300$export$2e2bcd8739ae039(this.tabContainer, options);
|
||||
};
|
||||
if ($64afbd09cd65a300$export$2e2bcd8739ae039) createNewSortable();
|
||||
else document.addEventListener("DOMContentLoaded", createNewSortable);
|
||||
}
|
||||
setDefaultTab(tab) {
|
||||
this.options.defaultTab = tab;
|
||||
}
|
||||
|
|
|
|||
2
dist/electron-tabs.js.map
vendored
2
dist/electron-tabs.js.map
vendored
File diff suppressed because one or more lines are too long
112
src/index.ts
112
src/index.ts
|
|
@ -72,7 +72,40 @@ class TabGroup extends HTMLElement {
|
|||
visibilityThreshold: Number(this.getAttribute("visibility-threshold")) || 0
|
||||
};
|
||||
|
||||
// Create custom element
|
||||
this.tabs = [];
|
||||
this.newTabId = 0;
|
||||
|
||||
this.createComponent();
|
||||
this.initVisibility();
|
||||
if (this.options.sortable) {
|
||||
this.initSortable();
|
||||
}
|
||||
|
||||
this.emit("ready", this);
|
||||
}
|
||||
|
||||
emit(type: string, ...args: any[]) {
|
||||
return emit(this, type, args);
|
||||
}
|
||||
|
||||
on(type: string, fn: (...detail: any[]) => void) {
|
||||
return on(this, type, fn);
|
||||
}
|
||||
|
||||
once(type: string, fn: (detail: string) => void) {
|
||||
return on(this, type, fn, { once: true });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Support custom styles
|
||||
const style = this.querySelector("style");
|
||||
if (style) {
|
||||
const clone = style.cloneNode(true);
|
||||
this.shadow.appendChild(clone);
|
||||
}
|
||||
}
|
||||
|
||||
private createComponent() {
|
||||
const shadow = this.attachShadow({mode: "open"});
|
||||
this.shadow = shadow;
|
||||
|
||||
|
|
@ -93,6 +126,13 @@ class TabGroup extends HTMLElement {
|
|||
tabgroup.appendChild(buttonContainer);
|
||||
this.buttonContainer = buttonContainer;
|
||||
|
||||
if (this.options.newTabButton) {
|
||||
const button = this.buttonContainer.appendChild(document.createElement("button"));
|
||||
button.classList.add(`${this.options.tabClass}-button-new`);
|
||||
button.innerHTML = this.options.newTabButtonText;
|
||||
button.addEventListener("click", this.addTab.bind(this, undefined), false);
|
||||
}
|
||||
|
||||
const viewContainer = document.createElement("div");
|
||||
viewContainer.setAttribute("class", "etabs-views");
|
||||
wrapper.appendChild(viewContainer);
|
||||
|
|
@ -103,59 +143,6 @@ class TabGroup extends HTMLElement {
|
|||
|
||||
shadow.appendChild(style);
|
||||
shadow.appendChild(wrapper);
|
||||
|
||||
this.tabs = [];
|
||||
this.newTabId = 0;
|
||||
this.initNewTabButton();
|
||||
this.initVisibility();
|
||||
|
||||
// Init sortable tabs
|
||||
if (this.options.sortable) {
|
||||
const initSortable = () => {
|
||||
const options = Object.assign({
|
||||
direction: "horizontal",
|
||||
animation: 150,
|
||||
swapThreshold: 0.20
|
||||
}, this.options.sortableOptions);
|
||||
new Sortable(this.tabContainer, options);
|
||||
};
|
||||
|
||||
if (Sortable) {
|
||||
initSortable();
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", initSortable);
|
||||
}
|
||||
}
|
||||
|
||||
this.emit("ready", this);
|
||||
}
|
||||
|
||||
emit(type: string, ...args: any[]) {
|
||||
return emit(this, type, args);
|
||||
}
|
||||
|
||||
on(type: string, fn: (...detail: any[]) => void) {
|
||||
return on(this, type, fn);
|
||||
}
|
||||
|
||||
once(type: string, fn: (detail: string) => void) {
|
||||
return on(this, type, fn, { once: true });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const style = this.querySelector("style");
|
||||
if (style) {
|
||||
const clone = style.cloneNode(true);
|
||||
this.shadow.appendChild(clone);
|
||||
}
|
||||
}
|
||||
|
||||
private initNewTabButton() {
|
||||
if (!this.options.newTabButton) return;
|
||||
const button = this.buttonContainer.appendChild(document.createElement("button"));
|
||||
button.classList.add(`${this.options.tabClass}-button-new`);
|
||||
button.innerHTML = this.options.newTabButtonText;
|
||||
button.addEventListener("click", this.addTab.bind(this, undefined), false);
|
||||
}
|
||||
|
||||
private initVisibility() {
|
||||
|
|
@ -173,6 +160,23 @@ class TabGroup extends HTMLElement {
|
|||
this.on("tab-removed", toggleTabsVisibility);
|
||||
}
|
||||
|
||||
initSortable() {
|
||||
const createNewSortable = () => {
|
||||
const options = Object.assign({
|
||||
direction: "horizontal",
|
||||
animation: 150,
|
||||
swapThreshold: 0.20
|
||||
}, this.options.sortableOptions);
|
||||
new Sortable(this.tabContainer, options);
|
||||
};
|
||||
|
||||
if (Sortable) {
|
||||
createNewSortable();
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", createNewSortable);
|
||||
}
|
||||
}
|
||||
|
||||
setDefaultTab(tab: TabOptions) {
|
||||
this.options.defaultTab = tab;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue