, or a definition hash
- position: null, // popup positon
- preventContextMenuForPopup: false, // prevent opening the browser's system context menu on menu entries
- preventSelect: false, // disable text selection of target
- show: { effect: "slideDown", duration: "fast"},
- taphold: false, // open menu on taphold events (requires external plugins)
- uiMenuOptions: {}, // Additional options, used when UI Menu is created
- // Events:
- beforeOpen: $.noop, // menu about to open; return `false` to prevent opening
- blur: $.noop, // menu option lost focus
- close: $.noop, // menu was closed
- create: $.noop, // menu was initialized
- createMenu: $.noop, // menu was initialized (original UI Menu)
- focus: $.noop, // menu option got focus
- open: $.noop, // menu was opened
- select: $.noop // menu option was selected; return `false` to prevent closing
- },
- /** Constructor */
- _create: function () {
- var cssText, eventNames, targetId,
- opts = this.options;
+"use strict";
- this.$headStyle = null;
- this.$menu = null;
- this.menuIsTemp = false;
- this.currentTarget = null;
+var supportSelectstart = "onselectstart" in document.createElement("div"),
+ match, uiVersion;
- if(opts.preventSelect){
- // Create a global style for all potential menu targets
- // If the contextmenu was bound to `document`, we apply the
- // selector relative to the tag instead
- targetId = ($(this.element).is(document) ? $("body") : this.element).uniqueId().attr("id");
- cssText = "#" + targetId + " " + opts.delegate + " { " +
- "-webkit-user-select: none; " +
- "-khtml-user-select: none; " +
- "-moz-user-select: none; " +
- "-ms-user-select: none; " +
- "user-select: none; " +
- "}";
- this.$headStyle = $("
")
- .prop("type", "text/css")
- .appendTo("head");
+$.widget("moogle.contextmenu", {
+ version: "@VERSION",
+ options: {
+ autoTrigger: true, // open menu on browser's `contextmenu` event
+ delegate: null, // selector
+ hide: { effect: "fadeOut", duration: "fast" },
+ ignoreParentSelect: true, // Don't trigger 'select' for sub-menu parents
+ menu: null, // selector or jQuery pointing to
, or a definition hash
+ position: null, // popup positon
+ preventContextMenuForPopup: false, // prevent opening the browser's system
+ // context menu on menu entries
+ preventSelect: false, // disable text selection of target
+ show: { effect: "slideDown", duration: "fast" },
+ taphold: false, // open menu on taphold events (requires external plugins)
+ uiMenuOptions: {}, // Additional options, used when UI Menu is created
+ // Events:
+ beforeOpen: $.noop, // menu about to open; return `false` to prevent opening
+ blur: $.noop, // menu option lost focus
+ close: $.noop, // menu was closed
+ create: $.noop, // menu was initialized
+ createMenu: $.noop, // menu was initialized (original UI Menu)
+ focus: $.noop, // menu option got focus
+ open: $.noop, // menu was opened
+ select: $.noop // menu option was selected; return `false` to prevent closing
+ },
+ /** Constructor */
+ _create: function() {
+ var cssText, eventNames, targetId,
+ opts = this.options;
- try {
- this.$headStyle.html(cssText);
- } catch( e ) {
- // issue #47: fix for IE 6-8
- this.$headStyle[0].styleSheet.cssText = cssText;
- }
+ this.$headStyle = null;
+ this.$menu = null;
+ this.menuIsTemp = false;
+ this.currentTarget = null;
- // TODO: the selectstart is not supported by FF?
- if(supportSelectstart){
- this.element.delegate(opts.delegate, "selectstart" + this.eventNamespace, function(event){
- event.preventDefault();
- });
- }
- }
- this._createUiMenu(opts.menu);
+ if (opts.preventSelect) {
+ // Create a global style for all potential menu targets
+ // If the contextmenu was bound to `document`, we apply the
+ // selector relative to the tag instead
+ targetId = ($(this.element).is(document) ? $("body")
+ : this.element).uniqueId().attr("id");
+ cssText = "#" + targetId + " " + opts.delegate + " { " +
+ "-webkit-user-select: none; " +
+ "-khtml-user-select: none; " +
+ "-moz-user-select: none; " +
+ "-ms-user-select: none; " +
+ "user-select: none; " +
+ "}";
+ this.$headStyle = $("")
+ .prop("type", "text/css")
+ .appendTo("head");
- eventNames = "contextmenu" + this.eventNamespace;
- if(opts.taphold){
- eventNames += " taphold" + this.eventNamespace;
+ try {
+ this.$headStyle.html(cssText);
+ } catch ( e ) {
+ // issue #47: fix for IE 6-8
+ this.$headStyle[0].styleSheet.cssText = cssText;
}
- this.element.delegate(opts.delegate, eventNames, $.proxy(this._openMenu, this));
- },
- /** Destructor, called on $().contextmenu("destroy"). */
- _destroy: function(){
- this.element.undelegate(this.eventNamespace);
+ // TODO: the selectstart is not supported by FF?
+ if (supportSelectstart) {
+ this.element.delegate(opts.delegate, "selectstart" + this.eventNamespace,
+ function(event) {
+ event.preventDefault();
+ });
+ }
+ }
+ this._createUiMenu(opts.menu);
- this._createUiMenu(null);
+ eventNames = "contextmenu" + this.eventNamespace;
+ if (opts.taphold) {
+ eventNames += " taphold" + this.eventNamespace;
+ }
+ this.element.delegate(opts.delegate, eventNames, $.proxy(this._openMenu, this));
+ },
+ /** Destructor, called on $().contextmenu("destroy"). */
+ _destroy: function() {
+ this.element.undelegate(this.eventNamespace);
- if(this.$headStyle){
- this.$headStyle.remove();
- this.$headStyle = null;
- }
- },
- /** (Re)Create jQuery UI Menu. */
- _createUiMenu: function(menuDef){
- var ct;
- // Remove temporary
if any
- if(this.isOpen()){
- ct = this.currentTarget; // #58: 'replaceMenu' in beforeOpen causing select: to lose ui.target
- // close without animation, to force async mode
- this._closeMenu(true);
- this.currentTarget = ct;
- }
+ this._createUiMenu(null);
- if(this.menuIsTemp){
- this.$menu.remove(); // this will also destroy ui.menu
- } else if(this.$menu){
- this.$menu.menu("destroy").hide();
- }
- this.$menu = null;
- this.menuIsTemp = false;
- // If a menu definition array was passed, create a hidden
if any
+ if (this.isOpen()) {
+ // #58: 'replaceMenu' in beforeOpen causing select: to lose ui.target
+ ct = this.currentTarget;
+ // close without animation, to force async mode
+ this._closeMenu(true);
+ this.currentTarget = ct;
+ }
+
+ if (this.menuIsTemp) {
+ this.$menu.remove(); // this will also destroy ui.menu
+ } else if (this.$menu) {
+ this.$menu.menu("destroy").hide();
+ }
+ this.$menu = null;
+ this.menuIsTemp = false;
+ // If a menu definition array was passed, create a hidden
+ // and generate the structure now
+ if ( !menuDef ) {
+ return;
+ } else if ($.isArray(menuDef)) {
+ this.$menu = $.moogle.contextmenu.createMenuMarkup(menuDef);
+ this.menuIsTemp = true;
+ }else if ( typeof menuDef === "string" ) {
+ this.$menu = $(menuDef);
+ } else {
+ this.$menu = menuDef;
+ }
+ // Create - but hide - the jQuery UI Menu widget
+ this.$menu
+ .hide()
// .addClass("moogle-contextmenu")
- // Create a menu instance that delegates events to our widget
- .menu($.extend(true, {}, this.options.uiMenuOptions, {
- blur: $.proxy(this.options.blur, this),
- create: $.proxy(this.options.createMenu, this),
- focus: $.proxy(this.options.focus, this),
- select: $.proxy(function(event, ui){
- // User selected a menu entry
- var retval,
- isParent = $.moogle.contextmenu.isMenu(ui.item),
- actionHandler = ui.item.data("actionHandler");
- ui.cmd = ui.item.attr("data-command");
- ui.target = $(this.currentTarget);
- // ignore clicks, if they only open a sub-menu
- if( !isParent || !this.options.ignoreParentSelect){
- retval = this._trigger.call(this, "select", event, ui);
- if( actionHandler ){
- retval = actionHandler.call(this, event, ui);
- }
- if( retval !== false ){
- this._closeMenu.call(this);
- }
- event.preventDefault();
+ // Create a menu instance that delegates events to our widget
+ .menu($.extend(true, {}, this.options.uiMenuOptions, {
+ blur: $.proxy(this.options.blur, this),
+ create: $.proxy(this.options.createMenu, this),
+ focus: $.proxy(this.options.focus, this),
+ select: $.proxy(function(event, ui) {
+ // User selected a menu entry
+ var retval,
+ isParent = $.moogle.contextmenu.isMenu(ui.item),
+ actionHandler = ui.item.data("actionHandler");
+ ui.cmd = ui.item.attr("data-command");
+ ui.target = $(this.currentTarget);
+ // ignore clicks, if they only open a sub-menu
+ if ( !isParent || !this.options.ignoreParentSelect) {
+ retval = this._trigger.call(this, "select", event, ui);
+ if ( actionHandler ) {
+ retval = actionHandler.call(this, event, ui);
}
- }, this)
- }));
- },
- /** Open popup (called on 'contextmenu' event). */
- _openMenu: function(event){
- var opts = this.options,
- posOption = opts.position,
- self = this,
- manualTrigger = !!event.isTrigger,
- ui = {menu: this.$menu, target: $(event.target), extraData: event.extraData, originalEvent: event};
+ if ( retval !== false ) {
+ this._closeMenu.call(this);
+ }
+ event.preventDefault();
+ }
+ }, this)
+ }));
+ },
+ /** Open popup (called on 'contextmenu' event). */
+ _openMenu: function(event) {
+ var opts = this.options,
+ posOption = opts.position,
+ self = this,
+ manualTrigger = !!event.isTrigger,
+ ui = { menu: this.$menu, target: $(event.target),
+ extraData: event.extraData, originalEvent: event };
- if( !opts.autoTrigger && !manualTrigger ) {
- // ignore browser's `contextmenu` events
- return;
- }
- this.currentTarget = event.target;
+ if ( !opts.autoTrigger && !manualTrigger ) {
+ // ignore browser's `contextmenu` events
+ return;
+ }
+ this.currentTarget = event.target;
- // Prevent browser from opening the system context menu
- event.preventDefault();
+ // Prevent browser from opening the system context menu
+ event.preventDefault();
- if( this._trigger("beforeOpen", event, ui) === false ){
- this.currentTarget = null;
- return false;
+ if ( this._trigger("beforeOpen", event, ui) === false ) {
+ this.currentTarget = null;
+ return false;
+ }
+ ui.menu = this.$menu; // Might have changed in beforeOpen
+ // Register global event handlers that close the dropdown-menu
+ $(document).bind("keydown" + this.eventNamespace, function(event) {
+ if ( event.which === $.ui.keyCode.ESCAPE ) {
+ self._closeMenu();
}
- ui.menu = this.$menu; // Might have changed in beforeOpen
- // Register global event handlers that close the dropdown-menu
- $(document).bind("keydown" + this.eventNamespace, function(event){
- if( event.which === $.ui.keyCode.ESCAPE ){
- self._closeMenu();
- }
- }).bind("mousedown" + this.eventNamespace + " touchstart" + this.eventNamespace, function(event){
- // Close menu when clicked outside menu
- if( !$(event.target).closest(".ui-menu-item").length ){
- self._closeMenu();
- }
- });
-
- // required for custom positioning (issue #18 and #13).
- if ($.isFunction(posOption)) {
- posOption = posOption(event, ui);
+ }).bind("mousedown" + this.eventNamespace + " touchstart" + this.eventNamespace,
+ function(event) {
+ // Close menu when clicked outside menu
+ if ( !$(event.target).closest(".ui-menu-item").length ) {
+ self._closeMenu();
}
- posOption = $.extend({
- my: "left top",
- at: "left bottom",
- // if called by 'open' method, event does not have pageX/Y
- of: (event.pageX === undefined) ? event.target : event,
- collision: "fit"
- }, posOption);
+ });
+
+ // required for custom positioning (issue #18 and #13).
+ if ($.isFunction(posOption)) {
+ posOption = posOption(event, ui);
+ }
+ posOption = $.extend({
+ my: "left top",
+ at: "left bottom",
+ // if called by 'open' method, event does not have pageX/Y
+ of: (event.pageX === undefined) ? event.target : event,
+ collision: "fit"
+ }, posOption);
- // Finally display the popup
- this.$menu
- .show() // required to fix positioning error
- .css({
- position: "absolute",
- left: 0,
- top: 0
- }).position(posOption)
- .hide(); // hide again, so we can apply nice effects
+ // Finally display the popup
+ this.$menu
+ .show() // required to fix positioning error
+ .css({
+ position: "absolute",
+ left: 0,
+ top: 0
+ }).position(posOption)
+ .hide(); // hide again, so we can apply nice effects
- if( opts.preventContextMenuForPopup ) {
- this.$menu.bind("contextmenu" + this.eventNamespace, function(event){
- event.preventDefault();
- });
- }
- this._show(this.$menu, this.options.show, function(){
- self._trigger.call(self, "open", event, ui);
+ if ( opts.preventContextMenuForPopup ) {
+ this.$menu.bind("contextmenu" + this.eventNamespace, function(event) {
+ event.preventDefault();
});
- },
- /** Close popup. */
- _closeMenu: function(immediately){
- var self = this,
- hideOpts = immediately ? false : this.options.hide;
+ }
+ this._show(this.$menu, this.options.show, function() {
+ self._trigger.call(self, "open", event, ui);
+ });
+ },
+ /** Close popup. */
+ _closeMenu: function(immediately) {
+ var self = this,
+ hideOpts = immediately ? false : this.options.hide;
- // Note: we don't want to unbind the 'contextmenu' event
- $(document)
- .unbind("mousedown" + this.eventNamespace)
- .unbind("touchstart" + this.eventNamespace)
- .unbind("keydown" + this.eventNamespace);
- this.$menu
- .unbind("contextmenu" + this.eventNamespace);
- self.currentTarget = null; // issue #44 after hide animation is too late
+ // Note: we don't want to unbind the 'contextmenu' event
+ $(document)
+ .unbind("mousedown" + this.eventNamespace)
+ .unbind("touchstart" + this.eventNamespace)
+ .unbind("keydown" + this.eventNamespace);
+ this.$menu
+ .unbind("contextmenu" + this.eventNamespace);
+ self.currentTarget = null; // issue #44 after hide animation is too late
- this._hide(this.$menu, hideOpts, function() {
- self._trigger("close");
- });
- },
- /** Handle $().contextmenu("option", key, value) calls. */
- _setOption: function(key, value){
- switch(key){
- case "menu":
- this.replaceMenu(value);
- break;
- }
- $.Widget.prototype._setOption.apply(this, arguments);
- },
- /** Return ui-menu entry (
").appendTo($li);
+ $.moogle.contextmenu.createMenuMarkup(menu.children, $ul);
}
- return $parentUl;
- },
- /** Replaces the value of elem's first text node child*/
- replaceFirstTextNodeChild: function(elem, text) {
- elem
- .contents()
- .filter(function(){ return this.nodeType === 3; })
- .first()
- .replaceWith(text);
}
- });
+ return $parentUl;
+ },
+ /** Replaces the value of elem's first text node child*/
+ replaceFirstTextNodeChild: function(elem, text) {
+ elem
+ .contents()
+ .filter(function() { return this.nodeType === 3; })
+ .first()
+ .replaceWith(text);
+ }
+});
- match = $.ui.menu.version.match(/^(\d)\.(\d+)/);
+match = $.ui.menu.version.match(/^(\d)\.(\d+)/);
- uiVersion = {
- major: parseInt(match[1], 10),
- minor: parseInt(match[2], 10)
- };
+uiVersion = {
+ major: parseInt(match[1], 10),
+ minor: parseInt(match[2], 10)
+};
- if ( uiVersion.major < 2 && uiVersion.minor < 11 ) {
- $.extend($.moogle.contextmenu, {
- /** Convert a menu description into a into a
content. */
- createEntryMarkup: function(entry, $parentLi){
- var $a = null;
+if ( uiVersion.major < 2 && uiVersion.minor < 11 ) {
+ $.extend($.moogle.contextmenu, {
+ /** Convert a menu description into a into a
content. */
+ createEntryMarkup: function(entry, $parentLi) {
+ var $a = null;
- // if(entry.title.match(/^---/)){
- if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
- // hyphen, em dash, en dash: separator as defined by UI Menu 1.10
- $parentLi.text(entry.title);
- }else{
- $parentLi.attr("data-command", entry.cmd);
- $a = $("", {
- html: "" + entry.title, // allow to pass HTML markup
- href: "#"
- }).appendTo($parentLi);
- if( $.isFunction(entry.action) ){
- $parentLi.data("actionHandler", entry.action);
- }
- if(entry.uiIcon){
- $a.append($("").addClass(entry.uiIcon));
- }
- if(entry.disabled){
- $parentLi.addClass("ui-state-disabled");
- }
- if($.isPlainObject(entry.data)){
- $a.data(entry.data);
- }
+ // if (entry.title.match(/^---/)) {
+ if ( !/[^\-\u2014\u2013\s]/.test( entry.title ) ) {
+ // hyphen, em dash, en dash: separator as defined by UI Menu 1.10
+ $parentLi.text(entry.title);
+ } else {
+ $parentLi.attr("data-command", entry.cmd);
+ $a = $("", {
+ html: "" + entry.title, // allow to pass HTML markup
+ href: "#"
+ }).appendTo($parentLi);
+ if ( $.isFunction(entry.action) ) {
+ $parentLi.data("actionHandler", entry.action);
+ }
+ if (entry.uiIcon) {
+ $a.append($("").addClass(entry.uiIcon));
+ }
+ if (entry.disabled) {
+ $parentLi.addClass("ui-state-disabled");
+ }
+ if ($.isPlainObject(entry.data)) {
+ $a.data(entry.data);
}
- },
- /** Returns true if the menu item has child menu items */
- isMenu: function(item) {
- return item.has(">a[aria-haspopup='true']").length > 0;
- },
- /** Updates the menu item's title */
- updateTitle: function(item, title) {
- $.moogle.contextmenu.replaceFirstTextNodeChild($("a", item), title);
}
- });
- } else {
- $.extend($.moogle.contextmenu, {
- /** Convert a menu description into a into a
content. */
- createEntryMarkup: function(entry, $parentLi){
- if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
- $parentLi.text(entry.title);
- } else {
+ },
+ /** Returns true if the menu item has child menu items */
+ isMenu: function(item) {
+ return item.has(">a[aria-haspopup='true']").length > 0;
+ },
+ /** Updates the menu item's title */
+ updateTitle: function(item, title) {
+ $.moogle.contextmenu.replaceFirstTextNodeChild($("a", item), title);
+ }
+ });
+} else {
+ $.extend($.moogle.contextmenu, {
+ /** Convert a menu description into a into a