first commit
This commit is contained in:
216
libraries/grid/plugins/jq-context-menu/context.js
Normal file
216
libraries/grid/plugins/jq-context-menu/context.js
Normal file
@@ -0,0 +1,216 @@
|
||||
/*
|
||||
* Context.js
|
||||
* Copyright Jacob Kelley
|
||||
* MIT License
|
||||
*
|
||||
* Modified by Joshua Christman
|
||||
*/
|
||||
|
||||
context = (function () {
|
||||
|
||||
var options = {
|
||||
fadeSpeed: 100,
|
||||
filter: function ($obj) {
|
||||
// Modify $obj, Do not return
|
||||
},
|
||||
above: 'auto',
|
||||
left: 'auto',
|
||||
preventDoubleContext: true,
|
||||
compress: false
|
||||
};
|
||||
|
||||
function initialize(opts) {
|
||||
|
||||
options = jQuery.extend({}, options, opts);
|
||||
|
||||
jQuery(document).on('click', function () {
|
||||
jQuery('.dropdown-context').fadeOut(options.fadeSpeed, function(){
|
||||
jQuery('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left');
|
||||
});
|
||||
});
|
||||
if(options.preventDoubleContext){
|
||||
jQuery(document).on('contextmenu', '.dropdown-context', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
jQuery(document).on('mouseenter', '.dropdown-submenu', function(){
|
||||
var $sub = jQuery(this).find('.dropdown-context-sub:first'),
|
||||
subWidth = $sub.width(),
|
||||
subLeft = $sub.offset().left,
|
||||
collision = (subWidth+subLeft) > window.innerWidth;
|
||||
if(collision){
|
||||
$sub.addClass('drop-left');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateOptions(opts){
|
||||
options = jQuery.extend({}, options, opts);
|
||||
}
|
||||
|
||||
function buildMenu(data, id, subMenu) {
|
||||
var subClass = (subMenu) ? ' dropdown-context-sub' : '',
|
||||
compressed = options.compress ? ' compressed-context' : '',
|
||||
$menu = jQuery('<ul class="dropdown-menu dropdown-context' + subClass + compressed +'" id="dropdown-' + id + '"></ul>');
|
||||
|
||||
return buildMenuItems($menu, data, id, subMenu);
|
||||
}
|
||||
|
||||
function buildMenuItems($menu, data, id, subMenu, addDynamicTag) {
|
||||
var linkTarget = '';
|
||||
for(var i = 0; i<data.length; i++) {
|
||||
if (typeof data[i].divider !== 'undefined') {
|
||||
var divider = '<li class="divider';
|
||||
divider += (addDynamicTag) ? ' dynamic-menu-item' : '';
|
||||
divider += '"></li>';
|
||||
$menu.append(divider);
|
||||
} else if (typeof data[i].header !== 'undefined') {
|
||||
var header = '<li class="nav-header';
|
||||
header += (addDynamicTag) ? ' dynamic-menu-item' : '';
|
||||
header += '">' + data[i].header + '</li>';
|
||||
$menu.append(header);
|
||||
} else if (typeof data[i].menu_item_src !== 'undefined') {
|
||||
var funcName;
|
||||
if (typeof data[i].menu_item_src === 'function') {
|
||||
if (data[i].menu_item_src.name === "") { // The function is declared like "foo = function() {}"
|
||||
for (var globalVar in window) {
|
||||
if (data[i].menu_item_src == window[globalVar]) {
|
||||
funcName = globalVar;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
funcName = data[i].menu_item_src.name;
|
||||
}
|
||||
} else {
|
||||
funcName = data[i].menu_item_src;
|
||||
}
|
||||
$menu.append('<li class="dynamic-menu-src" data-src="' + funcName + '"></li>');
|
||||
} else {
|
||||
if (typeof data[i].href == 'undefined') {
|
||||
data[i].href = '#';
|
||||
}
|
||||
if (typeof data[i].target !== 'undefined') {
|
||||
linkTarget = ' target="'+data[i].target+'"';
|
||||
}
|
||||
if (typeof data[i].subMenu !== 'undefined') {
|
||||
var sub_menu = '<li class="dropdown-submenu';
|
||||
sub_menu += (addDynamicTag) ? ' dynamic-menu-item' : '';
|
||||
sub_menu += '"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>'
|
||||
$sub = (sub_menu);
|
||||
} else {
|
||||
var element = '<li';
|
||||
element += (addDynamicTag) ? ' class="dynamic-menu-item"' : '';
|
||||
element += '><a tabindex="-1" href="' + data[i].href + '"'+linkTarget+'>';
|
||||
if (typeof data[i].icon !== 'undefined')
|
||||
element += '<span class="glyphicon ' + data[i].icon + '"></span> ';
|
||||
element += data[i].text + '</a></li>';
|
||||
$sub = jQuery(element);
|
||||
}
|
||||
if (typeof data[i].action !== 'undefined') {
|
||||
$action = data[i].action;
|
||||
$sub
|
||||
.find('a')
|
||||
.addClass('context-event')
|
||||
.on('click', createCallback($action));
|
||||
}
|
||||
$menu.append($sub);
|
||||
if (typeof data[i].subMenu != 'undefined') {
|
||||
var subMenuData = buildMenu(data[i].subMenu, id, true);
|
||||
$menu.find('li:last').append(subMenuData);
|
||||
}
|
||||
}
|
||||
if (typeof options.filter == 'function') {
|
||||
options.filter($menu.find('li:last'));
|
||||
}
|
||||
}
|
||||
return $menu;
|
||||
}
|
||||
|
||||
function addContext(selector, data) {
|
||||
if (typeof data.id !== 'undefined' && typeof data.data !== 'undefined') {
|
||||
var id = data.id;
|
||||
$menu = jQuery('body').find('#dropdown-' + id)[0];
|
||||
if (typeof $menu === 'undefined') {
|
||||
$menu = buildMenu(data.data, id);
|
||||
jQuery('body').append($menu);
|
||||
}
|
||||
} else {
|
||||
var d = new Date(),
|
||||
id = d.getTime(),
|
||||
$menu = buildMenu(data, id);
|
||||
jQuery('body').append($menu);
|
||||
}
|
||||
|
||||
jQuery(selector).on('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
currentContextSelector = jQuery(this);
|
||||
|
||||
jQuery('.dropdown-context:not(.dropdown-context-sub)').hide();
|
||||
|
||||
$dd = jQuery('#dropdown-' + id);
|
||||
|
||||
$dd.find('.dynamic-menu-item').remove(); // Destroy any old dynamic menu items
|
||||
$dd.find('.dynamic-menu-src').each(function(idx, element) {
|
||||
var menuItems = window[jQuery(element).data('src')](jQuery(selector));
|
||||
$parentMenu = jQuery(element).closest('.dropdown-menu.dropdown-context');
|
||||
$parentMenu = buildMenuItems($parentMenu, menuItems, id, undefined, true);
|
||||
});
|
||||
|
||||
if (typeof options.above == 'boolean' && options.above) {
|
||||
$dd.addClass('dropdown-context-up').css({
|
||||
top: e.pageY - 20 - jQuery('#dropdown-' + id).height(),
|
||||
left: e.pageX - 13
|
||||
}).fadeIn(options.fadeSpeed);
|
||||
} else if (typeof options.above == 'string' && options.above == 'auto') {
|
||||
$dd.removeClass('dropdown-context-up');
|
||||
var autoH = $dd.height() + 12;
|
||||
if ((e.pageY + autoH) > jQuery('html').height()) {
|
||||
$dd.addClass('dropdown-context-up').css({
|
||||
top: e.pageY - 20 - autoH,
|
||||
left: e.pageX - 13
|
||||
}).fadeIn(options.fadeSpeed);
|
||||
} else {
|
||||
$dd.css({
|
||||
top: e.pageY + 10,
|
||||
left: e.pageX - 13
|
||||
}).fadeIn(options.fadeSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof options.left == 'boolean' && options.left) {
|
||||
$dd.addClass('dropdown-context-left').css({
|
||||
left: e.pageX - $dd.width()
|
||||
}).fadeIn(options.fadeSpeed);
|
||||
} else if (typeof options.left == 'string' && options.left == 'auto') {
|
||||
$dd.removeClass('dropdown-context-left');
|
||||
var autoL = $dd.width() - 12;
|
||||
if ((e.pageX + autoL) > jQuery('html').width()) {
|
||||
$dd.addClass('dropdown-context-left').css({
|
||||
left: e.pageX - $dd.width() + 13
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function destroyContext(selector) {
|
||||
jQuery(document).off('contextmenu', selector).off('click', '.context-event');
|
||||
}
|
||||
|
||||
return {
|
||||
init: initialize,
|
||||
settings: updateOptions,
|
||||
attach: addContext,
|
||||
destroy: destroyContext
|
||||
};
|
||||
})();
|
||||
|
||||
var createCallback = function(func) {
|
||||
return function(event) { func(event, currentContextSelector) };
|
||||
}
|
||||
|
||||
currentContextSelector = undefined;
|
||||
218
libraries/grid/plugins/jq-context-menu/context.standalone.css
Normal file
218
libraries/grid/plugins/jq-context-menu/context.standalone.css
Normal file
@@ -0,0 +1,218 @@
|
||||
/**
|
||||
* ContextJS Styles
|
||||
* For use WITHOUT Twitters Bootstrap CSS
|
||||
*/
|
||||
|
||||
.nav-header {
|
||||
display: block;
|
||||
padding: 5px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.dropdown-context {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-top: 3px solid #5e87b0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
*border-right-width: 2px;
|
||||
*border-bottom-width: 2px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
background-clip: padding-box;
|
||||
text-align:left;
|
||||
}
|
||||
.dropdown-context.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown-context .divider {
|
||||
*width: 100%;
|
||||
height: 1px;
|
||||
margin: 5px 1px;
|
||||
*margin: -5px 0 5px;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
.dropdown-context a {
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.dropdown-context a i {
|
||||
margin-right: 10px;
|
||||
color: #999;
|
||||
}
|
||||
.dropdown-context li > a:hover, .dropdown-context li > a:focus, .dropdown-submenu:hover > a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #5e87b0;
|
||||
}
|
||||
.dropdown-context li > a:hover i {
|
||||
color: #FFF;
|
||||
}
|
||||
.dropdown-context .active > a, .dropdown-context .active > a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #0088cc;
|
||||
background-color: #0081c2;
|
||||
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
|
||||
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
|
||||
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
|
||||
background-repeat: repeat-x;
|
||||
outline: 0;
|
||||
}
|
||||
.dropdown-context .disabled > a, .dropdown-context .disabled > a:hover {
|
||||
color: #999999;
|
||||
}
|
||||
.dropdown-context .disabled > a:hover {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
.open {
|
||||
*z-index: 1000;
|
||||
}
|
||||
.open > .dropdown-context {
|
||||
display: block;
|
||||
}
|
||||
.pull-right > .dropdown-context {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid #000000;
|
||||
content: "\2191";
|
||||
}
|
||||
.dropup .dropdown-context, .navbar-fixed-bottom .dropdown .dropdown-context {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-context {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-context.drop-left{
|
||||
left:-100%;
|
||||
}
|
||||
.dropdown-submenu:hover .dropdown-context {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-submenu > a:after {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 5px;
|
||||
margin-right: -10px;
|
||||
border-color: transparent;
|
||||
border-left-color: #cccccc;
|
||||
border-style: solid;
|
||||
border-width: 5px 0 5px 5px;
|
||||
content: " ";
|
||||
}
|
||||
.dropdown-submenu:hover > a:after {
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
.dropdown .dropdown-context .nav-header {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
/**
|
||||
* Context Styles
|
||||
*/
|
||||
|
||||
.dropdown-context .nav-header {
|
||||
cursor: default;
|
||||
}
|
||||
.dropdown-context:before, .dropdown-context-up:before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 9px;
|
||||
display: inline-block;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
.dropdown-context:after, .dropdown-context-up:after {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
display: inline-block;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #5e87b0;
|
||||
border-left: 6px solid transparent;
|
||||
content: '';
|
||||
}
|
||||
.dropdown-context-up:before, .dropdown-context-up:after {
|
||||
top: auto;
|
||||
bottom: -7px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.dropdown-context-up:before {
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid #ccc;
|
||||
border-bottom: none;
|
||||
border-left: 7px solid transparent;
|
||||
}
|
||||
.dropdown-context-up:after {
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #ffffff;
|
||||
border-left: 6px solid transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
.dropdown-context-sub:before, .dropdown-context-sub:after {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-context .dropdown-submenu:hover .dropdown-context {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-context .dropdown-submenu:hover > .dropdown-context {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.compressed-context a{
|
||||
padding-left: 14px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.compressed-context .divider{
|
||||
margin: 5px 1px;
|
||||
}
|
||||
.compressed-context .nav-header{
|
||||
padding: 1px 13px;
|
||||
}
|
||||
Reference in New Issue
Block a user