electron-tabs/index.js

160 lines
4.1 KiB
JavaScript
Raw Normal View History

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 {
display: flex;
flex: 0 1;
width: 0px;
height: 0px;
}
webview.visible {
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);
})();
class TabGroup {
constructor (args) {
2016-10-31 15:35:23 +00:00
this.tabContainerSelector = args.tabContainerSelector || ".tabs-tabcontainer";
2016-10-31 14:53:50 +00:00
this.tabContainer = document.querySelector(this.tabContainerSelector);
2016-10-31 15:35:23 +00:00
this.viewContainerSelector = args.viewContainerSelector || ".tabs-viewcontainer";
2016-10-31 14:53:50 +00:00
this.viewContainer = document.querySelector(this.viewContainerSelector);
2016-10-31 15:35:23 +00:00
this.tabClass = args.tabClass || "tabs-tab";
this.viewClass = args.viewClass || "tabs-view";
2016-10-31 14:53:50 +00:00
this.tabs = [];
this.newTabId = 0;
}
addTab (args) {
let id = this.newTabId;
this.newTabId++;
let tab = new Tab(this, id, args);
this.pushTab(tab);
return tab;
}
pushTab (tab) {
this.tabs.push(tab);
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
removeTab (tab) {
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-10-31 14:53:50 +00:00
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
setActiveTab (tab) {
this.removeTab(tab);
this.pushTab(tab);
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
getActiveTab () {
if (this.tabs.length < 1) return null;
return this.tabs[this.tabs.length - 1];
}
activateRecentTab (tab) {
let recentTab = this.tabs[this.tabs.length - 1];
if (!recentTab) return;
recentTab.activate();
}
}
class Tab {
constructor (tabGroup, id, args) {
this.tabGroup = tabGroup;
this.id = id;
this.title = args.title;
this.iconURL = args.iconURL;
this.webviewAttributes = args.webviewAttributes || {};
this.webviewAttributes.src = args.src;
this.initTab();
this.initWebview();
}
initTab () {
this.tab = document.createElement("div");
this.setTitle(this.title);
2016-10-31 15:35:23 +00:00
this.tab.classList.add(this.tabGroup.tabClass);
2016-10-31 14:53:50 +00:00
this.tab.addEventListener("click", this.activate.bind(this), false);
this.tabGroup.tabContainer.appendChild(this.tab);
2016-10-31 15:35:23 +00:00
// TODO: icon
2016-10-31 14:53:50 +00:00
// TODO: close button
// TODO: handle middle click
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
initWebview () {
this.webview = document.createElement("webview");
2016-10-31 15:35:23 +00:00
this.webview.classList.add(this.tabGroup.viewClass);
2016-10-31 14:53:50 +00:00
if (this.webviewAttributes) {
let attrs = this.webviewAttributes;
for (let key in attrs) {
this.webview.setAttribute(key, attrs[key]);
}
2016-10-27 20:38:20 +00:00
}
2016-10-31 14:53:50 +00:00
this.tabGroup.viewContainer.appendChild(this.webview);
}
setTitle (title) {
this.title = title;
this.tab.innerHTML = title;
}
getTitle () {
return this.tab.innerHTML;
}
setIcon (iconURL) {
this.iconURL = iconURL;
this.tab.setAttribute("data-icon", iconURL);
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
activate () {
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-10-31 14:53:50 +00:00
this.tabGroup.setActiveTab(this);
this.tab.classList.add("active");
this.webview.classList.add("visible");
}
2016-10-27 20:38:20 +00:00
2016-10-31 14:53:50 +00:00
flash (flag) {
if (flag) {
this.tab.classList.add("flash");
} else {
this.tab.classList.remove("flash");
2016-10-27 20:38:20 +00:00
}
}
2016-10-31 14:53:50 +00:00
move (index) {
// TODO: move
}
close () {
this.tabContainer.removeChild(this.tab);
this.tabGroup.viewContainer.removeChild(this.webview);
this.tabGroup.removeTab(this);
this.tabGroup.activateRecentTab();
}
}
module.exports = TabGroup;