partial workaround for the broken in page search (next & previous don…

…'t work, but at least highlighting works)
zadam · Nov 21, 2018 · 3a06493 · 3a06493
1 parent 8159564
commit 3a06493
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js
@@ -97,14 +97,19 @@ function registerEntrypoints() {
 
     $(document).bind('keydown', 'ctrl+f', () => {
         if (utils.isElectron()) {
-            alert("In page search doesn't work in this beta");
-
-            // const searchInPage = require('electron-in-page-search').default;
-            // const remote = require('electron').remote;
-            //
-            // const inPageSearch = searchInPage(remote.getCurrentWebContents());
-            //
-            // inPageSearch.openSearchWindow();
+            const $searchWindowWebview = $(".electron-in-page-search-window");
+            $searchWindowWebview.show();
+
+            const searchInPage = require('electron-in-page-search').default;
+            const {remote} = require('electron');
+
+            const inPageSearch = searchInPage(remote.getCurrentWebContents(), {
+                searchWindowWebview: $searchWindowWebview[0],
+                //openDevToolsOfSearchWindow: true,
+                customCssPath: '/libraries/electron-in-page-search/default-style.css'
+            });
+
+            inPageSearch.openSearchWindow();
 
             return false;
         }

diff --git a/src/public/libraries/electron-in-page-search/default-style.css b/src/public/libraries/electron-in-page-search/default-style.css
@@ -0,0 +1,57 @@
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Meiryo", sans-serif;
+  overflow: hidden;
+}
+
+.inpage-search-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px;
+  padding: 10px;
+  border: solid #aaaaaa 1px;
+  border-radius: 10px;
+  background-color: #fafafa;
+}
+
+.inpage-search-input {
+  width: 200px;
+}
+
+.inpage-search-matches {
+  color: #999;
+  font-size: 0.8em;
+}
+
+.inpage-search-back {
+  margin-left: 2px;
+  padding-left: 6px;
+  padding-right: 2px;
+  cursor: pointer;
+}
+
+.inpage-search-forward {
+  padding-left: 2px;
+  padding-right: 6px;
+  cursor: pointer;
+}
+
+.inpage-search-close {
+  margin-left: 4px;
+  padding: 0 2px;
+  cursor: pointer;
+}
+
+.inpage-search-back:hover,
+.inpage-search-forward:hover,
+.inpage-search-close:hover {
+  background-color: #e2e0e2;
+  border-radius: 0.2em;
+}
diff --git a/src/public/libraries/electron-in-page-search/search-window.html b/src/public/libraries/electron-in-page-search/search-window.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
+    <link href="/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="inpage-search-body">
+      <input class="inpage-search-input form-control form-control-sm" type="search" placeholder="Search..." autocomplete="off" autofocus/>
+
+      <div class="inpage-search-matches">0/0</div>
+
+      <div class="inpage-search-back" title="Previous result">&lt;</div>
+
+      <div class="inpage-search-forward" title="Next result">&gt;</div>
+
+      <div class="inpage-search-close" title="Close search">✕</div>
+    </div>
+  </body>
+  <script>var exports = {}</script>
+</html>
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
@@ -214,12 +214,12 @@ div.ui-tooltip {
 */
 .electron-in-page-search-window {
     position: fixed;
-    top: 50px;
-    right: 0;
-    border: solid grey 1px;
-    background-color: white;
-    width: 300px;
-    height: 36px;
+    top: 45px;
+    right: 10px;
+    width: 360px;
+    height: 55px;
+    display: none;
+    z-index: 1001;
 }
 
 /*

diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -187,6 +187,8 @@
       <% include dialogs/confirm.ejs %>
     </div>
 
+    <webview class="electron-in-page-search-window" nodeintegration disablewebsecurity src="/libraries/electron-in-page-search/search-window.html"></webview>
+
     <script type="text/javascript">
       window.baseApiUrl = 'api/';
       window.glob = {