contextMenu.js

contextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.
Why contextMenu.js ?:

• Use as simple popup or as a context menu. With some tweaking, it can be used for multiple purposes.
• Adjust position and size to fit in viewport.
• Keyboard interaction.
• Support for different types of inputs (structure object, UL list)  .
• Trigger Context menu with right-click, left-click,hover or any other mouse events.
• Css outside of javascript so you can edit the look of menu.
• Enable/disable options.
• Optional icons for commands.
• Lot of configurable options.
• Submenus

See demo on http://ignitersworld.com/lab/contextMenu.html#demo

Latest Update (v 1.2.0)

1. Added a "closeOnClick" option to close contentext menu on click of any item.
2. Added a className key when generating context menu through object to give style on specific item of menu.
3. Fixed keybord event.

Options

Option	Default	Allowed	Description
triggerOn	click	click,hover, mousemove, dblclick and all mouse events	Event in which context menu is binded with a trigger.
displayAround	cursor	cursor , trigger (button)	Display context menu around cursor position or trigger position
mouseClick	left	left,right	which mouse button to trigger context menu if trigger event is mouse click or mouse up event.
verAdjust	0	Numeric value	Adjusting the vertical distance from its original pixel.
horAdjust	0	Numeric value	Adjusting the horizontal distance from its original pixel.
top	auto	auto,top position in px or %	Defines the exact top position relative to the containment where menu to be shown.
left	auto	auto,top position in px or %	Defines the exact left position relative to the containment where menu to be shown.
containment	window	window, any selector,jquery object, document object	Define the container inside which context menu will be contained.
winEventClose	true	true,false	If true close the context menu on window scroll and resize event.
sizeStyle	auto	auto, content	If auto, size of context menu depends on browser size and options you selected. If content size depends on content width and height.
position	auto	auto,left,right,top,bottom	Context menu adjust according to viewport. If other than auto is given it ill force contenxt menu to be on that position. It is considered only when displayAround is set to trigger.

Callback

Callback	Description
onOpen	This is called just before context menu opens.
afterOpen	This is called after context menu opens.
onClose	This is called just after context menu is closed.

Callback accept two argument.
1. data : Which containg refrence to trigger and menu.
You can get trigger and menu using data.trigger and data.menu.
2. event : A event object which is binded with trigger to open context menu.

Inside callback this refers to trigger element.

Method

Method	Description
menu	This mode is used to show context menu. Keyboard interaction and sub menus are activated in this mode.
popup	If you just want to display an popup window at your trigger point popup mode serve best. This will just show element defined in selector while adjusting it according to view port.
update	This mode is used to update the menu items (like enabling, disabling, icon change and function) and configuration option.
refresh	If new trigger with specific selector is added, this method is used to initialize context menu on those newly added elements.
destroy	Remove context menu instance for that trigger completely.
close	To manually close context menu.

Popup method is default when selector type is selector string , jquery object, DOM object. Menu method is default when selector type is structure object.

Context menu parameters

Context menu accept three parameters.

$('.trigger').contextMenu(method,selector,options)

1. method tells what operation to trigger . By default it is popup if selector is string type (selector notation) and menu if selector is structure object.
2. selector can be document object , jQuery object ,selector string or structure object.
3. option, there are different options to change the behaviour of context menu. This parameter is optional where all options contain some default value. .

Input format

If defined in menu mode you can provide input in two way.
1. By passing selector of ul list.
2. By passing a array of objects containg menu defination.

1. UL List format

<ul class="contextMenu">
    <li title="create button" onclick="doCreate()">
        <img src="images/create.png" class="iw-mIcon" />Create</li>
    <li title="update button" onclick="doUpdate()">
        <img src="images/update.png" class="iw-mIcon" />Update
        <ul>
            <li onclick="doMerge()">Merge</li>
            <li>Replace
                <ul>
                    <li>Replace Top 100</li>
                    <li>Replace All</li>
                </ul>
            </li>
        </ul>
    </li>
    <li onclick="doDelete()">
        <img src="images/delete.png" class="iw-mIcon" />Delete
        <ul>
            <li>Soft Delete</li>
            <li>Hard Delete</li>
        </ul>
    </li>
    <li class="iw-mDisable">Disabled</li>
</ul>
  

