ember-contextmenu

An ember addon for adding contextual shortcut menus to an Ember.js app.

Usage

Installation

ember install @abcum/ember-contextmenu

Introduction

The ember-contextmenu addon adds functionality for adding contextual shortcut menus to an Ember.js app, using the right click button. A custom context menu can be applied to the whole application, in addition to individual menus for a specific area, or an ember component.

Examples

Add the context-menu component to your application template.

{{!-- app/templates/application.hbs --}}
{{context-menu}}

To prevent the default menu from appearing, add the right-click component to the application template.

{{!-- app/templates/application.hbs --}}
{{#right-click menu="application.menu"}}
    {{!-- all content --}}
{{/right-click}}

{{!-- app/templates/application/menu.hbs --}}
<div class="context-menu-item" {{action (history-back)}}>Back</div>
<div class="context-menu-item" {{action (history-forward)}}>Forward</div>
<div class="context-menu-item" {{action (reload)}}>Reload</div>
<div class="context-menu-item" {{action (transition-to 'logout')}}>Logout</div>
<div class="context-menu-line"></div>
<div class="context-menu-item disabled">© Abcum Ltd</div>

When adding a menu to a component use the context-menu mixin, and specify a file using the menuName key.

import Ember from "ember";
import MenuMixin from 'ember-contextmenu/mixins/context-menu';

export default Ember.Component.extend(MenuMixin, {
    menuName: 'posts.menu',
});

Or if you want to display a menu after an action, use the context-menu helper, specifying a filename.

{{#each model as |post|}}
    {{blog-post contextMenu=(context-menu 'post.menu' model=post)}}
{{/each}}

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)