electron-tabs/index.js

372 lines
11 KiB
JavaScript
Raw Normal View History

2016-11-01 09:56:07 +00:00
const EventEmitter = require("events");
2016-10-31 14:53:50 +00:00
if (!document) {
throw Error("electron-tabs module must be called in renderer process");
}
// Inject styles
(function () {
const styles = `
webview {
visibility: hidden;
2016-10-31 14:53:50 +00:00
width: 0px;
height: 0px;
}
webview.visible {
visibility: visible;
2016-10-31 14:53:50 +00:00
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
2016-10-27 20:38:20 +00:00
}
2016-10-31 14:53:50 +00:00
`;
let styleTag = document.createElement("style");
styleTag.innerHTML = styles;
document.getElementsByTagName("head")[0].appendChild(styleTag);
})();
2016-11-01 09:56:07 +00:00
class TabGroup extends EventEmitter {
2016-11-01 08:58:28 +00:00
constructor (args = {}) {
2016-11-01 09:56:07 +00:00
super();
2016-10-31 15:41:25 +00:00
let options = this.options = {
2016-11-02 11:41:18 +00:00
tabContainerSelector: args.tabContainerSelector || ".etabs-tabs",
buttonsContainerSelector: args.buttonsContainerSelector || ".etabs-buttons",
viewContainerSelector: args.viewContainerSelector || ".etabs-views",
tabClass: args.tabClass || "etabs-tab",
viewClass: args.viewClass || "etabs-view",
2016-11-02 13:48:08 +00:00
closeButtonText: args.closeButtonText || "✖",
2016-11-01 08:58:28 +00:00
newTab: args.newTab,
2016-11-02 20:21:56 +00:00
newTabButtonText: args.newTabButtonText || "+",
ready: args.ready
2016-10-31 15:41:25 +00:00
};
this.tabContainer = document.querySelector(options.tabContainerSelector);
this.viewContainer = document.querySelector(options.viewContainerSelector);
2016-10-31 14:53:50 +00:00
this.tabs = [];
this.newTabId = 0;
2016-11-01 13:40:03 +00:00
TabGroupPrivate.initNewTabButton.bind(this)();
if (typeof this.options.ready === "function") {
this.options.ready(this);
}
2016-10-31 14:53:50 +00:00
}
2016-11-01 08:58:28 +00:00
addTab (args = this.options.newTab) {
if (typeof args === "function") {
args = args(this);
}
2016-10-31 14:53:50 +00:00
let id = this.newTabId;
this.newTabId++;
let tab = new Tab(this, id, args);
this.tabs.push(tab);
// Don't call tab.activate() before a tab is referenced in this.tabs
if (args.active === true) {
tab.activate();
}
2016-11-01 09:56:07 +00:00
this.emit("tab-added", tab, this);
2016-11-01 09:13:56 +00:00
return tab;
2016-10-31 14:53:50 +00:00
}
2016-10-27 20:38:20 +00:00
2016-11-01 13:43:42 +00:00
getTab (id) {
for (let i in this.tabs) {
if (this.tabs[i].id === id) {
return this.tabs[i];
}
}
return null;
}
getTabs () {
return this.tabs;
}
eachTab (fn) {
this.tabs.forEach(fn);
return this;
}
2016-11-01 13:40:03 +00:00
getActiveTab () {
if (this.tabs.length === 0) return null;
return this.tabs[0];
}
}
const TabGroupPrivate = {
initNewTabButton: function () {
if (!this.options.newTab) return;
let container = document.querySelector(this.options.buttonsContainerSelector);
let button = container.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);
},
removeTab: function (tab, triggerEvent) {
2016-10-31 14:53:50 +00:00
let id = tab.id;
for (let i in this.tabs) {
if (this.tabs[i].id === id) {
this.tabs.splice(i, 1);
break;
2016-10-27 20:38:20 +00:00
}
}
2016-11-01 09:56:07 +00:00
if (triggerEvent) {
this.emit("tab-removed", tab, this);
}
2016-11-01 10:17:57 +00:00
return this;
2016-11-01 13:40:03 +00:00
},
2016-10-27 20:38:20 +00:00
2016-11-01 13:40:03 +00:00
setActiveTab: function (tab) {
TabGroupPrivate.removeTab.bind(this)(tab);
2016-11-01 09:13:56 +00:00
this.tabs.unshift(tab);
2016-11-01 09:56:07 +00:00
this.emit("tab-active", tab, this);
2016-11-01 10:17:57 +00:00
return this;
2016-11-01 13:40:03 +00:00
},
2016-10-31 14:53:50 +00:00
2016-11-01 13:40:03 +00:00
activateRecentTab: function (tab) {
2016-11-01 10:17:57 +00:00
if (this.tabs.length > 0) {
this.tabs[0].activate();
}
return this;
2016-10-31 14:53:50 +00:00
}
2016-11-01 13:40:03 +00:00
};
2016-10-31 14:53:50 +00:00
2016-11-01 09:56:07 +00:00
class Tab extends EventEmitter {
2016-10-31 14:53:50 +00:00
constructor (tabGroup, id, args) {
2016-11-01 09:56:07 +00:00
super();
2016-10-31 14:53:50 +00:00
this.tabGroup = tabGroup;
this.id = id;
this.title = args.title;
2017-06-03 13:01:10 +00:00
this.badge = args.badge;
2016-10-31 14:53:50 +00:00
this.iconURL = args.iconURL;
this.icon = args.icon;
2016-10-31 16:45:03 +00:00
this.closable = args.closable === false ? false : true;
2016-10-31 14:53:50 +00:00
this.webviewAttributes = args.webviewAttributes || {};
this.webviewAttributes.src = args.src;
2016-10-31 16:24:50 +00:00
this.tabElements = {};
2016-11-01 13:40:03 +00:00
TabPrivate.initTab.bind(this)();
TabPrivate.initWebview.bind(this)();
2016-11-02 15:37:05 +00:00
if (args.visible !== false) {
this.show();
}
if (typeof args.ready === "function") {
args.ready(this);
}
2016-10-31 14:53:50 +00:00
}
setTitle (title) {
2016-11-01 10:05:21 +00:00
if (this.isClosed) return;
2016-10-31 16:24:50 +00:00
let span = this.tabElements.title;
span.innerHTML = title;
2016-10-31 14:53:50 +00:00
this.title = title;
2016-11-01 09:56:07 +00:00
this.emit("title-changed", title, this);
2016-11-01 10:17:57 +00:00
return this;
2016-10-31 14:53:50 +00:00
}
getTitle () {
2016-11-01 10:05:21 +00:00
if (this.isClosed) return;
2016-10-31 16:24:50 +00:00
return this.title;
2016-10-31 14:53:50 +00:00
}
2017-06-03 13:01:10 +00:00
setBadge (badge) {
if (this.isClosed) return;
let span = this.tabElements.badge;
this.badge = badge;
if (badge) {
span.innerHTML = badge;
2017-06-03 13:01:10 +00:00
span.classList.remove('hidden');
} else {
span.classList.add('hidden');
2017-06-03 13:01:10 +00:00
}
2016-10-31 14:53:50 +00:00
2017-06-03 13:01:10 +00:00
this.emit("badge-changed", badge, this);
}
2017-06-03 13:01:10 +00:00
getBadge () {
if (this.isClosed) return;
return this.badge;
}
setIcon (iconURL, icon) {
2016-11-01 10:05:21 +00:00
if (this.isClosed) return;
2016-10-31 14:53:50 +00:00
this.iconURL = iconURL;
this.icon = icon;
2016-10-31 16:24:50 +00:00
let span = this.tabElements.icon;
if (iconURL) {
span.innerHTML = `<img src="${iconURL}" />`;
this.emit("icon-changed", iconURL, this);
} else if (icon) {
span.innerHTML = `<i class="${icon}"></i>`;
this.emit("icon-changed", icon, this);
2016-10-31 16:24:50 +00:00
}
2016-11-01 10:17:57 +00:00
return this;
2016-10-31 16:24:50 +00:00
}
getIcon () {
2016-11-01 10:05:21 +00:00
if (this.isClosed) return;
if (this.iconURL) return this.iconURL;
return this.icon;
2016-10-31 14:53:50 +00:00
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
activate () {
2016-11-01 10:05:21 +00:00
if (this.isClosed) return;
2016-10-31 14:53:50 +00:00
let activeTab = this.tabGroup.getActiveTab();
if (activeTab) {
activeTab.tab.classList.remove("active");
activeTab.webview.classList.remove("visible");
2016-10-27 20:38:20 +00:00
}
2016-11-01 13:40:03 +00:00
TabGroupPrivate.setActiveTab.bind(this.tabGroup)(this);
2016-10-31 14:53:50 +00:00
this.tab.classList.add("active");
this.webview.classList.add("visible");
this.webview.focus();
2016-11-01 09:56:07 +00:00
this.emit("active", this);
2016-11-01 10:17:57 +00:00
return this;
2016-10-31 14:53:50 +00:00
}
2016-10-27 20:38:20 +00:00
2016-11-01 15:05:09 +00:00
show (flag) {
2016-11-01 10:13:00 +00:00
if (this.isClosed) return;
2016-11-01 15:05:09 +00:00
if (flag !== false) {
this.tab.classList.add("visible");
this.emit("visible", this);
} else {
this.tab.classList.remove("visible");
this.emit("hidden", this);
}
2016-11-01 10:17:57 +00:00
return this;
2016-11-01 10:13:00 +00:00
}
hide () {
2016-11-01 15:05:09 +00:00
return this.show(false);
2016-11-01 10:13:00 +00:00
}
2016-10-31 14:53:50 +00:00
flash (flag) {
2016-11-01 10:05:21 +00:00
if (this.isClosed) return;
2016-10-31 15:45:11 +00:00
if (flag !== false) {
2016-10-31 14:53:50 +00:00
this.tab.classList.add("flash");
2016-11-01 15:05:09 +00:00
this.emit("flash", this);
2016-10-31 14:53:50 +00:00
} else {
this.tab.classList.remove("flash");
2016-11-01 15:05:09 +00:00
this.emit("unflash", this);
2016-10-27 20:38:20 +00:00
}
2016-11-01 10:17:57 +00:00
return this;
2016-10-27 20:38:20 +00:00
}
2016-11-01 15:05:09 +00:00
unflash () {
return this.flash(false);
}
close (force) {
2017-04-04 13:05:24 +00:00
this.emit("closing", this);
2016-11-01 10:05:21 +00:00
if (this.isClosed || (!this.closable && !force)) return;
this.isClosed = true;
2016-10-31 15:49:15 +00:00
let tabGroup = this.tabGroup;
tabGroup.tabContainer.removeChild(this.tab);
tabGroup.viewContainer.removeChild(this.webview);
let activeTab = this.tabGroup.getActiveTab();
2016-11-01 13:40:03 +00:00
TabGroupPrivate.removeTab.bind(tabGroup)(this, true);
2016-11-01 09:56:07 +00:00
this.emit("close", this);
if (activeTab.id === this.id) {
TabGroupPrivate.activateRecentTab.bind(tabGroup)();
}
2016-10-31 14:53:50 +00:00
}
2017-10-26 23:36:19 +00:00
getPosition () {
let i = 0;
let tab = this.tab;
while ((tab = tab.previousSibling) != null) i++;
return i;
}
setPosition (newPosition) {
let tabContainer = this.tabGroup.tabContainer;
let tabs = tabContainer.children;
let oldPosition = this.getPosition();
if (newPosition > oldPosition) {
newPosition++;
}
tabContainer.insertBefore(tabs[oldPosition], tabs[newPosition]);
return this;
}
2016-10-31 14:53:50 +00:00
}
2016-11-01 13:40:03 +00:00
const TabPrivate = {
initTab: function () {
let tabClass = this.tabGroup.options.tabClass;
// Create tab element
let tab = this.tab = document.createElement("div");
tab.classList.add(tabClass);
2017-06-03 13:01:10 +00:00
for (let el of ["icon", "title", "buttons", "badge"]) {
2016-11-01 13:40:03 +00:00
let span = tab.appendChild(document.createElement("span"));
span.classList.add(`${tabClass}-${el}`);
this.tabElements[el] = span;
}
this.setTitle(this.title);
2017-06-03 13:01:10 +00:00
this.setBadge(this.badge);
this.setIcon(this.iconURL, this.icon);
2016-11-01 13:40:03 +00:00
TabPrivate.initTabButtons.bind(this)();
TabPrivate.initTabClickHandler.bind(this)();
this.tabGroup.tabContainer.appendChild(this.tab);
},
initTabButtons: function () {
let container = this.tabElements.buttons;
let tabClass = this.tabGroup.options.tabClass;
if (this.closable) {
let button = container.appendChild(document.createElement("button"));
button.classList.add(`${tabClass}-button-close`);
button.innerHTML = this.tabGroup.options.closeButtonText;
2017-04-04 12:33:57 +00:00
button.addEventListener("click", this.close.bind(this, false), false);
2016-11-01 13:40:03 +00:00
}
},
initTabClickHandler: function () {
// Click
2016-11-01 13:40:03 +00:00
const tabClickHandler = function (e) {
if (this.isClosed) return;
if (e.which === 2) {
2016-11-01 13:40:03 +00:00
this.close();
}
};
this.tab.addEventListener("click", tabClickHandler.bind(this), false);
// Mouse down
const tabMouseDownHandler = function (e) {
if (this.isClosed) return;
if (e.which === 1) {
if (e.target.matches("button")) return;
this.activate();
}
};
this.tab.addEventListener("mousedown", tabMouseDownHandler.bind(this), false);
2016-11-01 13:40:03 +00:00
},
initWebview: function () {
this.webview = document.createElement("webview");
const tabWebviewDidFinishLoadHandler = function (e) {
this.emit("webview-ready", this);
};
this.webview.addEventListener("did-finish-load", tabWebviewDidFinishLoadHandler.bind(this), false);
2016-11-01 13:40:03 +00:00
this.webview.classList.add(this.tabGroup.options.viewClass);
if (this.webviewAttributes) {
let attrs = this.webviewAttributes;
for (let key in attrs) {
this.webview.setAttribute(key, attrs[key]);
}
}
2016-11-01 13:40:03 +00:00
this.tabGroup.viewContainer.appendChild(this.webview);
}
};
2017-04-04 12:33:57 +00:00
module.exports = TabGroup;