From fe3f7bc6a231813523de933845581284a0ab78f0 Mon Sep 17 00:00:00 2001 From: TheGoddessInari Date: Mon, 25 Mar 2019 19:25:27 -0700 Subject: [PATCH] WebView: Several different cleanups. Fix zoom level logic. Restore zoom level on start. Now using getWebView consistently. Added getWebContents and setZoomLevel methods. Added blur and focus methods. --- app.js | 27 ++++++++--------- app/ux/WebView.js | 53 +++++++++++++++++++++------------ app/view/main/MainController.js | 2 +- electron/menu.js | 2 +- 4 files changed, 48 insertions(+), 36 deletions(-) diff --git a/app.js b/app.js index 4de4b5a2..760c2c45 100644 --- a/app.js +++ b/app.js @@ -133,7 +133,7 @@ ipc.on('tabFocusNext', function() { var activeIndex = tabPanel.items.indexOf(tabPanel.getActiveTab()); var i = activeIndex + 1; - tabPanel.getActiveTab().down('component').el.dom.blur(); + tabPanel.getActiveTab().blur(); // "cycle" (go to the start) when the end is reached or the end is the spacer "tbfill" if (i === tabPanel.items.items.length || i === tabPanel.items.items.length - 1 && tabPanel.items.items[i].id === 'tbfill') i = 0; @@ -142,39 +142,36 @@ ipc.on('tabFocusNext', function() { while (tabPanel.items.items[i].id === 'tbfill') i++; tabPanel.setActiveTab(i); - tabPanel.getActiveTab().down('component').el.dom.focus(); + tabPanel.getActiveTab().focus(); }); ipc.on('tabFocusPrevious', function() { var tabPanel = Ext.cq1('app-main'); var activeIndex = tabPanel.items.indexOf(tabPanel.getActiveTab()); var i = activeIndex - 1; - tabPanel.getActiveTab().down('component').el.dom.blur(); + tabPanel.getActiveTab().blur(); if ( i < 0 ) i = tabPanel.items.items.length - 1; while ( tabPanel.items.items[i].id === 'tbfill' || i < 0 ) i--; tabPanel.setActiveTab( i ); - tabPanel.getActiveTab().down('component').el.dom.focus(); + tabPanel.getActiveTab().focus(); }); -ipc.on('tabZoomIn', function(key) { +ipc.on('tabZoomIn', function() { var tabPanel = Ext.cq1('app-main'); if ( tabPanel.items.indexOf(tabPanel.getActiveTab()) === 0 ) return false; - - tabPanel.getActiveTab().zoomIn(); + tabPanel.getActiveTab().zoomIn(); }); ipc.on('tabZoomOut', function() { var tabPanel = Ext.cq1('app-main'); if ( tabPanel.items.indexOf(tabPanel.getActiveTab()) === 0 ) return false; - - tabPanel.getActiveTab().zoomOut(); + tabPanel.getActiveTab().zoomOut(); }); -ipc.on('tabZoomReset', function() { +ipc.on('tabResetZoom', function() { var tabPanel = Ext.cq1('app-main'); if ( tabPanel.items.indexOf(tabPanel.getActiveTab()) === 0 ) return false; - - tabPanel.getActiveTab().resetZoom(); + tabPanel.getActiveTab().resetZoom(); }); ipc.on('toggleDoNotDisturb', function(key) { @@ -190,12 +187,12 @@ ipc.on('lockWindow', function(key) { ipc.on('goHome', function() { const tabPanel = Ext.cq1('app-main'); - tabPanel.getActiveTab().down('component').el.dom.blur(); + tabPanel.getActiveTab().blur(); tabPanel.setActiveTab(0); - tabPanel.getActiveTab().down('component').el.dom.focus(); + tabPanel.getActiveTab().focus(); }); // Focus the current service when Alt + Tab or click in webviews textfields window.addEventListener('focus', function() { - if(Ext.cq1("app-main")) Ext.cq1("app-main").getActiveTab().down('component').el.dom.focus(); + if(Ext.cq1("app-main")) Ext.cq1("app-main").getActiveTab().focus(); }); diff --git a/app/ux/WebView.js b/app/ux/WebView.js index 84205f1b..319746e1 100644 --- a/app/ux/WebView.js +++ b/app/ux/WebView.js @@ -221,7 +221,7 @@ Ext.define('Rambox.ux.WebView',{ if ( !me.record.get('enabled') ) return; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); // Notifications in Webview me.setNotifications(localStorage.getItem('locked') || JSON.parse(localStorage.getItem('dontDisturb')) ? false : me.record.get('notifications')); @@ -241,7 +241,7 @@ Ext.define('Rambox.ux.WebView',{ Rambox.app.setTotalServicesLoaded( Rambox.app.getTotalServicesLoaded() + 1 ); // Apply saved zoom level - webview.setZoomLevel(me.record.get('zoomLevel')); + me.setZoomLevel(me.record.get('zoomLevel')); // Set special icon for some service (like Slack) Rambox.util.IconLoader.loadServiceIconUrl(me, webview); @@ -553,9 +553,9 @@ Ext.define('Rambox.ux.WebView',{ function showWindowAndActivateTab(event) { require('electron').remote.getCurrentWindow().show(); const tabPanel = Ext.cq1('app-main'); - tabPanel.getActiveTab().down('component').el.dom.blur(); + tabPanel.getActiveTab().blur(); tabPanel.setActiveTab(me); - webview.focus(); + tabPanel.getActiveTab().focus(); } function handleUpdateBadge(event) { @@ -664,7 +664,7 @@ Ext.define('Rambox.ux.WebView',{ ,reloadService: function(btn) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); if ( me.record.get('enabled') ) { me.clearUnreadCounter(); @@ -674,7 +674,7 @@ Ext.define('Rambox.ux.WebView',{ ,toggleDevTools: function(btn) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); if ( me.record.get('enabled')) { if (webview.isDevToolsOpened()) { @@ -687,7 +687,7 @@ Ext.define('Rambox.ux.WebView',{ ,setURL: function(url) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.src = url; @@ -696,7 +696,7 @@ Ext.define('Rambox.ux.WebView',{ ,setAudioMuted: function(muted, calledFromDisturb) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.muted = muted; @@ -728,7 +728,7 @@ Ext.define('Rambox.ux.WebView',{ ,setNotifications: function(notification, calledFromDisturb) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.notifications = notification; @@ -757,48 +757,49 @@ Ext.define('Rambox.ux.WebView',{ ,goBack: function() { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); if ( me.record.get('enabled') ) webview.goBack(); } ,goForward: function() { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); if ( me.record.get('enabled') ) webview.goForward(); } + ,setZoomLevel: function(level) + { + this.getWebContents().setZoomLevel(level); + } ,zoomIn: function() { var me = this; - var webview = me.down('component').el.dom; - me.zoomLevel = me.zoomLevel + 0.25; + me.zoomLevel = me.zoomLevel + 1; if ( me.record.get('enabled') ) { - webview.setZoomLevel(me.zoomLevel); me.record.set('zoomLevel', me.zoomLevel); + me.setZoomLevel(me.zoomLevel); } } ,zoomOut: function() { var me = this; - var webview = me.down('component').el.dom; - me.zoomLevel = me.zoomLevel - 0.25; + me.zoomLevel = me.zoomLevel - 1; if ( me.record.get('enabled') ) { - webview.setZoomLevel(me.zoomLevel); me.record.set('zoomLevel', me.zoomLevel); + me.setZoomLevel(me.zoomLevel); } } ,resetZoom: function() { var me = this; - var webview = me.down('component').el.dom; me.zoomLevel = 0; if ( me.record.get('enabled') ) { - webview.setZoomLevel(0); me.record.set('zoomLevel', me.zoomLevel); + me.setZoomLevel(me.zoomLevel); } } @@ -809,4 +810,18 @@ Ext.define('Rambox.ux.WebView',{ return false; } } + ,getWebContents: function() { + if ( this.record.get('enabled') ) { + return this.getWebView().getWebContents(); + } else { + return false; + } + } + ,blur: function () { + this.getWebView().blur(); + } + ,focus: function() + { + this.getWebView().focus(); + } }); diff --git a/app/view/main/MainController.js b/app/view/main/MainController.js index dbbd8a1f..45cef48a 100644 --- a/app/view/main/MainController.js +++ b/app/view/main/MainController.js @@ -40,7 +40,7 @@ Ext.define('Rambox.view.main.MainController', { return; } - var webview = newTab.down('component').el.dom; + var webview = newTab.getWebView(); if ( webview ) webview.focus(); // Update the main window so it includes the active tab title. diff --git a/electron/menu.js b/electron/menu.js index 76c0a4ea..6f5a1892 100644 --- a/electron/menu.js +++ b/electron/menu.js @@ -172,7 +172,7 @@ module.exports = function(config) { { role: 'resetzoom', click() { - sendAction("tabZoomReset"); + sendAction('tabResetZoom'); } }, {