, , <select> and of course <menu>.\r\n * Everything else will be imported as an html node, which is not interfaced with contextMenu.\r\n */\r\n\r\n // http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#concept-command\r\n switch (nodeName) {\r\n // http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-menu-element\r\n case 'menu':\r\n item = {name: $node.attr('label'), items: {}};\r\n counter = menuChildren(item.items, $node.children(), counter);\r\n break;\r\n\r\n // http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command\r\n case 'a':\r\n // http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command\r\n case 'button':\r\n item = {\r\n name: $node.text(),\r\n disabled: !!$node.attr('disabled'),\r\n callback: (function () {\r\n return function () {\r\n $node.click();\r\n };\r\n })()\r\n };\r\n break;\r\n\r\n // http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-command-element-to-define-a-command\r\n\r\n case 'menuitem':\r\n case 'command':\r\n switch ($node.attr('type')) {\r\n case undefined:\r\n case 'command':\r\n case 'menuitem':\r\n item = {\r\n name: $node.attr('label'),\r\n disabled: !!$node.attr('disabled'),\r\n icon: $node.attr('icon'),\r\n callback: (function () {\r\n return function () {\r\n $node.click();\r\n };\r\n })()\r\n };\r\n break;\r\n\r\n case 'checkbox':\r\n item = {\r\n type: 'checkbox',\r\n disabled: !!$node.attr('disabled'),\r\n name: $node.attr('label'),\r\n selected: !!$node.attr('checked')\r\n };\r\n break;\r\n case 'radio':\r\n item = {\r\n type: 'radio',\r\n disabled: !!$node.attr('disabled'),\r\n name: $node.attr('label'),\r\n radio: $node.attr('radiogroup'),\r\n value: $node.attr('id'),\r\n selected: !!$node.attr('checked')\r\n };\r\n break;\r\n\r\n default:\r\n item = undefined;\r\n }\r\n break;\r\n\r\n case 'hr':\r\n item = '-------';\r\n break;\r\n\r\n case 'input':\r\n switch ($node.attr('type')) {\r\n case 'text':\r\n item = {\r\n type: 'text',\r\n name: label || inputLabel(node),\r\n disabled: !!$node.attr('disabled'),\r\n value: $node.val()\r\n };\r\n break;\r\n\r\n case 'checkbox':\r\n item = {\r\n type: 'checkbox',\r\n name: label || inputLabel(node),\r\n disabled: !!$node.attr('disabled'),\r\n selected: !!$node.attr('checked')\r\n };\r\n break;\r\n\r\n case 'radio':\r\n item = {\r\n type: 'radio',\r\n name: label || inputLabel(node),\r\n disabled: !!$node.attr('disabled'),\r\n radio: !!$node.attr('name'),\r\n value: $node.val(),\r\n selected: !!$node.attr('checked')\r\n };\r\n break;\r\n\r\n default:\r\n item = undefined;\r\n break;\r\n }\r\n break;\r\n\r\n case 'select':\r\n item = {\r\n type: 'select',\r\n name: label || inputLabel(node),\r\n disabled: !!$node.attr('disabled'),\r\n selected: $node.val(),\r\n options: {}\r\n };\r\n $node.children().each(function () {\r\n item.options[this.value] = $(this).text();\r\n });\r\n break;\r\n\r\n case 'textarea':\r\n item = {\r\n type: 'textarea',\r\n name: label || inputLabel(node),\r\n disabled: !!$node.attr('disabled'),\r\n value: $node.val()\r\n };\r\n break;\r\n\r\n case 'label':\r\n break;\r\n\r\n default:\r\n item = {type: 'html', html: $node.clone(true)};\r\n break;\r\n }\r\n\r\n if (item) {\r\n counter++;\r\n items['key' + counter] = item;\r\n }\r\n });\r\n\r\n return counter;\r\n }\r\n\r\n// convert html5 menu\r\n $.contextMenu.fromMenu = function (element) {\r\n var $this = $(element),\r\n items = {};\r\n\r\n menuChildren(items, $this.children());\r\n\r\n return items;\r\n };\r\n\r\n// make defaults accessible\r\n $.contextMenu.defaults = defaults;\r\n $.contextMenu.types = types;\r\n// export internal functions - undocumented, for hacking only!\r\n $.contextMenu.handle = handle;\r\n $.contextMenu.op = op;\r\n $.contextMenu.menus = menus;\r\n\r\n\r\n});\r\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/package.json b/package.json index 0d3c9bc4..97396055 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { "name": "jquery-contextmenu", "title": "jQuery.contextMenu()", - "version": "1.10.1", + "version": "1.11.0", "author": { "name": "Björn Brala", "url": "http://www.swis.nl" }, "license": "MIT", "peerDependencies": { - "jquery": "^1.8.2" + "jquery": ">=1.8.2" }, "devDependencies": { "dalek-browser-chrome": "0.0.11", diff --git a/src/jquery.contextMenu.js b/src/jquery.contextMenu.js old mode 100755 new mode 100644 index 35180892..101002fa --- a/src/jquery.contextMenu.js +++ b/src/jquery.contextMenu.js @@ -269,6 +269,14 @@ return; } + // Let the current contextmenu decide if it should show or not based on its own trigger settings + if (e.mouseButton !== undefined && e.data) { + if (!(e.data.trigger == 'left' && e.mouseButton === 0) && !(e.data.trigger == 'right' && e.mouseButton === 2)) { + // Mouse click is not valid. + return; + } + } + // abort event if menu is visible for this trigger if ($this.hasClass('context-menu-active')) { return; @@ -324,7 +332,11 @@ } if (showMenu) { // show menu - op.show.call($this, e.data, e.pageX, e.pageY); + var menuContainer = (e.data.appendTo === null ? $('body') : $(e.data.appendTo)); + var srcElement = e.target || e.srcElement || e.originalTarget; + op.show.call($this, e.data, + $(srcElement).offset().left - menuContainer.offset().left + e.offsetX, + $(srcElement).offset().top - menuContainer.offset().top + e.offsetY); } } }, @@ -431,7 +443,7 @@ var triggerAction = ((root.trigger === 'left' && button === 0) || (root.trigger === 'right' && button === 2)); // find the element that would've been clicked, wasn't the layer in the way - if (document.elementFromPoint) { + if (document.elementFromPoint && root.$layer) { root.$layer.hide(); target = document.elementFromPoint(x - $win.scrollLeft(), y - $win.scrollTop()); root.$layer.show(); @@ -468,7 +480,7 @@ if (target && triggerAction) { root.$trigger.one('contextmenu:hidden', function () { - $(target).contextMenu({x: x, y: y}); + $(target).contextMenu({ x: x, y: y, button: button }); }); } @@ -491,7 +503,30 @@ if ($currentTrigger) { opt = $currentTrigger.data('contextMenu') || {}; } - + // If the trigger happen on a element that are above the contextmenu do this + if (opt.zIndex === undefined) { + opt.zIndex = 0; + } + var targetZIndex = 0; + var getZIndexOfTriggerTarget = function (target) { + if (target.style.zIndex !== '') { + targetZIndex = target.style.zIndex; + } else { + if (target.offsetParent !== null && target.offsetParent !== undefined) { + getZIndexOfTriggerTarget(target.offsetParent); + } + else if (target.parentElement !== null && target.parentElement !== undefined) { + getZIndexOfTriggerTarget(target.parentElement); + } + } + }; + getZIndexOfTriggerTarget(e.target); + // If targetZIndex is heigher then opt.zIndex dont progress any futher. + // This is used to make sure that if you are using a dialog with a input / textarea / contenteditable div + // and its above the contextmenu it wont steal keys events + if (targetZIndex > opt.zIndex) { + return; + } switch (e.keyCode) { case 9: case 38: // up @@ -889,7 +924,12 @@ // make sure we're in front if (opt.zIndex) { - css.zIndex = zindex($trigger) + opt.zIndex; + var additionalZValue = opt.zIndex; + // If opt.zIndex is a function, call the function to get the right zIndex. + if (typeof opt.zIndex === 'function') { + additionalZValue = opt.zIndex.call($trigger, opt); + } + css.zIndex = zindex($trigger) + additionalZValue; } // add layer @@ -1013,6 +1053,25 @@ root.accesskeys || (root.accesskeys = {}); + function createNameNode(item) { + var $name = $('<span></span>'); + if (item._accesskey) { + if (item._beforeAccesskey) { + $name.append(document.createTextNode(item._beforeAccesskey)); + } + $('<span></span>') + .addClass('context-menu-accesskey') + .text(item._accesskey) + .appendTo($name); + if (item._afterAccesskey) { + $name.append(document.createTextNode(item._afterAccesskey)); + } + } else { + $name.text(item.name); + } + return $name; + } + // create contextMenu items $.each(opt.items, function (key, item) { var $t = $('<li class="context-menu-item"></li>').addClass(item.className || ''), @@ -1042,7 +1101,12 @@ for (var i = 0, ak; ak = aks[i]; i++) { if (!root.accesskeys[ak]) { root.accesskeys[ak] = item; - item._name = item.name.replace(new RegExp('(' + ak + ')', 'i'), '<span class="context-menu-accesskey">$1</span>'); + var matched = item.name.match(new RegExp('^(.*?)(' + ak + ')(.*)$', 'i')); + if (matched) { + item._beforeAccesskey = matched[1]; + item._accesskey = matched[2]; + item._afterAccesskey = matched[3]; + } break; } } @@ -1066,7 +1130,8 @@ $t.addClass('context-menu-html ' + root.classNames.notSelectable); } else if (item.type) { $label = $('<label></label>').appendTo($t); - $('<span></span>').html(item._name || item.name).appendTo($label); + createNameNode(item).appendTo($label); + $t.addClass('context-menu-input'); opt.hasTypes = true; $.each([opt, root], function (i, k) { @@ -1128,7 +1193,8 @@ break; case 'sub': - $('<span></span>').html(item._name || item.name).appendTo($t); + createNameNode(item).appendTo($t); + item.appendTo = item.$node; op.create(item, root); $t.data('contextMenu', item).addClass('context-menu-submenu'); @@ -1146,7 +1212,7 @@ k.callbacks[key] = item.callback; } }); - $('<span></span>').html(item._name || item.name || '').appendTo($t); + createNameNode(item).appendTo($t); break; } @@ -1164,7 +1230,7 @@ // add icons if (item.icon) { if ($.isFunction(item.icon)) { - item._icon = item.icon.call(this, $t, key, item); + item._icon = item.icon.call(this, this, $t, key, item); } else { item._icon = root.classNames.icon + ' ' + root.classNames.icon + '-' + item.icon; @@ -1202,7 +1268,7 @@ // determine width of absolutely positioned element $menu.css({position: 'absolute', display: 'block'}); // don't apply yet, because that would break nested elements' widths - $menu.data('width', Math.ceil($menu.width())); + $menu.data('width', Math.ceil($menu.outerWidth())); // reset styles so they allow nested elements to grow/shrink naturally $menu.css({ position: 'static', @@ -1253,7 +1319,7 @@ if ($.isFunction(item.icon)) { $item.removeClass(item._icon); - item._icon = item.icon.call(this, $trigger, key, item); + item._icon = item.icon.call(this, $trigger, $item, key, item); $item.addClass(item._icon); } @@ -1329,7 +1395,7 @@ if (operation === undefined) { this.first().trigger('contextmenu'); } else if (operation.x !== undefined && operation.y !== undefined) { - this.first().trigger($.Event('contextmenu', {pageX: operation.x, pageY: operation.y})); + this.first().trigger($.Event('contextmenu', { pageX: operation.x, pageY: operation.y, mouseButton: operation.button })); } else if (operation === 'hide') { var $menu = this.first().data('contextMenu') ? this.first().data('contextMenu').$menu : null; $menu && $menu.trigger('contextmenu:hide');