diff --git a/app/Application.js b/app/Application.js index 79c56492..679352b8 100644 --- a/app/Application.js +++ b/app/Application.js @@ -83,14 +83,12 @@ Ext.define('Rambox.Application', { } ,{ key: "f" - ,ctrl: true - ,alt: false - ,shift: false + ,ctrl: false + ,alt: true + ,shift: true ,handler: function(key) { var currentTab = Ext.cq1('app-main').getActiveTab(); - if (currentTab.getWebView) { - currentTab.down('component').el.dom.send('findInPage'); - } + if ( currentTab.getWebView ) currentTab.showSearchBox(true); } } ,{ diff --git a/app/ux/WebView.js b/app/ux/WebView.js index 3f3e9d8d..dffbc0bd 100644 --- a/app/ux/WebView.js +++ b/app/ux/WebView.js @@ -126,6 +126,45 @@ Ext.define('Rambox.ux.WebView',{ ] } } + ,tbar: { + itemId: 'searchBar' + ,hidden: true + ,items: ['->', { + xtype: 'textfield' + ,emptyText: 'Search...' + ,listeners: { + scope: me + ,change: me.doSearchText + ,specialkey: function(field, e) { + if ( e.getKey() === e.ENTER ) return me.doSearchText(field, field.getValue(), null, null, true) + if ( e.getKey() === e.ESC ) return me.showSearchBox(false) + } + } + }, { + xtype: 'displayfield' + }, { + xtype: 'segmentedbutton' + ,allowMultiple: false + ,allowToggle: false + ,items: [{ + glyph: 'xf053@FontAwesome' + ,handler: function() { + var field = this.up('toolbar').down('textfield'); + me.doSearchText(field, field.getValue(), null, null, false) + } + }, { + glyph: 'xf054@FontAwesome' + ,handler: function() { + var field = this.up('toolbar').down('textfield'); + me.doSearchText(field, field.getValue(), null, null, true) + } + }] + }, { + xtype: 'button' + ,glyph: 'xf00d@FontAwesome' + ,handler: function() { me.showSearchBox(false) } + }] + } ,listeners: { afterrender: me.onAfterRender ,beforedestroy: me.onBeforeDestroy @@ -165,6 +204,7 @@ Ext.define('Rambox.ux.WebView',{ } else { cfg = [{ xtype: 'component' + ,cls: 'webview' ,hideMode: 'offsets' ,autoRender: true ,autoShow: true @@ -234,7 +274,7 @@ Ext.define('Rambox.ux.WebView',{ if ( !me.record.get('enabled') ) return; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); // Google Analytics Event ga_storage._trackEvent('Services', 'load', me.type, 1, true); @@ -265,6 +305,11 @@ Ext.define('Rambox.ux.WebView',{ }, 1000); }); + // On search text + webview.addEventListener('found-in-page', function(e) { + me.onSearchText(e.result) + }); + // Open links in default browser webview.addEventListener('new-window', function(e) { switch ( me.type ) { @@ -457,8 +502,6 @@ Ext.define('Rambox.ux.WebView',{ webview.executeJavaScript(js_inject); }); - - webview.addEventListener('ipc-message', function(event) { var channel = event.channel; switch (channel) { @@ -621,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(); @@ -629,16 +672,56 @@ Ext.define('Rambox.ux.WebView',{ } } + ,showSearchBox: function(v) { + var me = this; + if ( !me.record.get('enabled') ) return; + var webview = me.getWebView(); + + webview.stopFindInPage('keepSelection'); + if ( v ) { + me.down('#searchBar').show(); + setTimeout(() => { me.down('#searchBar textfield').focus() }, 100) + } else { + me.down('#searchBar').hide(); + me.down('#searchBar textfield').setValue(''); + } + + me.down('#searchBar displayfield').setValue(''); + } + + ,doSearchText: function(field, newValue, oldValue, eOpts, forward = true) { + var me = this; + var webview = me.getWebView(); + + if ( newValue === '' ) { + webview.stopFindInPage('clearSelection'); + me.down('#searchBar displayfield').setValue(''); + return; + } + + webview.findInPage(newValue, { + forward: forward, + findNext: false, + matchCase: false + }) + } + + ,onSearchText: function( result ) { + var me = this; + + me.down('#searchBar displayfield').setValue(result.activeMatchOrdinal+ '/' + result.matches); + } + ,toggleDevTools: function(btn) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); if ( me.record.get('enabled') ) webview.isDevToolsOpened() ? webview.closeDevTools() : webview.openDevTools(); } ,setURL: function(url) { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.src = url; @@ -647,7 +730,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; @@ -679,7 +762,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; @@ -708,21 +791,21 @@ 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(); } ,zoomIn: function() { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.zoomLevel = me.zoomLevel + 0.25; if ( me.record.get('enabled') ) { @@ -733,7 +816,7 @@ Ext.define('Rambox.ux.WebView',{ ,zoomOut: function() { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.zoomLevel = me.zoomLevel - 0.25; if ( me.record.get('enabled') ) { @@ -744,7 +827,7 @@ Ext.define('Rambox.ux.WebView',{ ,resetZoom: function() { var me = this; - var webview = me.down('component').el.dom; + var webview = me.getWebView(); me.zoomLevel = 0; if ( me.record.get('enabled') ) { @@ -755,7 +838,7 @@ Ext.define('Rambox.ux.WebView',{ ,getWebView: function() { if ( this.record.get('enabled') ) { - return this.down('component').el.dom; + return this.down('component[cls=webview]').el.dom; } else { return false; } diff --git a/package-lock.json b/package-lock.json index 284aeac1..0b84d086 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2014,7 +2014,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -2026,11 +2026,6 @@ } } }, - "electron-find": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/electron-find/-/electron-find-1.0.5.tgz", - "integrity": "sha512-LmFp6wolElQwlnjFR4jo7cARUZq+siR0sCS5Qp5Jywz2puM5OJzjRRyUEHCMi9Pm7xLupVYjwNVF1JojVQ0QPA==" - }, "electron-is-dev": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/electron-is-dev/-/electron-is-dev-0.3.0.tgz", diff --git a/package.json b/package.json index c72bf6e6..ba784888 100644 --- a/package.json +++ b/package.json @@ -185,7 +185,6 @@ "auto-launch-patched": "5.0.2", "crypto": "^1.0.1", "electron-contextmenu-wrapper": "2.0.0", - "electron-find": "^1.0.5", "electron-is-dev": "^0.3.0", "electron-log": "^2.2.17", "electron-store": "^2.0.0", diff --git a/resources/js/rambox-service-api.js b/resources/js/rambox-service-api.js index cadd2036..a0958ef0 100644 --- a/resources/js/rambox-service-api.js +++ b/resources/js/rambox-service-api.js @@ -2,9 +2,8 @@ * This file is loaded in the service web views to provide a Rambox API. */ -const { ipcRenderer, remote } = require('electron'); +const { ipcRenderer } = require('electron'); const { ContextMenuBuilder, ContextMenuListener } = require('electron-contextmenu-wrapper'); -const { FindInPage } = require('electron-find') /** * Make the Rambox API available via a global "rambox" variable. @@ -72,11 +71,3 @@ document.addEventListener("keydown", (event) => { }; ipcRenderer.sendToHost('keydown', msg) }); -let search; -document.addEventListener('DOMContentLoaded', function(e) { - search = new FindInPage(remote.getCurrentWebContents()) -}, false) - -ipcRenderer.on('findInPage', () => { - search.openFindWindow() -}) \ No newline at end of file