**Note**
1. To disable any option add "iw-mDisable" class in the option.
2. Submenu are ul list inside a option li.
3. Option icon have class "iw-mIcon".

Structure object format

    var menu = [{
  	    name: 'create',
  	    img: 'images/create.png',
  	    title: 'create button',
  	    fun: function () {
  	        say('i am add button')
  	    }
  	}, {
  	    name: 'update',
  	    img: 'images/update.png',
  	    title: 'update button',
  	    fun: function () {
  	        say('i am update button')
  	    },
  	    subMenu: [{
  	        name: 'merge',
  	        title: 'It will merge row',
  	        fun: function () {
  	            say('It will merge row')
  	        }
  	    }, {
  	        name: 'replace',
  	        subMenu: [{
  	            name: 'replace top 100'
  	        }, {
  	            name: 'replace all'
  	        }]
  	    }]
  	}, {
  	    name: 'delete',
  	    img: 'images/create.png',
        disable:true,
  	    title: 'create button',
  	    fun: function () {
  	        say('i am add button')
  	    },
  	    submenu: [{
  	        'name': 'soft delete',
  	    }, {
  	        'name': 'hard delete'
  	    }]
  	}];
  

Keys :
1. name : name of the option.
2. img :option icon image.
3. title : tiltes for the options.
4. disable : A boolean to tell weather that option is disabled or not. If true option is disabled.
5. fun :Function that will be executed on click of option.
6. submenu : A submenu defination which has all options available as we are giving for parent menu. Submenus can bgo to any level.

Key board interaction.

Key	Operation
Up arrow	Go to previous option in menu.
Down arrow	Go to next option in menu.
Left arrow	Go to parent menu.
Right arrow	Go to sub(child) menu.
Page up	Go to first option.
Page down	Go to last option.
Esc key	Close context menu.
Enter Key	Trigger the function associated with option.

Closing of menu

Menus are closed in following actions of user.
1. On esc key press.
2. On clicking outside of window.
3. Window scroll or resize events(If winEventClose not set to false).

Updating menu

A menu configuration options and image icon, disabling, title and function can be changed dynamically. If you want to change the structure, you need to destroy menu and create again.
You also can't change the option name, as it its part of structure. To update a menu you can pass update structure and configuration option.

Update structure object is similiar to input sturcture object but in this you need to only pass those key which you want to update. Ex.

var updateObj = [{
    name: 'create',
    disable: 'true',
}, {
    name: 'update',
    subMenu: [{
        name: 'replace',
        disable: 'true',
    }]
}];
$('.trigger').contextMenu('update', updateObj, {
'displayAround': 'trigger',
'containment': '#contaienr'
});

You can also directly change on html dom.
If you know the selector of menu its great or else you can get menu object by.

 var menu=$('.trigger').contextMenu('value','menu'); 

Now you can update it however you want.After that call update method( with configuration option, if you want to change it).

$('.trigger').contextMenu('update',updateObj,{
    'displayAround':'trigger',
    'containment':'#container'
});

For enabling/disabling a menu option just add "iw-mDisable" class if you are changing in html dom.
Else if you are updating using structure object add disable key with value of true(to disable) or false(to enable) in object.

Refreshing trigger list

If you working on dynamic content you may require to add newly added element in trigger list.
You can refresh the trigger list using

$('.trigger').contextMenu('refresh');

Note : Refresh method work only when contextMenu is already initialized to any one of element which belongs to that selector.

Destroying a context menu

This method will destroy context menu binded with trigger element. To call destroy method.

$('.trigger').contextMenu('destroy');

Getting values associated with context menu.

value method return value associated with key passed as second argument.
ex :

$('.trigger').contextMenu('value',key);

Here key are 'menu','menuId' and any configuration options.

CSS Class

Following classes are associated with context menu.

Class	Description
iw-contextMenu	All context menu get this class on initializing context menu
iw-cm-menu	This class is added on those which are activated in menu mode.
iw-mOverlay	This class is applied on overlay which come inside menu option when we disable that option
iw-mDisable	This class is added on menu options which are disabled.
iw-mSelected	This class is added on menu option which is currently focused.
iw-cm-arrow-right	If any menu option have submenu a arrow sign is added with this class to show it has submenu.
iw-mTrigger	This class is added on all triggers and also on menu option which have submenus.
iw-mIcon	This class is added on icon images used for menu options.