Skip to content

Commit 6374099

Browse files
mar10mar10
committed
2 parents cb90fe6 + 1fb1d0c commit 6374099

40 files changed

+782
-25
lines changed

‎CHANGELOG.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1-
# 1.0.1 / Unreleased
1+
# 1.2.3 / 2013-10-19
2+
3+
* [CHANGE] Detection of separators compliant with UI Menu 1.10
4+
* [BUGFIX] Fixed setEntry for entries that don't have icons and handlemissing `cmd` option.
5+
6+
# 1.2.2 / 2013-07-28
7+
8+
* [CHANGE] Added ThemeRoller switcher to demo page.
9+
10+
# 1.2.0 / 2013-07-04
11+
12+
* [FEATURE] Added `data` option for menu entries (Francis Rath).
13+
14+
# 1.1.0 / 2013-06-30
15+
16+
* [FEATURE] Added `action` option for menu entries.
217

318
# 1.0.0 / 2013-06-12
419

‎README.md

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# jquery.ui-contextmenu [![Build Status](https://travis-ci.org/mar10/jquery-contextmenu.png?branch=master)](https://travis-ci.org/mar10/jquery-contextmenu)
1+
# jquery.ui-contextmenu [![Build Status](https://travis-ci.org/mar10/jquery-ui-contextmenu.png?branch=master)](https://travis-ci.org/mar10/jquery-ui-contextmenu)
22

33
A jQuery plugin that provides a context menu (based on the standard [jQueryUI menu] widget).
44

