Korbs/electron-tabs
1
Fork 0
Code Issues Pull requests Activity

Rename tab elements attributes

Browse source
This commit is contained in:
Thomas Brouard 2022-05-25 15:09:18 +02:00
parent 8328cb1864
commit 965aabb202
5 changed files with 49 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/electron-tabs.d.ts vendored
View file

@ -58,13 +58,13 @@ export class TabGroup extends HTMLElement {
export class Tab extends EventTarget { export class Tab extends EventTarget {
badge: Badge; badge: Badge;
closable: boolean; closable: boolean;
element: HTMLDivElement;
icon: string; icon: string;
iconURL: string; iconURL: string;
id: number; id: number;
isClosed: boolean; isClosed: boolean;
isReady: boolean; isReady: boolean;
tab: HTMLDivElement; spans: {
tabElements: {
[key: string]: HTMLSpanElement; [key: string]: HTMLSpanElement;
}; };
tabGroup: TabGroup; tabGroup: TabGroup;

2
dist/electron-tabs.d.ts.map vendored
View file

File diff suppressed because one or more lines are too long

44
dist/electron-tabs.js vendored
View file

@ -2499,7 +2499,7 @@ var $64afbd09cd65a300$export$2e2bcd8739ae039 = $64afbd09cd65a300$export$31b3ca70
var $0648b347057451f2$exports = {}; var $0648b347057451f2$exports = {};
$0648b347057451f2$exports = ":host {\n --tabgroup-background: #e7eaed;\n --tab-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --tab-font-size: 13px;\n --tab-background: #e7eaed;\n --tab-color: #696a6c;\n --tab-border-color: #dadce0;\n --tab-transition: background-color 150ms ease-out;\n --tab-cursor: pointer;\n --tab-active-color: currentcolor;\n --tab-active-background: #fff;\n --tag-hover-color: currentcolor;\n --tag-hover-background: #f1f3f4;\n --tab-flash-color: #696a6c;\n --tab-flash-background: #fff3aa;\n --tab-flash-hover-color: #696a6c;\n --tab-flash-hover-background: #ffe325;\n --button-font-size: 15px;\n --button-background: none;\n --button-color: #696a6c;\n --button-hover-background: #dadce0;\n --button-hover-color: #383a3e;\n --button-border-radius: 50%;\n --button-cursor: pointer;\n --badge-background: #383a3e;\n --badge-color: #fff;\n}\n\nwebview {\n visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\nwebview.visible {\n visibility: visible;\n}\n\n.etabs {\n font-family: var(--tab-font-family);\n text-rendering: optimizelegibility;\n font-feature-settings: \"liga\", \"clig\", \"kern\";\n}\n\n.nav {\n background: var(--tabgroup-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n border-top: 1px solid var(--tab-border-color);\n font-size: var(--tab-font-size);\n width: 100%;\n height: 32px;\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n}\n\n.nav.visible {\n display: flex;\n}\n\n.tabs {\n height: 100%;\n}\n\n.tab {\n background: var(--tab-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n color: var(--tab-color);\n cursor: var(--tab-cursor);\n font-size: var(--tab-font-size);\n transition: var(--tab-transition);\n box-sizing: border-box;\n height: 100%;\n align-items: center;\n padding: 5px 9px;\n display: none;\n position: relative;\n}\n\n.tab:first-child {\n border-left: none;\n}\n\n.tab.visible {\n display: inline-flex;\n}\n\n.tab.active {\n color: var(--tab-active-color);\n background: var(--tab-active-background);\n border-left: 1px solid var(--tab-border-color);\n border-right: 1px solid var(--tab-border-color);\n box-shadow: none;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.tab.active:last-child {\n border-right: none;\n}\n\n.tab.flash {\n background: var(--tab-flash-background);\n color: var(--tab-flash-color);\n transition: all .5s linear;\n}\n\n.tab.tab.flash:hover {\n background: var(--tab-flash-hover-background);\n color: var(--tab-flash-hover-color);\n}\n\n.tab.visible:not(.active) + .tab.visible:not(.active) {\n border-left: 1px solid var(--tab-border-color);\n padding-left: 8px;\n}\n\n.tab:not(.active):hover {\n background: var(--tab-hover-background);\n color: var(--tab-hover-color);\n}\n\n.tab-badge {\n background: var(--badge-background);\n color: var(--badge-color);\n text-align: center;\n border-radius: 5px;\n margin-left: 5px;\n padding: 1px 4px;\n font-size: 8px;\n font-weight: bold;\n line-height: 1.2;\n}\n\n.tab-badge.hidden {\n display: none;\n}\n\n.tab-icon {\n height: 16px;\n display: inline-block;\n}\n\n.tab-icon img {\n max-width: 16px;\n max-height: 16px;\n}\n\n.tab-title, .tab-close {\n margin-left: 10px;\n display: inline-block;\n}\n\n.tab-close button {\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n padding: 1px 0 0;\n display: inline-block;\n}\n\n.tab-close button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.buttons {\n border-left: 1px solid var(--tab-border-color);\n padding: 5px;\n display: flex;\n}\n\n.buttons button {\n color: var(--button-color);\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n margin: 0;\n padding: 1px 0 0;\n font-family: inherit;\n line-height: 1;\n display: block;\n}\n\n.buttons button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.views {\n height: calc(100vh - 33px);\n position: relative;\n}\n\n"; $0648b347057451f2$exports = ":host {\n --tabgroup-background: #e7eaed;\n --tab-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --tab-font-size: 13px;\n --tab-background: #e7eaed;\n --tab-color: #696a6c;\n --tab-border-color: #dadce0;\n --tab-transition: background-color 200ms ease-out, color 200ms ease-out;\n --tab-cursor: pointer;\n --tab-active-color: currentcolor;\n --tab-active-background: #fff;\n --tag-hover-color: currentcolor;\n --tag-hover-background: #f1f3f4;\n --tab-flash-color: #696a6c;\n --tab-flash-background: #fff3aa;\n --tab-flash-hover-color: #696a6c;\n --tab-flash-hover-background: #ffe325;\n --button-font-size: 15px;\n --button-background: none;\n --button-color: #696a6c;\n --button-hover-background: #dadce0;\n --button-hover-color: #383a3e;\n --button-border-radius: 50%;\n --button-cursor: pointer;\n --badge-background: #383a3e;\n --badge-color: #fff;\n}\n\nwebview {\n visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\nwebview.visible {\n visibility: visible;\n}\n\n.etabs {\n font-family: var(--tab-font-family);\n text-rendering: optimizelegibility;\n font-feature-settings: \"liga\", \"clig\", \"kern\";\n}\n\n.nav {\n background: var(--tabgroup-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n border-top: 1px solid var(--tab-border-color);\n font-size: var(--tab-font-size);\n width: 100%;\n height: 32px;\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n}\n\n.nav.visible {\n display: flex;\n}\n\n.tabs {\n height: 100%;\n}\n\n.tab {\n background: var(--tab-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n color: var(--tab-color);\n cursor: var(--tab-cursor);\n font-size: var(--tab-font-size);\n transition: var(--tab-transition);\n box-sizing: border-box;\n height: 100%;\n align-items: center;\n padding: 5px 9px;\n display: none;\n position: relative;\n}\n\n.tab:first-child {\n border-left: none;\n}\n\n.tab.visible {\n display: inline-flex;\n}\n\n.tab.active {\n color: var(--tab-active-color);\n background: var(--tab-active-background);\n border-left: 1px solid var(--tab-border-color);\n border-right: 1px solid var(--tab-border-color);\n box-shadow: none;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.tab.active:last-child {\n border-right: none;\n}\n\n.tab.flash {\n background: var(--tab-flash-background);\n color: var(--tab-flash-color);\n}\n\n.tab.tab.flash:hover {\n background: var(--tab-flash-hover-background);\n color: var(--tab-flash-hover-color);\n}\n\n.tab.visible:not(.active) + .tab.visible:not(.active) {\n border-left: 1px solid var(--tab-border-color);\n padding-left: 8px;\n}\n\n.tab:not(.active):hover {\n background: var(--tab-hover-background);\n color: var(--tab-hover-color);\n}\n\n.tab-badge {\n background: var(--badge-background);\n color: var(--badge-color);\n text-align: center;\n border-radius: 5px;\n margin-left: 5px;\n padding: 1px 4px;\n font-size: 8px;\n font-weight: bold;\n line-height: 1.2;\n}\n\n.tab-badge.hidden {\n display: none;\n}\n\n.tab-icon {\n height: 16px;\n display: inline-block;\n}\n\n.tab-icon img {\n max-width: 16px;\n max-height: 16px;\n}\n\n.tab-title, .tab-close {\n margin-left: 10px;\n display: inline-block;\n}\n\n.tab-close button {\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n padding: 1px 0 0;\n display: inline-block;\n}\n\n.tab-close button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.buttons {\n border-left: 1px solid var(--tab-border-color);\n padding: 5px;\n display: flex;\n}\n\n.buttons button {\n color: var(--button-color);\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n margin: 0;\n padding: 1px 0 0;\n font-family: inherit;\n line-height: 1;\n display: block;\n}\n\n.buttons button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.views {\n height: calc(100vh - 33px);\n position: relative;\n}\n\n";
if (!document) throw Error("electron-tabs module must be called in renderer process"); if (!document) throw Error("electron-tabs module must be called in renderer process");
@ -2692,7 +2692,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
this.id = id; this.id = id;
this.isClosed = false; this.isClosed = false;
this.isReady = false; this.isReady = false;
this.tabElements = {}; this.spans = {};
this.tabGroup = tabGroup; this.tabGroup = tabGroup;
this.title = args.title; this.title = args.title;
this.webviewAttributes = args.webviewAttributes || {}; this.webviewAttributes = args.webviewAttributes || {};
@ -2715,7 +2715,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
}); });
} }
initTab() { initTab() {
const tab = this.tab = document.createElement("div"); const tab = this.element = document.createElement("div");
tab.classList.add($eda442ba39f881a8$var$CLASSNAMES.TAB); tab.classList.add($eda442ba39f881a8$var$CLASSNAMES.TAB);
for (let el of [ for (let el of [
"icon", "icon",
@ -2725,17 +2725,17 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
]){ ]){
const span = tab.appendChild(document.createElement("span")); const span = tab.appendChild(document.createElement("span"));
span.classList.add(`${$eda442ba39f881a8$var$CLASSNAMES.TAB}-${el}`); span.classList.add(`${$eda442ba39f881a8$var$CLASSNAMES.TAB}-${el}`);
this.tabElements[el] = span; this.spans[el] = span;
} }
this.setTitle(this.title); this.setTitle(this.title);
this.setBadge(this.badge); this.setBadge(this.badge);
this.setIcon(this.iconURL, this.icon); this.setIcon(this.iconURL, this.icon);
this.initTabCloseButton(); this.initTabCloseButton();
this.initTabClickHandler(); this.initTabClickHandler();
this.tabGroup.tabContainer.appendChild(this.tab); this.tabGroup.tabContainer.appendChild(this.element);
} }
initTabCloseButton() { initTabCloseButton() {
const container = this.tabElements.close; const container = this.spans.close;
if (this.closable) { if (this.closable) {
const button = container.appendChild(document.createElement("button")); const button = container.appendChild(document.createElement("button"));
button.innerHTML = this.tabGroup.options.closeButtonText; button.innerHTML = this.tabGroup.options.closeButtonText;
@ -2748,7 +2748,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
if (this.isClosed) return; if (this.isClosed) return;
if (e.which === 2) this.close(); if (e.which === 2) this.close();
}; };
this.tab.addEventListener("mouseup", tabClickHandler.bind(this), false); this.element.addEventListener("mouseup", tabClickHandler.bind(this), false);
// Mouse down // Mouse down
const tabMouseDownHandler = function(e) { const tabMouseDownHandler = function(e) {
if (this.isClosed) return; if (this.isClosed) return;
@ -2757,7 +2757,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
this.activate(); this.activate();
} }
}; };
this.tab.addEventListener("mousedown", tabMouseDownHandler.bind(this), false); this.element.addEventListener("mousedown", tabMouseDownHandler.bind(this), false);
} }
initWebview() { initWebview() {
const webview = this.webview = document.createElement("webview"); const webview = this.webview = document.createElement("webview");
@ -2785,7 +2785,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
} }
setTitle(title) { setTitle(title) {
if (this.isClosed) return; if (this.isClosed) return;
const span = this.tabElements.title; const span = this.spans.title;
span.innerHTML = title; span.innerHTML = title;
span.title = title; span.title = title;
this.title = title; this.title = title;
@ -2798,7 +2798,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
} }
setBadge(badge) { setBadge(badge) {
if (this.isClosed) return; if (this.isClosed) return;
const span = this.tabElements.badge; const span = this.spans.badge;
this.badge = badge; this.badge = badge;
if (badge) { if (badge) {
span.innerHTML = badge.text; span.innerHTML = badge.text;
@ -2815,7 +2815,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
if (this.isClosed) return; if (this.isClosed) return;
this.iconURL = iconURL; this.iconURL = iconURL;
this.icon = icon; this.icon = icon;
const span = this.tabElements.icon; const span = this.spans.icon;
if (iconURL) { if (iconURL) {
span.innerHTML = `<img src="${iconURL}" />`; span.innerHTML = `<img src="${iconURL}" />`;
this.emit("icon-changed", iconURL, this); this.emit("icon-changed", iconURL, this);
@ -2840,13 +2840,13 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
newPosition += length; newPosition += length;
if (newPosition < 0) newPosition = 0; if (newPosition < 0) newPosition = 0;
} }
if (newPosition < length) tabContainer.insertBefore(this.tab, tabs[newPosition]); if (newPosition < length) tabContainer.insertBefore(this.element, tabs[newPosition]);
else tabContainer.appendChild(this.tab); else tabContainer.appendChild(this.element);
return this; return this;
} }
getPosition(fromRight = false) { getPosition(fromRight = false) {
let position = 0; let position = 0;
let tab = this.tab; let tab = this.element;
while((tab = tab.previousSibling) != null)position++; while((tab = tab.previousSibling) != null)position++;
if (fromRight === true) position -= this.tabGroup.tabContainer.childElementCount; if (fromRight === true) position -= this.tabGroup.tabContainer.childElementCount;
return position; return position;
@ -2855,12 +2855,12 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
if (this.isClosed) return; if (this.isClosed) return;
const activeTab = this.tabGroup.getActiveTab(); const activeTab = this.tabGroup.getActiveTab();
if (activeTab) { if (activeTab) {
activeTab.tab.classList.remove("active"); activeTab.element.classList.remove("active");
activeTab.webview.classList.remove("visible"); activeTab.webview.classList.remove("visible");
activeTab.emit("inactive", activeTab); activeTab.emit("inactive", activeTab);
} }
this.tabGroup.setActiveTab(this); this.tabGroup.setActiveTab(this);
this.tab.classList.add("active"); this.element.classList.add("active");
this.webview.classList.add("visible"); this.webview.classList.add("visible");
this.webview.focus(); this.webview.focus();
this.emit("active", this); this.emit("active", this);
@ -2869,10 +2869,10 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
show(flag = true) { show(flag = true) {
if (this.isClosed) return; if (this.isClosed) return;
if (flag) { if (flag) {
this.tab.classList.add("visible"); this.element.classList.add("visible");
this.emit("visible", this); this.emit("visible", this);
} else { } else {
this.tab.classList.remove("visible"); this.element.classList.remove("visible");
this.emit("hidden", this); this.emit("hidden", this);
} }
return this; return this;
@ -2883,10 +2883,10 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
flash(flag = true) { flash(flag = true) {
if (this.isClosed) return; if (this.isClosed) return;
if (flag !== false) { if (flag !== false) {
this.tab.classList.add("flash"); this.element.classList.add("flash");
this.emit("flash", this); this.emit("flash", this);
} else { } else {
this.tab.classList.remove("flash"); this.element.classList.remove("flash");
this.emit("unflash", this); this.emit("unflash", this);
} }
return this; return this;
@ -2895,7 +2895,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
return this.flash(false); return this.flash(false);
} }
hasClass(classname) { hasClass(classname) {
return this.tab.classList.contains(classname); return this.element.classList.contains(classname);
} }
close(force) { close(force) {
const abortController = new AbortController(); const abortController = new AbortController();
@ -2906,7 +2906,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
if (this.isClosed || !this.closable && !force || abortSignal.aborted) return; if (this.isClosed || !this.closable && !force || abortSignal.aborted) return;
this.isClosed = true; this.isClosed = true;
const tabGroup = this.tabGroup; const tabGroup = this.tabGroup;
tabGroup.tabContainer.removeChild(this.tab); tabGroup.tabContainer.removeChild(this.element);
tabGroup.viewContainer.removeChild(this.webview); tabGroup.viewContainer.removeChild(this.webview);
const activeTab = this.tabGroup.getActiveTab(); const activeTab = this.tabGroup.getActiveTab();
tabGroup.removeTab(this, true); tabGroup.removeTab(this, true);

2
dist/electron-tabs.js.map vendored
View file

File diff suppressed because one or more lines are too long

46
src/index.ts
View file

@ -279,13 +279,13 @@ class TabGroup extends HTMLElement {
class Tab extends EventTarget { class Tab extends EventTarget {
badge: Badge; badge: Badge;
closable: boolean; closable: boolean;
element: HTMLDivElement;
icon: string; icon: string;
iconURL: string; iconURL: string;
id: number; id: number;
isClosed: boolean; isClosed: boolean;
isReady: boolean; isReady: boolean;
tab: HTMLDivElement; spans: { [key: string]: HTMLSpanElement };
tabElements: { [key: string]: HTMLSpanElement };
tabGroup: TabGroup; tabGroup: TabGroup;
title: string; title: string;
webview: HTMLElement; webview: HTMLElement;
@ -300,7 +300,7 @@ class Tab extends EventTarget {
this.id = id; this.id = id;
this.isClosed = false; this.isClosed = false;
this.isReady = false; this.isReady = false;
this.tabElements = {}; this.spans = {};
this.tabGroup = tabGroup; this.tabGroup = tabGroup;
this.title = args.title; this.title = args.title;
this.webviewAttributes = args.webviewAttributes || {}; this.webviewAttributes = args.webviewAttributes || {};
@ -332,12 +332,12 @@ class Tab extends EventTarget {
} }
private initTab() { private initTab() {
const tab = this.tab = document.createElement("div"); const tab = this.element = document.createElement("div");
tab.classList.add(CLASSNAMES.TAB); tab.classList.add(CLASSNAMES.TAB);
for (let el of ["icon", "title", "badge", "close"]) { for (let el of ["icon", "title", "badge", "close"]) {
const span = tab.appendChild(document.createElement("span")); const span = tab.appendChild(document.createElement("span"));
span.classList.add(`${CLASSNAMES.TAB}-${el}`); span.classList.add(`${CLASSNAMES.TAB}-${el}`);
this.tabElements[el] = span; this.spans[el] = span;
} }
this.setTitle(this.title); this.setTitle(this.title);
@ -346,11 +346,11 @@ class Tab extends EventTarget {
this.initTabCloseButton(); this.initTabCloseButton();
this.initTabClickHandler(); this.initTabClickHandler();
this.tabGroup.tabContainer.appendChild(this.tab); this.tabGroup.tabContainer.appendChild(this.element);
} }
private initTabCloseButton() { private initTabCloseButton() {
const container = this.tabElements.close; const container = this.spans.close;
if (this.closable) { if (this.closable) {
const button = container.appendChild(document.createElement("button")); const button = container.appendChild(document.createElement("button"));
button.innerHTML = this.tabGroup.options.closeButtonText; button.innerHTML = this.tabGroup.options.closeButtonText;
@ -366,7 +366,7 @@ class Tab extends EventTarget {
this.close(); this.close();
} }
}; };
this.tab.addEventListener("mouseup", tabClickHandler.bind(this), false); this.element.addEventListener("mouseup", tabClickHandler.bind(this), false);
// Mouse down // Mouse down
const tabMouseDownHandler = function(e: KeyboardEvent) { const tabMouseDownHandler = function(e: KeyboardEvent) {
if (this.isClosed) return; if (this.isClosed) return;
@ -375,7 +375,7 @@ class Tab extends EventTarget {
this.activate(); this.activate();
} }
}; };
this.tab.addEventListener("mousedown", tabMouseDownHandler.bind(this), false); this.element.addEventListener("mousedown", tabMouseDownHandler.bind(this), false);
} }
initWebview() { initWebview() {
@ -411,7 +411,7 @@ class Tab extends EventTarget {
setTitle(title: string) { setTitle(title: string) {
if (this.isClosed) return; if (this.isClosed) return;
const span = this.tabElements.title; const span = this.spans.title;
span.innerHTML = title; span.innerHTML = title;
span.title = title; span.title = title;
this.title = title; this.title = title;
@ -426,7 +426,7 @@ class Tab extends EventTarget {
setBadge(badge?: Badge) { setBadge(badge?: Badge) {
if (this.isClosed) return; if (this.isClosed) return;
const span = this.tabElements.badge; const span = this.spans.badge;
this.badge = badge; this.badge = badge;
if (badge) { if (badge) {
@ -449,7 +449,7 @@ class Tab extends EventTarget {
if (this.isClosed) return; if (this.isClosed) return;
this.iconURL = iconURL; this.iconURL = iconURL;
this.icon = icon; this.icon = icon;
const span = this.tabElements.icon; const span = this.spans.icon;
if (iconURL) { if (iconURL) {
span.innerHTML = `<img src="${iconURL}" />`; span.innerHTML = `<img src="${iconURL}" />`;
this.emit("icon-changed", iconURL, this); this.emit("icon-changed", iconURL, this);
@ -482,9 +482,9 @@ class Tab extends EventTarget {
} }
if (newPosition < length) { if (newPosition < length) {
tabContainer.insertBefore(this.tab, tabs[newPosition]); tabContainer.insertBefore(this.element, tabs[newPosition]);
} else { } else {
tabContainer.appendChild(this.tab); tabContainer.appendChild(this.element);
} }
return this; return this;
@ -492,7 +492,7 @@ class Tab extends EventTarget {
getPosition(fromRight = false) { getPosition(fromRight = false) {
let position = 0; let position = 0;
let tab = this.tab; let tab = this.element;
while ((tab = tab.previousSibling as HTMLDivElement) != null) position++; while ((tab = tab.previousSibling as HTMLDivElement) != null) position++;
if (fromRight === true) { if (fromRight === true) {
@ -506,12 +506,12 @@ class Tab extends EventTarget {
if (this.isClosed) return; if (this.isClosed) return;
const activeTab = this.tabGroup.getActiveTab(); const activeTab = this.tabGroup.getActiveTab();
if (activeTab) { if (activeTab) {
activeTab.tab.classList.remove("active"); activeTab.element.classList.remove("active");
activeTab.webview.classList.remove("visible"); activeTab.webview.classList.remove("visible");
activeTab.emit("inactive", activeTab); activeTab.emit("inactive", activeTab);
} }
this.tabGroup.setActiveTab(this); this.tabGroup.setActiveTab(this);
this.tab.classList.add("active"); this.element.classList.add("active");
this.webview.classList.add("visible"); this.webview.classList.add("visible");
this.webview.focus(); this.webview.focus();
this.emit("active", this); this.emit("active", this);
@ -521,10 +521,10 @@ class Tab extends EventTarget {
show(flag = true) { show(flag = true) {
if (this.isClosed) return; if (this.isClosed) return;
if (flag) { if (flag) {
this.tab.classList.add("visible"); this.element.classList.add("visible");
this.emit("visible", this); this.emit("visible", this);
} else { } else {
this.tab.classList.remove("visible"); this.element.classList.remove("visible");
this.emit("hidden", this); this.emit("hidden", this);
} }
return this; return this;
@ -537,10 +537,10 @@ class Tab extends EventTarget {
flash(flag = true) { flash(flag = true) {
if (this.isClosed) return; if (this.isClosed) return;
if (flag !== false) { if (flag !== false) {
this.tab.classList.add("flash"); this.element.classList.add("flash");
this.emit("flash", this); this.emit("flash", this);
} else { } else {
this.tab.classList.remove("flash"); this.element.classList.remove("flash");
this.emit("unflash", this); this.emit("unflash", this);
} }
return this; return this;
@ -551,7 +551,7 @@ class Tab extends EventTarget {
} }
hasClass(classname: string) { hasClass(classname: string) {
return this.tab.classList.contains(classname); return this.element.classList.contains(classname);
} }
close(force: boolean) { close(force: boolean) {
@ -564,7 +564,7 @@ class Tab extends EventTarget {
this.isClosed = true; this.isClosed = true;
const tabGroup = this.tabGroup; const tabGroup = this.tabGroup;
tabGroup.tabContainer.removeChild(this.tab); tabGroup.tabContainer.removeChild(this.element);
tabGroup.viewContainer.removeChild(this.webview); tabGroup.viewContainer.removeChild(this.webview);
const activeTab = this.tabGroup.getActiveTab(); const activeTab = this.tabGroup.getActiveTab();
tabGroup.removeTab(this, true); tabGroup.removeTab(this, true);