, , ')\n .attr('name', 'context-menu-input-' + key)\n .val(item.value || '')\n .appendTo($label);\n\n if (item.height) {\n $input.height(item.height);\n }\n break;\n\n case 'checkbox':\n $input = $('')\n .attr('name', 'context-menu-input-' + key)\n .val(item.value || '')\n .prop('checked', !!item.selected)\n .prependTo($label);\n break;\n\n case 'radio':\n $input = $('')\n .attr('name', 'context-menu-input-' + item.radio)\n .val(item.value || '')\n .prop('checked', !!item.selected)\n .prependTo($label);\n break;\n\n case 'select':\n $input = $('')\n .attr('name', 'context-menu-input-' + key)\n .appendTo($label);\n if (item.options) {\n $.each(item.options, function (value, text) {\n $('').val(value).text(text).appendTo($input);\n });\n $input.val(item.selected);\n }\n break;\n\n case 'sub':\n createNameNode(item).appendTo($t);\n item.appendTo = item.$node;\n $t.data('contextMenu', item).addClass('context-menu-submenu');\n item.callback = null;\n\n // If item contains items, and this is a promise, we should create it later\n // check if subitems is of type promise. If it is a promise we need to create\n // it later, after promise has been resolved.\n if ('function' === typeof item.items.then) {\n // probably a promise, process it, when completed it will create the sub menu's.\n op.processPromises(item, root, item.items);\n } else {\n // normal submenu.\n op.create(item, root);\n }\n break;\n\n case 'html':\n $(item.html).appendTo($t);\n break;\n\n default:\n $.each([opt, root], function (i, k) {\n k.commands[key] = item;\n // Overwrite only if undefined or the item is appended to the root. This so it\n // doesn't overwrite callbacks of root elements if the name is the same.\n if ($.isFunction(item.callback) && (typeof k.callbacks[key] === 'undefined' || typeof opt.type === 'undefined')) {\n k.callbacks[key] = item.callback;\n }\n });\n createNameNode(item).appendTo($t);\n break;\n }\n\n // disable key listener in \n if (item.type && item.type !== 'sub' && item.type !== 'html' && item.type !== 'cm_seperator') {\n $input\n .on('focus', handle.focusInput)\n .on('blur', handle.blurInput);\n\n if (item.events) {\n $input.on(item.events, opt);\n }\n }\n\n // add icons\n if (item.icon) {\n if ($.isFunction(item.icon)) {\n item._icon = item.icon.call(this, this, $t, key, item);\n } else {\n if (typeof(item.icon) === 'string' && item.icon.substring(0, 3) === 'fa-') {\n // to enable font awesome\n item._icon = root.classNames.icon + ' ' + root.classNames.icon + '--fa fa ' + item.icon;\n } else {\n item._icon = root.classNames.icon + ' ' + root.classNames.icon + '-' + item.icon;\n }\n }\n $t.addClass(item._icon);\n }\n }\n\n // cache contained elements\n item.$input = $input;\n item.$label = $label;\n\n // attach item to menu\n $t.appendTo(opt.$menu);\n\n // Disable text selection\n if (!opt.hasTypes && $.support.eventSelectstart) {\n // browsers support user-select: none,\n // IE has a special event for text-selection\n // browsers supporting neither will not be preventing text-selection\n $t.on('selectstart.disableTextSelect', handle.abortevent);\n }\n });\n // attach contextMenu to
(to bypass any possible overflow:hidden issues on parents of the trigger element)\n if (!opt.$node) {\n opt.$menu.css('display', 'none').addClass('context-menu-root');\n }\n opt.$menu.appendTo(opt.appendTo || document.body);\n },\n resize: function ($menu, nested) {\n var domMenu;\n // determine widths of submenus, as CSS won't grow them automatically\n // position:absolute within position:absolute; min-width:100; max-width:200; results in width: 100;\n // kinda sucks hard...\n\n // determine width of absolutely positioned element\n $menu.css({position: 'absolute', display: 'block'});\n // don't apply yet, because that would break nested elements' widths\n $menu.data('width',\n (domMenu = $menu.get(0)).getBoundingClientRect ?\n Math.ceil(domMenu.getBoundingClientRect().width) :\n $menu.outerWidth() + 1); // outerWidth() returns rounded pixels\n // reset styles so they allow nested elements to grow/shrink naturally\n $menu.css({\n position: 'static',\n minWidth: '0px',\n maxWidth: '100000px'\n });\n // identify width of nested menus\n $menu.find('> li > ul').each(function () {\n op.resize($(this), true);\n });\n // reset and apply changes in the end because nested\n // elements' widths wouldn't be calculatable otherwise\n if (!nested) {\n $menu.find('ul').addBack().css({\n position: '',\n display: '',\n minWidth: '',\n maxWidth: ''\n }).outerWidth(function () {\n return $(this).data('width');\n });\n }\n },\n update: function (opt, root) {\n var $trigger = this;\n if (typeof root === 'undefined') {\n root = opt;\n op.resize(opt.$menu);\n }\n // re-check disabled for each item\n opt.$menu.children().each(function () {\n var $item = $(this),\n key = $item.data('contextMenuKey'),\n item = opt.items[key],\n disabled = ($.isFunction(item.disabled) && item.disabled.call($trigger, key, root)) || item.disabled === true,\n visible;\n if ($.isFunction(item.visible)) {\n visible = item.visible.call($trigger, key, root);\n } else if (typeof item.visible !== 'undefined') {\n visible = item.visible === true;\n } else {\n visible = true;\n }\n $item[visible ? 'show' : 'hide']();\n\n // dis- / enable item\n $item[disabled ? 'addClass' : 'removeClass'](root.classNames.disabled);\n\n if ($.isFunction(item.icon)) {\n $item.removeClass(item._icon);\n item._icon = item.icon.call(this, $trigger, $item, key, item);\n $item.addClass(item._icon);\n }\n\n if (item.type) {\n // dis- / enable input elements\n $item.find('input, select, textarea').prop('disabled', disabled);\n\n // update input states\n switch (item.type) {\n case 'text':\n case 'textarea':\n item.$input.val(item.value || '');\n break;\n\n case 'checkbox':\n case 'radio':\n item.$input.val(item.value || '').prop('checked', !!item.selected);\n break;\n\n case 'select':\n item.$input.val((item.selected === 0 ? \"0\" : item.selected) || '');\n break;\n }\n }\n\n if (item.$menu) {\n // update sub-menu\n op.update.call($trigger, item, root);\n }\n });\n },\n layer: function (opt, zIndex) {\n // add transparent layer for click area\n // filter and background for Internet Explorer, Issue #23\n var $layer = opt.$layer = $('')\n .css({\n height: $win.height(),\n width: $win.width(),\n display: 'block',\n position: 'fixed',\n 'z-index': zIndex,\n top: 0,\n left: 0,\n opacity: 0,\n filter: 'alpha(opacity=0)',\n 'background-color': '#000'\n })\n .data('contextMenuRoot', opt)\n .insertBefore(this)\n .on('contextmenu', handle.abortevent)\n .on('mousedown', handle.layerClick);\n\n // IE6 doesn't know position:fixed;\n if (typeof document.body.style.maxWidth === 'undefined') { // IE6 doesn't support maxWidth\n $layer.css({\n 'position': 'absolute',\n 'height': $(document).height()\n });\n }\n\n return $layer;\n },\n processPromises: function (opt, root, promise) {\n // Start\n opt.$node.addClass(root.classNames.iconLoadingClass);\n\n function completedPromise(opt, root, items) {\n // Completed promise (dev called promise.resolve). We now have a list of items which can\n // be used to create the rest of the context menu.\n if (typeof items === 'undefined') {\n // Null result, dev should have checked\n errorPromise(undefined);//own error object\n }\n finishPromiseProcess(opt, root, items);\n }\n\n function errorPromise(opt, root, errorItem) {\n // User called promise.reject() with an error item, if not, provide own error item.\n if (typeof errorItem === 'undefined') {\n errorItem = {\n \"error\": {\n name: \"No items and no error item\",\n icon: \"context-menu-icon context-menu-icon-quit\"\n }\n };\n if (window.console) {\n (console.error || console.log).call(console, 'When you reject a promise, provide an \"items\" object, equal to normal sub-menu items');\n }\n } else if (typeof errorItem === 'string') {\n errorItem = {\"error\": {name: errorItem}};\n }\n finishPromiseProcess(opt, root, errorItem);\n }\n\n function finishPromiseProcess(opt, root, items) {\n if (typeof root.$menu === 'undefined' || !root.$menu.is(':visible')) {\n return;\n }\n opt.$node.removeClass(root.classNames.iconLoadingClass);\n opt.items = items;\n op.create(opt, root, true); // Create submenu\n op.update(opt, root); // Correctly update position if user is already hovered over menu item\n root.positionSubmenu.call(opt.$node, opt.$menu); // positionSubmenu, will only do anything if user already hovered over menu item that just got new subitems.\n }\n\n // Wait for promise completion. .then(success, error, notify) (we don't track notify). Bind the opt\n // and root to avoid scope problems\n promise.then(completedPromise.bind(this, opt, root), errorPromise.bind(this, opt, root));\n },\n // operation that will run after contextMenu showed on screen\n activated: function(opt){\n var $menu = opt.$menu;\n var $menuOffset = $menu.offset();\n var winHeight = $(window).height();\n var winScrollTop = $(window).scrollTop();\n var menuHeight = $menu.height();\n if(menuHeight > winHeight){\n $menu.css({\n 'height' : winHeight + 'px',\n 'overflow-x': 'hidden',\n 'overflow-y': 'auto',\n 'top': winScrollTop + 'px'\n });\n } else if(($menuOffset.top < winScrollTop) || ($menuOffset.top + menuHeight > winScrollTop + winHeight)){\n $menu.css({\n 'top': '0px'\n });\n }\n }\n };\n\n // split accesskey according to http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#assigned-access-key\n function splitAccesskey(val) {\n var t = val.split(/\\s+/);\n var keys = [];\n\n for (var i = 0, k; k = t[i]; i++) {\n k = k.charAt(0).toUpperCase(); // first character only\n // theoretically non-accessible characters should be ignored, but different systems, different keyboard layouts, ... screw it.\n // a map to look up already used access keys would be nice\n keys.push(k);\n }\n\n return keys;\n }\n\n// handle contextMenu triggers\n $.fn.contextMenu = function (operation) {\n var $t = this, $o = operation;\n if (this.length > 0) { // this is not a build on demand menu\n if (typeof operation === 'undefined') {\n this.first().trigger('contextmenu');\n } else if (typeof operation.x !== 'undefined' && typeof operation.y !== 'undefined') {\n this.first().trigger($.Event('contextmenu', {\n pageX: operation.x,\n pageY: operation.y,\n mouseButton: operation.button\n }));\n } else if (operation === 'hide') {\n var $menu = this.first().data('contextMenu') ? this.first().data('contextMenu').$menu : null;\n if ($menu) {\n $menu.trigger('contextmenu:hide');\n }\n } else if (operation === 'destroy') {\n $.contextMenu('destroy', {context: this});\n } else if ($.isPlainObject(operation)) {\n operation.context = this;\n $.contextMenu('create', operation);\n } else if (operation) {\n this.removeClass('context-menu-disabled');\n } else if (!operation) {\n this.addClass('context-menu-disabled');\n }\n } else {\n $.each(menus, function () {\n if (this.selector === $t.selector) {\n $o.data = this;\n\n $.extend($o.data, {trigger: 'demand'});\n }\n });\n\n handle.contextmenu.call($o.target, $o);\n }\n\n return this;\n };\n\n // manage contextMenu instances\n $.contextMenu = function (operation, options) {\n if (typeof operation !== 'string') {\n options = operation;\n operation = 'create';\n }\n\n if (typeof options === 'string') {\n options = {selector: options};\n } else if (typeof options === 'undefined') {\n options = {};\n }\n\n // merge with default options\n var o = $.extend(true, {}, defaults, options || {});\n var $document = $(document);\n var $context = $document;\n var _hasContext = false;\n\n if (!o.context || !o.context.length) {\n o.context = document;\n } else {\n // you never know what they throw at you...\n $context = $(o.context).first();\n o.context = $context.get(0);\n _hasContext = !$(o.context).is(document);\n }\n\n switch (operation) {\n\n case 'update':\n // Updates visibility and such\n if(_hasContext){\n op.update($context);\n } else {\n for(var menu in menus){\n if(menus.hasOwnProperty(menu)){\n op.update(menus[menu]);\n }\n }\n }\n break;\n\n case 'create':\n // no selector no joy\n if (!o.selector) {\n throw new Error('No selector specified');\n }\n // make sure internal classes are not bound to\n if (o.selector.match(/.context-menu-(list|item|input)($|\\s)/)) {\n throw new Error('Cannot bind to selector \"' + o.selector + '\" as it contains a reserved className');\n }\n if (!o.build && (!o.items || $.isEmptyObject(o.items))) {\n throw new Error('No Items specified');\n }\n counter++;\n o.ns = '.contextMenu' + counter;\n if (!_hasContext) {\n namespaces[o.selector] = o.ns;\n }\n menus[o.ns] = o;\n\n // default to right click\n if (!o.trigger) {\n o.trigger = 'right';\n }\n\n if (!initialized) {\n var itemClick = o.itemClickEvent === 'click' ? 'click.contextMenu' : 'mouseup.contextMenu';\n var contextMenuItemObj = {\n // 'mouseup.contextMenu': handle.itemClick,\n // 'click.contextMenu': handle.itemClick,\n 'contextmenu:focus.contextMenu': handle.focusItem,\n 'contextmenu:blur.contextMenu': handle.blurItem,\n 'contextmenu.contextMenu': handle.abortevent,\n 'mouseenter.contextMenu': handle.itemMouseenter,\n 'mouseleave.contextMenu': handle.itemMouseleave\n };\n contextMenuItemObj[itemClick] = handle.itemClick;\n // make sure item click is registered first\n $document\n .on({\n 'contextmenu:hide.contextMenu': handle.hideMenu,\n 'prevcommand.contextMenu': handle.prevItem,\n 'nextcommand.contextMenu': handle.nextItem,\n 'contextmenu.contextMenu': handle.abortevent,\n 'mouseenter.contextMenu': handle.menuMouseenter,\n 'mouseleave.contextMenu': handle.menuMouseleave\n }, '.context-menu-list')\n .on('mouseup.contextMenu', '.context-menu-input', handle.inputClick)\n .on(contextMenuItemObj, '.context-menu-item');\n\n initialized = true;\n }\n\n // engage native contextmenu event\n $context\n .on('contextmenu' + o.ns, o.selector, o, handle.contextmenu);\n\n if (_hasContext) {\n // add remove hook, just in case\n $context.on('remove' + o.ns, function () {\n $(this).contextMenu('destroy');\n });\n }\n\n switch (o.trigger) {\n case 'hover':\n $context\n .on('mouseenter' + o.ns, o.selector, o, handle.mouseenter)\n .on('mouseleave' + o.ns, o.selector, o, handle.mouseleave);\n break;\n\n case 'left':\n $context.on('click' + o.ns, o.selector, o, handle.click);\n break;\n\t\t\t\t case 'touchstart':\n $context.on('touchstart' + o.ns, o.selector, o, handle.click);\n break;\n /*\n default:\n // http://www.quirksmode.org/dom/events/contextmenu.html\n $document\n .on('mousedown' + o.ns, o.selector, o, handle.mousedown)\n .on('mouseup' + o.ns, o.selector, o, handle.mouseup);\n break;\n */\n }\n\n // create menu\n if (!o.build) {\n op.create(o);\n }\n break;\n\n case 'destroy':\n var $visibleMenu;\n if (_hasContext) {\n // get proper options\n var context = o.context;\n $.each(menus, function (ns, o) {\n\n if (!o) {\n return true;\n }\n\n // Is this menu equest to the context called from\n if (!$(context).is(o.selector)) {\n return true;\n }\n\n $visibleMenu = $('.context-menu-list').filter(':visible');\n if ($visibleMenu.length && $visibleMenu.data().contextMenuRoot.$trigger.is($(o.context).find(o.selector))) {\n $visibleMenu.trigger('contextmenu:hide', {force: true});\n }\n\n try {\n if (menus[o.ns].$menu) {\n menus[o.ns].$menu.remove();\n }\n\n delete menus[o.ns];\n } catch (e) {\n menus[o.ns] = null;\n }\n\n $(o.context).off(o.ns);\n\n return true;\n });\n } else if (!o.selector) {\n $document.off('.contextMenu .contextMenuAutoHide');\n $.each(menus, function (ns, o) {\n $(o.context).off(o.ns);\n });\n\n namespaces = {};\n menus = {};\n counter = 0;\n initialized = false;\n\n $('#context-menu-layer, .context-menu-list').remove();\n } else if (namespaces[o.selector]) {\n $visibleMenu = $('.context-menu-list').filter(':visible');\n if ($visibleMenu.length && $visibleMenu.data().contextMenuRoot.$trigger.is(o.selector)) {\n $visibleMenu.trigger('contextmenu:hide', {force: true});\n }\n\n try {\n if (menus[namespaces[o.selector]].$menu) {\n menus[namespaces[o.selector]].$menu.remove();\n }\n\n delete menus[namespaces[o.selector]];\n } catch (e) {\n menus[namespaces[o.selector]] = null;\n }\n\n $document.off(namespaces[o.selector]);\n }\n break;\n\n case 'html5':\n // if and