Skip to content
This repository was 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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

de5dcdd · Sep 16, 2019

History

8 Commits
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Sep 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019
Aug 16, 2019

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