paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-09 08:25:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Componentize WebView.

Browse Source
This commit is contained in:
Zhongyi Tong
2017-06-04 03:49:58 +08:00
parent 84808313fe
commit 0708519816
4 changed files with 165 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/renderer/css/main.css
View File

@@ -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;
}

11
app/renderer/js/components/base.js Normal file
View File

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

127
app/renderer/js/components/webview.js Normal file
View File

@@ -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;

133
app/renderer/js/main.js
View File

@@ -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) {
return;
}
// if (this.webviews[index].loading) {
// 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.startLoading(domain, index);
this.webviews[index].load();
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}`);