speeddial

Speed dial button inspired by Google Material design

Getting started

Download this plugin from the Github repository or install it through this command:

$ npm install speeddial --save

Required assets

Import the CSS:

<link rel="stylesheet" href="path/to/dist/css/speeddial.css">

Import the Javascript:

<script src="path/to/dist/speeddial.js"></script>

This Javascript library is UMD compliant, so you can consume it even like this:

<script>
    var speeddial = require('speeddial');
</script> 

Required markup

<div id="my-speed-dial" class="speed-dial">
    <ul class="speed-dial__list">
        <li>
            <button class="speed-dial__option">B</button>
        </li>
        <li>
            <button class="speed-dial__option">C</button>
        </li>
        <li>
            <button class="speed-dial__option">D</button>
        </li>
    </ul>
    <button class="speed-dial__btn">A</button>
</div>

Start it up

The selector passed as first parameter must be the container's selector and must be unique:

var sd = speeddial('#my-speed-dial'[,options]);

The second optional parameter is a literal object meant to override the default settings:

// Default settings
var options = {
 
    // The actual speed dial button's default class
    button: '.speed-dial__btn',
 
    // List of options' default class
    list: '.speed-dial__list',
 
    // Default direction
    // Available directions are: up, down, left, right
    direction: 'up'
};

Available CSS modifiers

To customize the appearence there are some built-in CSS modifier classes:

/* If you want a blue button */
.speed-dial--blue
 
/* If you want a pink button */
.speed-dial--pink
 
/* If you want a small button */
.speed-dial--small
 
/* If you want to add cool shadows */
.speed-dial--material
 
/* If you want to toggle the button state when the list of options is open */
.speed-dial--toggle

You can dive into ./scss/speeddial.scss and change the modifiers to meet your needs. Then compile it by running one of the following command:

$ npm run watch-css

$ npm run build-css

Those classes have to be added to the container. That is:

<div id="my-speed-dial" class="speed-dial < PUT MODIFIERS HERE >">
    <ul class="speed-dial__list">
        ...
    </ul>
    <button class="speed-dial__btn">A</button>
</div>

API

    var sd = speeddial('#my-speed-dial'[,options]);
 
    // Returns the container
    sd.getContainer();
 
    // Returns the button which triggers the list to open/close
    sd.getButton();
 
    // Returns the list of options
    sd.getList();
 
    // Returns the direction which the list is opening to
    sd.getDirection();
 
    /**
    * Set the direction, the parameter is a string among:
    * 'up', 'down', 'right', 'left'
    */
    sd.setDirection('DIRECTION');
 
    // Opens the list of options
    sd.open();
 
    // Close the list of options
    sd.close();
 

License

MIT