An ember-cli addon to add any right-click-menu to your components. Try it here
In your application's directory:
$ ember install ember-context-menu
In your application.hbs add the following:
WARNING: You need to add this to make the context-menu work, and should add it just once in your application.
This mixin is designed to add a context-menu to any component. Add it to your component like this:
import contextMenuMixin from 'ember-context-menu';
export default Ember.Component.extend(contextMenuMixin, {
// your component properties
_contextMenu(e) {
// do anything before triggering the context-menu
}
});
Your component needs at least an array of contextItems, which should have a label and an action.
export default Ember.Component.extend(contextMenuMixin, {
contextItems: [
{
label: 'do something',
action(selection, details, event) { /* do something */ }
}
]
});
๐ซ (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.
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.
You can add as many sub-actions as you like, but keep in mind it could blow out of your screen ;-)
contextItems: [
{
label: 'multiple actions',
subActions: [
{
label: 'sub action 1',
action() { /* do something */ }
}
]
}
]
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.
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.
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.
contextItems: [
{
label: 'do something',
action(selection, details) { /* do something */ }
}
],
contextDetails: { foo: 'bar' }
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.
contextItems: [
{
label: 'foo',
disabled: true
action() { /* do nothing */ }
},
{
label: 'bar',
disabled(selection) {
/* return disabled depending on selection */
},
action() { /* do something */ }
}
]
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)
Special thanks to @Fabriquartz (Fabriquartz.com)