quick-toolbar's Introduction

quick-toolbar

Create a quick and dirty toolbar for rapid prototyping

Usage

Here are three ways you can create toolbar buttons:

var quickToolbar = require('./..');

var toolbar = quickToolbar();
var btnEl;

// dropping element html
toolbar.add('<div>M</div>')
.on('selected', function() {
  console.log('selected m');
})
.on('unselected', function() {
  console.log('unselected m');
});

// creating a toolbar button from a String
toolbar.addFromText('R')
.on('selected', function() {
  console.log('selected r');
})
.on('unselected', function() {
  console.log('unselected r');
});

// creating a toolbar button from an HTMLElement
btnEl = document.createElement('div');
btnEl.innerHTML = 'NA';

toolbar.add(btnEl)
.on('selected', function() {
  console.log('selected na');
})
.on('unselected', function() {
  console.log('unselected na');
});

Constructing `quickToolbar()`

You can pass in a couple of options when constructing a quick-toolbar.

quickToolbar({
    // this is the parent container that the quick-toolbar will be made in
    container: document.body,

    // this is the css that will be applied to the quick toolbars elements
    // if css === undefined then the following properties are used
    // if css === false then NO inline css is applied through JS
    css: {
        '.itemContainer': {
          display: 'block',
          width: '40px',
          height: '40px',
          overflow: 'hidden',
          position: 'relative',
          cursor: 'pointer',
          background: '#EEE',
          margin: '1px',
          color: '#555',
          'font-family': 'Arial, sans-serif'
        },

        '.item': {
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          '-webkit-touch-callout': 'none',
          '-webkit-user-select': 'none',
          '-khtml-user-select': 'none',
          '-moz-user-select': 'none',
          '-ms-user-select': 'none',
          'user-select': 'none'
        },

        '.selected': {
          border: '1px solid #F00'
        },

        '.unselected': {
          border: '1px solid transparent'
        }
    }
});