Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
ember-context-menu
Advanced tools
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:
{{context-menu}}
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 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
}
});
Your component needs at least an array of contextItems, which should have a label and an action.
import Component from '@ember/component';
export default Component.extend(contextMenuMixin, {
contextItems: [
{
label: 'do something',
action(selection, details, event) { /* do something */ }
}
]
});
: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.
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)
Test helpers are provided to make it easier to trigger the context menu to open.
import { triggerContextMenu } from 'ember-context-menu/test-support';
triggerContextMenu('.my-class-selector');
Special thanks to @Fabriquartz (Fabriquartz.com)
See the Contributing guide for details.
This project is licensed under the MIT License.
FAQs
Ember addon for right-click-menu
We found that ember-context-menu demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.