@@ -43,7 +43,6 @@ $("#container").contextmenu({
4343
delegate: ".hasmenu",
4444
menu: [
4545
{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
46-
{title: "Paste", cmd: "paste", disabled: true },
4746
{title: "----"},
4847
{title: "More", children: [
4948
{title: "Sub 1", cmd: "sub1"},
@@ -56,6 +55,22 @@ $("#container").contextmenu({
5655
});
5756
```
5857

58+
59+
Instead of handling all menu commands in the `select` event, it is also possible
60+
to attach callbacks directly to menu entries:
61+
```js
62+
$(document).contextmenu({
63+
delegate: ".hasmenu",
64+
menu: [
65+
{title: "Copy", uiIcon: "ui-icon-copy", action: function(event, ui){
66+
alert("Copy " + ui.target.text());
67+
}
68+
},
69+
...
70+
});
71+
```
72+
73+
5974
To attach menus to *all* elements on the page that have `class="hasmenu"`,
6075
we use `document` as context:
6176
```js
@@ -211,7 +226,7 @@ structure (see [jQueryUI menu] for details):
211226
### Events
212227
jquery-contextmenu exposes events from [jQueryUI menu]: `blur`, `create`, `focus`, `select`.
213228
However, since the `event.target` parameter contains the menu item, we additionally pass the element
214-
that was right-clicked in `event.relatedTarget`.
229+
that was right-clicked in `ui.target`.
215230

216231
Events may be handled by passing a handler callback option:
217232
```js
@@ -276,8 +291,9 @@ $("#container").bind("contextmenuselect", function(event, ui) {
276291
Contributors in order of appearance:
277292
278293
* [Jeffrey Dean Altemus](http://jeff.teamaltemus.net)
294+
* Francis Rath
279295
280-
~~~~
296+
----
281297
282298
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/mar10/jquery-contextmenu/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
283299

‎demo/index.html

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.ui-contextmenu.js - Demo</title>
6-
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
6+
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" />
77
<!-- min requirements:
8+
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
89
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
910
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
1011
-->
@@ -14,6 +15,9 @@
1415
<!-- Some custom library to enable 'taphold' events -->
1516
<script src="jquery-taphold/taphold.js" type="text/javascript"></script>
1617

18+
<!-- Custom library to add a dynamic themeroller switcher -->
19+
<script type="text/javascript" src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script>
20+
1721
<script src="../jquery.ui-contextmenu.js" type="text/javascript"></script>
1822

1923
<style type="text/css">
@@ -48,7 +52,7 @@
4852
font-size: .8em;
4953
}
5054
.ui-menu {
51-
width: 120px;
55+
width: 150px;
5256
}
5357

5458
/* Define a custom icon */
@@ -63,6 +67,13 @@
6367
<script type="text/javascript">
6468
var CLIPBOARD = "";
6569
$(function(){
70+
/* Enable a themeroller theme-switching using a combobox. */
71+
$("#switcher").themeswitcher({
72+
jqueryuiversion: "1",
73+
imgpath: "../lib/Super-Theme-Switcher/images/",
74+
loadTheme: "Smoothness"
75+
});
76+
6677
/* Menu 1: init by passing an array of entries. */
6778

6879
$(document).contextmenu({
@@ -75,10 +86,11 @@
7586
{title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
7687
{title: "----"},
7788
{title: "More", children: [
78-
{title: "Sub 1", cmd: "sub1"},
89+
{title: "Sub 1 (using callback)", action: function(event, ui) { alert("action callback sub1");} },
7990
{title: "Sub 2", cmd: "sub1"}
8091
]}
8192
],
93+
// Handle menu selection to implement a fake-clipboard
8294
select: function(event, ui) {
8395
var $target = ui.target;
8496
switch(ui.cmd){
@@ -92,6 +104,7 @@
92104
alert("select " + ui.cmd + " on " + $target.text());
93105
// Optionally return false, to prevent closing the menu now
94106
},
107+
// Implement the beforeOpen callback to dynamically change the entries
95108
beforeOpen: function(event, ui) {
96109
var $menu = ui.menu,
97110
$target = ui.target;
@@ -159,9 +172,17 @@ <h1>jquery.ui-contextmenu.js</h1>
159172

160173
<p><a href="https://github.com/mar10/jquery-ui-contextmenu">View project on GitHub</a></p>
161174

175+
<div>
176+
<label for="switcher">Theme:</label> <div id="switcher"></div>
177+
<!--
178+
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
179+
-->
180+
</div>
181+
162182
<h3>Sample 1</h3>
163183
<ul>
164184
<li>Initialized using a command-array.
185+
<li>Entry 'More - Sub1' uses the callback syntax.
165186
<li>The menu is modified in the `beforeOpen` event (disabling an renaming entries).
166187
<li>`preventSelect: true` prevents accidential selection of the menu
167188
targets (i.e. 'AAA') when double-clicking or dragging the mouse.

‎jquery.ui-contextmenu.js

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
* Copyright (c) 2013, Martin Wendt (http://wwWendt.de). Licensed MIT.
99
*/
1010
;(function($, window, document, undefined) {
11+
"use strict";
1112
var supportSelectstart = "onselectstart" in document.createElement("div");
1213

1314
/** Return command without leading '#' (default to ""). */
@@ -17,7 +18,7 @@
1718

1819

1920
$.widget("moogle.contextmenu", {
20-
version: "1.0.0",
21+
version: "1.2.2",
2122
options: {
2223
delegate: null, // selector
2324
hide: { effect: "fadeOut", duration: "fast"},
@@ -125,12 +126,20 @@
125126
create: $.proxy(this.options.createMenu, this),
126127
focus: $.proxy(this.options.focus, this),
127128
select: $.proxy(function(event, ui){
128-
var isParent = (ui.item.has(">a[aria-haspopup='true']").length > 0);
129-
ui.cmd = normCommand(ui.item.find(">a").attr("href"));
129+
// User selected a menu entry
130+
var retval,
131+
isParent = (ui.item.has(">a[aria-haspopup='true']").length > 0),
132+
$a = ui.item.find(">a"),
133+
actionHandler = $a.data("actionHandler");
134+
ui.cmd = normCommand($a.attr("href"));
130135
ui.target = $(this.currentTarget);
131136
// ignore clicks, if they only open a sub-menu
132137
if( !isParent || !this.options.ignoreParentSelect){
133-
if( this._trigger.call(this, "select", event, ui) !== false ){
138+
retval = this._trigger.call(this, "select", event, ui);
139+
if( actionHandler ){
140+
retval = actionHandler.call(this, event, ui);
141+
}
142+
if( retval !== false ){
134143
this._closeMenu.call(this);
135144
}
136145
event.preventDefault();
@@ -247,6 +256,7 @@
247256
var e = jQuery.Event("contextmenu", {target: target.get(0)});
248257
return this.element.trigger(e);
249258
},
259+
/** Replace the menu altogether. */
250260
replaceMenu: function(data){
251261
this._createUiMenu(data);
252262
},
@@ -256,14 +266,20 @@
256266
$entry = this._getMenuEntry(cmd, false);
257267

258268
if(typeof titleOrData === "string"){
259-
// Replace <a> text without removing <span> child
260-
$entry
261-
.contents()
262-
.filter(function(){ return this.nodeType === 3; })
263-
.first()
264-
.replaceWith(titleOrData);
269+
if( $entry.children("span").length){
270+
// Replace <a> text without removing <span> child
271+
$entry
272+
.contents()
273+
.filter(function(){ return this.nodeType === 3; })
274+
.first()
275+
.replaceWith(titleOrData);
276+
}else{
277+
// <a> tag only contains text (above code doesn't work here)
278+
$entry.text(titleOrData);
279+
}
265280
}else{
266281
$parent = $entry.closest("li").empty();
282+
titleOrData.cmd = titleOrData.cmd || cmd;
267283
$.moogle.contextmenu.createEntryMarkup(titleOrData, $parent);
268284
}
269285
},
@@ -281,19 +297,27 @@ $.extend($.moogle.contextmenu, {
281297
createEntryMarkup: function(entry, $parentLi){
282298
var $a = null;
283299

284-
if(entry.title.match(/^---/)){
300+
// if(entry.title.match(/^---/)){
301+
if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
302+
// hyphen, em dash, en dash: separator as defined by UI Menu 1.10
285303
$parentLi.text(entry.title);
286304
}else{
287305
$a = $("<a>", {
288306
text: "" + entry.title,
289307
href: "#" + normCommand(entry.cmd)
290308
}).appendTo($parentLi);
309+
if( $.isFunction(entry.action) ){
310+
$a.data("actionHandler", entry.action);
311+
}
291312
if(entry.uiIcon){
292313
$a.append($("<span class='ui-icon'>").addClass(entry.uiIcon));
293314
}
294315
if(entry.disabled){
295316
$parentLi.addClass("ui-state-disabled");
296317
}
318+
if($.isPlainObject(entry.data)){
319+
$a.data(entry.data);
320+
}
297321
}
298322
return $a;
299323
},

‎jquery.ui-contextmenu.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)