# 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.tar.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

## Try it out

Some silly examples.
See the page source for how it's done

One
One-One
One-Two
Two
Two-One
Two-Two
CLICK ME!!!
Member
Details for this member
Member
Details for this member
Member
Details for this member