Skip to content

Commit 4e31e9b

Browse files
committed
Allow entry.disabled and entry.title to be callbacks
Close mar10#59
1 parent 2d6595b commit 4e31e9b

File tree

4 files changed

+54
-53
lines changed

4 files changed

+54
-53
lines changed

CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
# 1.16.0-1 / Unreleased
1+
# 1.17.0-1 / Unreleased
22

3+
* [FEATURE] #59 Allow callbacks for `disabled` and `title` options
34
* [FEATURE] #116 `autoFocus` skips leading disabled entries.
45
* Use `.on()` / `.off()` syntax
56
* Add check for missing `.delegate` option

demo/index_local.html

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,22 @@
33
<head>
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.ui-contextmenu.js - Demo</title>
6+
<!--
7+
<link href="../node_modules/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet">
8+
<script src="../lib/jquery.js"></script>
9+
<script src="../lib/jquery-ui.custom.js"></script>
10+
-->
11+
<link href="../node_modules/jquery-ui-dist/jquery-ui.css" rel="stylesheet">
612

7-
<link rel="stylesheet" href="../node_modules/jquery-ui/themes/base/jquery.ui.all.css">
813
<script src="../node_modules/jquery/dist/jquery.js"></script>
9-
<script src="../node_modules/jquery-ui/ui/jquery-ui.js"></script>
10-
14+
<script src="../node_modules/jquery-ui-dist/jquery-ui.js"></script>
1115
<!-- Some custom library to enable 'taphold' events -->
12-
<script src="jquery-taphold/taphold.js" type="text/javascript"></script>
13-
14-
<!-- Custom library to add a dynamic themeroller switcher -->
15-
<script type="text/javascript" src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script>
16+
<script src="jquery-taphold/taphold.js"></script>
1617

17-
<script src="../jquery.ui-contextmenu.js" type="text/javascript"></script>
18+
<script src="../jquery.ui-contextmenu.js"></script>
1819

1920
<style type="text/css">
2021

