Componentize WebView.

app/renderer/css/main.css

@@ -139,13 +139,10 @@ webview {
     flex-grow: 1;
 }
 
-webview.loading {
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
 webview.disabled {
     flex: 0 1;
     height: 0;
     width: 0;
+    opacity: 0;
+    transition: opacity 0.3s;
 }

app/renderer/js/components/base.js

@@ -0,0 +1,11 @@
+"use strict";
+
+class BaseComponent {
+	generateNodeFromTemplate(template) {
+		const wrapper = document.createElement('div');
+		wrapper.innerHTML = template;
+		return wrapper.firstElementChild;
+	}
+}
+
+module.exports = BaseComponent;

app/renderer/js/components/webview.js

@@ -0,0 +1,127 @@
+"use strict";
+
+const DomainUtil = require(__dirname + '/../utils/domain-util.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
+const {linkIsInternal, skipImages} = require(__dirname + '/../../../main/link-helper');
+const {app, dialog} = require('electron').remote;
+const {ipcRenderer} = require('electron');
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+
+class WebView extends BaseComponent {
+	constructor(params) {
+		super();
+	
+        const {$root, url, index, name, nodeIntegration} = params;
+        this.$root = $root;
+        this.index = index;
+        this.name = name;
+        this.url = url;
+        this.nodeIntegration = nodeIntegration;
+
+        this.zoomFactor = 1;
+        this.loading = true;
+        this.systemUtil = new SystemUtil();
+	}
+
+	template() {
+		return `<webview
+                    id="webview-${this.index}"
+                    class="disabled"
+                    src="${this.url}"
+                    ${this.nodeIntegration ? 'nodeIntegration' : ''}
+                    disablewebsecurity
+                    preload="js/preload.js"
+                    useragent="${this.systemUtil.getUserAgent()}"
+                    webpreferences="allowRunningInsecureContent, javascript=yes">
+                </webview>`;
+    }
+
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.$root.appendChild(this.$el);
+
+		this.registerListeners();
+	}
+
+	registerListeners() {
+		this.$el.addEventListener('new-window', event => {
+			const {url} = event;
+			const domainPrefix = this.domainUtil.getDomain(this.index).url;
+
+			if (linkIsInternal(domainPrefix, url) && url.match(skipImages) === null) {
+				event.preventDefault();
+				this.$el.loadURL(url);
+			} else {
+                event.preventDefault();
+			    shell.openExternal(url);
+            }
+		});
+
+		this.$el.addEventListener('dom-ready', this.show.bind(this));
+
+        this.$el.addEventListener('did-fail-load', (event) => {
+			const {errorCode, errorDescription, validatedURL} = event;
+			const hasConnectivityErr = (this.systemUtil.connectivityERR.indexOf(errorDescription) >= 0);
+			if (hasConnectivityErr) {
+				console.error('error', errorDescription);
+				this.checkConnectivity();
+			}
+		});
+
+		this.$el.addEventListener('did-start-loading', () => {
+			let userAgent = this.systemUtil.getUserAgent();
+			if (!this.systemUtil.getUserAgent()) {
+				this.systemUtil.setUserAgent(this.$el.getUserAgent());
+				userAgent = this.systemUtil.getUserAgent();
+			}
+			this.$el.setUserAgent(userAgent);
+		});
+	}
+
+    getBadgeCount() {
+        const title = this.$el.getTitle();
+		let messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
+		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
+    }
+
+    show() {
+        this.$el.classList.remove('disabled');
+        this.$el.focus();
+        this.loading = false;
+    }
+
+    hide() {
+        this.$el.classList.add('disabled');
+    }
+
+    load() {
+		if (this.$el) {
+			// this.updateBadge(index);
+			this.show();
+		} else {
+            this.init();
+		}
+    }
+
+    checkConnectivity() {
+		return dialog.showMessageBox({
+			title: 'Internet connection problem',
+			message: 'No internet available! Try again?',
+			type: 'warning',
+			buttons: ['Try again', 'Close'],
+			defaultId: 0
+		}, index => {
+			if (index === 0) {
+				this.reload();
+				ipcRenderer.send('reload');
+				ipcRenderer.send('destroytray');
+			}
+			if (index === 1) {
+				app.quit();
+			}
+		});
+	}
+}
+
+module.exports = WebView;

app/renderer/js/main.js

@@ -7,6 +7,7 @@ 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');
 
 class ServerManagerView {
 	constructor() {
@@ -20,12 +21,11 @@ class ServerManagerView {
 		this.isLoading = false;
 		this.settingsTabIndex = -1;
 		this.activeTabIndex = -1;
-		this.zoomFactors = [];
+		this.webviews = [];
 	}
 
 	init() {
 		this.domainUtil = new DomainUtil();
-		this.systemUtil = new SystemUtil();
 		this.initTabs();
 		this.initActions();
 		this.registerIpcs();
@@ -34,8 +34,16 @@ class ServerManagerView {
 	initTabs() {
 		const servers = this.domainUtil.getDomains();
 		if (servers.length > 0) {
-			for (const server of servers) {
+			for (let i = 0; i < servers.length;i++) {
+				const server = servers[i];
 				this.initTab(server);
+				this.webviews.push(new WebView({
+					$root: this.$content,
+					index: i,
+					url: server.url,
+					name: server.alias,
+					nodeIntegration: false
+				}))
 			}
 
 			this.activateTab(0);
@@ -59,46 +67,6 @@ class ServerManagerView {
 		$tab.addEventListener('click', this.activateTab.bind(this, index));
 	}
 
-	initWebView(url, index, nodeIntegration = false) {
-		const webViewTemplate = `
-			<webview
-				id="webview-${index}"
-				class="loading"
-				src="${url}"
-				${nodeIntegration ? 'nodeIntegration' : ''}
-				disablewebsecurity
-				preload="js/preload.js"
-				webpreferences="allowRunningInsecureContent, javascript=yes">
-			</webview>
-		`;
-		const $webView = this.insertNode(webViewTemplate);
-		this.$content.appendChild($webView);
-		this.isLoading = true;
-		this.registerListeners($webView, index);
-		this.zoomFactors[index] = 1;
-	}
-
-	startLoading(url, index) {
-		const $activeWebView = document.getElementById(`webview-${this.activeTabIndex}`);
-		if ($activeWebView) {
-			$activeWebView.classList.add('disabled');
-		}
-		const $webView = document.getElementById(`webview-${index}`);
-		if ($webView === null) {
-			this.initWebView(url, index, this.settingsTabIndex === index);
-		} else {
-			this.updateBadge(index);
-			$webView.classList.remove('disabled');
-			$webView.focus();
-		}
-	}
-
-	endLoading(index) {
-		const $webView = document.getElementById(`webview-${index}`);
-		this.isLoading = false;
-		$webView.classList.remove('loading');
-	}
-
 	initActions() {
 		this.$addServerButton.addEventListener('click', this.openSettings.bind(this));
 		this.$settingsButton.addEventListener('click', this.openSettings.bind(this));
@@ -123,28 +91,35 @@ class ServerManagerView {
 			template: settingsTabTemplate
 		});
 
-		this.settingsTabIndex = this.$tabsContainer.childNodes.length - 1;
+		this.settingsTabIndex = this.webviews.length;
+		this.webviews.push(new WebView({
+			$root: this.$content,
+			index: this.settingsTabIndex,
+			url: url,
+			name: "Settings",
+			nodeIntegration: true
+		}));
 		this.activateTab(this.settingsTabIndex);		
 	}
 
 	activateTab(index) {
-		if (this.isLoading) {
+		// if (this.webviews[index].loading) {
-			return;
+		// 	return;
-		}
+		// }
 
 		if (this.activeTabIndex !== -1) {
 			if (this.activeTabIndex === index) {
 				return;
 			} else {
 				this.getTabAt(this.activeTabIndex).classList.remove('active');
+				this.webviews[this.activeTabIndex].hide();
 			}
 		}
 
 		const $tab = this.getTabAt(index);
 		$tab.classList.add('active');
 
-		const domain = $tab.getAttribute('domain');
+		this.webviews[index].load();
-		this.startLoading(domain, index);
 		this.activeTabIndex = index;
 	}
 
@@ -166,66 +141,6 @@ class ServerManagerView {
 		ipcRenderer.send('update-badge', messageCount);
 	}
 
-	registerListeners($webView, index) {
-		$webView.addEventListener('new-window', event => {
-			const {url} = event;
-			const domainPrefix = this.domainUtil.getDomain(this.activeTabIndex).url;
-			if (linkIsInternal(domainPrefix, url) && url.match(skipImages) === null) {
-				event.preventDefault();
-				return $webView.loadURL(url);
-			}
-			event.preventDefault();
-			shell.openExternal(url);
-		});
-		$webView.addEventListener('dom-ready', this.endLoading.bind(this, index));
-		$webView.addEventListener('dom-ready', () => {
-			// We need to wait until the page title is ready to get badge count
-			setTimeout(() => this.updateBadge(index), 1000);
-		});
-		$webView.addEventListener('dom-ready', () => {
-			$webView.focus();
-		});
-		// Set webview's user-agent
-		$webView.addEventListener('did-start-loading', () => {
-			let userAgent = this.systemUtil.getUserAgent();
-			if (!this.systemUtil.getUserAgent()) {
-				this.systemUtil.setUserAgent($webView.getUserAgent());
-				userAgent = this.systemUtil.getUserAgent();
-			}
-			$webView.setUserAgent(userAgent);
-		});
-		// eslint-disable-next-line arrow-parens
-		$webView.addEventListener('did-fail-load', (event) => {
-			// eslint-disable-next-line no-unused-vars
-			const {errorCode, errorDescription, validatedURL} = event;
-			const hasConnectivityErr = (this.systemUtil.connectivityERR.indexOf(errorDescription) >= 0);
-			if (hasConnectivityErr) {
-				console.error('error', errorDescription);
-				this.checkConnectivity();
-			}
-		});
-	}
-
-	checkConnectivity() {
-		return dialog.showMessageBox({
-			title: 'Internet connection problem',
-			message: 'No internet available! Try again?',
-			type: 'warning',
-			buttons: ['Try again', 'Close'],
-			defaultId: 0
-		}, index => {
-			if (index === 0) {
-				const activeWebview = document.getElementById(`webview-${this.activeTabIndex}`);
-				activeWebview.reload();
-				ipcRenderer.send('reload');
-				ipcRenderer.send('destroytray');
-			}
-			if (index === 1) {
-				app.quit();
-			}
-		});
-	}
-
 	registerIpcs() {
 		// ipcRenderer.on('reload', () => {
 		// 	const activeWebview = document.getElementById(`webview-${this.activeTabIndex}`);