mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
366 lines
10 KiB
JavaScript
366 lines
10 KiB
JavaScript
/*
|
|
* jquery.draggable
|
|
* https://github.com/ducksboard/gridster.js
|
|
*
|
|
* Copyright (c) 2012 ducksboard
|
|
* Licensed under the MIT licenses.
|
|
*/
|
|
|
|
;(function($, window, document, undefined) {
|
|
|
|
var defaults = {
|
|
items: 'li',
|
|
distance: 1,
|
|
limit: true,
|
|
offset_left: 0,
|
|
autoscroll: true,
|
|
ignore_dragging: ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'],
|
|
handle: null,
|
|
container_width: 0, // 0 == auto
|
|
move_element: true,
|
|
helper: false // or 'clone'
|
|
// drag: function(e) {},
|
|
// start : function(e, ui) {},
|
|
// stop : function(e) {}
|
|
};
|
|
|
|
var $window = $(window);
|
|
var isTouch = !!('ontouchstart' in window);
|
|
var pointer_events = {
|
|
start: isTouch ? 'touchstart.gridster-draggable' : 'mousedown.gridster-draggable',
|
|
move: isTouch ? 'touchmove.gridster-draggable' : 'mousemove.gridster-draggable',
|
|
end: isTouch ? 'touchend.gridster-draggable' : 'mouseup.gridster-draggable'
|
|
};
|
|
|
|
/**
|
|
* Basic drag implementation for DOM elements inside a container.
|
|
* Provide start/stop/drag callbacks.
|
|
*
|
|
* @class Draggable
|
|
* @param {HTMLElement} el The HTMLelement that contains all the widgets
|
|
* to be dragged.
|
|
* @param {Object} [options] An Object with all options you want to
|
|
* overwrite:
|
|
* @param {HTMLElement|String} [options.items] Define who will
|
|
* be the draggable items. Can be a CSS Selector String or a
|
|
* collection of HTMLElements.
|
|
* @param {Number} [options.distance] Distance in pixels after mousedown
|
|
* the mouse must move before dragging should start.
|
|
* @param {Boolean} [options.limit] Constrains dragging to the width of
|
|
* the container
|
|
* @param {offset_left} [options.offset_left] Offset added to the item
|
|
* that is being dragged.
|
|
* @param {Number} [options.drag] Executes a callback when the mouse is
|
|
* moved during the dragging.
|
|
* @param {Number} [options.start] Executes a callback when the drag
|
|
* starts.
|
|
* @param {Number} [options.stop] Executes a callback when the drag stops.
|
|
* @return {Object} Returns `el`.
|
|
* @constructor
|
|
*/
|
|
function Draggable(el, options) {
|
|
this.options = $.extend({}, defaults, options);
|
|
this.$body = $(document.body);
|
|
this.$container = $(el);
|
|
this.$dragitems = $(this.options.items, this.$container);
|
|
this.is_dragging = false;
|
|
this.player_min_left = 0 + this.options.offset_left;
|
|
this.init();
|
|
}
|
|
|
|
var fn = Draggable.prototype;
|
|
|
|
fn.init = function() {
|
|
this.calculate_positions();
|
|
this.$container.css('position', 'relative');
|
|
this.disabled = false;
|
|
this.events();
|
|
|
|
$(window).bind('resize.gridster-draggable',
|
|
throttle($.proxy(this.calculate_positions, this), 200));
|
|
};
|
|
|
|
fn.events = function() {
|
|
this.$container.on('selectstart.gridster-draggable',
|
|
$.proxy(this.on_select_start, this));
|
|
|
|
this.$container.on(pointer_events.start, this.options.items,
|
|
$.proxy(this.drag_handler, this));
|
|
|
|
this.$body.on(pointer_events.end, $.proxy(function(e) {
|
|
this.is_dragging = false;
|
|
if (this.disabled) { return; }
|
|
this.$body.off(pointer_events.move);
|
|
if (this.drag_start) {
|
|
this.on_dragstop(e);
|
|
}
|
|
}, this));
|
|
};
|
|
|
|
fn.get_actual_pos = function($el) {
|
|
var pos = $el.position();
|
|
return pos;
|
|
};
|
|
|
|
|
|
fn.get_mouse_pos = function(e) {
|
|
if (isTouch) {
|
|
var oe = e.originalEvent;
|
|
e = oe.touches.length ? oe.touches[0] : oe.changedTouches[0];
|
|
}
|
|
|
|
return {
|
|
left: e.clientX,
|
|
top: e.clientY
|
|
};
|
|
};
|
|
|
|
|
|
fn.get_offset = function(e) {
|
|
e.preventDefault();
|
|
var mouse_actual_pos = this.get_mouse_pos(e);
|
|
var diff_x = Math.round(
|
|
mouse_actual_pos.left - this.mouse_init_pos.left);
|
|
var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
|
|
|
|
var left = Math.round(this.el_init_offset.left + diff_x - this.baseX);
|
|
var top = Math.round(
|
|
this.el_init_offset.top + diff_y - this.baseY + this.scrollOffset);
|
|
|
|
if (this.options.limit) {
|
|
if (left > this.player_max_left) {
|
|
left = this.player_max_left;
|
|
} else if(left < this.player_min_left) {
|
|
left = this.player_min_left;
|
|
}
|
|
}
|
|
|
|
return {
|
|
position: {
|
|
left: left,
|
|
top: top
|
|
},
|
|
pointer: {
|
|
left: mouse_actual_pos.left,
|
|
top: mouse_actual_pos.top,
|
|
diff_left: diff_x,
|
|
diff_top: diff_y + this.scrollOffset
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
fn.get_drag_data = function(e) {
|
|
var offset = this.get_offset(e);
|
|
offset.$player = this.$player;
|
|
offset.$helper = this.helper ? this.$helper : this.$player;
|
|
|
|
return offset;
|
|
};
|
|
|
|
|
|
fn.manage_scroll = function(data) {
|
|
/* scroll document */
|
|
var nextScrollTop;
|
|
var scrollTop = $window.scrollTop();
|
|
var min_window_y = scrollTop;
|
|
var max_window_y = min_window_y + this.window_height;
|
|
|
|
var mouse_down_zone = max_window_y - 50;
|
|
var mouse_up_zone = min_window_y + 50;
|
|
|
|
var abs_mouse_left = data.pointer.left;
|
|
var abs_mouse_top = min_window_y + data.pointer.top;
|
|
|
|
var max_player_y = (this.doc_height - this.window_height +
|
|
this.player_height);
|
|
|
|
if (abs_mouse_top >= mouse_down_zone) {
|
|
nextScrollTop = scrollTop + 30;
|
|
if (nextScrollTop < max_player_y) {
|
|
$window.scrollTop(nextScrollTop);
|
|
this.scrollOffset = this.scrollOffset + 30;
|
|
}
|
|
}
|
|
|
|
if (abs_mouse_top <= mouse_up_zone) {
|
|
nextScrollTop = scrollTop - 30;
|
|
if (nextScrollTop > 0) {
|
|
$window.scrollTop(nextScrollTop);
|
|
this.scrollOffset = this.scrollOffset - 30;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
fn.calculate_positions = function(e) {
|
|
this.window_height = $window.height();
|
|
};
|
|
|
|
|
|
fn.drag_handler = function(e) {
|
|
var node = e.target.nodeName;
|
|
if (this.disabled || e.which !== 1 && !isTouch) {
|
|
return;
|
|
}
|
|
|
|
if (this.ignore_drag(e)) {
|
|
return;
|
|
}
|
|
|
|
var self = this;
|
|
var first = true;
|
|
this.$player = $(e.currentTarget);
|
|
|
|
this.el_init_pos = this.get_actual_pos(this.$player);
|
|
this.mouse_init_pos = this.get_mouse_pos(e);
|
|
this.offsetY = this.mouse_init_pos.top - this.el_init_pos.top;
|
|
|
|
this.$body.on(pointer_events.move, function(mme) {
|
|
var mouse_actual_pos = self.get_mouse_pos(mme);
|
|
var diff_x = Math.abs(
|
|
mouse_actual_pos.left - self.mouse_init_pos.left);
|
|
var diff_y = Math.abs(
|
|
mouse_actual_pos.top - self.mouse_init_pos.top);
|
|
if (!(diff_x > self.options.distance ||
|
|
diff_y > self.options.distance)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
if (first) {
|
|
first = false;
|
|
self.on_dragstart.call(self, mme);
|
|
return false;
|
|
}
|
|
|
|
if (self.is_dragging === true) {
|
|
self.on_dragmove.call(self, mme);
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
if (!isTouch) { return false; }
|
|
};
|
|
|
|
|
|
fn.on_dragstart = function(e) {
|
|
e.preventDefault();
|
|
|
|
if (this.is_dragging) { return this; }
|
|
|
|
this.drag_start = this.is_dragging = true;
|
|
var offset = this.$container.offset();
|
|
this.baseX = Math.round(offset.left);
|
|
this.baseY = Math.round(offset.top);
|
|
this.doc_height = $(document).height();
|
|
|
|
if (this.options.helper === 'clone') {
|
|
this.$helper = this.$player.clone()
|
|
.appendTo(this.$container).addClass('helper');
|
|
this.helper = true;
|
|
} else {
|
|
this.helper = false;
|
|
}
|
|
|
|
this.scrollOffset = 0;
|
|
this.el_init_offset = this.$player.offset();
|
|
this.player_width = this.$player.width();
|
|
this.player_height = this.$player.height();
|
|
|
|
var container_width = this.options.container_width || this.$container.width();
|
|
this.player_max_left = (container_width - this.player_width +
|
|
this.options.offset_left);
|
|
|
|
if (this.options.start) {
|
|
this.options.start.call(this.$player, e, this.get_drag_data(e));
|
|
}
|
|
return false;
|
|
};
|
|
|
|
|
|
fn.on_dragmove = function(e) {
|
|
var data = this.get_drag_data(e);
|
|
|
|
this.options.autoscroll && this.manage_scroll(data);
|
|
|
|
if (this.options.move_element) {
|
|
(this.helper ? this.$helper : this.$player).css({
|
|
'position': 'absolute',
|
|
'left' : data.position.left,
|
|
'top' : data.position.top
|
|
});
|
|
}
|
|
|
|
var last_position = this.last_position || data.position;
|
|
data.prev_position = last_position;
|
|
|
|
if (this.options.drag) {
|
|
this.options.drag.call(this.$player, e, data);
|
|
}
|
|
|
|
this.last_position = data.position;
|
|
return false;
|
|
};
|
|
|
|
|
|
fn.on_dragstop = function(e) {
|
|
var data = this.get_drag_data(e);
|
|
this.drag_start = false;
|
|
|
|
if (this.options.stop) {
|
|
this.options.stop.call(this.$player, e, data);
|
|
}
|
|
|
|
if (this.helper) {
|
|
this.$helper.remove();
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
fn.on_select_start = function(e) {
|
|
if (this.disabled) { return; }
|
|
|
|
if (this.ignore_drag(e)) {
|
|
return;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
fn.enable = function() {
|
|
this.disabled = false;
|
|
};
|
|
|
|
fn.disable = function() {
|
|
this.disabled = true;
|
|
};
|
|
|
|
fn.destroy = function() {
|
|
this.disable();
|
|
|
|
this.$container.off('.gridster-draggable');
|
|
this.$body.off('.gridster-draggable');
|
|
$(window).off('.gridster-draggable');
|
|
|
|
$.removeData(this.$container, 'drag');
|
|
};
|
|
|
|
fn.ignore_drag = function(event) {
|
|
if (this.options.handle) {
|
|
return !$(event.target).is(this.options.handle);
|
|
}
|
|
|
|
return $(event.target).is(this.options.ignore_dragging.join(', '));
|
|
};
|
|
|
|
//jQuery adapter
|
|
$.fn.drag = function ( options ) {
|
|
return new Draggable(this, options);
|
|
};
|
|
|
|
|
|
}(jQuery, window, document));
|