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 = () => {