electron-findbar 0.6.5 → 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 +3 -3
- package/index.js +12 -4
- package/package.json +8 -3
- package/web/app.css +3 -0
- package/web/findbar.html +5 -6
- package/web/{app.js → preload.js} +8 -0
- package/.vscode/launch.json +0 -17
- package/test/sample.html +0 -28
- package/test/sample.js +0 -43
- package/test/test.js +0 -0
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ All public methods are documented with JSDoc and can be referenced during import
|
|
|
39
39
|
To import the Findbar class:
|
|
40
40
|
|
|
41
41
|
```js
|
|
42
|
-
const
|
|
42
|
+
const Findbar = require('electron-findbar')
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
### Creating the Findbar Instance
|
|
@@ -137,7 +137,7 @@ Here is a quick example demonstrating how to use the `electron-findbar`:
|
|
|
137
137
|
|
|
138
138
|
```js
|
|
139
139
|
const { app, BrowserWindow } = require('electron')
|
|
140
|
-
const
|
|
140
|
+
const Findbar = require('electron-findbar')
|
|
141
141
|
|
|
142
142
|
app.whenReady().then(() => {
|
|
143
143
|
const window = new BrowserWindow()
|
|
@@ -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/
|
|
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
|
|
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 =
|
|
271
|
-
options.webPreferences.contextIsolation =
|
|
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
|
}
|
|
@@ -289,4 +297,4 @@ class Findbar {
|
|
|
289
297
|
})
|
|
290
298
|
}) (require('electron').ipcMain)
|
|
291
299
|
|
|
292
|
-
module.exports =
|
|
300
|
+
module.exports = Findbar
|
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "electron-findbar",
|
|
3
|
-
"version": "
|
|
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
|
-
"sample": "electron test/sample.js"
|
|
8
|
-
"test": "node test/test.js"
|
|
13
|
+
"sample": "electron test/sample.js"
|
|
9
14
|
},
|
|
10
15
|
"repository": {
|
|
11
16
|
"type": "git",
|
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'
|
|
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
|
|
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
|
|
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
|
|
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 : ''
|
package/.vscode/launch.json
DELETED
|
@@ -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
|
-
}
|
package/test/test.js
DELETED
|
File without changes
|