AngularJS Custom Context Menu Provider to customize your mouse right clicked context menu and prevent the default one to come forward.
Initial configuration is as usual
angular.module('myTestApp', ['ngContextMenu'....
Usecase
contextMenu.init('.orange', {
theme: 'dark',
name: 'orange',
items: [
{
title: "Open",
listen: function() {
window.history.back();
}
},
{
title: "Open With...",
disable: true,
listen: function() {
//this won't fire unless you triger to disable: false OR remove this
}
}
//More items .....
]});
Please go through test/
directory.
contextMenu
provider have three top level methods contextMenu.init
, contextMenu.name
, contextMenu.destroy
contextMenu.init(Selector, ItemsConfigurableObject)
This method literely have 2 required parameters Selector
and ItemsConfigurableObject
- Selector is basically the query selector
that where context will setup popup , you can use any CSS class OR unique ID OR body to prevent the default context menu from
the entire web app.
ItemsConfigurableObject
is the top level object notation - the basic syntax is
{
theme: 'theme name', //dark or light
name: 'context menu name' // name must be unique
items: [ //Context menu listing
{
title: 'Back' //Title of the first CM list item
disable: false, // true OR false to declare disability
listen: function () {} // List item click event listener
}
]
}
You must have to declare this method as long you need to configure the context menu.
contextMenu.name(contextMenuName)
This method use to access the top level API - parameter is name of your context menu that you want to access.
This method will return a method object for subsequent listing item index(number)
and this method will return a set of method
object for subsequent listing item
getTitle()
setTitle(String)
getDisable()
setDisable(Boolean)
getListen()
setListen(Function)
So the code will be something like this
contextMenu.name("main").index(0).setTitle("New Title");
contextMenu.name("main").index(0).setListen(function () {
alert("I'm a new listener and just got fired");
});
contextMenu.destroy(contextMenuName)
This method use to destroy the active context menu from the binded element.