mirror of
https://ark.sudovanilla.org/Korbs/electron-tabs.git
synced 2024-12-23 03:53:53 +00:00
Working tabs (experimental)
This commit is contained in:
parent
aed91459f8
commit
fbbd7ddecd
154
index.js
154
index.js
|
@ -1,39 +1,101 @@
|
||||||
// New tab(title, url, icon, webviewArgs)
|
if (!document) {
|
||||||
// .webview.methodeDeWebview()
|
throw Error("electron-tabs module must be called in renderer process");
|
||||||
// .close X
|
|
||||||
// .activate
|
|
||||||
// .move(index)
|
|
||||||
// .blink
|
|
||||||
// .unblink
|
|
||||||
// .setTitle X
|
|
||||||
// .getTitle X
|
|
||||||
// .setIcon X
|
|
||||||
// .getIcon X
|
|
||||||
|
|
||||||
// TODO: à revoir. Il faut plutôt créer un objet Tabs qui possède des methodes pour crer et manipuler des tabs. + faire remonter les méthodes importantes des webview (url) mais laisser acces pour usage avancé.
|
|
||||||
|
|
||||||
// const Tab = require("electron-tabs")(config);
|
|
||||||
|
|
||||||
module.exports = (config) => {
|
|
||||||
class Tab {
|
|
||||||
constructor (args) {
|
|
||||||
this.title = args.title;
|
|
||||||
this.iconURL = args.iconURL;
|
|
||||||
this.webviewAttributes = args.webviewAttributes;
|
|
||||||
this.tabContainerSelector = args.tabContainerSelector || config.tabContainerSelector;
|
|
||||||
this.tabContainer = document.querySelector(this.tabContainerSelector);
|
|
||||||
this.webviewContainerSelector = args.webviewContainerSelector || config.webviewContainerSelector;
|
|
||||||
this.webviewContainer = document.querySelector(this.webviewContainerSelector);
|
|
||||||
this.initTab();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
init () {
|
// Inject styles
|
||||||
// Create the tab
|
(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;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
let styleTag = document.createElement("style");
|
||||||
|
styleTag.innerHTML = styles;
|
||||||
|
document.getElementsByTagName("head")[0].appendChild(styleTag);
|
||||||
|
})();
|
||||||
|
|
||||||
|
class TabGroup {
|
||||||
|
constructor (args) {
|
||||||
|
this.tabContainerSelector = args.tabContainerSelector;
|
||||||
|
this.tabContainer = document.querySelector(this.tabContainerSelector);
|
||||||
|
this.viewContainerSelector = args.viewContainerSelector;
|
||||||
|
this.viewContainer = document.querySelector(this.viewContainerSelector);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeTab (tab) {
|
||||||
|
let id = tab.id;
|
||||||
|
for (let i in this.tabs) {
|
||||||
|
if (this.tabs[i].id === id) {
|
||||||
|
this.tabs.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveTab (tab) {
|
||||||
|
this.removeTab(tab);
|
||||||
|
this.pushTab(tab);
|
||||||
|
}
|
||||||
|
|
||||||
|
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.tab = document.createElement("div");
|
||||||
this.setTitle(this.title);
|
this.setTitle(this.title);
|
||||||
this.tabContainer.appendChild(this.tab);
|
this.tab.addEventListener("click", this.activate.bind(this), false);
|
||||||
|
this.tabGroup.tabContainer.appendChild(this.tab);
|
||||||
|
// TODO: close button
|
||||||
|
// TODO: handle middle click
|
||||||
|
}
|
||||||
|
|
||||||
// Create the webview
|
initWebview () {
|
||||||
this.webview = document.createElement("webview");
|
this.webview = document.createElement("webview");
|
||||||
if (this.webviewAttributes) {
|
if (this.webviewAttributes) {
|
||||||
let attrs = this.webviewAttributes;
|
let attrs = this.webviewAttributes;
|
||||||
|
@ -41,7 +103,7 @@ module.exports = (config) => {
|
||||||
this.webview.setAttribute(key, attrs[key]);
|
this.webview.setAttribute(key, attrs[key]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.webviewContainer.appendChild(this.webview);
|
this.tabGroup.viewContainer.appendChild(this.webview);
|
||||||
}
|
}
|
||||||
|
|
||||||
setTitle (title) {
|
setTitle (title) {
|
||||||
|
@ -59,14 +121,34 @@ module.exports = (config) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
activate () {
|
activate () {
|
||||||
// TODO
|
let activeTab = this.tabGroup.getActiveTab();
|
||||||
|
if (activeTab) {
|
||||||
|
activeTab.tab.classList.remove("active");
|
||||||
|
activeTab.webview.classList.remove("visible");
|
||||||
|
}
|
||||||
|
this.tabGroup.setActiveTab(this);
|
||||||
|
this.tab.classList.add("active");
|
||||||
|
this.webview.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
flash (flag) {
|
||||||
|
if (flag) {
|
||||||
|
this.tab.classList.add("flash");
|
||||||
|
} else {
|
||||||
|
this.tab.classList.remove("flash");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
move (index) {
|
||||||
|
// TODO: move
|
||||||
}
|
}
|
||||||
|
|
||||||
close () {
|
close () {
|
||||||
this.tabContainer.removeChild(this.tab);
|
this.tabContainer.removeChild(this.tab);
|
||||||
this.webviewContainer.removeChild(this.webview);
|
this.tabGroup.viewContainer.removeChild(this.webview);
|
||||||
|
this.tabGroup.removeTab(this);
|
||||||
|
this.tabGroup.activateRecentTab();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return Tab;
|
module.exports = TabGroup;
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in a new issue