suziwen/find-in-nw

Adds "Ctrl+F" find box to highlight text in the DOM

"Find" in NW.js

Adds "Ctrl+F" find box to highlight text in the DOM

Use

1. npm install --save findinnw
2. In your HTML file add:

   <script src="node_modules/findinnw/dist/find-in-nw.js"></script>
   <script>
     findInNw.initialize();
   </script>

3. Use CTRL+F to display and give focus to the search box
4. After typing, press ENTER to go to highlight/scroll to the next match.
5. Use TAB to navigate to the "previous", "next", and "close" buttons.
6. Use ENTER or SPACE to activate a button when focused.
7. User ESC to hide the search box and return focus to the body

API

findInNw.initialize();

This is the initialization command. It must be ran once. Multiple attempts to run it are ignored.

findInNw.showSearchBox();

This is used to programmitcally display the search box. CTRL+F will still display it too.

findInNw.hideSearchBox();

This is used to programmitcally hide the search box. ESC will still hide it too.

findInNw.search('Text to find');

This is used to programmitcally find text.

findInNw.highlightNext(); and findInNw.highlightPrevious();

This will highlight and scroll to the next or previous match.

findInNw.clearTokens();

This is used to remove all the highlighted tokens.

Customizing Styles

Highlight tokens

All highlight tokens of matching searched text will be wrapped in a <mark class="find-in-nw-token">searched text</mark>.

They will also contain a data-find-in-nw-position="4" data attribute, the number correlates to a zero-based index of all matches.

As you navigate from one match to the next, the currently selected match will have a class of .find-in-nw-current-token.

You can customize this by targeting the following

mark.find-in-nw-token {
    background-color: #00F;
}

mark.find-in-nw-current-token {
    background-color: #38D878;
}

Search Box

Each element of the search box is styled by targeting a class. They also all have a matching ID that you can target to override them.

/* The container for the input/count/close */
#find-in-nw-search-box {}

/* The input field you type in */
#find-in-nw-input {}

/* The current selected match number. Ex: The number 1 in "1/5" */
#find-in-nw-current {}

/* The separator between the current and count. Ex: The slash (/) in "1/5" */
#find-in-nw-of {}

/* The count of matching highlighted items. Ex: The number 5 in "1/5" */
#find-in-nw-count {}

/* The previous and next buttons, ∧ and ∨ */
#find-in-nw-previous {}
#find-in-nw-next {}

/* The × close button */
#find-in-nw-close {}

Contributing

1. Create an issue first for your desired improvements and how you think they should be implemented.
2. If plan is approved (or no response given in a timely manner), then you can submit a PR.
3. Make sure to run npm run validate prior to submitting your PR and fix any errors or warnings.