1.1.0 • Published 6 years ago
hone v1.1.0
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:
<script src="node_modules/hone/dist/hone.js"></script>
<script src="bower_components/hone/dist/hone.js"></script>
<script src="resources/vender/hone.js"></script>
import Hone from 'hone';
var Hone = require('hone');
There are no dependencies!
API
Instantiate
Start by creating a new Hone
instance:
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:
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:
import Hone from 'hone';
const menuItem = document.getElementById('menuItemAbout'),
hone = new Hone(menuItem, {
fixed: true
});
Creating a backdrop behind a modal window:
import Hone from 'hone';
//no target required for a full screen Hone instance
const hone = new Hone({
fullScreen: true
});
Positioning against a new target:
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);