electron-findbar 0.2.1 → 0.3.1

package/README.md

@@ -82,12 +82,20 @@ findbar.setWindowHandler(win => {
 
 ### Opening the Findbar
 
-The Findbar is a child window of the `BaseWindow` passed during construction. It will follow the relative movement of the parent window and must be visible for the Findbar to display:
+The Findbar is a child window of the `BaseWindow` passed during construction. To open it use:
 
 ```js
 findbar.open();
 ```
 
+On MacOS, the findbar will follow the relative movement of the parent window by default and there is no way to change it. On Windows and Linux, this behavior is not default and is simulated by using the `move` event of the parent and can be disabled by using:
+
+```js
+findbar.followParentWindow(false)
+```
+
+> Enabled by default.
+
 ### Finding Text in the Page
 
 Once open, the Findbar appears by default in the top-right corner of the parent window and can be used without additional coding. Alternatively, you can use the following methods to trigger `findInPage` and navigate through matches in the main process:

package/index.js

@@ -23,6 +23,15 @@ class Findbar {
     /** @type {string} */
     #lastValue = ''
 
+    /** @type {boolean} */
+    #followParent = process.platform !== 'darwin'
+
+    /**
+     * Workaround to fix "findInPage" bug - double-click to loop
+     * @type {boolean | null}
+     */
+    #fixMove = null
+
     /**
      * Prepare the findbar.
      * @param {BaseWindow} parent Parent window.
@@ -87,6 +96,10 @@ class Findbar {
      * Select previous match if any.
      */
     findPrevious() {
+        if (this.#matches.active === 1) {
+            this.#fixMove = false
+        }
+
         this.#searchableContents.findInPage(this.#lastValue, { forward: false })
     }
 
@@ -94,6 +107,10 @@ class Findbar {
      * Select next match if any.
      */
     findNext() {
+        if (this.#matches.active === this.#matches.total) {
+            this.#fixMove = true
+        }
+
         this.#searchableContents.findInPage(this.#lastValue, { forward: true })
     }
 
@@ -140,6 +157,18 @@ class Findbar {
         this.#windowHandler = windowHandler
     }
 
+    /**
+     * Set the findbar to follow the parent window. Default is true.
+     * 
+     * On darwin platform, the findbar follows the parent window by default. This method is set
+     * to false to not create a "move" event listener unnescessarily.
+     * @platform win32,linux
+     * @param {boolean} follow If true, the findbar will follow the parent window movement.
+     */
+    followParentWindow(follow) {
+        this.#followParent = follow
+    }
+
     /**
      * Merge custom, defaults, and fixed options.
      * @param {Electron.BrowserWindowConstructorOptions} options Custom options.
@@ -169,24 +198,34 @@ class Findbar {
      * Register all event listeners.
      */
     #registerListeners() {
+        const followParent = this.#followParent
         const showCascade = () => this.#window.isVisible() || this.#window.show()
         const hideCascade = () => this.#window.isVisible() && this.#window.hide()
+        
+        let lastPos = this.#parent.getPosition()
+        const moveCascade = () => {
+            const newPos = this.#parent.getPosition()
+            const diff = { x: newPos[0] - lastPos[0], y: newPos[1] - lastPos[1] }
+            lastPos = newPos
+
+            const { x, y } = this.#window.getBounds()
+            this.#window.setPosition(x + diff.x, y + diff.y)
+        }
 
         this.#parent.prependListener('show', showCascade)
         this.#parent.prependListener('hide', hideCascade)
+        followParent && this.#parent.prependListener('move', moveCascade)
 
-        this.#window.once('closed', () => {
+        this.#window.once('close', () => {
             this.#parent.off('show', showCascade)
             this.#parent.off('hide', hideCascade)
+            followParent && this.#parent.off('move', moveCascade)
             this.#window = null
             this.stopFind()
         })
 
         this.#searchableContents.prependOnceListener('destroyed', () => { this.close() })
-        this.#searchableContents.prependListener('found-in-page', (_e, result) => {
-            this.#matches = result
-            this.#sendMatchesCount(result.activeMatchOrdinal, result.matches)
-        })
+        this.#searchableContents.prependListener('found-in-page', (_e, result) => { this.#sendMatchesCount(result.activeMatchOrdinal, result.matches) })
     }
 
     /**
@@ -207,7 +246,14 @@ class Findbar {
      * @param {number} total Total matches.
      */
     #sendMatchesCount(active, total) {
-        this.#window.webContents.send('electron-findbar/matches', { active, total })
+        if (this.#fixMove !== null) {
+            this.#fixMove ? this.findNext() : this.findPrevious()
+            this.#fixMove = null
+        }
+
+        this.#matches = { active, total }
+
+        this.#window.webContents.send('electron-findbar/matches', this.#matches)
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-findbar",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Chrome-like findbar for your Electron app.",
   "main": "index.js",
   "scripts": {