DomContextMenu

Version:   0.7.1 beta - 2007-03-11
Copyleft:  © 2007 [ a n y m a | research ]
           Michael Egger, me AT anyma DOT ch
License:   GNU General Public License
Url:       http://www.anyma.ch/software/domcontextmenu/

Abstract

DomContextMenu.js provides a simple page-wide context menu that works on the structure of the underlying DOM. A right click on any node element starts an upward traversal of the DOM from the Target up to the document.body element, collecting all elements that have a contextual menu attached to them. Menu items are presented in traversal order, from the innermost element first to the outermost element last.

Contextual menu items can be attached, updated or removed dynamically at any time from any element

Files, Dependancies and Compatibility

DomContextMenu.js is tested on Mozilla Firefox and Safari on MacOS X. It does not work on Internet Explorer 5 for Mac (due to a bug in Prototype ?) and i can't figure out how to suppress the system context menu on Camino on Mac. It seems to work on both Internet Explorer 6 and Firefox 5 on Windows (XP).

It needs Prototype 1.5.0 (included in the distribution)

Files needed:

css/domcontextmenu.css         	styling for the menu
img/shadowAlpha.png             image file for the menu shadow
js/domcontextmenu.js            the script
js/prototype.js                	prototype 1.5.0

Download domcontextmenu_0.7.1tar.gz

Function Reference

DomContextMenu.create()

Call DomContextMenu.create() to initialize the menu. It creates a hidden <div> for the menu and shadows, an starts listening to the mousedown, oncontextmenu and keypress events. It doesn't create any menu items.

DomContextMenu.attach( node , options );

Attaches a contextual menu item to a node element

node can either be node object or the unique id of the node as a string

options is an object with the following keys:

name is a string that will be shown in the menu for this item
call a function that will be called when the user seleects this menu item. The function will be executed in the scope of the node this menu item is attached to, so this refers to the actual node in the DOM
ref is an optional string providing a back-reference to the menu item for later use. If no menu item is present with this reference, a new one will be created. If you call DomContextMenu.attach() on the same node with the same reference later on, the menu item will be updated, providing you with means to change the item text or the function dynamically...
tagName is an optional string or an array of strings. All Elements of type tagName inside the container will trigger this menu item when clicked on. Your callback function will get the original target object as an argument (see examples)
className is an optional string or an array of strings. All Elements of class className inside the container will trigger this menu item when clicked on. Your callback function will get the original target object as an argument (see examples)

Examples


	DomContextMenu.attach(document.body,{ 
				name:'Hello', 
				call:function(){alert('world') } 
			});

The following will output the inner HTML of the node with id 'book'


	DomContextMenu.attach($('book'),{ 
			name:'Read',
			call:function(){alert(this.innerHTML) } 
		});

In the following example we give a reference to the context menu item, so we can change its text later accordingly;


	attach($('fold'),{ 
		ref:'toggle',
		name:'Expand', 
		call:function() { 
			var nextDiv = $(this).down('div'); 
			if (nextDiv.visible()) { 
				nextDiv.hide(); 
				this.contextmenu.toggle.name = 'Expand'; 
			} else { 
				nextDiv.show();
				this.contextmenu.toggle.name = 'Collapse'; 
			} 
		} 
	})

In the following example we add a contextual menu item to all images inside the node with id "Gallery" at once. Note how we get the originating target object from the argument of the callback function.


	DomContextMenu.attach($('gallery'),{ 
			name     :'Hide this ugly picture',
			tagName  :'img',
			call     :function(target){target.hide() } 
		});

In the following example we add a contextual menu item to all nodes with class "lazy" inside the node with id "employees". Note how we get the originating target object from the argument of the callback function.


	DomContextMenu.attach($('employees'),{ 
			name      :'Fire this guy',
			className :'lazy',
			call      :function(target){target.remove() } 
		});

DomContextMenu.remove(node,ref)

Removes menu item with reference ref from the node. What else?

Version History

Known Issues

Positioning the menu when we're at the right border or near the bottom

2007-03-11, v. 0.7 and 0.7.1

Fixed a bug that prevented the new options to function properly on Explorer.
Added className and tagName options

2007-01-19, v. 0.6

Rewritten for Prototype 1.5.0, code is a lot cleaner now
Changed Parameters of attach() to an object, moved css to external css file
Works on Safari, too!

2007-01-16, v. 0.0 - 0.5

initial release, beta, untested