bespoke-search
Allows searching for content (ctrl-f) inside a bespoke presentation. See our demo.
Download
Download the production version or the development version, or use a package manager.
Usage
This plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.
For example, when using CommonJS modules:
const bespoke = require('bespoke')
const search = require('bespoke-search')
bespoke.from('#presentation', [
search()
]);
When using browser globals:
bespoke.from('#presentation', [
bespoke.plugins.search()
])
Configuring bespoke-search
We can provide an options
argument to search()
, whose structure and default values are:
const defaultOptions = {
insertStyles: true,
keys: {
show: 'ctrl-f',
dismiss: 'esc',
trigger: 'enter',
next: 'tab',
previous: 'shift-tab'
},
text: {
instructions: 'Instructions',
searchHere: 'Search here...',
openSearch: 'Open search',
closeSearch: 'Close search',
search: 'Search',
nextResult: 'Next result',
previousResult: 'Previous result'
}
}
bespoke.from('#presentation', [
search(options)
])
-
insertStyles
(boolean, default:true
) defines whether the plugin should include a<style>
with proper styling. If the used theme already styles bespoke-search HTML elements, you can set this tofalse
-
keys
(object) allows setting the keystrokes (and combinations) to trigger bespoke-search events, such as starting or dissmissing a search. Each value can be a string or an array of strings (multiple keys can be attached). Values should be strings from keymage. -
text
(object) allows customizing the text shown by the search panel. It defaults to the previously presented words in English.
Styling bespoke-search
The plugin adds to the deck.parent
the following structure of HTML elements:
<div id="bespoke-search-parent" class="bespoke-search-searching">
<div id="bespoke-search">
<input id="bespoke-search-input" type="search">
<span id="bespoke-search-results-count"></span>
<details id="bespoke-search-info">
<summary>Instructions</summary>
<span class="bespoke-search-info-pair"><kbd>ctrl-f</kbd> Open search</span>
...
</details>
</div>
</div>
See lib/bespoke-search.css if you want to create all the styling yourself (using insertStyles: false
) or if you need to override just part of it.
Package managers
npm
$ npm install bespoke-search
Credits
This plugin was built with generator-bespokeplugin.