mirror of
https://github.com/S2-/gitlit
synced 2025-08-03 04:40:05 +02:00
127 lines
4.1 KiB
Markdown
127 lines
4.1 KiB
Markdown
# electron-find
|
|
|
|
English | [简体中文](./README.zh-CN.md)
|
|
|
|
## Introduction
|
|
Find all matches for the text in electron app
|
|
|
|
## Features
|
|
- depend on the API of electron's findInPage
|
|
- support user config UI of find interface
|
|
- support case-sensitive
|
|
- Auto find when user inputing is change
|
|
- The find interface is separated from electron view
|
|
- support electron version ^1.8.0, ^2.0.0, ^3.0.0, ^4.0.0
|
|
- support platform of Windows, Linux, Mac
|
|
|
|
## Demo
|
|
|
|
### Default UI
|
|
|
|
|
|
### Custom UI
|
|
|
|
|
|
## Install
|
|
```
|
|
$ npm install electron-find --save
|
|
```
|
|
|
|
## Usage
|
|
```
|
|
# import module
|
|
import { remote, ipcRenderer } from 'electron'
|
|
import { FindInPage } from 'electron-find'
|
|
|
|
# create instance of FindInPage with default config
|
|
let findInPage = new FindInPage(remote.getCurrentWebContents())
|
|
findInPage.openFindWindow()
|
|
|
|
# use preload option, the find interface will be loaded when create instance
|
|
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
|
|
preload: true
|
|
})
|
|
findInPage.openFindWindow()
|
|
|
|
# config parentElement of find interface, default is document.body
|
|
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
|
|
parentElement: document.querySelector('#id')
|
|
})
|
|
findInPage.openFindWindow()
|
|
|
|
# config duration of find interface moving, default is 300 (ms)
|
|
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
|
|
duration: 200
|
|
})
|
|
findInPage.openFindWindow()
|
|
|
|
# config offset relative to parentElement
|
|
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
|
|
offsetTop: 20,
|
|
offsetRight: 30
|
|
})
|
|
findInPage.openFindWindow()
|
|
|
|
# config UI of find interface
|
|
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
|
|
boxBgColor: '#333',
|
|
boxShadowColor: '#000',
|
|
inputColor: '#aaa',
|
|
inputBgColor: '#222',
|
|
inputFocusColor: '#555',
|
|
textColor: '#aaa',
|
|
textHoverBgColor: '#555',
|
|
caseSelectedColor: '#555'
|
|
})
|
|
findInPage.openFindWindow()
|
|
|
|
# there is a simply demo for reference
|
|
npm install
|
|
npm run e
|
|
```
|
|
## Shortcut
|
|
| keys | function |
|
|
| ------ | ------ |
|
|
| Enter | find next |
|
|
| Shift + Enter| find back |
|
|
| Esc | close |
|
|
|
|
Besides, you can also register global shortcut to open the find window, just like the demo.
|
|
|
|
## API
|
|
### Class: FindInPage
|
|
` new FindInPage(webContents, [options]) `
|
|
- ` webContents ` Object(required) - The webContents of renderer process
|
|
- ` options ` Object(optional)
|
|
- ` preload ` Boolean - Whether load the find interface when create instance. Default is `false`.
|
|
- ` parentElement ` Object - Specify parent dom of the find interface. Default is `document.body`.
|
|
- ` duration ` Number - Specify moving time when the find window open or close. Default is `300` (ms).
|
|
- ` offsetTop ` Number - Specify offset relative to the top of parentElement. Default is `5`.
|
|
- ` offsetRight ` Number - Specify offset relative to the right of parentElement. Default is `5`.
|
|
- ` boxBgColor ` String - Specify background color of the find interface. Default is `"#ffffff"`.
|
|
- ` boxShadowColor ` String - Specify shadow color of the find interface. Default is `"#909399"`.
|
|
- ` inputColor ` String - Specify text color of the input form. Default is "#606266".
|
|
- ` inputBgColor ` String - Specify background color of the input form. Default is `"#f0f0f0"`.
|
|
- ` inputFocusColor ` String - Specify border color of the input form when focusing. Default is `"#c5ade0"`.
|
|
- ` textColor ` String - Specify color of the text in find interface. Default is `"#606266"`.
|
|
- ` textHoverBgColor ` String - Specify background color of text in find interface when hovering. Default is `"#eaeaea"`.
|
|
- ` caseSelectedColor ` String - Specify border color of the matchCase button when selected. Default is `"#c5ade0"`.
|
|
|
|
### Instance Methods
|
|
Objects created with new FindInPage have the following instance methods:
|
|
|
|
` findInPage.openFindWindow() `
|
|
Open the find window when it is closed. Focus input form when the find window has opened.
|
|
|
|
` findInPage.closeFindWindow() `
|
|
Close the find window when it has opened.
|
|
|
|
` findInPage.destroy() `
|
|
Close the find window, and release memery.
|
|
|
|
|
|
|
|
|
|
|
|
|