From 58688bde6d1ceaa4d78e416e0701ba39701e1b39 Mon Sep 17 00:00:00 2001 From: Nuno Santos Date: Thu, 26 Jul 2018 13:47:30 +0100 Subject: [PATCH 1/2] Don't create an item if some condition is not satified --- jquery.contextmenu.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/jquery.contextmenu.js b/jquery.contextmenu.js index 3d5419b..96f2e30 100644 --- a/jquery.contextmenu.js +++ b/jquery.contextmenu.js @@ -12,6 +12,7 @@ * {label:'Item #2', icon:'/some/icon2.png', action:function() { alert('yo'); }}, * null, // divider * {label:'Blahhhh', icon:'/some/icon3.png', action:function() { alert('bye'); }, isEnabled: function() { return false; }}, + * {label:'Another Item', icon:'/some/icon4.png', action:function() { alert('hello'); }, isActive: function() { return isItemActive() }}, * ] * }); * @@ -44,6 +45,9 @@ jQuery.fn.contextPopup = function(menuData) { if (settings.title) { $('
  • ').text(settings.title).appendTo(menu); } + if (item.isActive && !item.isActive()) { + return; + } settings.items.forEach(function(item) { if (item) { var rowCode = '
  • '; From fd519863ae5d17bd86068cb641a5ba96ce5457cb Mon Sep 17 00:00:00 2001 From: Nuno Santos Date: Thu, 26 Jul 2018 13:58:54 +0100 Subject: [PATCH 2/2] Don't create item if that particular item shouldn't be active; Only trigger the menu on an element which is part of a particular class; Remove menu if there are no active items Don't create item if that particular item shouldn't be active; Only trigger the menu on an element which is part of a particular class; Remove menu if there are no active items --- jquery.contextmenu.js | 178 ++++++++++++++++++++++-------------------- 1 file changed, 95 insertions(+), 83 deletions(-) diff --git a/jquery.contextmenu.js b/jquery.contextmenu.js index 96f2e30..71258ed 100644 --- a/jquery.contextmenu.js +++ b/jquery.contextmenu.js @@ -12,109 +12,121 @@ * {label:'Item #2', icon:'/some/icon2.png', action:function() { alert('yo'); }}, * null, // divider * {label:'Blahhhh', icon:'/some/icon3.png', action:function() { alert('bye'); }, isEnabled: function() { return false; }}, - * {label:'Another Item', icon:'/some/icon4.png', action:function() { alert('hello'); }, isActive: function() { return isItemActive() }}, * ] * }); * - * Icon needs to be 16x16. I recommend the Fugue icon set from: http://p.yusukekamiyamane.com/ + * Icon needs to be 16x16. I recommend the Fugue icon set from: http://p.yusukekamiyamane.com/ * * - Joe Walnes, 2011 http://joewalnes.com/ * https://github.com/joewalnes/jquery-simple-context-menu * * MIT License: https://github.com/joewalnes/jquery-simple-context-menu/blob/master/LICENSE.txt */ -jQuery.fn.contextPopup = function(menuData) { - // Define default settings - var settings = { - contextMenuClass: 'contextMenuPlugin', +jQuery.fn.contextPopup = function (menuData) { + // Define default settings + var settings = { + contextMenuClass: 'contextMenuPlugin', linkClickerClass: 'contextMenuLink', - gutterLineClass: 'gutterLine', - headerClass: 'header', - seperatorClass: 'divider', - title: '', - items: [] - }; - - // merge them - $.extend(settings, menuData); + gutterLineClass: 'gutterLine', + headerClass: 'header', + seperatorClass: 'divider', + title: '', + items: [] + mandatoryClass: '' + }; - // Build popup menu HTML - function createMenu(e) { - var menu = $('') - .appendTo(document.body); - if (settings.title) { - $('
  • ').text(settings.title).appendTo(menu); + // merge them + $.extend(settings, menuData); + + // Build popup menu HTML + function createMenu(e) { + var menu = $('') + .appendTo(document.body); + if (settings.title) { + $('
  • ').text(settings.title).appendTo(menu); + } + var activeItems = 0; + settings.items.forEach(function (item) { + if (item.isActive && !item.isActive()) { + return; + } + if (item) { + var rowCode = '
  • '; + + var row = $(rowCode).appendTo(menu); + if (item.icon) { + var icon = $(''); + icon.attr('src', item.icon); + icon.insertBefore(row.find('.itemTitle')); + } + row.find('.itemTitle').text(item.label); + + if (item.isEnabled != undefined && !item.isEnabled()) { + row.addClass('disabled'); + } else if (item.action) { + row.find('.' + settings.linkClickerClass).click(function () { + item.action(e); + }); + } + activeItems++; + } else { + $('
  • ').appendTo(menu); + } + }); + + if (activeItems === 0) { + menu.remove(); + return; + } + + menu.find('.' + settings.headerClass).text(settings.title); + return menu; } - if (item.isActive && !item.isActive()) { - return; - } - settings.items.forEach(function(item) { - if (item) { - var rowCode = '
  • '; - // if(item.icon) - // rowCode += ''; - // rowCode += ''; - var row = $(rowCode).appendTo(menu); - if(item.icon){ - var icon = $(''); - icon.attr('src', item.icon); - icon.insertBefore(row.find('.itemTitle')); + + // On contextmenu event (right click) + this.on('contextmenu', function (e) { + if (settings.mandatoryClass && $(e.target).closest('.' + settings.mandatoryClass).length <= 0) { + return; } - row.find('.itemTitle').text(item.label); - - if (item.isEnabled != undefined && !item.isEnabled()) { - row.addClass('disabled'); - } else if (item.action) { - row.find('.'+settings.linkClickerClass).click(function () { item.action(e); }); + var menu = createMenu(e) + .show(); + + var left = e.pageX + 5, /* nudge to the right, so the pointer is covering the title */ + top = e.pageY; + if (top + menu.height() >= $(window).height()) { + top -= menu.height(); + } + if (left + menu.width() >= $(window).width()) { + left -= menu.width(); } - } else { - $('
  • ').appendTo(menu); - } - }); - menu.find('.' + settings.headerClass ).text(settings.title); - return menu; - } + // Create and show menu + menu.css({zIndex: 1000001, left: left, top: top}) + .on('contextmenu', function () { + return false; + }); - // On contextmenu event (right click) - this.on('contextmenu', function(e) { - var menu = createMenu(e) - .show(); - - var left = e.pageX + 5, /* nudge to the right, so the pointer is covering the title */ - top = e.pageY; - if (top + menu.height() >= $(window).height()) { - top -= menu.height(); - } - if (left + menu.width() >= $(window).width()) { - left -= menu.width(); - } + // Cover rest of page with invisible div that when clicked will cancel the popup. + var bg = $('
    ') + .css({left: 0, top: 0, width: '100%', height: '100%', position: 'absolute', zIndex: 1000000}) + .appendTo(document.body) + .on('contextmenu click', function () { + // If click or right click anywhere else on page: remove clean up. + bg.remove(); + menu.remove(); + return false; + }); - // Create and show menu - menu.css({zIndex:1000001, left:left, top:top}) - .on('contextmenu', function() { return false; }); + // When clicking on a link in menu: clean up (in addition to handlers on link already) + menu.find('a').click(function () { + bg.remove(); + menu.remove(); + }); - // Cover rest of page with invisible div that when clicked will cancel the popup. - var bg = $('
    ') - .css({left:0, top:0, width:'100%', height:'100%', position:'absolute', zIndex:1000000}) - .appendTo(document.body) - .on('contextmenu click', function() { - // If click or right click anywhere else on page: remove clean up. - bg.remove(); - menu.remove(); + // Cancel event, so real browser popup doesn't appear. return false; - }); - - // When clicking on a link in menu: clean up (in addition to handlers on link already) - menu.find('a').click(function() { - bg.remove(); - menu.remove(); }); - // Cancel event, so real browser popup doesn't appear. - return false; - }); - - return this; + return this; };