mirror of
https://github.com/stylersnico/librenms.git
synced 2026-07-28 08:02:41 +02:00
Add 'lib/gridster/' from commit 'a7ed9a4adec9f7c8361ad6f392993a1f0b9c1601'
git-subtree-dir: lib/gridster git-subtree-mainline:80f8419dacgit-subtree-split:a7ed9a4ade
This commit is contained in:
laf
@@ -0,0 +1,247 @@
|
||||
/*
|
||||
* jquery.collision
|
||||
* https://github.com/ducksboard/gridster.js
|
||||
*
|
||||
* Copyright (c) 2012 ducksboard
|
||||
* Licensed under the MIT licenses.
|
||||
*/
|
||||
|
||||
;(function(root, factory) {
|
||||
'use strict';
|
||||
if(typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
}
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define('gridster-collision', ['jquery', 'gridster-coords'], factory);
|
||||
} else {
|
||||
root.GridsterCollision = factory(root.$ || root.jQuery,
|
||||
root.GridsterCoords);
|
||||
}
|
||||
|
||||
}(this, function($, Coords) {
|
||||
'use strict';
|
||||
var defaults = {
|
||||
colliders_context: document.body,
|
||||
overlapping_region: 'C'
|
||||
// ,on_overlap: function(collider_data){},
|
||||
// on_overlap_start : function(collider_data){},
|
||||
// on_overlap_stop : function(collider_data){}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Detects collisions between a DOM element against other DOM elements or
|
||||
* Coords objects.
|
||||
*
|
||||
* @class Collision
|
||||
* @uses Coords
|
||||
* @param {HTMLElement} el The jQuery wrapped HTMLElement.
|
||||
* @param {HTMLElement|Array} colliders Can be a jQuery collection
|
||||
* of HTMLElements or an Array of Coords instances.
|
||||
* @param {Object} [options] An Object with all options you want to
|
||||
* overwrite:
|
||||
* @param {String} [options.overlapping_region] Determines when collision
|
||||
* is valid, depending on the overlapped area. Values can be: 'N', 'S',
|
||||
* 'W', 'E', 'C' or 'all'. Default is 'C'.
|
||||
* @param {Function} [options.on_overlap_start] Executes a function the first
|
||||
* time each `collider ` is overlapped.
|
||||
* @param {Function} [options.on_overlap_stop] Executes a function when a
|
||||
* `collider` is no longer collided.
|
||||
* @param {Function} [options.on_overlap] Executes a function when the
|
||||
* mouse is moved during the collision.
|
||||
* @return {Object} Collision instance.
|
||||
* @constructor
|
||||
*/
|
||||
function Collision(el, colliders, options) {
|
||||
this.options = $.extend(defaults, options);
|
||||
this.$element = el;
|
||||
this.last_colliders = [];
|
||||
this.last_colliders_coords = [];
|
||||
this.set_colliders(colliders);
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
Collision.defaults = defaults;
|
||||
|
||||
var fn = Collision.prototype;
|
||||
|
||||
|
||||
fn.init = function() {
|
||||
this.find_collisions();
|
||||
};
|
||||
|
||||
|
||||
fn.overlaps = function(a, b) {
|
||||
var x = false;
|
||||
var y = false;
|
||||
|
||||
if ((b.x1 >= a.x1 && b.x1 <= a.x2) ||
|
||||
(b.x2 >= a.x1 && b.x2 <= a.x2) ||
|
||||
(a.x1 >= b.x1 && a.x2 <= b.x2)
|
||||
) { x = true; }
|
||||
|
||||
if ((b.y1 >= a.y1 && b.y1 <= a.y2) ||
|
||||
(b.y2 >= a.y1 && b.y2 <= a.y2) ||
|
||||
(a.y1 >= b.y1 && a.y2 <= b.y2)
|
||||
) { y = true; }
|
||||
|
||||
return (x && y);
|
||||
};
|
||||
|
||||
|
||||
fn.detect_overlapping_region = function(a, b){
|
||||
var regionX = '';
|
||||
var regionY = '';
|
||||
|
||||
if (a.y1 > b.cy && a.y1 < b.y2) { regionX = 'N'; }
|
||||
if (a.y2 > b.y1 && a.y2 < b.cy) { regionX = 'S'; }
|
||||
if (a.x1 > b.cx && a.x1 < b.x2) { regionY = 'W'; }
|
||||
if (a.x2 > b.x1 && a.x2 < b.cx) { regionY = 'E'; }
|
||||
|
||||
return (regionX + regionY) || 'C';
|
||||
};
|
||||
|
||||
|
||||
fn.calculate_overlapped_area_coords = function(a, b){
|
||||
var x1 = Math.max(a.x1, b.x1);
|
||||
var y1 = Math.max(a.y1, b.y1);
|
||||
var x2 = Math.min(a.x2, b.x2);
|
||||
var y2 = Math.min(a.y2, b.y2);
|
||||
|
||||
return $({
|
||||
left: x1,
|
||||
top: y1,
|
||||
width : (x2 - x1),
|
||||
height: (y2 - y1)
|
||||
}).coords().get();
|
||||
};
|
||||
|
||||
|
||||
fn.calculate_overlapped_area = function(coords){
|
||||
return (coords.width * coords.height);
|
||||
};
|
||||
|
||||
|
||||
fn.manage_colliders_start_stop = function(new_colliders_coords, start_callback, stop_callback){
|
||||
var last = this.last_colliders_coords;
|
||||
|
||||
for (var i = 0, il = last.length; i < il; i++) {
|
||||
if ($.inArray(last[i], new_colliders_coords) === -1) {
|
||||
start_callback.call(this, last[i]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var j = 0, jl = new_colliders_coords.length; j < jl; j++) {
|
||||
if ($.inArray(new_colliders_coords[j], last) === -1) {
|
||||
stop_callback.call(this, new_colliders_coords[j]);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
fn.find_collisions = function(player_data_coords){
|
||||
var self = this;
|
||||
var overlapping_region = this.options.overlapping_region;
|
||||
var colliders_coords = [];
|
||||
var colliders_data = [];
|
||||
var $colliders = (this.colliders || this.$colliders);
|
||||
var count = $colliders.length;
|
||||
var player_coords = self.$element.coords()
|
||||
.update(player_data_coords || false).get();
|
||||
|
||||
while(count--){
|
||||
var $collider = self.$colliders ?
|
||||
$($colliders[count]) : $colliders[count];
|
||||
var $collider_coords_ins = ($collider.isCoords) ?
|
||||
$collider : $collider.coords();
|
||||
var collider_coords = $collider_coords_ins.get();
|
||||
var overlaps = self.overlaps(player_coords, collider_coords);
|
||||
|
||||
if (!overlaps) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var region = self.detect_overlapping_region(
|
||||
player_coords, collider_coords);
|
||||
|
||||
//todo: make this an option
|
||||
if (region === overlapping_region || overlapping_region === 'all') {
|
||||
|
||||
var area_coords = self.calculate_overlapped_area_coords(
|
||||
player_coords, collider_coords);
|
||||
var area = self.calculate_overlapped_area(area_coords);
|
||||
if ( 0 !== area ) {
|
||||
var collider_data = {
|
||||
area: area,
|
||||
area_coords : area_coords,
|
||||
region: region,
|
||||
coords: collider_coords,
|
||||
player_coords: player_coords,
|
||||
el: $collider
|
||||
};
|
||||
|
||||
if (self.options.on_overlap) {
|
||||
self.options.on_overlap.call(this, collider_data);
|
||||
}
|
||||
colliders_coords.push($collider_coords_ins);
|
||||
colliders_data.push(collider_data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (self.options.on_overlap_stop || self.options.on_overlap_start) {
|
||||
this.manage_colliders_start_stop(colliders_coords,
|
||||
self.options.on_overlap_start, self.options.on_overlap_stop);
|
||||
}
|
||||
|
||||
this.last_colliders_coords = colliders_coords;
|
||||
|
||||
return colliders_data;
|
||||
};
|
||||
|
||||
|
||||
fn.get_closest_colliders = function(player_data_coords){
|
||||
var colliders = this.find_collisions(player_data_coords);
|
||||
|
||||
colliders.sort(function(a, b) {
|
||||
/* if colliders are being overlapped by the "C" (center) region,
|
||||
* we have to set a lower index in the array to which they are placed
|
||||
* above in the grid. */
|
||||
if (a.region === 'C' && b.region === 'C') {
|
||||
if (a.coords.y1 < b.coords.y1 || a.coords.x1 < b.coords.x1) {
|
||||
return - 1;
|
||||
}else{
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (a.area < b.area) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 1;
|
||||
});
|
||||
return colliders;
|
||||
};
|
||||
|
||||
|
||||
fn.set_colliders = function(colliders) {
|
||||
if (typeof colliders === 'string' || colliders instanceof $) {
|
||||
this.$colliders = $(colliders,
|
||||
this.options.colliders_context).not(this.$element);
|
||||
}else{
|
||||
this.colliders = $(colliders);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//jQuery adapter
|
||||
$.fn.collision = function(collider, options) {
|
||||
return new Collision( this, collider, options );
|
||||
};
|
||||
|
||||
return Collision;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,134 @@
|
||||
/*
|
||||
* jquery.coords
|
||||
* https://github.com/ducksboard/gridster.js
|
||||
*
|
||||
* Copyright (c) 2012 ducksboard
|
||||
* Licensed under the MIT licenses.
|
||||
*/
|
||||
|
||||
;(function(root, factory) {
|
||||
'use strict';
|
||||
if(typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
}
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define('gridster-coords', ['jquery'], factory);
|
||||
} else {
|
||||
root.GridsterCoords = factory(root.$ || root.jQuery);
|
||||
}
|
||||
|
||||
}(this, function($) {
|
||||
'use strict';
|
||||
/**
|
||||
* Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
|
||||
* to simulate DOM elements on the screen.
|
||||
* Coords is used by Gridster to create a faux grid with any DOM element can
|
||||
* collide.
|
||||
*
|
||||
* @class Coords
|
||||
* @param {HTMLElement|Object} obj The jQuery HTMLElement or a object with: left,
|
||||
* top, width and height properties.
|
||||
* @return {Object} Coords instance.
|
||||
* @constructor
|
||||
*/
|
||||
function Coords(obj) {
|
||||
if (obj[0] && $.isPlainObject(obj[0])) {
|
||||
this.data = obj[0];
|
||||
}else {
|
||||
this.el = obj;
|
||||
}
|
||||
|
||||
this.isCoords = true;
|
||||
this.coords = {};
|
||||
this.init();
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
var fn = Coords.prototype;
|
||||
|
||||
|
||||
fn.init = function(){
|
||||
this.set();
|
||||
this.original_coords = this.get();
|
||||
};
|
||||
|
||||
|
||||
fn.set = function(update, not_update_offsets) {
|
||||
var el = this.el;
|
||||
|
||||
if (el && !update) {
|
||||
this.data = el.offset();
|
||||
this.data.width = el[0].scrollWidth;
|
||||
this.data.height = el[0].scrollHeight;
|
||||
}
|
||||
|
||||
if (el && update && !not_update_offsets) {
|
||||
var offset = el.offset();
|
||||
this.data.top = offset.top;
|
||||
this.data.left = offset.left;
|
||||
}
|
||||
|
||||
var d = this.data;
|
||||
|
||||
if ( d.left === undefined ) {
|
||||
d.left = d.x1;
|
||||
}
|
||||
|
||||
if ( d.top === undefined ) {
|
||||
d.top = d.y1;
|
||||
}
|
||||
|
||||
this.coords.x1 = d.left;
|
||||
this.coords.y1 = d.top;
|
||||
this.coords.x2 = d.left + d.width;
|
||||
this.coords.y2 = d.top + d.height;
|
||||
this.coords.cx = d.left + (d.width / 2);
|
||||
this.coords.cy = d.top + (d.height / 2);
|
||||
this.coords.width = d.width;
|
||||
this.coords.height = d.height;
|
||||
this.coords.el = el || false ;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
fn.update = function(data){
|
||||
if (!data && !this.el) {
|
||||
return this;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
var new_data = $.extend({}, this.data, data);
|
||||
this.data = new_data;
|
||||
return this.set(true, true);
|
||||
}
|
||||
|
||||
this.set(true);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
fn.get = function(){
|
||||
return this.coords;
|
||||
};
|
||||
|
||||
fn.destroy = function() {
|
||||
this.el.removeData('coords');
|
||||
delete this.el;
|
||||
};
|
||||
|
||||
//jQuery adapter
|
||||
$.fn.coords = function() {
|
||||
if (this.data('coords') ) {
|
||||
return this.data('coords');
|
||||
}
|
||||
|
||||
var ins = new Coords(this);
|
||||
this.data('coords', ins);
|
||||
return ins;
|
||||
};
|
||||
|
||||
return Coords;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,456 @@
|
||||
/*
|
||||
* jquery.draggable
|
||||
* https://github.com/ducksboard/gridster.js
|
||||
*
|
||||
* Copyright (c) 2012 ducksboard
|
||||
* Licensed under the MIT licenses.
|
||||
*/
|
||||
|
||||
;(function(root, factory) {
|
||||
'use strict';
|
||||
if(typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
}
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define('gridster-draggable', ['jquery'], factory);
|
||||
} else {
|
||||
root.GridsterDraggable = factory(root.$ || root.jQuery);
|
||||
}
|
||||
|
||||
}(this, function($) {
|
||||
'use strict';
|
||||
var defaults = {
|
||||
items: 'li',
|
||||
distance: 1,
|
||||
limit: true,
|
||||
offset_left: 0,
|
||||
autoscroll: true,
|
||||
ignore_dragging: ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'], // or function
|
||||
handle: null,
|
||||
container_width: 0, // 0 == auto
|
||||
move_element: true,
|
||||
helper: false, // or 'clone'
|
||||
remove_helper: true
|
||||
// drag: function(e) {},
|
||||
// start : function(e, ui) {},
|
||||
// stop : function(e) {}
|
||||
};
|
||||
|
||||
var $window = $(window);
|
||||
var dir_map = { x : 'left', y : 'top' };
|
||||
var isTouch = !!('ontouchstart' in window);
|
||||
|
||||
var capitalize = function(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
};
|
||||
|
||||
var idCounter = 0;
|
||||
var uniqId = function() {
|
||||
return ++idCounter + '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 {Object|Function} [options.ignore_dragging] Array of node names
|
||||
* that sould not trigger dragging, by default is `['INPUT', 'TEXTAREA',
|
||||
* 'SELECT', 'BUTTON']`. If a function is used return true to ignore dragging.
|
||||
* @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.$document = $(document);
|
||||
this.$container = $(el);
|
||||
this.$scroll_container = this.options.scroll_container === window ?
|
||||
$(window) : this.$container.closest(this.options.scroll_container);
|
||||
this.is_dragging = false;
|
||||
this.player_min_left = 0 + this.options.offset_left;
|
||||
this.id = uniqId();
|
||||
this.ns = '.gridster-draggable-' + this.id;
|
||||
this.init();
|
||||
}
|
||||
|
||||
Draggable.defaults = defaults;
|
||||
|
||||
var fn = Draggable.prototype;
|
||||
|
||||
fn.init = function() {
|
||||
var pos = this.$container.css('position');
|
||||
this.calculate_dimensions();
|
||||
this.$container.css('position', pos === 'static' ? 'relative' : pos);
|
||||
this.disabled = false;
|
||||
this.events();
|
||||
|
||||
$window.bind(this.nsEvent('resize'),
|
||||
throttle($.proxy(this.calculate_dimensions, this), 200));
|
||||
};
|
||||
|
||||
fn.nsEvent = function(ev) {
|
||||
return (ev || '') + this.ns;
|
||||
};
|
||||
|
||||
fn.events = function() {
|
||||
this.pointer_events = {
|
||||
start: this.nsEvent('touchstart') + ' ' + this.nsEvent('mousedown'),
|
||||
move: this.nsEvent('touchmove') + ' ' + this.nsEvent('mousemove'),
|
||||
end: this.nsEvent('touchend') + ' ' + this.nsEvent('mouseup')
|
||||
};
|
||||
|
||||
this.$container.on(this.nsEvent('selectstart'),
|
||||
$.proxy(this.on_select_start, this));
|
||||
|
||||
this.$container.on(this.pointer_events.start, this.options.items,
|
||||
$.proxy(this.drag_handler, this));
|
||||
|
||||
this.$document.on(this.pointer_events.end, $.proxy(function(e) {
|
||||
this.is_dragging = false;
|
||||
if (this.disabled) { return; }
|
||||
this.$document.off(this.pointer_events.move);
|
||||
if (this.drag_start) {
|
||||
this.on_dragstop(e);
|
||||
}
|
||||
}, this));
|
||||
};
|
||||
|
||||
fn.get_actual_pos = function($el) {
|
||||
return $el.position();
|
||||
};
|
||||
|
||||
|
||||
fn.get_mouse_pos = function(e) {
|
||||
if (e.originalEvent && e.originalEvent.touches) {
|
||||
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 +
|
||||
this.$scroll_container.scrollLeft() -
|
||||
this.scroll_container_offset_x);
|
||||
var top = Math.round(this.el_init_offset.top +
|
||||
diff_y - this.baseY +
|
||||
this.$scroll_container.scrollTop() -
|
||||
this.scroll_container_offset_y);
|
||||
|
||||
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 + (this.$scroll_container.scrollLeft() -
|
||||
this.scroll_container_offset_x),
|
||||
diff_top: diff_y + (this.$scroll_container.scrollTop() -
|
||||
this.scroll_container_offset_y)
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
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.set_limits = function(container_width) {
|
||||
container_width || (container_width = this.$container.width());
|
||||
this.player_max_left = (container_width - this.player_width +
|
||||
- this.options.offset_left);
|
||||
|
||||
this.options.container_width = container_width;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
fn.scroll_in = function(axis, data) {
|
||||
var dir_prop = dir_map[axis];
|
||||
|
||||
var area_size = 50;
|
||||
var scroll_inc = 30;
|
||||
var scrollDir = 'scroll' + capitalize(dir_prop);
|
||||
|
||||
var is_x = axis === 'x';
|
||||
var scroller_size = is_x ? this.scroller_width : this.scroller_height;
|
||||
var doc_size;
|
||||
if (this.$scroll_container === window){
|
||||
doc_size = is_x ? this.$scroll_container.width() :
|
||||
this.$scroll_container.height();
|
||||
}else{
|
||||
doc_size = is_x ? this.$scroll_container[0].scrollWidth :
|
||||
this.$scroll_container[0].scrollHeight;
|
||||
}
|
||||
var player_size = is_x ? this.$player.width() : this.$player.height();
|
||||
|
||||
var next_scroll;
|
||||
var scroll_offset = this.$scroll_container[scrollDir]();
|
||||
var min_scroll_pos = scroll_offset;
|
||||
var max_scroll_pos = min_scroll_pos + scroller_size;
|
||||
|
||||
var mouse_next_zone = max_scroll_pos - area_size; // down/right
|
||||
var mouse_prev_zone = min_scroll_pos + area_size; // up/left
|
||||
|
||||
var abs_mouse_pos = min_scroll_pos + data.pointer[dir_prop];
|
||||
|
||||
var max_player_pos = (doc_size - scroller_size + player_size);
|
||||
|
||||
if (abs_mouse_pos >= mouse_next_zone) {
|
||||
next_scroll = scroll_offset + scroll_inc;
|
||||
if (next_scroll < max_player_pos) {
|
||||
this.$scroll_container[scrollDir](next_scroll);
|
||||
this['scroll_offset_' + axis] += scroll_inc;
|
||||
}
|
||||
}
|
||||
|
||||
if (abs_mouse_pos <= mouse_prev_zone) {
|
||||
next_scroll = scroll_offset - scroll_inc;
|
||||
if (next_scroll > 0) {
|
||||
this.$scroll_container[scrollDir](next_scroll);
|
||||
this['scroll_offset_' + axis] -= scroll_inc;
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
fn.manage_scroll = function(data) {
|
||||
this.scroll_in('x', data);
|
||||
this.scroll_in('y', data);
|
||||
};
|
||||
|
||||
|
||||
fn.calculate_dimensions = function() {
|
||||
this.scroller_height = this.$scroll_container.height();
|
||||
this.scroller_width = this.$scroll_container.width();
|
||||
};
|
||||
|
||||
|
||||
fn.drag_handler = function(e) {
|
||||
// skip if drag is disabled, or click was not done with the mouse primary button
|
||||
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.$document.on(this.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);
|
||||
|
||||
if (this.options.helper === 'clone') {
|
||||
this.$helper = this.$player.clone()
|
||||
.appendTo(this.$container).addClass('helper');
|
||||
this.helper = true;
|
||||
} else {
|
||||
this.helper = false;
|
||||
}
|
||||
|
||||
this.scroll_container_offset_y = this.$scroll_container.scrollTop();
|
||||
this.scroll_container_offset_x = this.$scroll_container.scrollLeft();
|
||||
this.el_init_offset = this.$player.offset();
|
||||
this.player_width = this.$player.width();
|
||||
|
||||
this.set_limits(this.options.container_width);
|
||||
|
||||
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.options.remove_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(this.ns);
|
||||
this.$document.off(this.ns);
|
||||
$window.off(this.ns);
|
||||
|
||||
$.removeData(this.$container, 'drag');
|
||||
};
|
||||
|
||||
fn.ignore_drag = function(event) {
|
||||
if (this.options.handle) {
|
||||
return !$(event.target).is(this.options.handle);
|
||||
}
|
||||
|
||||
if ($.isFunction(this.options.ignore_dragging)) {
|
||||
return this.options.ignore_dragging(event);
|
||||
}
|
||||
|
||||
if (this.options.resize) {
|
||||
return ! $(event.target).is(this.options.items);
|
||||
}
|
||||
|
||||
return $(event.target).is(this.options.ignore_dragging.join(', '));
|
||||
};
|
||||
|
||||
//jQuery adapter
|
||||
$.fn.gridDraggable = function ( options ) {
|
||||
return new Draggable(this, options);
|
||||
};
|
||||
|
||||
$.fn.dragg = function (options) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, 'drag')) {
|
||||
$.data(this, 'drag', new Draggable(this, options));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return Draggable;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,151 @@
|
||||
;(function(root, factory) {
|
||||
'use strict';
|
||||
if(typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'), require('./jquery.gridster.js'));
|
||||
}
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery', 'gridster'], factory);
|
||||
} else {
|
||||
root.Gridster = factory(root.$ || root.jQuery, root.Gridster);
|
||||
}
|
||||
|
||||
}(this, function($, Gridster) {
|
||||
'use strict';
|
||||
var fn = Gridster.prototype;
|
||||
|
||||
fn.widgets_in_col = function(col) {
|
||||
if (!this.gridmap[col]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i = this.gridmap[col].length - 1; i >= 0; i--) {
|
||||
if (this.is_widget(col, i) !== false) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
fn.widgets_in_row = function(row) {
|
||||
for (var i = this.gridmap.length; i >= 1; i--) {
|
||||
if (this.is_widget(i, row) !== false) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
fn.get_bottom_most_occupied_cell = function() {
|
||||
var row = 0;
|
||||
var col = 0;
|
||||
this.for_each_cell(function($el, c, r) {
|
||||
if ($el && r > row) {
|
||||
row = r;
|
||||
col = c;
|
||||
}
|
||||
});
|
||||
|
||||
return {col: col, row: row};
|
||||
};
|
||||
|
||||
|
||||
fn.get_right_most_occupied_cell = function() {
|
||||
var row = 0;
|
||||
var col = 0;
|
||||
this.for_each_cell(function($el, c, r) {
|
||||
if ($el) {
|
||||
row = r;
|
||||
col = c;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return {col: col, row: row};
|
||||
};
|
||||
|
||||
|
||||
fn.for_each_cell = function(callback, gridmap) {
|
||||
gridmap || (gridmap = this.gridmap);
|
||||
var cols = gridmap.length;
|
||||
var rows = gridmap[1].length;
|
||||
|
||||
cols_iter:
|
||||
for (var c = cols - 1; c >= 1; c--) {
|
||||
for (var r = rows - 1; r >= 1; r--) {
|
||||
var $el = gridmap[c] && gridmap[c][r];
|
||||
if (callback) {
|
||||
if (callback.call(this, $el, c, r) === false) {
|
||||
break cols_iter;
|
||||
} else { continue; }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
fn.next_position_in_range = function(size_x, size_y) {
|
||||
size_x || (size_x = 1);
|
||||
size_y || (size_y = 1);
|
||||
var ga = this.gridmap;
|
||||
var cols_l = ga.length;
|
||||
var valid_pos = [];
|
||||
var rows_l;
|
||||
|
||||
for (var c = 1; c < cols_l; c++) {
|
||||
rows_l = this.options.max_rows || ga[c].length;
|
||||
for (var r = 1; r <= rows_l; r++) {
|
||||
var can_move_to = this.can_move_to({
|
||||
size_x: size_x,
|
||||
size_y: size_y
|
||||
}, c, r);
|
||||
|
||||
if (can_move_to) {
|
||||
valid_pos.push({
|
||||
col: c,
|
||||
row: r,
|
||||
size_y: size_y,
|
||||
size_x: size_x
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (valid_pos.length >= 1) {
|
||||
return Gridster.sort_by_col_asc(valid_pos)[0];
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
fn.closest_to_right = function(col, row) {
|
||||
if (!this.gridmap[col]) { return false; }
|
||||
var cols_l = this.gridmap.length - 1;
|
||||
|
||||
for (var c = col; c <= cols_l; c++) {
|
||||
if (this.gridmap[c][row]) {
|
||||
return { col: c, row: row };
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
fn.closest_to_left = function(col, row) {
|
||||
if (!this.gridmap[col]) { return false; }
|
||||
|
||||
for (var c = col; c >= 1; c--) {
|
||||
if (this.gridmap[c][row]) {
|
||||
return { col: c, row: row };
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
return Gridster;
|
||||
|
||||
}));
|
||||
Executable
+4199
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,108 @@
|
||||
/*! gridster.js - v0.6.10 - 2015-05-31
|
||||
* https://dsmorse.github.io/gridster.js/
|
||||
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
||||
|
||||
.gridster {
|
||||
position:relative;
|
||||
& > * {
|
||||
-webkit-transition: height .4s, width .4s;
|
||||
-moz-transition: height .4s, width .4s;
|
||||
-o-transition: height .4s, width .4s;
|
||||
-ms-transition: height .4s, width .4s;
|
||||
transition: height .4s, width .4s;
|
||||
}
|
||||
.gs-w {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
.preview-holder {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.player-revert {
|
||||
z-index: 10!important;
|
||||
-webkit-transition: left .3s, top .3s!important;
|
||||
-moz-transition: left .3s, top .3s!important;
|
||||
-o-transition: left .3s, top .3s!important;
|
||||
transition: left .3s, top .3s!important;
|
||||
}
|
||||
}
|
||||
.gridster.collapsed {
|
||||
height: auto !important;
|
||||
.gs-w {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
.ready {
|
||||
.gs-w:not(.preview-holder) {
|
||||
-webkit-transition: opacity .3s, left .3s, top .3s;
|
||||
-moz-transition: opacity .3s, left .3s, top .3s;
|
||||
-o-transition: opacity .3s, left .3s, top .3s;
|
||||
transition: opacity .3s, left .3s, top .3s;
|
||||
}
|
||||
}
|
||||
.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder {
|
||||
-webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
|
||||
-moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
|
||||
-o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
|
||||
transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
|
||||
}
|
||||
.gridster .dragging,.gridster .resizing {
|
||||
z-index: 10!important;
|
||||
-webkit-transition: all 0s !important;
|
||||
-moz-transition: all 0s !important;
|
||||
-o-transition: all 0s !important;
|
||||
transition: all 0s !important;
|
||||
}
|
||||
.gs-resize-handle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.gs-resize-handle-both {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: -8px;
|
||||
right: -8px;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
cursor: se-resize;
|
||||
z-index: 20;
|
||||
}
|
||||
.gs-resize-handle-x {
|
||||
top: 0;
|
||||
bottom: 13px;
|
||||
right: -5px;
|
||||
width: 10px;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.gs-resize-handle-y {
|
||||
left: 0;
|
||||
right: 13px;
|
||||
bottom: -5px;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
}
|
||||
.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
.gs-resize-handle,.gs-w.dragging .gs-resize-handle {
|
||||
opacity: 0;
|
||||
}
|
||||
.gs-resize-disabled {
|
||||
.gs-resize-handle {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Uncomment this if you set helper : "clone" in draggable options */
|
||||
/*.gridster .player {
|
||||
opacity:0;
|
||||
}
|
||||
*/
|
||||
@@ -0,0 +1,85 @@
|
||||
(function (window, undefined) {
|
||||
'use strict';
|
||||
/* Delay, debounce and throttle functions taken from underscore.js
|
||||
*
|
||||
* Copyright (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and
|
||||
* Investigative Reporters & Editors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
window.delay = function (func, wait) {
|
||||
var args = Array.prototype.slice.call(arguments, 2);
|
||||
return setTimeout(function () {
|
||||
return func.apply(null, args);
|
||||
}, wait);
|
||||
};
|
||||
|
||||
window.debounce = function (func, wait, immediate) {
|
||||
var timeout;
|
||||
return function () {
|
||||
var context = this, args = arguments;
|
||||
var later = function () {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
if (immediate && !timeout) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
};
|
||||
|
||||
window.throttle = function (func, wait) {
|
||||
var context, args, timeout, throttling, more, result;
|
||||
var whenDone = debounce(
|
||||
function () {
|
||||
more = throttling = false;
|
||||
}, wait);
|
||||
return function () {
|
||||
context = this;
|
||||
args = arguments;
|
||||
var later = function () {
|
||||
timeout = null;
|
||||
if (more) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
whenDone();
|
||||
};
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(later, wait);
|
||||
}
|
||||
if (throttling) {
|
||||
more = true;
|
||||
} else {
|
||||
result = func.apply(context, args);
|
||||
}
|
||||
whenDone();
|
||||
throttling = true;
|
||||
return result;
|
||||
};
|
||||
};
|
||||
|
||||
})(window);
|
||||
Reference in New Issue
Block a user