blooming-menu

1.1.1 • Public • Published

blooming-menu


A configurable and animated radial menu. BloomingMenu is a port of AwesomeMenu for the web.

Preview

Install

You can install through npm and use browserify to make it run on the browser.

npm install --save blooming-menu

Or just download the minified version here.

Usage

Create a new BloomingMenu object:

var menu = new BloomingMenu({
  itemsNum: 8
})

Render it:

menu.render()

And now you can attach event listeners to the items of the menu, just like a regular DOM element.

menu.props.elements.items.forEach(function (item, index) {
  item.addEventListener('click', function () {
    console.log('Item #' + index + 'was clicked')
  })
})

API

constructor new BloomingMenu(opts)

Options object passed on instantiation time, e.g.:

var menu = new BloomingMenu({
  startAngle: 60,
  endAngle: 0
})
  • opts.itemsNum
    • Type: Number
    • Required: true
  • opts.startAngle
    • Type: Number
    • Default: 90
  • opts.endAngle
    • Type: Number
    • Default: 0
  • opts.radius
    • Type: Number
    • Default: 80
  • opts.itemAnimationDelay
    • Type: Number
    • Default: 0.04
  • opts.animationDuration
    • Type: Number
    • Default: 0.4
  • opts.fatherElement
    • Type: HTMLElement
    • Default: document.body
  • opts.itemWidth
    • Type: Number
    • Default: 50
  • opts.CSSClassPrefix
    • Type: String
    • Default: 'blooming-menu__'
  • opts.mainContent
    • Type: String
    • Default: '+'
  • opts.injectBaseCSS
    • Type: Boolean
    • Default: true

Every method below is an instance method.

obj.render

Attachs the instance to the DOM and binds all event listeners.

obj.remove

Removes all DOM elements and event listeners.

obj.open

Opens the menu programmatically.

obj.close

Closes the menu programmatically.

obj.selectItem(num)

Select programatically the num item of the menu.

Support

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 9+ ✔ Latest ✔ 8.0+ ✔

Donating

If you found this library useful and are willing to donate, transfer some bitcoins to 1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY or through the URL https://www.coinbase.com/caiogondim

Or via PayPal.me https://www.paypal.me/caiogondim.

Credits


caiogondim.com  ·  GitHub @caiogondim  ·  Twitter @caio_gondim

Readme

Keywords

none

Package Sidebar

Install

npm i blooming-menu

Weekly Downloads

2

Version

1.1.1

License

ISC

Unpacked Size

1.37 MB

Total Files

21

Last publish

Collaborators

  • caiogondim