mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2025-06-14 20:16:05 +00:00
Initial commit
This commit is contained in:
Khanh Ngo
130
app/static/global/plugins/bootstrap-contextmenu/README.md
Normal file
130
app/static/global/plugins/bootstrap-contextmenu/README.md
Normal file
@ -0,0 +1,130 @@
|
||||
Bootstrap Context Menu
|
||||
======================
|
||||
|
||||
A context menu extension of Bootstrap made for everyone's convenience.
|
||||
|
||||
See a [demo page] [id].
|
||||
[id]:http://sydcanem.github.io/bootstrap-contextmenu/
|
||||
|
||||
Installation
|
||||
------------
|
||||
|
||||
`bower install bootstrap-contextmenu`
|
||||
|
||||
Note: Requires bootstrap.css
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
### Via data attributes
|
||||
|
||||
Add `data-toggle="context"` to any element that needs a custom context menu and via CSS set `position: relative` to the element.
|
||||
|
||||
Point `data-target` attribute to your custom context menu.
|
||||
|
||||
`<div class="context" data-toggle="context" data-target="#context-menu"></div>`
|
||||
|
||||
### Via Javascript
|
||||
|
||||
Call the context menu via JavaScript:
|
||||
|
||||
```js
|
||||
$('.context').contextmenu({
|
||||
target:'#context-menu',
|
||||
before: function(e,context) {
|
||||
// execute code before context menu if shown
|
||||
},
|
||||
onItem: function(context,e) {
|
||||
// execute on menu item selection
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
`target` - is the equivalent of the `data-target` attribute. It identifies the html of the menu that will be displayed.
|
||||
|
||||
`before` - is a function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters,
|
||||
|
||||
- `e` - the original event. (You can do an `e.preventDefault()` to cancel the browser event).
|
||||
- `context` - the DOM element where right click occured.
|
||||
|
||||
`onItem` - is a function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters,
|
||||
|
||||
- `context` - the DOM element where right click occured.
|
||||
- `e` - the click event of the menu item, $(e.target) is the item element.
|
||||
|
||||
`scopes` - DOM selector for dynamically added context elements. See [issue](https://github.com/sydcanem/bootstrap-contextmenu/issues/56).
|
||||
|
||||
### Events
|
||||
|
||||
All events are fired at the context's menu. Check out `dropdown` plugin for
|
||||
a complete description of events.
|
||||
|
||||
- `show.bs.context` - This event fires immediately when the menu is opened.
|
||||
- `shown.bs.context` - This event is fired when the dropdown has been made visible to the user.
|
||||
- `hide.bs.context` - This event is fired immediately when the hide instance method has been called.
|
||||
- `hidden.bs.context` - This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
|
||||
|
||||
Sample
|
||||
|
||||
```js
|
||||
$('#myMenu').on('show.bs.context',function () {
|
||||
// do something...
|
||||
});
|
||||
```
|
||||
|
||||
Example
|
||||
-------
|
||||
|
||||
Activate and specify selector for context menu
|
||||
|
||||
```js
|
||||
$('#main').contextmenu({'target':'#context-menu'});
|
||||
```
|
||||
|
||||
Activate within a div, but not on spans
|
||||
|
||||
```js
|
||||
$('#main').contextmenu({
|
||||
target: '#context-menu2',
|
||||
before: function (e, element, target) {
|
||||
e.preventDefault();
|
||||
if (e.target.tagName == 'SPAN') {
|
||||
e.preventDefault();
|
||||
this.closemenu();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Modify the menu dynamically
|
||||
|
||||
```js
|
||||
$('#main').contextmenu({
|
||||
target: "#myMenu",
|
||||
before: function(e) {
|
||||
this.getMenu().find("li").eq(2).find('a').html("This was dynamically changed");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Show menu name on selection
|
||||
|
||||
```js
|
||||
$('#main').contextmenu({
|
||||
onItem: function(context, e) {
|
||||
alert($(e.target).text());
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Nice to have features:
|
||||
|
||||
- Close and open animations
|
||||
- Keyboard shortcuts for menus
|
||||
|
||||
### License
|
||||
MIT
|
||||
205
app/static/global/plugins/bootstrap-contextmenu/bootstrap-contextmenu.js
vendored
Normal file
205
app/static/global/plugins/bootstrap-contextmenu/bootstrap-contextmenu.js
vendored
Normal file
@ -0,0 +1,205 @@
|
||||
/*!
|
||||
* Bootstrap Context Menu
|
||||
* Author: @sydcanem
|
||||
* https://github.com/sydcanem/bootstrap-contextmenu
|
||||
*
|
||||
* Inspired by Bootstrap's dropdown plugin.
|
||||
* Bootstrap (http://getbootstrap.com).
|
||||
*
|
||||
* Licensed under MIT
|
||||
* ========================================================= */
|
||||
|
||||
;(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/* CONTEXTMENU CLASS DEFINITION
|
||||
* ============================ */
|
||||
var toggle = '[data-toggle="context"]';
|
||||
|
||||
var ContextMenu = function (element, options) {
|
||||
this.$element = $(element);
|
||||
|
||||
this.before = options.before || this.before;
|
||||
this.onItem = options.onItem || this.onItem;
|
||||
this.scopes = options.scopes || null;
|
||||
|
||||
if (options.target) {
|
||||
this.$element.data('target', options.target);
|
||||
}
|
||||
|
||||
this.listen();
|
||||
};
|
||||
|
||||
ContextMenu.prototype = {
|
||||
|
||||
constructor: ContextMenu
|
||||
,show: function(e) {
|
||||
|
||||
var $menu
|
||||
, evt
|
||||
, tp
|
||||
, items
|
||||
, relatedTarget = { relatedTarget: this, target: e.currentTarget };
|
||||
|
||||
if (this.isDisabled()) return;
|
||||
|
||||
this.closemenu();
|
||||
|
||||
if (!this.before.call(this,e,$(e.currentTarget))) return;
|
||||
|
||||
$menu = this.getMenu();
|
||||
$menu.trigger(evt = $.Event('show.bs.context', relatedTarget));
|
||||
|
||||
tp = this.getPosition(e, $menu);
|
||||
items = 'li:not(.divider)';
|
||||
$menu.attr('style', '')
|
||||
.css(tp)
|
||||
.addClass('open')
|
||||
.on('click.context.data-api', items, $.proxy(this.onItem, this, $(e.currentTarget)))
|
||||
.trigger('shown.bs.context', relatedTarget);
|
||||
|
||||
// Delegating the `closemenu` only on the currently opened menu.
|
||||
// This prevents other opened menus from closing.
|
||||
$('html')
|
||||
.on('click.context.data-api', $menu.selector, $.proxy(this.closemenu, this));
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
,closemenu: function(e) {
|
||||
var $menu
|
||||
, evt
|
||||
, items
|
||||
, relatedTarget;
|
||||
|
||||
$menu = this.getMenu();
|
||||
|
||||
if(!$menu.hasClass('open')) return;
|
||||
|
||||
relatedTarget = { relatedTarget: this };
|
||||
$menu.trigger(evt = $.Event('hide.bs.context', relatedTarget));
|
||||
|
||||
items = 'li:not(.divider)';
|
||||
$menu.removeClass('open')
|
||||
.off('click.context.data-api', items)
|
||||
.trigger('hidden.bs.context', relatedTarget);
|
||||
|
||||
$('html')
|
||||
.off('click.context.data-api', $menu.selector);
|
||||
// Don't propagate click event so other currently
|
||||
// opened menus won't close.
|
||||
return false;
|
||||
}
|
||||
|
||||
,keydown: function(e) {
|
||||
if (e.which == 27) this.closemenu(e);
|
||||
}
|
||||
|
||||
,before: function(e) {
|
||||
return true;
|
||||
}
|
||||
|
||||
,onItem: function(e) {
|
||||
return true;
|
||||
}
|
||||
|
||||
,listen: function () {
|
||||
this.$element.on('contextmenu.context.data-api', this.scopes, $.proxy(this.show, this));
|
||||
$('html').on('click.context.data-api', $.proxy(this.closemenu, this));
|
||||
$('html').on('keydown.context.data-api', $.proxy(this.keydown, this));
|
||||
}
|
||||
|
||||
,destroy: function() {
|
||||
this.$element.off('.context.data-api').removeData('context');
|
||||
$('html').off('.context.data-api');
|
||||
}
|
||||
|
||||
,isDisabled: function() {
|
||||
return this.$element.hasClass('disabled') ||
|
||||
this.$element.attr('disabled');
|
||||
}
|
||||
|
||||
,getMenu: function () {
|
||||
var selector = this.$element.data('target')
|
||||
, $menu;
|
||||
|
||||
if (!selector) {
|
||||
selector = this.$element.attr('href');
|
||||
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
|
||||
}
|
||||
|
||||
$menu = $(selector);
|
||||
|
||||
return $menu && $menu.length ? $menu : this.$element.find(selector);
|
||||
}
|
||||
|
||||
,getPosition: function(e, $menu) {
|
||||
var mouseX = e.clientX
|
||||
, mouseY = e.clientY
|
||||
, boundsX = $(window).width()
|
||||
, boundsY = $(window).height()
|
||||
, menuWidth = $menu.find('.dropdown-menu').outerWidth()
|
||||
, menuHeight = $menu.find('.dropdown-menu').outerHeight()
|
||||
, tp = {"position":"absolute","z-index":9999}
|
||||
, Y, X, parentOffset;
|
||||
|
||||
if (mouseY + menuHeight > boundsY) {
|
||||
Y = {"top": mouseY - menuHeight + $(window).scrollTop()};
|
||||
} else {
|
||||
Y = {"top": mouseY + $(window).scrollTop()};
|
||||
}
|
||||
|
||||
if ((mouseX + menuWidth > boundsX) && ((mouseX - menuWidth) > 0)) {
|
||||
X = {"left": mouseX - menuWidth + $(window).scrollLeft()};
|
||||
} else {
|
||||
X = {"left": mouseX + $(window).scrollLeft()};
|
||||
}
|
||||
|
||||
// If context-menu's parent is positioned using absolute or relative positioning,
|
||||
// the calculated mouse position will be incorrect.
|
||||
// Adjust the position of the menu by its offset parent position.
|
||||
parentOffset = $menu.offsetParent().offset();
|
||||
X.left = X.left - parentOffset.left;
|
||||
Y.top = Y.top - parentOffset.top;
|
||||
|
||||
return $.extend(tp, Y, X);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* CONTEXT MENU PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
$.fn.contextmenu = function (option,e) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('context')
|
||||
, options = (typeof option == 'object') && option;
|
||||
|
||||
if (!data) $this.data('context', (data = new ContextMenu($this, options)));
|
||||
if (typeof option == 'string') data[option].call(data, e);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.contextmenu.Constructor = ContextMenu;
|
||||
|
||||
/* APPLY TO STANDARD CONTEXT MENU ELEMENTS
|
||||
* =================================== */
|
||||
|
||||
$(document)
|
||||
.on('contextmenu.context.data-api', function() {
|
||||
$(toggle).each(function () {
|
||||
var data = $(this).data('context');
|
||||
if (!data) return;
|
||||
data.closemenu();
|
||||
});
|
||||
})
|
||||
.on('contextmenu.context.data-api', toggle, function(e) {
|
||||
$(this).contextmenu('show', e);
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
Reference in New Issue
Block a user