electron-findbar 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -198,5 +198,5 @@ Created by [Emerson Capuchi Romaneli](https://github.com/ECRomaneli) (@ECRomanel
198
198
 
199
199
  ## License
200
200
 
201
- This project is licensed under the [MIT License](https://github.com/ECRomaneli/handbook/blob/master/LICENSE).
201
+ This project is licensed under the [MIT License](https://github.com/ECRomaneli/electron-findbar/blob/master/LICENSE).
202
202
 
package/index.js CHANGED
@@ -72,7 +72,10 @@ class Findbar {
72
72
  * Close the findbar.
73
73
  */
74
74
  close() {
75
- this.#window?.close()
75
+ if (!this.#window || this.#window.isDestroyed()) { return }
76
+ if (!this.#window.isVisible()) { this.#window.close(); return }
77
+ this.#window.on('hide', () => { this.#window.close() })
78
+ this.#window.hide()
76
79
  }
77
80
 
78
81
  /**
@@ -204,6 +207,8 @@ class Findbar {
204
207
  this.stopFind()
205
208
  })
206
209
 
210
+ this.#window.prependOnceListener('ready-to-show', () => { this.#window.show() })
211
+
207
212
  this.#findableContents.prependOnceListener('destroyed', () => { this.close() })
208
213
  this.#findableContents.prependListener('found-in-page', (_e, result) => { this.#sendMatchesCount(result.activeMatchOrdinal, result.matches) })
209
214
  }
@@ -259,6 +264,7 @@ class Findbar {
259
264
  options.movable = options.movable ?? false
260
265
  options.acceptFirstMouse = options.acceptFirstMouse ?? true
261
266
  options.parent = parent
267
+ options.show = false
262
268
  options.frame = false
263
269
  options.roundedCorners = true
264
270
  options.transparent = process.platform === 'linux'
@@ -266,9 +272,11 @@ class Findbar {
266
272
  options.minimizable = false
267
273
  options.skipTaskbar = true
268
274
  options.fullscreenable = false
275
+ options.autoHideMenuBar = true
269
276
  if (!options.webPreferences) { options.webPreferences = {} }
270
- options.webPreferences.nodeIntegration = true
271
- options.webPreferences.contextIsolation = false
277
+ options.webPreferences.nodeIntegration = false
278
+ options.webPreferences.contextIsolation = true
279
+ options.webPreferences.preload = options.webPreferences.preload ?? `${__dirname}/web/preload.js`
272
280
  return options
273
281
  }
274
282
  }
package/package.json CHANGED
@@ -1,8 +1,14 @@
1
1
  {
2
2
  "name": "electron-findbar",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "Chrome-like findbar for your Electron app.",
5
5
  "main": "index.js",
6
+ "files": [
7
+ "index.js",
8
+ "remote.js",
9
+ "LICENSE",
10
+ "web/**"
11
+ ],
6
12
  "scripts": {
7
13
  "sample": "electron test/sample.js"
8
14
  },
package/web/app.css CHANGED
@@ -51,6 +51,7 @@ nav {
51
51
  border-radius: 10px;
52
52
  border: 1px solid var(--border);
53
53
  -webkit-app-region: drag;
54
+ app-region: drag;
54
55
  }
55
56
 
56
57
  nav > *:not(:last-child),
@@ -75,6 +76,7 @@ input {
75
76
  border: none;
76
77
  outline: none;
77
78
  -webkit-app-region: no-drag;
79
+ app-region: no-drag;
78
80
  }
79
81
 
80
82
  .divider {
@@ -96,6 +98,7 @@ input {
96
98
  text-align: center;
97
99
  transition: .1s linear all;
98
100
  -webkit-app-region: no-drag;
101
+ app-region: no-drag;
99
102
  }
100
103
 
101
104
  .btn-group > div:hover {
package/web/findbar.html CHANGED
@@ -4,25 +4,26 @@
4
4
  <head>
5
5
  <meta charset="utf-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self'; default-src 'self'; connect-src 'none'; frame-src 'none'; object-src 'none'; font-src 'self'; img-src 'self'">
7
8
  <title>Findbar</title>
8
9
  <link rel="stylesheet" href="app.css">
9
10
  <body>
10
11
  <nav>
11
- <input id='input' oninput="inputChange(event)" type="text" spellcheck="false">
12
+ <input id='input' type="text" spellcheck="false">
12
13
  <span id="matches"></span>
13
14
  <div class="divider"></div>
14
15
  <div class="btn-group">
15
- <div onclick="move(false)" class="disabled">
16
+ <div id="previous" class="disabled">
16
17
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
17
18
  <path d="M7 15L12 10L17 15"/>
18
19
  </svg>
19
20
  </div>
20
- <div onclick="move(true)" class="disabled">
21
+ <div id="next" class="disabled">
21
22
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
22
23
  <path d="M7 10L12 15L17 10"/>
23
24
  </svg>
24
25
  </div>
25
- <div onclick="$remote.close()">
26
+ <div id="close">
26
27
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
27
28
  <path d="M7 17.5L12 12.5L17 17.5"/>
28
29
  <path d="M7 7.5L12 12.5L17 7.5"/>
@@ -30,8 +31,6 @@
30
31
  </div>
31
32
  </div>
32
33
  </nav>
33
-
34
- <script src="app.js"></script>
35
34
  </body>
36
35
 
37
36
  </html>
@@ -25,9 +25,17 @@ function move(next) {
25
25
 
26
26
  document.addEventListener('DOMContentLoaded', async () => {
27
27
  const inputEl = document.getElementById('input')
28
+ const previousBtn = document.getElementById('previous')
29
+ const nextBtn = document.getElementById('next')
30
+ const closeBtn = document.getElementById('close')
28
31
  const matchesEl = document.getElementById('matches')
29
32
  const moveBtns = [...document.getElementsByClassName('disabled')]
30
33
 
34
+ previousBtn.addEventListener('click', () => move(false))
35
+ nextBtn.addEventListener('click', () => move(true))
36
+ closeBtn.addEventListener('click', () => $remote.close())
37
+ inputEl.addEventListener('input', inputChange)
38
+
31
39
  $remote.onMatchesChange((_, m) => {
32
40
  canRequest = true
33
41
  matchesEl.innerText = inputEl.value ? m.active + '/' + m.total : ''
@@ -1,17 +0,0 @@
1
- {
2
- "version": "0.2.0",
3
- "configurations": [
4
- {
5
- "name": "Debug Main Process",
6
- "type": "node",
7
- "request": "launch",
8
- "cwd": "${workspaceFolder}",
9
- "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
10
- "windows": {
11
- "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
12
- },
13
- "args" : ["test/sample.js"],
14
- "outputCapture": "std"
15
- }
16
- ]
17
- }
package/test/sample.html DELETED
@@ -1,28 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Sample</title>
5
- </head>
6
- <body>
7
- <input type="text" oninput="$remote.inputChange(event.target.value)">
8
- <button onclick="$remote.open()">Open</button>
9
- <button onclick="$remote.previous()">Previous</button>
10
- <button onclick="$remote.next()">Next</button>
11
- <button onclick="$remote.close()">Close</button>
12
- <br>
13
- <span>
14
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et suscipit tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dictum massa id sapien tristique, in venenatis neque sollicitudin. Fusce accumsan augue arcu, sed rhoncus libero pretium vitae. Phasellus sed imperdiet ante. Maecenas ultrices, elit vitae aliquet tincidunt, elit enim maximus libero, id lacinia ex enim consequat justo. Sed sodales tristique augue sed maximus. Integer tincidunt mi ac arcu tempus, sed accumsan lorem bibendum. Sed in dictum nibh. Pellentesque posuere dui pulvinar sodales scelerisque. Ut nisi magna, vulputate ornare bibendum pharetra, accumsan sed tortor. Proin rhoncus interdum tincidunt. Suspendisse diam eros, ultrices eu volutpat in, vestibulum quis nunc.
15
-
16
- Sed sit amet dapibus eros. Quisque porttitor mi a nisl pretium molestie. Praesent tellus dui, vehicula a ex sed, faucibus congue mauris. Cras dictum, sapien tempus consequat luctus, dolor magna vestibulum risus, nec blandit diam nulla eget est. Curabitur vitae posuere dolor, accumsan vulputate felis. Cras eget iaculis ante. Nulla velit felis, aliquet vitae convallis nec, vehicula et nunc. Fusce dapibus vel eros non viverra. Fusce elit arcu, tempus eu enim in, rutrum mattis justo.
17
-
18
- Cras justo tellus, imperdiet et felis sed, iaculis varius lacus. Pellentesque posuere feugiat nisl, eu vulputate tortor. Proin volutpat tortor erat, feugiat pretium justo aliquam non. Maecenas nec neque ultricies diam rhoncus ullamcorper a vitae mauris. Integer ultricies euismod leo, nec facilisis diam volutpat et. Nulla eleifend ante egestas, imperdiet elit at, malesuada velit. Donec tincidunt eleifend libero. Integer congue pharetra scelerisque. In egestas lacus erat. Quisque aliquam massa lectus, eu semper massa ornare auctor. Cras sit amet auctor sem. Curabitur vitae tellus eu risus ultrices accumsan. Curabitur egestas eu lorem et efficitur. Sed nec turpis felis.
19
-
20
- Suspendisse vel euismod ante. Nunc sagittis quam ut gravida pulvinar. Sed at semper nisl, eu porttitor ante. Cras vitae dolor massa. Fusce tincidunt turpis at egestas pharetra. Donec vitae vestibulum ante. Cras erat dolor, finibus vitae auctor vel, varius dictum arcu. Nam porta arcu consectetur, posuere tellus at, laoreet metus. Ut faucibus tincidunt mi placerat fermentum.
21
-
22
- Aliquam ut pellentesque tellus, quis vulputate nisl. Phasellus vitae blandit nunc, eu sodales velit. Duis enim tellus, faucibus id arcu vitae, consectetur tempus mauris. Praesent commodo commodo dolor non malesuada. Donec sed dolor eget arcu tincidunt efficitur sit amet vel nisi. Sed consectetur tincidunt molestie. Nam at magna a odio rhoncus convallis id eu nunc. Nam luctus ut leo et viverra. Proin tempor libero vitae arcu laoreet, sed pharetra sapien rutrum. Nam nunc orci, aliquet sit amet dignissim nec, aliquet quis quam. Nulla facilisi.
23
- </span>
24
- <script>
25
- const $remote = require('../remote')
26
- </script>
27
- </body>
28
- </html>
package/test/sample.js DELETED
@@ -1,43 +0,0 @@
1
- const { BrowserWindow, app, Menu, MenuItem } = require('electron')
2
- const Findbar = require('../index')
3
-
4
- app.whenReady().then(() => {
5
- const window = setupWindow()
6
- const findbar = setupFindbar(window)
7
- setupApplicationMenu(findbar)
8
- })
9
-
10
- function setupWindow() {
11
- const window = new BrowserWindow({
12
- webPreferences: {
13
- nodeIntegration: true,
14
- contextIsolation: false
15
- }
16
- })
17
- window.loadFile(`${__dirname}/sample.html`)
18
- return window
19
- }
20
-
21
- function setupFindbar(window) {
22
- const findbar = new Findbar(window)
23
- findbar.setWindowOptions({ movable: true, resizable: true })
24
- findbar.setWindowHandler(win => { /* handle the findbar window */ })
25
- return findbar
26
- }
27
-
28
- function setupApplicationMenu(findbar) {
29
- const appMenu = Menu.getApplicationMenu()
30
- appMenu.append(new MenuItem({ label: 'Findbar', submenu: [
31
- { label: 'Open', click: () => findbar.open(), accelerator: 'CommandOrControl+F' },
32
- { label: 'Close', click: () => findbar.isOpen() && findbar.close(), accelerator: 'Esc' },
33
- { role: 'toggleDevTools', accelerator: 'CommandOrControl+Shift+I' },
34
- { label: 'Test input propagation', click: () => {
35
- let count = 0
36
- setInterval(() => {
37
- findbar.startFind('count: ' + count++)
38
- findbar.startFind('cannot show this', true)
39
- }, 1000)
40
- }}
41
- ]}))
42
- Menu.setApplicationMenu(appMenu)
43
- }