Working tabs (experimental)

index.js

@@ -1,39 +1,101 @@
-// New tab(title, url, icon, webviewArgs)
-// .webview.methodeDeWebview()
-// .close X
-// .activate
-// .move(index)
-// .blink
-// .unblink
-// .setTitle X
-// .getTitle X
-// .setIcon X
-// .getIcon X
+if (!document) {
+    throw Error("electron-tabs module must be called in renderer process");
+}
 
-// 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é.
+// 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;
+        }
+    `;
+    let styleTag = document.createElement("style");
+    styleTag.innerHTML = styles;
+    document.getElementsByTagName("head")[0].appendChild(styleTag);
+})();
 
-// const Tab = require("electron-tabs")(config);
-
-module.exports = (config) => {
-    class Tab {
+class TabGroup {
     constructor (args) {
-            this.title = args.title;
-            this.iconURL = args.iconURL;
-            this.webviewAttributes = args.webviewAttributes;
-            this.tabContainerSelector = args.tabContainerSelector || config.tabContainerSelector;
+        this.tabContainerSelector = args.tabContainerSelector;
         this.tabContainer = document.querySelector(this.tabContainerSelector);
-            this.webviewContainerSelector = args.webviewContainerSelector || config.webviewContainerSelector;
-            this.webviewContainer = document.querySelector(this.webviewContainerSelector);
-            this.initTab();
+        this.viewContainerSelector = args.viewContainerSelector;
+        this.viewContainer = document.querySelector(this.viewContainerSelector);
+        this.tabs = [];
+        this.newTabId = 0;
     }
 
-        init () {
-            // Create the tab
+    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.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");
         if (this.webviewAttributes) {
             let attrs = this.webviewAttributes;
@@ -41,7 +103,7 @@ module.exports = (config) => {
                 this.webview.setAttribute(key, attrs[key]);
             }
         }
-            this.webviewContainer.appendChild(this.webview);
+        this.tabGroup.viewContainer.appendChild(this.webview);
     }
 
     setTitle (title) {
@@ -59,14 +121,34 @@ module.exports = (config) => {
     }
 
     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 () {
         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;