Control.ContextMenu

Introduction

Control.ContextMenu provides a simple API for programming contextual menus with Prototype. You can attach a context menu to the entire document or any Element. Menus can be triggered via a right click (default), or left click.

Right Click on Image

Left Click on Image Show third menu item?

Consoleclear

Adding Context: Conditional Menu Items & Labels

You can modify the contents of the label by passing a function that returns a string into the label option instead of string. This function will be called each time the menu is opened. An optional condition function option can be used as well. If this condition returns false, the menu item will not appear in the menu. If no items meet the condition checks, the menu will not open.

JavaScript

	var context_menu_one = new Control.ContextMenu('container_one');
	context_menu_one.addItem({
		label: 'Left Image, Item 1',
		callback: function(){
			log('Left Image, item one picked.');
		}
	});
	context_menu_one.addItem({
		label: 'Left Image, Item 2',
		callback: function(){
			log('Left Image, item two picked.');
		}
	});
	
	var context_menu_two = new Control.ContextMenu('container_two',{
		leftClick: true
	});
	context_menu_two.addItem({
		label: 'Right Image, Item 1',
		callback: function(){
			log('Right Image, item one picked.');
		}
	});
	context_menu_two.addItem({
		label: 'Right Image, Item 2',
		callback: function(){
			log('Right Image, item two picked.');
		}
	});
	context_menu_two.addItem({
		label: function(){
			//return value can be modified to reflect application state
			return 'Right Image, Item 3';
		},
		condition: function(){
			return $('show_third_item').checked;
		},
		callback: function(){
			log('Right Image, item three picked.');
		}
	});
	

CSS

	#control_contextmenu {
		border:1px solid #666;
		background-color:#eee;
		min-width:150px;
	}

	#control_contextmenu ul {
		list-style:none;
		padding:0;
		margin:0;
		cursor:hand;
	}

	#control_contextmenu ul li {
		text-align:left;
		padding:3px 10px 3px 5px;
		margin:0;
		cursor:pointer;
		cursor:hand;
		font-family:"Lucida Grande",Verdana;
		text-decoration:none;
		color:#333;
		font-size:12px;
		font-weight:bold;
		border-top:1px solid #fff;
		border-left:1px solid #fff;
		border-bottom:1px solid #999;
		border-right:1px solid #999;
	}

	#control_contextmenu ul li.selected,
	#control_contextmenu ul li:hover {
		color:#fff;
		background-color:#3875d7;
		cursor:hand;
	}

	#control_contextmenu ul li.selected:hover {
		color:#333;
		background-color:#eee;
		cursor:hand;
	}

DOM Modifications

Control.ContextMenu.load() will insert a div#control_contextmenu as a child of document.body.

Class

Return	Name	Description
null	load([bool capture_all])	capture_all defaults to false, and will stop all context menu events if true. If you want to capture_all you must explicitly call load before creating any Control.ContextMenu instances.
null	disable()
null	enable()	Called by load()
mixed	current	Returns false or open Control.ContextMenu instance.
bool	enabled
array	menus
number	offset	Defaults to 4. How many pixels from the edge of the screen the menu can be positioned.

Instance

Return	Name	Description
Control.ContextMenu	initialize(Element container [,Hash options])	container is the element that the ContextMenu is attached to.
Control.ContextMenu	addItem(Hash item)	See Item Hash below. Returns "this", for chaining.
bool	close([Event])
null	destroy()
bool	open(Event)	To manually open the menu you must pass a mouse event.

Options

Type	Name	Default	Description
string	activatedClassName	'activated'	Added to the menu item once it has been selected, not toggled during animation.
bool	animation	true	Toggles selectedClassName animationCycles * 2 times over animationLength.
number	animationCycles	2
number	animationLength	300	Length of animationCycles combined in milliseconds.
bool	delayCallback	true	Wether to call the callback immediately, or after the animation is complete.
bool	disableOnAltKey	true	Allows browser context menu to open if alt key is pressed.
bool	disableOnShiftKey	true	Allows browser context menu to open if shift key is pressed.
bool	leftClick	false	Will open the context menu with a left click, instead of right click.
string	selectedClassName	'selected'

Events

Name	Description
afterClose()
afterOpen()
beforeClose()	Throwing $break inside an observer will prevent the menu from closing.
beforeOpen()	Throwing $break inside an observer will prevent the menu from opening.