1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
|
/**
* Copyright (c)2005-2009 Matt Kruse (javascripttoolbox.com)
*
* Dual licensed under the MIT and GPL licenses.
* This basically means you can use this code however you want for
* free, but don't claim to have written it yourself!
* Donations always accepted: http://www.JavascriptToolbox.com/donate/
*
* Please do not link to the .js files on javascripttoolbox.com from
* your site. Copy the files locally to your server instead.
*
*/
/**
* jquery.contextmenu.js
* jQuery Plugin for Context Menus
* http://www.JavascriptToolbox.com/lib/contextmenu/
*
* Copyright (c) 2008 Matt Kruse (javascripttoolbox.com)
* Dual licensed under the MIT and GPL licenses.
*
* @version 1.0
* @history 1.0 2008-10-20 Initial Release
* @todo slideUp doesn't work in IE - because of iframe?
* @todo Hide all other menus when contextmenu is shown?
* @todo More themes
* @todo Nested context menus
*/
;(function($){
$.contextMenu = {
shadow:true,
shadowOffset:0,
shadowOffsetX:5,
shadowOffsetY:5,
shadowWidthAdjust:-3,
shadowHeightAdjust:-3,
shadowOpacity:.2,
shadowClass:'context-menu-shadow',
shadowColor:'black',
offsetX:0,
offsetY:0,
appendTo:'body',
direction:'down',
constrainToScreen:true,
showTransition:'show',
hideTransition:'hide',
showSpeed:'',
hideSpeed:'',
showCallback:null,
hideCallback:null,
className:'context-menu',
itemClassName:'context-menu-item',
itemHoverClassName:'context-menu-item-hover',
disabledItemClassName:'context-menu-item-disabled',
disabledItemHoverClassName:'context-menu-item-disabled-hover',
separatorClassName:'context-menu-separator',
innerDivClassName:'context-menu-item-inner',
themePrefix:'context-menu-theme-',
theme:'default',
separator:'context-menu-separator', // A specific key to identify a separator
target:null, // The target of the context click, to be populated when triggered
menu:null, // The jQuery object containing the HTML object that is the menu itself
shadowObj:null, // Shadow object
bgiframe:null, // The iframe object for IE6
shown:false, // Currently being shown?
useIframe:/*@cc_on @*//*@if (@_win32) true, @else @*/false,/*@end @*/ // This is a better check than looking at userAgent!
bindTarget: 'contextmenu',
// Create the menu instance
create: function(menu,opts) {
var cmenu = $.extend({},this,opts); // Clone all default properties to created object
// If a selector has been passed in, then use that as the menu
if (typeof menu=="string") {
cmenu.menu = $(menu);
}
// If a function has been passed in, call it each time the menu is shown to create the menu
else if (typeof menu=="function") {
cmenu.menuFunction = menu;
}
// Otherwise parse the Array passed in
else {
cmenu.menu = cmenu.createMenu(menu,cmenu);
}
if (cmenu.menu) {
cmenu.menu.css({display:'none'});
$(cmenu.appendTo).append(cmenu.menu);
}
// Create the shadow object if shadow is enabled
if (cmenu.shadow) {
cmenu.createShadow(cmenu); // Extracted to method for extensibility
if (cmenu.shadowOffset) { cmenu.shadowOffsetX = cmenu.shadowOffsetY = cmenu.shadowOffset; }
}
// when to hide the menu:
// click anywhere in the body:
$('body').bind('click',function(){cmenu.hide();});
// right-click anywhere in the body:
$('body').bind('contextmenu',function(){cmenu.hide();});
// escape key:
$(document).keyup(function(e) { if (e.keyCode == 27) { cmenu.hide(); } });
return cmenu;
},
// Create an iframe object to go behind the menu
createIframe: function() {
return $('<iframe frameborder="0" tabindex="-1" src="javascript:false" style="display:block;position:absolute;z-index:-1;filter:Alpha(Opacity=0);"/>');
},
// Accept an Array representing a menu structure and turn it into HTML
createMenu: function(menu,cmenu) {
var className = cmenu.className;
$.each(cmenu.theme.split(","),function(i,n){className+=' '+cmenu.themePrefix+n});
var $t = $('<table cellspacing=0 cellpadding=0></table>').click(function(){cmenu.hide(); return false;}); // We wrap a table around it so width can be flexible
var $tr = $('<tr></tr>');
var $td = $('<td></td>');
var $div = $('<div class="'+className+'"></div>');
// Each menu item is specified as either:
// title:function
// or title: { property:value ... }
for (var i=0; i<menu.length; i++) {
var m = menu[i];
if (m==$.contextMenu.separator) {
$div.append(cmenu.createSeparator());
}
else {
for (var opt in menu[i]) {
$div.append(cmenu.createMenuItem(opt,menu[i][opt])); // Extracted to method for extensibility
}
}
}
if ( cmenu.useIframe ) {
$td.append(cmenu.createIframe());
}
$t.append($tr.append($td.append($div)))
return $t;
},
// Create an individual menu item
createMenuItem: function(label,obj) {
var cmenu = this;
if (typeof obj=="function") { obj={onclick:obj}; } // If passed a simple function, turn it into a property of an object
// Default properties, extended in case properties are passed
var o = $.extend({
onclick:function() { },
className:'',
hoverClassName:cmenu.itemHoverClassName,
icon:'',
disabled:false,
title:'',
hoverItem:cmenu.hoverItem,
hoverItemOut:cmenu.hoverItemOut
},obj);
// If an icon is specified, hard-code the background-image style. Themes that don't show images should take this into account in their CSS
var iconStyle = (o.icon)?'background-image:url('+o.icon+');':'';
var $div = $('<div class="'+cmenu.itemClassName+' '+o.className+((o.disabled)?' '+cmenu.disabledItemClassName:'')+'" title="'+o.title+'"></div>')
// If the item is disabled, don't do anything when it is clicked
.click(function(e){if(cmenu.isItemDisabled(this)){return false;}else{return o.onclick.call(cmenu.target,this,cmenu,e)}})
// Change the class of the item when hovered over
.hover( function(){ o.hoverItem.call(this,(cmenu.isItemDisabled(this))?cmenu.disabledItemHoverClassName:o.hoverClassName); }
,function(){ o.hoverItemOut.call(this,(cmenu.isItemDisabled(this))?cmenu.disabledItemHoverClassName:o.hoverClassName); }
);
var $idiv = $('<div class="'+cmenu.innerDivClassName+'" style="'+iconStyle+'">'+label+'</div>');
$div.append($idiv);
return $div;
},
// Create a separator row
createSeparator: function() {
return $('<div class="'+this.separatorClassName+'"></div>');
},
// Determine if an individual item is currently disabled. This is called each time the item is hovered or clicked because the disabled status may change at any time
isItemDisabled: function(item) { return $(item).is('.'+this.disabledItemClassName); },
// Functions to fire on hover. Extracted to methods for extensibility
hoverItem: function(c) { $(this).addClass(c); },
hoverItemOut: function(c) { $(this).removeClass(c); },
// Create the shadow object
createShadow: function(cmenu) {
cmenu.shadowObj = $('<div class="'+cmenu.shadowClass+'"></div>').css( {display:'none',position:"absolute", zIndex:9998, opacity:cmenu.shadowOpacity, backgroundColor:cmenu.shadowColor } );
$(cmenu.appendTo).append(cmenu.shadowObj);
},
// Display the shadow object, given the position of the menu itself
showShadow: function(x,y,e) {
var cmenu = this;
if (cmenu.shadow) {
cmenu.shadowObj.css( {
width:(cmenu.menu.width()+cmenu.shadowWidthAdjust)+"px",
height:(cmenu.menu.height()+cmenu.shadowHeightAdjust)+"px",
top:(y+cmenu.shadowOffsetY)+"px",
left:(x+cmenu.shadowOffsetX)+"px"
}).addClass(cmenu.shadowClass)[cmenu.showTransition](cmenu.showSpeed);
}
},
// A hook to call before the menu is shown, in case special processing needs to be done.
// Return false to cancel the default show operation
beforeShow: function() { return true; },
// Show the context menu
show: function(t,e) {
var cmenu=this, x=e.pageX, y=e.pageY;
cmenu.target = t; // Preserve the object that triggered this context menu so menu item click methods can see it
if (cmenu.beforeShow()!==false) {
// If the menu content is a function, call it to populate the menu each time it is displayed
if (cmenu.menuFunction) {
if (cmenu.menu) { $(cmenu.menu).remove(); }
cmenu.menu = cmenu.createMenu(cmenu.menuFunction(cmenu,t),cmenu);
cmenu.menu.css({display:'none'});
$(cmenu.appendTo).append(cmenu.menu);
}
var $c = cmenu.menu;
x+=cmenu.offsetX; y+=cmenu.offsetY;
var pos = cmenu.getPosition(x,y,cmenu,e); // Extracted to method for extensibility
cmenu.showShadow(pos.x,pos.y,e);
// Resize the iframe if needed
if (cmenu.useIframe) {
$c.find('iframe').css({width:$c.width()+cmenu.shadowOffsetX+cmenu.shadowWidthAdjust,height:$c.height()+cmenu.shadowOffsetY+cmenu.shadowHeightAdjust});
}
$c.css( {top:pos.y+"px", left:pos.x+"px", position:"absolute",zIndex:9999} )[cmenu.showTransition](cmenu.showSpeed,((cmenu.showCallback)?function(){cmenu.showCallback.call(cmenu);}:null));
cmenu.shown=true;
$(document).one('click',null,function(){cmenu.hide()}); // Handle a single click to the document to hide the menu
}
},
// Find the position where the menu should appear, given an x,y of the click event
getPosition: function(clickX,clickY,cmenu,e) {
var x = clickX+cmenu.offsetX;
var y = clickY+cmenu.offsetY
var h = $(cmenu.menu).height();
var w = $(cmenu.menu).width();
var dir = cmenu.direction;
if (cmenu.constrainToScreen) {
var $w = $(window);
var wh = $w.height();
var ww = $w.width();
if (dir=="down" && (y+h-$w.scrollTop() > wh)) { dir = "up"; }
var maxRight = x+w-$w.scrollLeft();
if (maxRight > ww) { x -= (maxRight-ww); }
}
if (dir=="up") { y -= h; }
return {'x':x,'y':y};
},
// Hide the menu, of course
hide: function() {
var cmenu=this;
if (cmenu.shown) {
if (cmenu.iframe) {
$(cmenu.iframe).hide();
}
if (cmenu.menu) {
cmenu.menu[cmenu.hideTransition](cmenu.hideSpeed,null);
}
if (cmenu.shadow) {
cmenu.shadowObj[cmenu.hideTransition](cmenu.hideSpeed);
}
if (cmenu.hideCallback) {
cmenu.hideCallback.call(cmenu);
}
}
cmenu.shown = false;
}
};
// This actually adds the .contextMenu() function to the jQuery namespace
$.fn.contextMenu = function(menu,options) {
var cmenu = $.contextMenu.create(menu,options);
return this.each(function(){
$(this).bind(cmenu.bindTarget,function(e){cmenu.show(this,e);return false;});
});
};
})(jQuery);
|
