Simple widget library.

Fully Featured demo

Features

• Integrated positioning engine
• Simple usage
• Handling of hiding / showing
• Ultra small (2.2kB gzip)
• No dependencies
• Supports touch devices

Getting Started

Node

Note: The readme is always up-to-date with the latest commit. See Releases for installation instructions regarding to the latest version.

Install via npm:

$ npm install @simonwep/widgetify

Install via yarn:

$ yarn add @simonwep/widgetify

Usage

// Simple example, see optional options for more configuration.
const widget = Widgetify({
    el: '.my-button',
    ref: '.my-widget'
});

Options

const widget = Widgetify({

    // Widget element with all its content
    el: '.widget',

    // Reference element, used for positioning
    ref: '.reference',

    // Disables auto-positioning aka fixed widget
    inline: false,

    // Distance of widget (el) to button (ref) in pixels
    padding: 8,

    // Defines the position of the widget.
    // Any combinations of top, left, bottom or right with one of these optional modifiers: start, middle, end
    // Examples: top-start / right-end
    // If clipping occurs, the widget will automatically choose its position.
    position: 'bottom-middle',

    // Start state. If true 'disabled' will be added to the classlist of your ref element.
    disabled: false,

    // Close widget with keyboard-key
    closeWithKey: 'Escape',

    // Event listeners
    onShow(instance) {},
    onHide(instance) {},

    // Before - and after repositioning events. 
    beforeRepositioning(instance) {
        // Return false to cancel positioning
    },

    afterRepositoning(instance) {}
});

Methods

• widgetify.show() - Shows the widget, returns instance.
• widgetify.hide() - Hides the widget, returns instance.
• widgetify.disable() - Disables the widget and adds the disabled class to the button, returns instance.
• widgetify.enable() - Enables the widget and removes the disabled class from the button, returns instance.
• widgetify.isVisible() - Returns true if the widget is currently open.
• widgetify.destroy() - Destroys all functionality.
• widgetify.destroyAndRemove() - Destroys all functionality and removes the widget element including the reference.

Static properties

Widgetify.utils

• on(elements:HTMLElement(s), events:String(s), fn:Function[, options :Object]) - Attach an event handler function.
• off(elements:HTMLElement(s), event:String(s), fn:Function[, options :Object]) - Remove an event handler.
• eventPath(evt:Event):[HTMLElement] - A polyfill for the event-path event propery.