Hone
Hone is the best backdrop and element highlighting utility available for modern browsers.
Installation
Install with NPM, Bower, or manually:
$ npm install hone -S$ bower install hone -S
add the script tag or import/require:
; var Hone = ;
There are no dependencies!
API
Instantiate
Start by creating a new Hone
instance:
; const lookAtMe = document 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:
const defaultOptions = classPrefix: 'hone' //all components are given style classes like "<prefix>-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 singleHone
instance and use theHone#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 theHone
instance
Examples
For an element in a fixed header:
; const menuItem = document hone = menuItem fixed: true ;
Creating a backdrop behind a modal window:
; //no target required for a full screen Hone instanceconst hone = fullScreen: true;
Positioning against a new target:
; const menuItemAbout = document menuItemContact = document hone = ; //if no target is provided, it instantiates but does not enable //position against first menu itemhone; //wait for user input maybe? Then position against next menu itemhone;