From 671b86a1d7f8770b6c16653578ac8c69a256449e Mon Sep 17 00:00:00 2001 From: Ryan Lester Date: Thu, 29 Nov 2012 13:12:36 -0800 Subject: [PATCH 1/4] Update jquery.contextmenu.css --- jquery.contextmenu.css | 157 ++++++++++++++++++++++------------------- 1 file changed, 85 insertions(+), 72 deletions(-) diff --git a/jquery.contextmenu.css b/jquery.contextmenu.css index 209e54c..689ec88 100644 --- a/jquery.contextmenu.css +++ b/jquery.contextmenu.css @@ -1,88 +1,101 @@ - -.contextMenuPlugin { +.contextMenuPlugin +{ -webkit-user-select: none; - display: none; - font-family: tahoma, arial, sans-serif; - font-size: 11px; - position: absolute; - left: 100px; - top: 100px; - min-width: 100px; - list-style-type: none; - margin: 0; - padding: 0; - background-color: #f7f3f7; - border: 2px solid #f7f7f7; - outline: 1px solid #949694; + display: none; + font-family: tahoma, arial, sans-serif; + font-size: 11px; + position: absolute; + left: 100px; + top: 100px; + min-width: 100px; + list-style-type: none; + margin: 0; + padding: 0; + background-color: #f7f3f7; + border: 2px solid #f7f7f7; + outline: 1px solid #949694; } -.contextMenuPlugin > li { - margin: 0 0 0 0; - padding: 1px; - background-repeat: no-repeat; +.contextMenuPlugin > li +{ + margin: 0 0 0 0; + padding: 1px; + background-repeat: no-repeat; } -.contextMenuPlugin > li > a { - position: relative; - display: block; - padding: 3px 3px 3px 28px; - color: ButtonText; - text-decoration: none; - margin: 1px; +.contextMenuPlugin > li > a +{ + position: relative; + display: block; + padding: 3px 3px 3px 28px; + color: ButtonText; + text-decoration: none; + margin: 1px; } -.contextMenuPlugin > li > a img { - position: absolute; - left: 3px; - margin-top: -2px; - width: 16px; - height: 16px; +.contextMenuPlugin > li > a img +{ + position: absolute; + left: 3px; + margin-top: -2px; + width: 16px; + height: 16px; } -.contextMenuPlugin > li > a:hover { - border: 1px solid #fffbff; - outline: 1px solid #b5d3ff; - margin: 0; - background: -moz-linear-gradient(top, rgba(239,239,255,0.5) 0%, rgba(223,223,255,0.5) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,255,0.5)), color-stop(100%,rgba(223,223,255,0.5))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80efefff', endColorstr='#80dfdfff',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* W3C */ - cursor: default; +.contextMenuPlugin > li > a:hover +{ + border: 1px solid #fffbff; + outline: 1px solid #b5d3ff; + margin: 0; + background: -moz-linear-gradient(top, rgba(239,239,255,0.5) 0%, rgba(223,223,255,0.5) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,255,0.5)), color-stop(100%,rgba(223,223,255,0.5))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80efefff', endColorstr='#80dfdfff',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* W3C */ + cursor: default; } -.contextMenuPlugin > li.divider { - border-top: 1px solid #e7e3e7; - border-bottom: 1px solid #ffffff; - height: 0; - padding: 0; - margin: 5px 0 5px 27px; +.contextMenuPlugin > li.divider +{ + border-top: 1px solid #e7e3e7; + border-bottom: 1px solid #ffffff; + height: 0; + padding: 0; + margin: 5px 0 5px 27px; } -.contextMenuPlugin > .header { - background: rgb(90,90,90); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,90,90,1)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#141414',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* W3C */ - position: relative; - cursor: default; - padding: 3px 3px 3px 3px; - color: #ffffff; +.contextMenuPlugin > .header +{ + background: rgb(90,90,90); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,90,90,1)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#141414',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* W3C */ + position: relative; + cursor: default; + padding: 3px 3px 3px 3px; + color: #ffffff; } -.contextMenuPlugin > .gutterLine { - position: absolute; - border-left: 1px solid #e7e3e7; - border-right: 1px solid #ffffff; - width: 0; - top: 0; - bottom: 0; - left: 26px; - z-index: 0; +.contextMenuPlugin > .gutterLine +{ + position: absolute; + border-left: 1px solid #e7e3e7; + border-right: 1px solid #ffffff; + width: 0; + top: 0; + bottom: 0; + left: 26px; + z-index: 0; } + +.contextMenuPlugin-highlight +{ + background-image: none !important; + background-color: rgba(200, 20, 200, 0.4) !important; +} From e045f142cf8f3ef6dc44d1338a28ccb2e419ff3a Mon Sep 17 00:00:00 2001 From: Ryan Lester Date: Thu, 29 Nov 2012 13:14:18 -0800 Subject: [PATCH 2/4] Update jquery.contextmenu.js --- jquery.contextmenu.js | 187 ++++++++++++++++++++++-------------------- 1 file changed, 96 insertions(+), 91 deletions(-) diff --git a/jquery.contextmenu.js b/jquery.contextmenu.js index efe52b5..3b44978 100644 --- a/jquery.contextmenu.js +++ b/jquery.contextmenu.js @@ -1,28 +1,28 @@ /** - * jQuery plugin for Pretty looking right click context menu. - * - * Requires popup.js and popup.css to be included in your page. And jQuery, obviously. - * - * Usage: - * - * $('.something').contextPopup({ - * title: 'Some title', - * items: [ - * {label:'My Item', icon:'/some/icon1.png', action:function() { alert('hi'); }}, - * {label:'Item #2', icon:'/some/icon2.png', action:function() { alert('yo'); }}, - * null, // divider - * {label:'Blahhhh', icon:'/some/icon3.png', action:function() { alert('bye'); }}, - * ] - * }); - * - * 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) { +* jQuery plugin for Pretty looking right click context menu. +* +* Requires popup.js and popup.css to be included in your page. And jQuery, obviously. +* +* Usage: +* +* $('.something').contextPopup({ +* title: 'Some title', +* items: [ +* {label:'My Item', icon:'/some/icon1.png', action:function() { alert('hi'); }}, +* {label:'Item #2', icon:'/some/icon2.png', action:function() { alert('yo'); }}, +* null, // divider +* {label:'Blahhhh', icon:'/some/icon3.png', action:function() { alert('bye'); }}, +* ] +* }); +* +* 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', @@ -30,82 +30,87 @@ jQuery.fn.contextPopup = function(menuData) { headerClass: 'header', seperatorClass: 'divider', title: '', + highlight: false, items: [] }; - + // 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); - } - 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('span')); - } - row.find('span').text(item.label); - if (item.action) { - row.find('a').click(function(){ item.action(e); }); - } - } else { - $('

').appendTo(menu); - } - }); - menu.find('.' + settings.headerClass ).text(settings.title); - return menu; - } + // Build popup menu HTML + function createMenu(e) { + var menu = $('

') + .appendTo(document.body); + if (settings.title) { + $('

').text(settings.title).appendTo(menu); + } + 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('span')); + } + row.find('span').text(item.label); + if (item.action) { + row.find('a').click(function () { item.action(e); }); + } + } else { + $('

').appendTo(menu); + } + }); + menu.find('.' + settings.headerClass).text(settings.title); + return menu; + } - // On contextmenu event (right click) - this.bind('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(); - } + // On contextmenu event (right click) + this.on('contextmenu.contextmenu', function (e) { + var $elem = $(this); - // Create and show menu - menu.css({zIndex:1000001, left:left, top:top}) - .bind('contextmenu', function() { return false; }); + $elem.toggleClass(settings.contextMenuClass + '-highlight', true && settings.highlight); + var menu = createMenu(e) + .show(); - // 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) - .bind('contextmenu click', function() { - // If click or right click anywhere else on page: remove clean up. - bg.remove(); - menu.remove(); - return false; - }); + 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(); + } - // 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(); - }); + // Create and show menu + menu.css({ zIndex: 1000001, left: left, top: top }) + .on('contextmenu.contextmenu', function () { return false; }); - // Cancel event, so real browser popup doesn't appear. - return false; - }); + // 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(); + $elem.removeClass(settings.contextMenuClass + '-highlight'); + return false; + }); - return this; -}; + // 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(); + $elem.removeClass(settings.contextMenuClass + '-highlight'); + }); + // Cancel event, so real browser popup doesn't appear. + return false; + }); + + return this; +}; From d79225623b71572b29831e8508b387e22b20a49b Mon Sep 17 00:00:00 2001 From: Ryan Lester Date: Thu, 29 Nov 2012 13:17:41 -0800 Subject: [PATCH 3/4] Update jquery.contextmenu.js --- jquery.contextmenu.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/jquery.contextmenu.js b/jquery.contextmenu.js index 3b44978..6dc75e3 100644 --- a/jquery.contextmenu.js +++ b/jquery.contextmenu.js @@ -94,23 +94,23 @@ jQuery.fn.contextPopup = function (menuData) { .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(); - $elem.removeClass(settings.contextMenuClass + '-highlight'); - return false; - }); - + // If click or right click anywhere else on page: remove clean up. + bg.remove(); + menu.remove(); + $elem.removeClass(settings.contextMenuClass + '-highlight'); + 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(); $elem.removeClass(settings.contextMenuClass + '-highlight'); }); - + // Cancel event, so real browser popup doesn't appear. return false; }); - + return this; }; From c9deb191cee913356da6d61680caae4645cbe3eb Mon Sep 17 00:00:00 2001 From: Ryan Lester Date: Thu, 29 Nov 2012 13:23:46 -0800 Subject: [PATCH 4/4] Update jquery.contextmenu.js --- jquery.contextmenu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.contextmenu.js b/jquery.contextmenu.js index 6dc75e3..69e416f 100644 --- a/jquery.contextmenu.js +++ b/jquery.contextmenu.js @@ -69,7 +69,7 @@ jQuery.fn.contextPopup = function (menuData) { } // On contextmenu event (right click) - this.on('contextmenu.contextmenu', function (e) { + this.on('contextmenu.contextMenuPlugin', function (e) { var $elem = $(this); $elem.toggleClass(settings.contextMenuClass + '-highlight', true && settings.highlight); @@ -87,7 +87,7 @@ jQuery.fn.contextPopup = function (menuData) { // Create and show menu menu.css({ zIndex: 1000001, left: left, top: top }) - .on('contextmenu.contextmenu', function () { return false; }); + .on('contextmenu.contextMenuPlugin', function () { return false; }); // Cover rest of page with invisible div that when clicked will cancel the popup. var bg = $('

')