Working tabs (experimental)

index.js

@@ -1,72 +1,154 @@
-// 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é.
+// Inject styles
-
+(function () {
-// const Tab = require("electron-tabs")(config);
+    const styles = `
-
+        webview {
-module.exports = (config) => {
+            display: flex;
-    class Tab {
+            flex: 0 1;
-        constructor (args) {
+            width: 0px;
-            this.title = args.title;
+            height: 0px;
-            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();
         }
+        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);
+})();
 
-        init () {
+class TabGroup {
-            // Create the tab
+    constructor (args) {
-            this.tab = document.createElement("div");
+        this.tabContainerSelector = args.tabContainerSelector;
-            this.setTitle(this.title);
+        this.tabContainer = document.querySelector(this.tabContainerSelector);
-            this.tabContainer.appendChild(this.tab);
+        this.viewContainerSelector = args.viewContainerSelector;
+        this.viewContainer = document.querySelector(this.viewContainerSelector);
+        this.tabs = [];
+        this.newTabId = 0;
+    }
 
-            // Create the webview
+    addTab (args) {
-            this.webview = document.createElement("webview");
+        let id = this.newTabId;
-            if (this.webviewAttributes) {
+        this.newTabId++;
-                let attrs = this.webviewAttributes;
+        let tab = new Tab(this, id, args);
-                for (let key in attrs) {
+        this.pushTab(tab);
-                    this.webview.setAttribute(key, attrs[key]);
+        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;
             }
-            this.webviewContainer.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);
-        }
-
-        activate () {
-            // TODO
-        }
-
-        close () {
-            this.tabContainer.removeChild(this.tab);
-            this.webviewContainer.removeChild(this.webview);
         }
     }
 
-    return Tab;
+    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.tab.addEventListener("click", this.activate.bind(this), false);
+        this.tabGroup.tabContainer.appendChild(this.tab);
+        // TODO: close button
+        // TODO: handle middle click
+    }
+
+    initWebview () {
+        this.webview = document.createElement("webview");
+        if (this.webviewAttributes) {
+            let attrs = this.webviewAttributes;
+            for (let key in attrs) {
+                this.webview.setAttribute(key, attrs[key]);
+            }
+        }
+        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);
+    }
+
+    activate () {
+        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.tabGroup.viewContainer.removeChild(this.webview);
+        this.tabGroup.removeTab(this);
+        this.tabGroup.activateRecentTab();
+    }
+}
+
+module.exports = TabGroup;