diff --git a/app/renderer/css/servermanager.css b/app/renderer/css/servermanager.css
index 260f2580..ebf02ec6 100644
--- a/app/renderer/css/servermanager.css
+++ b/app/renderer/css/servermanager.css
@@ -99,12 +99,17 @@ html, body {
opacity: 1;
}
-#webview {
+webview {
opacity: 1;
transition: opacity 0.3s;
+ flex-grow: 1;
+}
+
+webview.loading {
+ opacity: 0;
+ transition: opacity 0.3s;
}
-#webview.loading {
- opacity: 0;
- transition: opacity 0.3s;
+webview.disabled {
+ display: none;
}
\ No newline at end of file
diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
index 751a1f7e..a2c412d4 100644
--- a/app/renderer/js/main.js
+++ b/app/renderer/js/main.js
@@ -13,6 +13,7 @@ class ServerManagerView {
this.isLoading = false;
this.settingsTabIndex = -1;
+ this.activeTabIndex = -1;
}
init() {
@@ -33,9 +34,9 @@ class ServerManagerView {
initTab(tab) {
const {
alias,
- url
+ url,
+ icon
} = tab;
- const icon = tab.icon || 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png';
const tabTemplate = tab.template || `
@@ -46,32 +47,42 @@ class ServerManagerView {
$tab.addEventListener('click', this.activateTab.bind(this, index));
}
- initWebView(url) {
+ initWebView(url, index, nodeIntegration = false) {
const webViewTemplate = `
`;
- this.$webView = this.__insert_node(webViewTemplate);
- this.$content.appendChild(this.$webView);
- this.$webView.addEventListener('dom-ready', this.endLoading.bind(this));
- }
-
- startLoading(url) {
- this.$webView.loadURL(url);
+ const $webView = this.__insert_node(webViewTemplate);
+ this.$content.appendChild($webView);
this.isLoading = true;
- this.$webView.classList.add('loading');
+ $webView.addEventListener('dom-ready', this.endLoading.bind(this, index));
}
- endLoading() {
+ startLoading(url, index) {
+ const $activeWebView = document.getElementById(`webview-${this.activeTabIndex}`);
+ if ($activeWebView) {
+ $activeWebView.classList.add('disabled');
+ }
+ const $webView = document.getElementById(`webview-${index}`);
+ if (!$webView) {
+ this.initWebView(url, index, this.settingsTabIndex == index);
+ } else {
+ $webView.classList.remove('disabled');
+ }
+ }
+
+ endLoading(index) {
+ const $webView = document.getElementById(`webview-${index}`);
this.isLoading = false;
- this.$webView.classList.remove('loading');
- this.$webView.openDevTools();
+ $webView.classList.remove('loading');
+ // $webView.openDevTools();
}
initActions() {
@@ -107,26 +118,21 @@ class ServerManagerView {
activateTab(index) {
if (this.isLoading) return;
-
- const $tab = this.$tabsContainer.childNodes[index];
- if (this.$activeTab) {
- if (this.$activeTab == $tab) {
+ if (this.activeTabIndex != -1) {
+ if (this.activeTabIndex == index) {
return;
} else {
- this.$activeTab.classList.remove('active');
+ this.__get_tab_at(this.activeTabIndex).classList.remove('active');
}
}
+ const $tab = this.__get_tab_at(index);
$tab.classList.add('active');
- this.$activeTab = $tab;
const domain = $tab.getAttribute('domain');
- if (this.$webView){
- this.startLoading(domain);
- } else {
- this.initWebView(domain);
- }
+ this.startLoading(domain, index);
+ this.activeTabIndex = index;
}
__insert_node(html) {
@@ -134,6 +140,10 @@ class ServerManagerView {
wrapper.innerHTML= html;
return wrapper.firstElementChild;
}
+
+ __get_tab_at(index) {
+ return this.$tabsContainer.childNodes[index];
+ }
}
window.onload = () => {