Comments on: MooTools ContextMenu Plugin

By: Wassilios Meletiadis

Wassilios Meletiadis — Wed, 27 Jul 2011 10:54:06 +0000

Damn! I’ve forgotten to use the code-Tags. :(
Could you please fix my post for better readability. Thanks!

By: Wassilios Meletiadis

Wassilios Meletiadis — Wed, 27 Jul 2011 10:52:24 +0000

Very nice plugin!

I needed the ability to define my own z-index for the contextmenu. Therefore I made the
following changes:

var ContextMenu = new Class({
options: {
actions: {},
…
fadeSpeed: 200, // don’t forget to add a comma
// somewhere near line 29
zIndex : 2000 // set the default z-index
},
…

…
startListener: function() {
this.targets.each(function(el) {
…

this.menu.setStyles({
…
position: ‘absolute’, // don’t forget to add a comma
// somewhere near line 67
‘z-index’: this.options.zIndex // apply the z-index
});
…
}
}
});

After doing these changes one can do this:

new ContextMenu({
actions : {
…
},
…
zIndex : 3000
});

By: Niklas Lehto

Niklas Lehto — Tue, 05 Apr 2011 02:32:59 +0000

The context menu is not to blame for breaking the sortable class. There’s a bug in v1.2.4.4 of the sortables class itself.

For details and a solution, check out https://mootools.lighthouseapp.com/projects/24057/tickets/292-sortables-breaking-on-right-clicking-mouse-button2-the-handle

Good luck!

By: Nestor

Nestor — Tue, 22 Mar 2011 10:27:18 +0000

I suggest using the “name” attribute instead of the “href” on the link to avoid the “#action” being addded to the url. Easy fix, as follows:

In your HTML :

Edit
Cut
Copy
Paste
Delete
Quit

then in line 68 0f the script:

/* menu items */
this.menu.getElements(‘a’).each(function(item) {
item.addEvent(‘click’,function(e) {
if(!item.hasClass(‘disabled’)) {
this.execute(item.get(‘name’),$(this.options.element));
this.fireEvent(‘click’,[item,e]);
}
}.bind(this));
},this);

Enjoy!

By: Greg Clout

Greg Clout — Wed, 23 Feb 2011 22:24:28 +0000

Fantastic component!
The only trouble im having at present is that the click event is conflicting with the sortables class.
After opening the menu I can no loger drag and drop in my sortable lists.

By: Roman

Roman — Thu, 21 Oct 2010 18:42:01 +0000

Hello folks

The following code works fine for me to reinitialize the context menu:

context.targets.removeEvents('contextmenu'); context.targets = $$('.myNewTargets'); context.menu.getElements('a').removeEvents('click'); context.startListener();

By: Ann

Ann — Sun, 17 Oct 2010 08:13:15 +0000

fuction contextdemo()
{
alert(“hi”);
var menu=contextMenu.createElement(‘menu’);
var itemNode=contextMenu.createElement(‘item’);
var itemtext=contextMenu.createTextNode(“search”);
var itemattr=contextMenu.createAttribute(‘onactivate’);
itemtext.appendChild(itemattr);
itemNode.appendChild(itemtext);
menu.appendChild(itemNode);

}

By: Niklas Lehto

Niklas Lehto — Mon, 05 Jul 2010 06:54:39 +0000

One further revision. I found myself in need of adding and removing trigger items, so I added two methods providing this functionality, and broke another method up in two. Here are the changes (with my previous revisions included):

//get things started
startListener: function(){
//all elemnts
this.attachToTargets(this.targets);

//menu items
this.menu.getElements(‘a’).each(function(item){
item.addEvent(‘click’,function(e){
if(!item.hasClass(‘disabled’)){
this.execute(item.get(‘href’).split(‘#’)[1],document.id(this.options.element));
this.fireEvent(‘click’,[item,e]);
}
}.bind(this));
},this);

//hide on body click
document.id(document.body).addEvents({
‘click’: function(){
this.hide();
}.bind(this),
‘contextmenu’: function(){
this.hide();
}.bind(this)
});
},

// add trigger event to all targets
attachToTargets: function(targets){
targets.each(function(el){
//show the menu
el.addEvent(this.options.trigger,function(e){
//enabled?
if(!this.options.disabled){
//prevent default, if told to
if(this.options.stopEvent) { e.stop(); }
//record this as the trigger
this.options.element = document.id(el);
//calculate height of the menu
menuSize = this.menu.measure(function(){
return this.getSize();
});
//decide where to position the menu
posY = ((e.page.y + this.options.offsets.y + menuSize.y) < window.getSize().y)
? e.page.y + this.options.offsets.y
: e.page.y – this.options.offsets.y – menuSize.y;
posX = ((e.page.x + this.options.offsets.x + menuSize.x) < window.getSize().x)
? e.page.x + this.options.offsets.x
: e.page.x – this.options.offsets.x – menuSize.x;
//position the menu
this.menu.setStyles({
top: posY,
left: posX,
position: 'absolute',
'z-index': '2000'
});
//show the menu
this.show();
}
}.bind(this));
},this);
},

//add item(s)
addItems: function(items){
this.attachToTargets($$(items));
},

//remove item(s)
removeItems: function(items){
$$(items).removeEvents(this.options.trigger);
},

By: Niklas Lehto

Niklas Lehto — Sun, 04 Jul 2010 00:22:20 +0000

Btw, it’s tested to work in recent PC versions of Firefox, Explorer, Chrome, Opera and Safari.

By: Niklas Lehto

Niklas Lehto — Sun, 04 Jul 2010 00:16:10 +0000

Brilliant! Have implemented this in a project I’m working on. I’ve added some functionality to decide whether to position the menu above or below and to the left or the right of the cursor, depending on the size of the menu and the viewport. Hope someone finds it useful.

//calculate height of the menu
menuSize = this.menu.measure(function(){
return this.getSize();
});
//decide where to position the menu
posY = ((e.page.y + this.options.offsets.y + menuSize.y) < window.getSize().y)
? e.page.y + this.options.offsets.y
: e.page.y – this.options.offsets.y – menuSize.y;
posX = ((e.page.x + this.options.offsets.x + menuSize.x) < window.getSize().x)
? e.page.x + this.options.offsets.x
: e.page.x – this.options.offsets.x – menuSize.x;
//position the menu
this.menu.setStyles({
top: posY,
left: posX,
position: 'absolute',
'z-index': '2000'
});