https://github.com/benmarch/hone
The best backdrop and element highlighting utility available for modern browsers.
https://github.com/benmarch/hone
backdrop highlight overlay
Last synced: about 1 year ago
JSON representation
The best backdrop and element highlighting utility available for modern browsers.
- Host: GitHub
- URL: https://github.com/benmarch/hone
- Owner: benmarch
- License: mit
- Created: 2017-03-28T03:21:59.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-30T19:19:34.000Z (over 7 years ago)
- Last Synced: 2025-04-11T14:49:44.736Z (about 1 year ago)
- Topics: backdrop, highlight, overlay
- Language: JavaScript
- Size: 19.5 KB
- Stars: 3
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Hone
Hone is the best backdrop and element highlighting utility available for modern browsers.
## Installation
Install with NPM, Bower, or manually:
```sh
$ npm install hone -S
$ bower install hone -S
```
add the script tag or import/require:
```html
```
```js
import Hone from 'hone';
var Hone = require('hone');
```
**There are no dependencies!**
## API
### Instantiate
Start by creating a new `Hone` instance:
```js
import Hone from 'hone';
const lookAtMe = document.getElementById('showOff'),
hone = new Hone(lookAtMe);
```
By default, when you pass an element to the constructor, the `Hone` instance will become visible immediately.
### Options
The constructor takes some options as well. Here are the defaults:
```js
const defaultOptions = {
classPrefix: 'hone', //all components are given style classes like "-component"
fixed: false, //set to true if the element is position: fixed
borderRadius: 0, //creates rounded corners (all four or nothing)
enabled: true, //controls the visibility and event listeners
padding: '0', //adds padding around the target, same format as CSS padding rule
fullScreen: false //should the backdrop be full screen (for a modal window)
};
```
### Instance Methods
The `Hone` instance has a minimal public API:
| Method | Description |
| -------------------------- | ---------------------------------------------------------------------- |
| `Hone#hide()` | hides the backdrop |
| `Hone#show()` | shows the backdrop |
| `Hone#position(target?)` | repositions the backdrop, and can position to a new target if provided |
| `Hone#setOptions(options)` | change instance options |
| `Hone#destroy()` | removes all event listeners and DOM elements |
## Tips
- If you are going to be repositioning the `Hone` instance frequently, even with new targets, create a single `Hone` instance
and use the `Hone#position(target)` method to reposition instead of creating new instances for each target. (See example)
- Both constructor parameters are optional. Not providing a target just disables the `Hone` instance by default.
- Pass the `enabled` option into the constructor as false to initially hide the `Hone` instance
## Examples
For an element in a fixed header:
```js
import Hone from 'hone';
const menuItem = document.getElementById('menuItemAbout'),
hone = new Hone(menuItem, {
fixed: true
});
```
Creating a backdrop behind a modal window:
```js
import Hone from 'hone';
//no target required for a full screen Hone instance
const hone = new Hone({
fullScreen: true
});
```
Positioning against a new target:
```js
import Hone from 'hone';
const menuItemAbout = document.getElementById('menuItemAbout'),
menuItemContact = document.getElementById('menuItemContact'),
hone = new Hone(); //if no target is provided, it instantiates but does not enable
//position against first menu item
hone.position(menuItemAbout);
//wait for user input maybe? Then position against next menu item
hone.position(menuItemContact);
```