Componentize Tab.

app/renderer/js/components/tab.js

@@ -0,0 +1,57 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+
+class Tab extends BaseComponent {
+    constructor(params) {
+        super();
+
+        const {url, icon, name, type, $root, onClick} = params;
+        this.url = url;
+        this.name = name;
+        this.icon = icon;
+        this.type = type;
+        this.$root = $root;
+        this.onClick = onClick;
+
+        this.init();
+    }
+
+    template() {
+        if (this.type == Tab.SERVER_TAB) {
+            return `<div class="tab" domain="${this.url}">
+                        <div class="server-tab" style="background-image: url(${this.icon});"></div>
+                    </div>`;
+        } else {
+            return `<div class="tab" domain="${this.url}">
+                        <div class="server-tab settings-tab">
+                            <i class="material-icons md-48">settings</i>
+                        </div>
+                    </div>`;
+        }
+    }
+
+    init() {
+        this.$el = this.generateNodeFromTemplate(this.template());
+		this.$root.appendChild(this.$el);
+
+        this.registerListeners();
+    }
+
+    registerListeners() {
+		this.$el.addEventListener('click', this.onClick);
+    }
+
+    activate() {
+        this.$el.classList.add('active');
+    }
+
+    deactivate() {
+        this.$el.classList.remove('active');
+    }
+}
+
+Tab.SERVER_TAB = 0;
+Tab.SETTINGS_TAB = 1;
+
+module.exports = Tab;

app/renderer/js/components/webview.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 const DomainUtil = require(__dirname + '/../utils/domain-util.js');
 const SystemUtil = require(__dirname + '/../utils/system-util.js');

app/renderer/js/main.js

@@ -6,8 +6,8 @@ const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
 const SystemUtil = require(__dirname + '/js/utils/system-util.js');
 const {linkIsInternal, skipImages} = require(__dirname + '/../main/link-helper');
 const {shell, ipcRenderer} = require('electron');
-const {app, dialog} = require('electron').remote;
 const WebView = require(__dirname + '/js/components/webview.js');
+const Tab = require(__dirname + '/js/components/tab.js');
 
 class ServerManagerView {
 	constructor() {
@@ -18,10 +18,10 @@ class ServerManagerView {
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$content = document.getElementById('content');
 
-		this.isLoading = false;
 		this.settingsTabIndex = -1;
 		this.activeTabIndex = -1;
 		this.webviews = [];
+		this.tabs = [];
 	}
 
 	init() {
@@ -34,38 +34,32 @@ class ServerManagerView {
 	initTabs() {
 		const servers = this.domainUtil.getDomains();
 		if (servers.length > 0) {
-			for (let i = 0; i < servers.length;i++) {
+			for (let i = 0; i < servers.length; i++) {
-				const server = servers[i];
+				this.initServer(servers[i], i)
-				this.initTab(server);
-				this.webviews.push(new WebView({
-					$root: this.$content,
-					index: i,
-					url: server.url,
-					name: server.alias,
-					onBadgeChange: this.updateBadge.bind(this),
-					nodeIntegration: false
-				}))
 			}
-
 			this.activateTab(0);
 		} else {
 			this.openSettings();
 		}
 	}
 
-	initTab(tab) {
+	initServer(server, index) {
-		const {
+		this.tabs.push(new Tab({
-			url,
+			url: server.url,
-			icon
+			name: server.alias,
-		} = tab;
+			icon: server.icon,
-		const tabTemplate = tab.template || `
+			type: Tab.SERVER_TAB,
-				<div class="tab" domain="${url}">
+			$root: this.$tabsContainer,
-					<div class="server-tab" style="background-image: url(${icon});"></div>
+			onClick: this.activateTab.bind(this, index)
-				</div>`;
+		}));
-		const $tab = this.insertNode(tabTemplate);
+		this.webviews.push(new WebView({
-		const index = this.$tabsContainer.childNodes.length;
+			$root: this.$content,
-		this.$tabsContainer.appendChild($tab);
+			index: index,
-		$tab.addEventListener('click', this.activateTab.bind(this, index));
+			url: server.url,
+			name: server.alias,
+			onBadgeChange: this.updateBadge.bind(this),
+			nodeIntegration: false
+		}));
 	}
 
 	initActions() {
@@ -80,19 +74,16 @@ class ServerManagerView {
 		}
 		const url = 'file://' + __dirname + '/preference.html';
 
-		const settingsTabTemplate = `
-				<div class="tab" domain="${url}">
-					<div class="server-tab settings-tab">
-						<i class="material-icons md-48">settings</i>
-					</div>
-				</div>`;
-		this.initTab({
-			alias: 'Settings',
-			url,
-			template: settingsTabTemplate
-		});
-
 		this.settingsTabIndex = this.webviews.length;
+
+		this.tabs.push(new Tab({
+			url: url,
+			name: 'Settings',
+			type: Tab.SETTINGS_TAB,
+			$root: this.$tabsContainer,
+			onClick: this.activateTab.bind(this, this.settingsTabIndex)
+		}));
+
 		this.webviews.push(new WebView({
 			$root: this.$content,
 			index: this.settingsTabIndex,
@@ -101,7 +92,8 @@ class ServerManagerView {
 			onBadgeChange: this.updateBadge.bind(this),
 			nodeIntegration: true
 		}));
-		this.activateTab(this.settingsTabIndex);		
+
+		this.activateTab(this.settingsTabIndex);
 	}
 
 	activateTab(index) {
@@ -113,28 +105,17 @@ class ServerManagerView {
 			if (this.activeTabIndex === index) {
 				return;
 			} else {
-				this.getTabAt(this.activeTabIndex).classList.remove('active');
+				this.tabs[this.activeTabIndex].deactivate();
 				this.webviews[this.activeTabIndex].hide();
 			}
 		}
 
-		const $tab = this.getTabAt(index);
+		this.tabs[index].activate();
-		$tab.classList.add('active');
 
 		this.webviews[index].load();
 		this.activeTabIndex = index;
 	}
 
-	insertNode(html) {
-		const wrapper = document.createElement('div');
-		wrapper.innerHTML = html;
-		return wrapper.firstElementChild;
-	}
-
-	getTabAt(index) {
-		return this.$tabsContainer.childNodes[index];
-	}
-
 	updateBadge(messageCount) {
 		ipcRenderer.send('update-badge', messageCount);
 	}
@@ -161,14 +142,8 @@ class ServerManagerView {
 				}
 			});
 		}
-		
+
-		ipcRenderer.on('open-settings', () => {
+		ipcRenderer.on('open-settings', this.openSettings);
-			if (this.settingsTabIndex === -1) {
-				this.openSettings();
-			} else {
-				this.activateTab(this.settingsTabIndex);
-			}
-		});
 	}
 }