Skip to content
This repository has been archived by the owner on Nov 19, 2019. It is now read-only.
/ widgetify Public archive

Simple widget library which helps to quickly create a new, responsive, interactive widget or ui tool.

License

Notifications You must be signed in to change notification settings

simonwep/widgetify

Repository files navigation

Logo

Simple widget library.

gzip size brotli size Build Status Download count No dependencies Current version Support me


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.

About

Simple widget library which helps to quickly create a new, responsive, interactive widget or ui tool.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published