New Prague, Minnesota

    godfather

    1.6.0 • Public • Published

    Godfather

    Build Status npm npm

    A man who doesn't spend time with his customers can never be a real man.

    Simple vanilla plugin to create good & beautiful onscreen-guides.

    Demo

    Check out a simple demo

    Installation

    npm install godfather

    Wrappers

    API

    Function Description Return
    register(id, target, options) -> check "Parameters" for more info Register a new guide entry Instance
    unregister(id) Unregister a guide entry
    show(id) Show a guide
    hide(id) Hide a guide
    setDefault(options) Change the default options

    Parameters

    id

    Type Description
    String Set an unique id for identification

    target

    Guides can be attached to DOM elements

    Type Description
    String Selector
    Object DOM-Element

    options

    This plugin can be customized, the following options are enabled:

    Key Type Description Default
    title String The displayed title null
    content String The displayed content null
    image String The displayed image null
    hint Boolean Adds a small hint to the target false
    scrollIntoView Boolean Scrolls the guide into view true
    clickAway Boolean Cancel guiding if user clicks outside guide element true
    prev Function Function to be executet on prev null
    next String, Function id of the next guide to show or function to be executet null
    overlay Boolean add an overlay on the background and highlight the target false
    theme Object ... ...
    └-- background String Hex or rgb background "#222"
    └-- color String Hex or rgb text color "white"
    labels Object ... ...
    └-- prev String label for prev button "<"
    └-- next String label for next button ">"
    └-- close String label for close button "✕"

    Instance object

    The register method return an instance of the Godfather entry with the following functions.

    Function Description
    unregister() removes the entry
    show() shows the entry
    hide() hides the entry
    addEventListener(event, callback) hook to predefined events: "show", "hide", "close", "prev", "next"

    Example

    let entry = Godfather.register("don", ".sample-selector", {
      title: "Don Vito Corleone",
      content: "I'm gonna make him an offer he can't refuse",
      image: "don-vito-corleone.png",
      hint: true,
      next: "michael"
    });
     
    Godfather.show("don");
     
    entry.unregister();
    entry.addEventListener("close", e => e.unregister());
    entry.removeEventListener("close", e => e.unregister());

    Development & Testing

    npm run dev starts webpack with watch mode.

    License

    The MIT License Copyright (c) Carsten Jacobsen

    Install

    npm i godfather

    DownloadsWeekly Downloads

    17

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    241 kB

    Total Files

    22

    Last publish

    Collaborators

    • crsten