ember-context-menu

ember-context-menu
==============================================================================

An ember-cli addon to add any right-click-menu to your components.
Try it here

Compatibility
------------------------------------------------------------------------------

* Ember.js v3.8 or above
* Ember CLI v2.13 or above
* Node.js v8 or above

Installation
------------------------------------------------------------------------------

In your application's directory:
``bash
$ ember install ember-context-menu
`

In your application.hbs add the following:

`hbs
{{context-menu}}
`

WARNING: You need to add this to make the context-menu work, and should add it just once in your application.

Usage
------------------------------------------------------------------------------

$3

This mixin is designed to add a context-menu to any component. Add it to your component like this:

`js
import Component from '@ember/component';
import contextMenuMixin from 'ember-context-menu';

export default Component.extend(contextMenuMixin, {
// your component properties

_contextMenu(e) {
// do anything before triggering the context-menu
}
});

`

$3

Your component needs at least an array of contextItems, which should have a label and an action.

`js
import Component from '@ember/component';

export default Component.extend(contextMenuMixin, {
contextItems: [
{
label: 'do something',
action(selection, details, event) { / do something / }
}
]
});
`

$3

:no_entry_sign: (Temporary removed from 0.2.0, back in 0.3.2)

You can optionally set an icon to show in front of the label. Just give the name of the icon.

`js
contextItems: [
{
label: 'do something',
icon: 'search',
action() { / do something / }
}
]
`

The icons that you can use are the one from font-awesome.
See http://fontawesome.io/icons/ for the icons
to use. Special thanks to the ember-font-awesome addon.

$3

You can add as many sub-actions as you like, but keep in mind it could blow out of your screen ;-)

`js
contextItems: [
{
label: 'multiple actions',
subActions: [
{
label: 'sub action 1',
action() { / do something / }
}
]
}
]
`

$3

This context-menu can even be used in case you have to pass an item to your action.
You should add it as the contextSelection. This could be one or multiple items.

`js
contextItems: [
{
label: 'do something',
action(selection) { / do something with the selection / }
}
],

contextSelection: { foo: 'bar' }
`

When it's an array of multiple items, the context-menu will show the amount of items you pass to the action.

$3

If you want to pass some more details to your action, you can set is as the contextDetails.
It will be passed to the action as the second argument.

`js
contextItems: [
{
label: 'do something',
action(selection, details) { / do something / }
}
],

contextDetails: { foo: 'bar' }
`

$3

When your item has no action and no sub-actions, it will be disabled by default.
Also you could disable it by yourself to add the disabled property.
This could be either a boolean or a function which gets the selection.

`js
contextItems: [
{
label: 'foo',
disabled: true
action() { / do nothing / }
},
{
label: 'bar',
disabled(selection) {
/ return disabled depending on selection /
},
action() { / do something / }
}
]
`

$3

The addon has some predefined styling to just get a quick start. You are able to change the styling of the complete menu by overwriting the styling for the following classes:
- context-menu
- context-menu--sub
- context-menu__item
- context-menu__item--disabled
- context-menu__item--parent
- context-menu__item__label

(Set up by the BEM convention)

!Example screenshot
!Example screenshot with multiple selection

$3

Test helpers are provided to make it easier to trigger the context menu to open.

`js
import { triggerContextMenu } from 'ember-context-menu/test-support';

triggerContextMenu('.my-class-selector');
``

---

Special thanks to @Fabriquartz (Fabriquartz.com)

Contributing
------------------------------------------------------------------------------

See the Contributing guide for details.

License
------------------------------------------------------------------------------

This project is licensed under the MIT License.