Nonstop Pet Mewing

    hone

    1.1.0 • Public • Published

    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 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:

    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);

    Keywords

    none

    Install

    npm i hone

    DownloadsWeekly Downloads

    507

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    45.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • benmarch