eztoolbar

This module aim to simplify toolbar creation with fontawesome integration.

I am using it for a 3D model viewer (CAD) along with Three.js renderer

Installing

npm install --save eztoolbar

Changelog

06/08/2019 - 1.4.0

• Added a new toggle option (button will stay elevated after click)
• A bug occurred when displaying text combined with fontawesome icons switch (faclass array), the text was push down under the icon and not stay inline (BUG FIXED).

Documentation

new eztb(config)

eztoolbar constructor take 1 optional argument (config)

config: {

position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

//default value is 'top-left'

}

eztb.add(btn)

eztoolbar add() method take 1 object argument and return the selector of the freshly created html element.

  

these are the default values

  

{

text: null, //button string value

faclass: null, //font awesome class list, string for static icon or array for switching icon on click

event: null, //function callback on click

hovertext: null, //bubble text on hover

toggle: false, //if set at true, keep the button elevated after click

fontsize: '18px', //...

width: '35px', //...

height: '35px' //...

}

eztb.clear()

clear() method remove all event listeners / html element / css from the DOM.

Example

var clickEventCallback = function(evt) { //evt is the mouseclick event

console.log(evt)

}

  

var menu = new eztb( { position: 'top-left' } );

  

menu.add( { faclass: 'fas fa-cube', hovertext: 'A cube'} );

menu.add( { faclass: 'fas fa-th', hovertext: 'A square grid' } );

menu.add( { faclass: 'fas fa-camera-retro', hovertext: 'Want a snapshot ?' } );

menu.add( { faclass: 'fab fa-android fa-rotate-180', hovertext: 'Rotated android logo', text: ' android', width: 'fit-content'} );

  
  

menu.add( { faclass: ['fas fa-save', 'far fa-save'], text: ' save', width: 'fit-content', event: clickEventCallback, toggle: true } );

//Icon alternate between 'fas fa-save' and 'far fa-save'

//And since toggle is set to true, the button will remain elevated until next click

  

document.body.appendChild(menu.domElement);

  

//after your done using eztoolbar, just make a call to clear() to remove completely the menu from the DOM (HTML, CSS and Listeners)

//menu.clear();

Result

Author

Grégoire Hazette - My GitHub