Build search text input with electron-search-text

Author: Yukaii

app.css

@@ -17,6 +17,7 @@ webview {
 }
 
 navbar {
+  z-index: 2;
 	height: 23px;
 	align-items: center;
 	width: 100%;
@@ -90,3 +91,37 @@ navbar.unsupported {
 #navbar-container .control-buttons > .pin-window.pinned {
   transform: rotate(0);
 }
+
+*:focus {
+    outline: none;
+}
+
+.electronSearchText-box {
+	font-family: "Courier New", Courier, monospace;
+  position: absolute;
+  top: -11px;
+  transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
+  right: 20px;
+  box-sizing: border-box;
+  height: 40px;
+}
+
+.electronSearchText-input {
+  box-sizing: border-box;
+  width: 220px;
+  padding: 5px;
+  font-size: 14px;
+  outline-width: 2px;
+}
+
+.electronSearchText-count {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  line-height: 33px;
+}
+
+.electronSearchText-visible {
+  transform: translateY(33px);
+  display: block;
+}

index.html

@@ -28,6 +28,10 @@ <h4 class="modal-title">Customize HackMD server</h4>
         </div>
       </div>
     </div>
+    <div class="electronSearchText-box">
+      <input type="text" class="electronSearchText-input">
+      <span class="electronSearchText-count"></span>
+    </div>
     <navbar>
       <div id="navbar-container">
         <div class="control-buttons">

ipc/consumer.js

@@ -43,6 +43,9 @@ module.exports = function (commandId, args = {}) {
     case 'copyUrl':
       BrowserWindow.getFocusedWindow().webContents.send('copy-url')
       break
+    case 'toggleSearch':
+      BrowserWindow.getFocusedWindow().webContents.send('toggle-search')
+      break
     default:
       break
   }

menu.js

@@ -52,6 +52,19 @@ const template = [
           exec('copyUrl')
         }
       },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Search',
+        accelerator: 'CmdOrCtrl+F',
+        click () {
+          exec('toggleSearch')
+        }
+      },
+      {
+        type: 'separator'
+      },
       {
         role: 'paste'
       },

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "electron-config": "^0.2.1",
+    "electron-search-text": "^0.3.0",
     "jquery": "^3.2.1",
     "node-fetch": "^1.6.3",
     "semver": "^5.3.0",

renderer.js

@@ -7,6 +7,7 @@ const path = remote.require('path')
 const Config = require('electron-config')
 const config = new Config()
 const validate = require('validate.js')
+const ElectronSearchText = require('electron-search-text')
 
 const ipcClient = require('./ipc/client')
 
@@ -38,6 +39,10 @@ window.onload = () => {
 
   const webview = document.getElementById('main-window')
 
+  const searcher = new ElectronSearchText({
+    target: '#main-window'
+  })
+
   function copyUrl () {
     clipboard.writeText(webview.getURL())
     new Notification('URL copied', { title: 'URL copied', body: webview.getURL() }) // eslint-disable-line no-new
@@ -170,6 +175,10 @@ window.onload = () => {
     copyUrl()
   })
 
+  ipcRenderer.on('toggle-search', function () {
+    searcher.emit('toggle')
+  })
+
   $('#serverurl-config-modal.modal #submit-serverurl').click(function () {
     let serverurl = $('#serverurl-config-modal.modal input[type="text"]').val()
 

yarn.lock

@@ -611,6 +611,13 @@ electron-macos-sign@~1.5.0:
     isbinaryfile "^3.0.2"
     plist "^2.0.1"
 
+electron-search-text@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/electron-search-text/-/electron-search-text-0.3.0.tgz#eff07aa9e95f9b3783a93197362c8be3788a3d3d"
+  dependencies:
+    eventemitter2 "^2.0.1"
+    lodash "^4.14.1"
+
 electron@^1.4.15:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/electron/-/electron-1.6.4.tgz#ec8e5b5d8fe7dcc8fe8754beaca1eabc1d7163e9"
@@ -827,6 +834,10 @@ event-emitter@~0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
+eventemitter2@^2.0.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-2.2.2.tgz#407ea71c2020cd57538203ab7e7a6bdcfb7692d5"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -1426,7 +1437,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash@^4.0.0, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.14.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"