21-
body{
22-
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
23-
font-size: .8em;
24-
/* Prevent tablets from selecting text on taphold, etc:
25-
Note:
26-
If only the potential menu trigger elements should be protected, simply
27-
use the 'preventSelect: true' option.
28-
But we disable it more globally for tablet PCs, because the whole line
29-
or paragraph will still be selected otherwise.
30-
*/
31-
-webkit-user-select: none;
32-
-khtml-user-select: none;
33-
-moz-user-select: none;
34-
-ms-user-select: none;
35-
user-select: none;
36-
}
37-
3822
.hasmenu, .hasmenu2 {
3923
border: 1px solid #008;
4024
margin: 3px;
@@ -61,28 +45,25 @@
6145
<script type="text/javascript">
6246
var CLIPBOARD = "";
6347
$(function(){
64-
/* Enable a themeroller theme-switching using a combobox. */
65-
$("#switcher").themeswitcher({
66-
jqueryuiversion: "1",
67-
imgpath: "../lib/Super-Theme-Switcher/images/",
68-
loadTheme: "Smoothness"
69-
});
7048

7149
/* Menu 1: init by passing an array of entries. */
7250

7351
$(document).contextmenu({
52+
autoFocus: true,
7453
delegate: ".hasmenu",
7554
preventContextMenuForPopup: true,
7655
preventSelect: true,
7756
taphold: true,
7857
menu: [
79-
{title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
58+
{title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors" },
8059
{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
8160
{title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
8261
{title: "----"},
8362
{title: "More", children: [
84-
{title: "Sub 1 (using callback)", action: function(event, ui) { alert("action callback sub1");} },
85-
{title: "Sub 2", cmd: "sub1"}
63+
{title: "Sub 1 (using callback)", cmd: "sub1", action: function(event, ui) { alert("action callback sub1");} },
64+
{title: "Sub 2", cmd: "sub2", disabled: function(){ return true; } },
65+
{title: "Sub 3", cmd: "sub3", disabled: function(){ return "hide"; } },
66+
{cmd: "sub4", title: function(){ return "Sub 4" + Date.now(); } }
8667
]}
8768
],
8869
// Handle menu selection to implement a fake-clipboard
@@ -107,9 +88,8 @@
10788

10889
// console.log("beforeOpen", event, ui, event.originalEvent.type);
10990
console.log("beforeOpen", event, ui);
110-
alert(JSON.stringify(extraData));
11191

112-
ui.menu.zIndex( $(event.target).zIndex() + 1);
92+
// ui.menu.zIndex( $(event.target).zIndex() + 1);
11393

11494
$(document)
11595
// .contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}])
@@ -175,13 +155,6 @@ <h1>jquery.ui-contextmenu.js</h1>
175155

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

178-
<div>
179-
<label for="switcher">Theme:</label> <div id="switcher"></div>
180-
<!--
181-
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
182-
-->
183-
</div>
184-
185158
<h3>Sample 1</h3>
186159
<ul>
187160
<li>Initialized using a command-array.

jquery.ui-contextmenu.js

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,9 @@ $.widget("moogle.contextmenu", {
257257
collision: "fit"
258258
}, posOption);
259259

260+
// Update entry statuses from callbacks
261+
this._updateEntries(this.$menu);
262+
260263
// Finally display the popup
261264
this.$menu
262265
.show() // required to fix positioning error
@@ -335,6 +338,29 @@ $.widget("moogle.contextmenu", {
335338
this._closeMenu();
336339
}
337340
},
341+
/* Apply status callbacks when menu is opened. */
342+
_updateEntries: function() {
343+
var self = this;
344+
345+
$.each(this.$menu.find(".ui-menu-item"), function(i, o) {
346+
var $entry = $(o),
347+
ui = { item: $entry, cmd: $entry.attr("data-command") },
348+
fn = $entry.data("disabledHandler"),
349+
res = fn ? fn(null, ui) : null;
350+
351+
// Evaluate `disabled()` callback
352+
if ( res != null ) {
353+
self.enableEntry(ui.cmd, !res);
354+
self.showEntry(ui.cmd, res !== "hide");
355+
}
356+
// Evaluate `title()` callback
357+
fn = $entry.data("titleHandler"),
358+
res = fn ? fn(null, ui) : null;
359+
if ( res != null ) {
360+
self.setEntry(ui.cmd, res);
361+
}
362+
});
363+
},
338364
/** Enable or disable the menu command. */
339365
enableEntry: function(cmd, flag) {
340366
this._getMenuEntry(cmd).toggleClass("ui-state-disabled", (flag === false));
@@ -425,9 +451,6 @@ $.extend($.moogle.contextmenu, {
425451
} else if ( isLTE111 ) {
426452
// jQuery UI Menu 1.11 preferes to avoid `<a>` tags
427453
$parentLi.html("" + entry.title);
428-
if ( $.isFunction(entry.action) ) {
429-
$parentLi.data("actionHandler", entry.action);
430-
}
431454
if ( entry.uiIcon ) {
432455
$parentLi
433456
.append($("<span class='ui-icon' />")
@@ -443,10 +466,13 @@ $.extend($.moogle.contextmenu, {
443466
$wrapper.append($("<span class='ui-icon' />").addClass(entry.uiIcon));
444467
}
445468
}
446-
if ( $.isFunction(entry.action) ) {
447-
$parentLi.data("actionHandler", entry.action);
448-
}
449-
if ( entry.disabled ) {
469+
$.each( [ "action", "disabled", "title" ], function(i, attr) {
470+
if ( $.isFunction(entry[attr]) ) {
471+
$parentLi.data(attr + "Handler", entry[attr]);
472+
// console.log("handler", $parentLi, attr);
473+
}
474+
});
475+
if ( entry.disabled === true ) {
450476
$parentLi.addClass("ui-state-disabled");
451477
}
452478
if ( entry.isHeader ) {

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
"grunt-exec": "^1.0.0",
5353
"grunt-jscs": "^2.7.0",
5454
"grunt-saucelabs": "^8.1.0",
55-
"grunt-yabs": "^1.0.0"
55+
"grunt-yabs": "^1.0.0",
56+
"jquery-ui-dist": "^1.12.1"
5657
},
5758
"scripts": {
5859
"test": "grunt ci --verbose"
@@ -68,4 +69,4 @@
6869
]
6970
}
7071
]
71-
}
72+
}

0 commit comments

Comments
 (0)