nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-08-01 16:26:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit '6eb521015cda5212f6fa92492dbe4050bd92e00c'

Browse Source 
* commit '6eb521015cda5212f6fa92492dbe4050bd92e00c':
  Update Readme
  Updated sample
  Better handling of widgets slideing down
  update readme
  rebuilt dist
  Added Swap Demo
  Added disabled dragging init feature gridster.js
  Working on Static widgets
This commit is contained in:
David Morse
2015-04-09 00:25:16 -06:00
parent f29ab737ed 6eb521015c
commit 59b475d0d1
13 changed files with 1849 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+8
View File
@@ -248,6 +248,14 @@
dustmoo Modifications
===========
Changelog 2013-04-3
Fork now handles standard behavior properly with swap allowing larger widgets to shift down.
Changelog 2013-04-2
Added Demo to Repository.
Changelog 2013-02-27
Added "Static widget support" Static Items default to the "static" class.
dist/jquery.gridster.css
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.6 - 2015-04-08
/*! gridster.js - v0.6.6 - 2015-04-09
* http://gridster.net/
* Copyright (c) 2015 decksterteam; Licensed MIT */
dist/jquery.gridster.js
Vendored
+375 -28
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.6 - 2015-04-08
/*! gridster.js - v0.6.6 - 2015-04-09
* http://gridster.net/
* Copyright (c) 2015 decksterteam; Licensed MIT */
@@ -879,6 +879,14 @@
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;
}));
@@ -900,6 +908,7 @@
defaults = {
namespace: '',
widget_selector: 'li',
static_class: 'static',
widget_margins: [10, 10],
widget_base_dimensions: [400, 225],
extra_rows: 0,
@@ -909,12 +918,14 @@
min_rows: 15,
max_size_x: false,
autogrow_cols: false,
max_rows: 15,
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
center_widgets: false,
responsive_breakpoint: false,
scroll_container: window,
shift_larger_widgets_down: true,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -925,7 +936,7 @@
},
collision: {},
draggable: {
items: '.gs-w',
items: '.gs-w:not(.static)',
distance: 4,
ignore_dragging: Draggable.defaults.ignore_dragging.slice(0)
},
@@ -1026,6 +1037,7 @@
this.options.widget_selector).addClass('gs-w');
this.widgets = [];
this.$changed = $([]);
this.w_queue = {};
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
@@ -1279,6 +1291,7 @@
}).addClass('gs-w').appendTo(this.$el).hide();
this.$widgets = this.$widgets.add($w);
this.$changed = this.$changed.add($w);
this.register_widget($w);
@@ -1852,9 +1865,12 @@
size_y: size_y
});
/*
$nexts.not(exclude).each($.proxy(function(i, widget) {
console.log("from_remove")
this.move_widget_up( $(widget), size_y );
}, this));
*/
this.set_dom_grid_height();
@@ -1904,6 +1920,13 @@
return false;
};
fn.remove_by_grid = function(col, row){
var $w = this.is_widget(col, row);
if($w){
this.remove_widget($w);
}
}
/**
* Remove a widget from the grid.
@@ -1980,14 +2003,14 @@
*/
fn.serialize = function($widgets) {
$widgets || ($widgets = this.$widgets);
return $widgets.map($.proxy(function(i, widget) {
var $w = $(widget);
return this.options.serialize_params($w, $w.coords().grid);
}, this)).get();
var result = [];
$widgets.each($.proxy(function(i, widget) {
if(typeof($(widget).coords().grid) != "undefined"){
result.push(this.options.serialize_params($w, $w.coords().grid) );
}
}, this));
};
/**
* Returns a serialized array of the widgets that have changed their
* position.
@@ -2050,6 +2073,10 @@
!this.can_move_to(
{size_x: wgd.size_x, size_y: wgd.size_y}, wgd.col, wgd.row)
) {
if (!$el.hasClass('.disp_ad')) {
$el.remove();
return false;
}
$.extend(wgd, this.next_position(wgd.size_x, wgd.size_y));
$el.attr({
'data-col': wgd.col,
@@ -2158,13 +2185,13 @@
*/
fn.add_to_gridmap = function(grid_data, value) {
this.update_widget_position(grid_data, value || grid_data.el);
if (grid_data.el) {
/*if (grid_data.el) {
var $widgets = this.widgets_below(grid_data.el);
$widgets.each($.proxy(function(i, widget) {
console.log("from_add_to_gridmap");
this.move_widget_up( $(widget));
}, this));
}
} */
};
@@ -2204,8 +2231,8 @@
}, 60)
});
this.drag_api = this.$el.gridDraggable(draggable_options);
return this;
//this.drag_api = this.$el.gridDraggable(draggable_options);
this.drag_api = this.$el.dragg(draggable_options).data('drag');
};
@@ -2258,6 +2285,7 @@
'.' + this.resize_handle_class);
}
return this;
};
@@ -2434,6 +2462,7 @@
this.player_grid_data = {};
this.cells_occupied_by_placeholder = {};
this.cells_occupied_by_player = {};
this.w_queue = {};
this.set_dom_grid_height();
this.set_dom_grid_width();
@@ -2732,12 +2761,13 @@
*/
fn.set_player = function(col, row, no_player) {
var self = this;
var swap = false;
if (!no_player) {
this.empty_cells_player_occupies();
}
var cell = !no_player ? self.colliders_data[0].el.data : {col: col};
var to_col = cell.col;
var to_row = row || cell.row;
var to_row = cell.row || row;
this.player_grid_data = {
col: to_col,
@@ -2749,13 +2779,93 @@
this.cells_occupied_by_player = this.get_cells_occupied(
this.player_grid_data);
//Added placeholder for more advanced movement.
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(
this.player_grid_data);
var constraints = this.widgets_constraints($overlapped_widgets);
var player_size_y = this.player_grid_data.size_y;
var player_size_x = this.player_grid_data.size_x;
var placeholder_cells = this.cells_occupied_by_placeholder;
var $gr = this;
this.manage_movements(constraints.can_go_up, to_col, to_row);
this.manage_movements(constraints.can_not_go_up, to_col, to_row);
//Queue Swaps
$overlapped_widgets.each($.proxy(function(i, w){
var $w = $(w);
var wgd = $w.coords().grid;
var outside_col = placeholder_cells.cols[0]+player_size_x-1;
var outside_row = placeholder_cells.rows[0]+player_size_y-1;
if ($w.hasClass($gr.options.static_class)){
//next iteration
return true;
}
if(wgd.size_x <= player_size_x && wgd.size_y <= player_size_y){
if(!$gr.is_swap_occupied(placeholder_cells.cols[0], wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], wgd.row) && !$gr.is_in_queue(placeholder_cells.cols[0], wgd.row, $w)){
swap = $gr.queue_widget(placeholder_cells.cols[0], wgd.row, $w);
}
else if(!$gr.is_swap_occupied(outside_col, wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(outside_col, wgd.row) && !$gr.is_in_queue(outside_col, wgd.row, $w)){
swap = $gr.queue_widget(outside_col, wgd.row, $w);
}
else if(!$gr.is_swap_occupied(wgd.col, placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, placeholder_cells.rows[0]) && !$gr.is_in_queue(wgd.col, placeholder_cells.rows[0], $w)){
swap = $gr.queue_widget(wgd.col, placeholder_cells.rows[0], $w);
}
else if(!$gr.is_swap_occupied(wgd.col, outside_row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, outside_row) && !$gr.is_in_queue(wgd.col, outside_row, $w)){
swap = $gr.queue_widget(wgd.col, outside_row, $w);
}
else if(!$gr.is_swap_occupied(placeholder_cells.cols[0],placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0],placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0],placeholder_cells.rows[0], $w)){
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
} else {
//in one last attempt we check for any other empty spaces
for (var c = 0; c < player_size_x; c++){
for (var r = 0; r < player_size_y; r++){
var colc = placeholder_cells.cols[0]+c;
var rowc = placeholder_cells.rows[0]+r;
if (!$gr.is_swap_occupied(colc,rowc, wgd.size_x, wgd.size_y) && !$gr.is_player_in(colc,rowc) && !$gr.is_in_queue(colc, rowc, $w)){
swap = $gr.queue_widget(colc, rowc, $w);
c = player_size_x;
break;
}
}
}
}
} else if ($gr.options.shift_larger_widgets_down && !swap) {
$overlapped_widgets.each($.proxy(function(i, w){
var $w = $(w);
var wgd = $w.coords().grid;
if($gr.can_go_down($w)){
$gr.move_widget_down($w, $gr.player_grid_data.size_y);
$gr.set_placeholder(to_col, to_row);
}
}));
}
$gr.clean_up_changed();
}));
/* To show queued items in console
for(var key in this.w_queue){
console.log("key " +key);
console.log(this.w_queue[key]);
}
*/
//Move queued widgets
if(swap && this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)){
for(var key in this.w_queue){
var col = parseInt(key.split("_")[0]);
var row = parseInt(key.split("_")[1]);
if (this.w_queue[key] != "full"){
this.new_move_widget_to(this.w_queue[key], col, row);
}
}
this.set_placeholder(to_col, to_row);
}
/* if there is not widgets overlapping in the new player position,
* update the new placeholder position. */
@@ -2764,8 +2874,12 @@
if (pp !== false) {
to_row = pp;
}
if(this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)){
this.set_placeholder(to_col, to_row);
}
}
this.w_queue = {};
return {
col: to_col,
@@ -2774,6 +2888,151 @@
};
fn.is_swap_occupied = function(col, row, w_size_x, w_size_y) {
var occupied = false;
for (var c = 0; c < w_size_x; c++){
for (var r = 0; r < w_size_y; r++){
var colc = col + c;
var rowc = row + r;
var key = colc+"_"+rowc;
if(this.is_occupied(colc,rowc)){
occupied = true;
} else if(key in this.w_queue){
if(this.w_queue[key] == "full"){
occupied = true;
continue;
}
$tw = this.w_queue[key];
tgd = $tw.coords().grid;
//remove queued items if no longer under player.
if(!this.is_widget_under_player(tgd.col,tgd.row)){
delete this.w_queue[key];
}
}
if(rowc > parseInt(this.options.max_rows)){
occupied = true;
}
if(colc > parseInt(this.options.max_cols)){
occupied = true;
}
if (this.is_player_in(colc,rowc)){
occupied = true;
}
}
}
return occupied;
}
fn.can_placeholder_be_set = function(col, row, player_size_x, player_size_y){
var can_set = true;
for (var c = 0; c < player_size_x; c++){
for (var r = 0; r < player_size_y; r++){
var colc = col + c;
var rowc = row + r;
var key = colc+"_"+rowc;
var $tw = this.is_widget(colc, rowc);
//if this space is occupied and not queued for move.
if(rowc > parseInt(this.options.max_rows)){
can_set = false;
}
if(colc > parseInt(this.options.max_cols)){
can_set = false;
}
if(this.is_occupied(colc,rowc) && !this.is_widget_queued_and_can_move($tw)){
can_set = false;
}
}
}
return can_set;
}
fn.queue_widget = function(col, row, $widget){
var $w = $widget
var wgd = $w.coords().grid;
var primary_key = col+"_"+row;
if (primary_key in this.w_queue){
return false;
}
this.w_queue[primary_key] = $w;
for (var c = 0; c < wgd.size_x; c++){
for (var r = 0; r < wgd.size_y; r++){
var colc = col + c;
var rowc = row + r;
var key = colc+"_"+rowc;
if (key == primary_key){
continue;
}
this.w_queue[key] = "full";
}
}
return true;
}
fn.is_widget_queued_and_can_move = function($widget){
var queued = false;
if ($widget === false){
return false;
}
for(var key in this.w_queue){
if(this.w_queue[key] == "full"){
continue;
}
if(this.w_queue[key].attr("data-col") == $widget.attr("data-col") && this.w_queue[key].attr("data-row") == $widget.attr("data-row")){
queued = true;
//test whole space
var $w = this.w_queue[key];
var dcol = parseInt(key.split("_")[0]);
var drow = parseInt(key.split("_")[1]);
var wgd = $w.coords().grid;
for (var c = 0; c < wgd.size_x; c++){
for (var r = 0; r < wgd.size_y; r++){
var colc = dcol + c;
var rowc = drow + r;
if (this.is_player_in(colc,rowc)){
queued = false;
}
}
}
}
}
return queued
}
fn.is_in_queue = function(col,row, $widget){
var queued = false;
var key = col+"_"+row;
if ((key in this.w_queue)){
if (this.w_queue[key] == "full"){
queued = true;
} else {
$tw = this.w_queue[key];
tgd = $tw.coords().grid;
if(!this.is_widget_under_player(tgd.col,tgd.row)){
delete this.w_queue[key]
queued = false;
} else if(this.w_queue[key].attr("data-col") == $widget.attr("data-col") && this.w_queue[key].attr("data-row") == $widget.attr("data-row")) {
delete this.w_queue[key]
queued = false;
} else {
queued = true;
}
}
}
return queued;
}
/**
* See which of the widgets in the $widgets param collection can go to
* a upper row and which not.
@@ -2813,6 +3072,8 @@
/**
* Sorts an Array of grid coords objects (representing the grid coords of
* each widget) in descending way.
* Depreciated.
*
* @method manage_movements
* @param {jQuery} $widgets A jQuery collection of HTMLElements
@@ -2845,11 +3106,13 @@
// so we need to move widget down to a position that dont
// overlaps player
var y = (to_row + this.player_grid_data.size_y) - wgd.row;
if (this.can_go_down($w)){
console.log("In Move Down!")
this.move_widget_down($w, y);
this.set_placeholder(to_col, to_row);
}
}
}
}, this));
return this;
@@ -2979,6 +3242,32 @@
return false;
};
/**
* Determines if widget is supposed to be static.
* @method is_static
* @param {Number} col The column to check.
* @param {Number} row The row to check.
* @return {Boolean} Returns true if widget exists and has static class,
* else returns false
*/
fn.is_static = function(col, row) {
var cell = this.gridmap[col];
if (!cell) {
return false;
}
cell = cell[row];
if (cell) {
if(cell.hasClass(this.options.static_class)){
return true;
}
}
return false;
};
/**
* Determines if there is a widget in the cell represented by col/row
@@ -3061,8 +3350,16 @@
if (moved_down || changed_column) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up(
$(widget), this.placeholder_grid_data.col - col + phgd.size_y);
//Make sure widget is at it's topmost position
$w = $(widget);
wgd = $w.coords().grid;
var can_go_widget_up = this.can_go_widget_up(wgd);
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
}, this));
}
@@ -3329,13 +3626,14 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_stop_overlapping_column = function(col) {
this.set_player(col, false);
//this.set_player(col, false);
var self = this;
if(this.options.shift_larger_widgets_down){
this.for_each_widget_below(col, this.cells_occupied_by_player.rows[0],
function(tcol, trow) {
self.move_widget_up(this, self.player_grid_data.size_y);
});
}
};
@@ -3347,17 +3645,37 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_stop_overlapping_row = function(row) {
this.set_player(false, row);
//this.set_player(false, row);
var self = this;
var cols = this.cells_occupied_by_player.cols;
if(this.options.shift_larger_widgets_down){
for (var c = 0, cl = cols.length; c < cl; c++) {
this.for_each_widget_below(cols[c], row, function(tcol, trow) {
console.log("from_on_stop_overlapping_row");
self.move_widget_up(this, self.player_grid_data.size_y);
});
}
}
};
//Not yet part of api - DM.
fn.new_move_widget_to = function($widget, col, row){
var self = this;
var widget_grid_data = $widget.coords().grid;
this.remove_from_gridmap(widget_grid_data);
widget_grid_data.row = row;
widget_grid_data.col = col;
this.add_to_gridmap(widget_grid_data);
$widget.attr('data-row', row);
$widget.attr('data-col', col);
this.update_widget_position(widget_grid_data, $widget);
this.$changed = this.$changed.add($widget);
return this;
}
/**
* Move a widget to a specific row and column.
@@ -3476,9 +3794,10 @@
moved.push($widget);
$next_widgets.each($.proxy(function(i, widget) {
/* $next_widgets.each($.proxy(function(i, widget) {
console.log("from_within_move_widget_up");
this.move_widget_up($(widget), y_units);
}, this));
}, this)); */
}
});
@@ -3681,6 +4000,23 @@
return this;
};
fn.can_go_down = function($el) {
var can_go_down = true;
var $gr = this;
if ($el.hasClass(this.options.static_class)){
can_go_down = false;
}
this.widgets_below($el).each(function(){
if ($(this).hasClass($gr.options.static_class)){
can_go_down = false;
}
})
return can_go_down;
}
fn.can_go_up = function($el) {
var el_grid_data = $el.coords().grid;
@@ -3876,6 +4212,15 @@
}
};
fn.clean_up_changed = function(){
$gr = this;
$gr.$changed.each(function(){
if($gr.options.shift_larger_widgets_down){
$gr.move_widget_up($(this));
}
});
}
fn._traversing_widgets = function(type, direction, col, row, callback) {
@@ -3913,7 +4258,8 @@
) {
cr = callback.call(ga[col][trow], col, trow);
matched.push(ga[col][trow]);
if (cr) { break; }
//break was causing problems, leaving for testing.
//if (cr) { break; }
}
}
}
@@ -4495,7 +4841,8 @@
max_rows += (+$(w).attr('data-sizey'));
});
this.rows = Math.max(max_rows, this.options.min_rows);
//this.rows = Math.max(max_rows, this.options.min_rows);
this.rows = this.options.max_rows;
this.baseX = ($window.width() - aw) / 2;
this.baseY = this.$wrapper.offset().top;
dist/jquery.gridster.min.css
Vendored
+1 -1
View File
@@ -1,2 +1,2 @@
/*! gridster.js - v0.6.6 - 2015-04-08 - * http://gridster.net/ - Copyright (c) 2015 decksterteam; Licensed MIT */
/*! gridster.js - v0.6.6 - 2015-04-09 - * http://gridster.net/ - Copyright (c) 2015 decksterteam; Licensed MIT */
.gridster{position:relative}.gridster>*{margin:0 auto;-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}.gridster .gs-w{z-index:2;position:absolute}.gridster.collapsed{height:auto!important}.gridster.collapsed .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 .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .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 .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}
dist/jquery.gridster.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/jquery.gridster.with-extras.js
Vendored
+375 -28
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.6 - 2015-04-08
/*! gridster.js - v0.6.6 - 2015-04-09
* http://gridster.net/
* Copyright (c) 2015 decksterteam; Licensed MIT */
@@ -879,6 +879,14 @@
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;
}));
@@ -900,6 +908,7 @@
defaults = {
namespace: '',
widget_selector: 'li',
static_class: 'static',
widget_margins: [10, 10],
widget_base_dimensions: [400, 225],
extra_rows: 0,
@@ -909,12 +918,14 @@
min_rows: 15,
max_size_x: false,
autogrow_cols: false,
max_rows: 15,
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
center_widgets: false,
responsive_breakpoint: false,
scroll_container: window,
shift_larger_widgets_down: true,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -925,7 +936,7 @@
},
collision: {},
draggable: {
items: '.gs-w',
items: '.gs-w:not(.static)',
distance: 4,
ignore_dragging: Draggable.defaults.ignore_dragging.slice(0)
},
@@ -1026,6 +1037,7 @@
this.options.widget_selector).addClass('gs-w');
this.widgets = [];
this.$changed = $([]);
this.w_queue = {};
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
@@ -1279,6 +1291,7 @@
}).addClass('gs-w').appendTo(this.$el).hide();
this.$widgets = this.$widgets.add($w);
this.$changed = this.$changed.add($w);
this.register_widget($w);
@@ -1852,9 +1865,12 @@
size_y: size_y
});
/*
$nexts.not(exclude).each($.proxy(function(i, widget) {
console.log("from_remove")
this.move_widget_up( $(widget), size_y );
}, this));
*/
this.set_dom_grid_height();
@@ -1904,6 +1920,13 @@
return false;
};
fn.remove_by_grid = function(col, row){
var $w = this.is_widget(col, row);
if($w){
this.remove_widget($w);
}
}
/**
* Remove a widget from the grid.
@@ -1980,14 +2003,14 @@
*/
fn.serialize = function($widgets) {
$widgets || ($widgets = this.$widgets);
return $widgets.map($.proxy(function(i, widget) {
var $w = $(widget);
return this.options.serialize_params($w, $w.coords().grid);
}, this)).get();
var result = [];
$widgets.each($.proxy(function(i, widget) {
if(typeof($(widget).coords().grid) != "undefined"){
result.push(this.options.serialize_params($w, $w.coords().grid) );
}
}, this));
};
/**
* Returns a serialized array of the widgets that have changed their
* position.
@@ -2050,6 +2073,10 @@
!this.can_move_to(
{size_x: wgd.size_x, size_y: wgd.size_y}, wgd.col, wgd.row)
) {
if (!$el.hasClass('.disp_ad')) {
$el.remove();
return false;
}
$.extend(wgd, this.next_position(wgd.size_x, wgd.size_y));
$el.attr({
'data-col': wgd.col,
@@ -2158,13 +2185,13 @@
*/
fn.add_to_gridmap = function(grid_data, value) {
this.update_widget_position(grid_data, value || grid_data.el);
if (grid_data.el) {
/*if (grid_data.el) {
var $widgets = this.widgets_below(grid_data.el);
$widgets.each($.proxy(function(i, widget) {
console.log("from_add_to_gridmap");
this.move_widget_up( $(widget));
}, this));
}
} */
};
@@ -2204,8 +2231,8 @@
}, 60)
});
this.drag_api = this.$el.gridDraggable(draggable_options);
return this;
//this.drag_api = this.$el.gridDraggable(draggable_options);
this.drag_api = this.$el.dragg(draggable_options).data('drag');
};
@@ -2258,6 +2285,7 @@
'.' + this.resize_handle_class);
}
return this;
};
@@ -2434,6 +2462,7 @@
this.player_grid_data = {};
this.cells_occupied_by_placeholder = {};
this.cells_occupied_by_player = {};
this.w_queue = {};
this.set_dom_grid_height();
this.set_dom_grid_width();
@@ -2732,12 +2761,13 @@
*/
fn.set_player = function(col, row, no_player) {
var self = this;
var swap = false;
if (!no_player) {
this.empty_cells_player_occupies();
}
var cell = !no_player ? self.colliders_data[0].el.data : {col: col};
var to_col = cell.col;
var to_row = row || cell.row;
var to_row = cell.row || row;
this.player_grid_data = {
col: to_col,
@@ -2749,13 +2779,93 @@
this.cells_occupied_by_player = this.get_cells_occupied(
this.player_grid_data);
//Added placeholder for more advanced movement.
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(
this.player_grid_data);
var constraints = this.widgets_constraints($overlapped_widgets);
var player_size_y = this.player_grid_data.size_y;
var player_size_x = this.player_grid_data.size_x;
var placeholder_cells = this.cells_occupied_by_placeholder;
var $gr = this;
this.manage_movements(constraints.can_go_up, to_col, to_row);
this.manage_movements(constraints.can_not_go_up, to_col, to_row);
//Queue Swaps
$overlapped_widgets.each($.proxy(function(i, w){
var $w = $(w);
var wgd = $w.coords().grid;
var outside_col = placeholder_cells.cols[0]+player_size_x-1;
var outside_row = placeholder_cells.rows[0]+player_size_y-1;
if ($w.hasClass($gr.options.static_class)){
//next iteration
return true;
}
if(wgd.size_x <= player_size_x && wgd.size_y <= player_size_y){
if(!$gr.is_swap_occupied(placeholder_cells.cols[0], wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], wgd.row) && !$gr.is_in_queue(placeholder_cells.cols[0], wgd.row, $w)){
swap = $gr.queue_widget(placeholder_cells.cols[0], wgd.row, $w);
}
else if(!$gr.is_swap_occupied(outside_col, wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(outside_col, wgd.row) && !$gr.is_in_queue(outside_col, wgd.row, $w)){
swap = $gr.queue_widget(outside_col, wgd.row, $w);
}
else if(!$gr.is_swap_occupied(wgd.col, placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, placeholder_cells.rows[0]) && !$gr.is_in_queue(wgd.col, placeholder_cells.rows[0], $w)){
swap = $gr.queue_widget(wgd.col, placeholder_cells.rows[0], $w);
}
else if(!$gr.is_swap_occupied(wgd.col, outside_row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, outside_row) && !$gr.is_in_queue(wgd.col, outside_row, $w)){
swap = $gr.queue_widget(wgd.col, outside_row, $w);
}
else if(!$gr.is_swap_occupied(placeholder_cells.cols[0],placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0],placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0],placeholder_cells.rows[0], $w)){
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
} else {
//in one last attempt we check for any other empty spaces
for (var c = 0; c < player_size_x; c++){
for (var r = 0; r < player_size_y; r++){
var colc = placeholder_cells.cols[0]+c;
var rowc = placeholder_cells.rows[0]+r;
if (!$gr.is_swap_occupied(colc,rowc, wgd.size_x, wgd.size_y) && !$gr.is_player_in(colc,rowc) && !$gr.is_in_queue(colc, rowc, $w)){
swap = $gr.queue_widget(colc, rowc, $w);
c = player_size_x;
break;
}
}
}
}
} else if ($gr.options.shift_larger_widgets_down && !swap) {
$overlapped_widgets.each($.proxy(function(i, w){
var $w = $(w);
var wgd = $w.coords().grid;
if($gr.can_go_down($w)){
$gr.move_widget_down($w, $gr.player_grid_data.size_y);
$gr.set_placeholder(to_col, to_row);
}
}));
}
$gr.clean_up_changed();
}));
/* To show queued items in console
for(var key in this.w_queue){
console.log("key " +key);
console.log(this.w_queue[key]);
}
*/
//Move queued widgets
if(swap && this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)){
for(var key in this.w_queue){
var col = parseInt(key.split("_")[0]);
var row = parseInt(key.split("_")[1]);
if (this.w_queue[key] != "full"){
this.new_move_widget_to(this.w_queue[key], col, row);
}
}
this.set_placeholder(to_col, to_row);
}
/* if there is not widgets overlapping in the new player position,
* update the new placeholder position. */
@@ -2764,8 +2874,12 @@
if (pp !== false) {
to_row = pp;
}
if(this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)){
this.set_placeholder(to_col, to_row);
}
}
this.w_queue = {};
return {
col: to_col,
@@ -2774,6 +2888,151 @@
};
fn.is_swap_occupied = function(col, row, w_size_x, w_size_y) {
var occupied = false;
for (var c = 0; c < w_size_x; c++){
for (var r = 0; r < w_size_y; r++){
var colc = col + c;
var rowc = row + r;
var key = colc+"_"+rowc;
if(this.is_occupied(colc,rowc)){
occupied = true;
} else if(key in this.w_queue){
if(this.w_queue[key] == "full"){
occupied = true;
continue;
}
$tw = this.w_queue[key];
tgd = $tw.coords().grid;
//remove queued items if no longer under player.
if(!this.is_widget_under_player(tgd.col,tgd.row)){
delete this.w_queue[key];
}
}
if(rowc > parseInt(this.options.max_rows)){
occupied = true;
}
if(colc > parseInt(this.options.max_cols)){
occupied = true;
}
if (this.is_player_in(colc,rowc)){
occupied = true;
}
}
}
return occupied;
}
fn.can_placeholder_be_set = function(col, row, player_size_x, player_size_y){
var can_set = true;
for (var c = 0; c < player_size_x; c++){
for (var r = 0; r < player_size_y; r++){
var colc = col + c;
var rowc = row + r;
var key = colc+"_"+rowc;
var $tw = this.is_widget(colc, rowc);
//if this space is occupied and not queued for move.
if(rowc > parseInt(this.options.max_rows)){
can_set = false;
}
if(colc > parseInt(this.options.max_cols)){
can_set = false;
}
if(this.is_occupied(colc,rowc) && !this.is_widget_queued_and_can_move($tw)){
can_set = false;
}
}
}
return can_set;
}
fn.queue_widget = function(col, row, $widget){
var $w = $widget
var wgd = $w.coords().grid;
var primary_key = col+"_"+row;
if (primary_key in this.w_queue){
return false;
}
this.w_queue[primary_key] = $w;
for (var c = 0; c < wgd.size_x; c++){
for (var r = 0; r < wgd.size_y; r++){
var colc = col + c;
var rowc = row + r;
var key = colc+"_"+rowc;
if (key == primary_key){
continue;
}
this.w_queue[key] = "full";
}
}
return true;
}
fn.is_widget_queued_and_can_move = function($widget){
var queued = false;
if ($widget === false){
return false;
}
for(var key in this.w_queue){
if(this.w_queue[key] == "full"){
continue;
}
if(this.w_queue[key].attr("data-col") == $widget.attr("data-col") && this.w_queue[key].attr("data-row") == $widget.attr("data-row")){
queued = true;
//test whole space
var $w = this.w_queue[key];
var dcol = parseInt(key.split("_")[0]);
var drow = parseInt(key.split("_")[1]);
var wgd = $w.coords().grid;
for (var c = 0; c < wgd.size_x; c++){
for (var r = 0; r < wgd.size_y; r++){
var colc = dcol + c;
var rowc = drow + r;
if (this.is_player_in(colc,rowc)){
queued = false;
}
}
}
}
}
return queued
}
fn.is_in_queue = function(col,row, $widget){
var queued = false;
var key = col+"_"+row;
if ((key in this.w_queue)){
if (this.w_queue[key] == "full"){
queued = true;
} else {
$tw = this.w_queue[key];
tgd = $tw.coords().grid;
if(!this.is_widget_under_player(tgd.col,tgd.row)){
delete this.w_queue[key]
queued = false;
} else if(this.w_queue[key].attr("data-col") == $widget.attr("data-col") && this.w_queue[key].attr("data-row") == $widget.attr("data-row")) {
delete this.w_queue[key]
queued = false;
} else {
queued = true;
}
}
}
return queued;
}
/**
* See which of the widgets in the $widgets param collection can go to
* a upper row and which not.
@@ -2813,6 +3072,8 @@
/**
* Sorts an Array of grid coords objects (representing the grid coords of
* each widget) in descending way.
* Depreciated.
*
* @method manage_movements
* @param {jQuery} $widgets A jQuery collection of HTMLElements
@@ -2845,11 +3106,13 @@
// so we need to move widget down to a position that dont
// overlaps player
var y = (to_row + this.player_grid_data.size_y) - wgd.row;
if (this.can_go_down($w)){
console.log("In Move Down!")
this.move_widget_down($w, y);
this.set_placeholder(to_col, to_row);
}
}
}
}, this));
return this;
@@ -2979,6 +3242,32 @@
return false;
};
/**
* Determines if widget is supposed to be static.
* @method is_static
* @param {Number} col The column to check.
* @param {Number} row The row to check.
* @return {Boolean} Returns true if widget exists and has static class,
* else returns false
*/
fn.is_static = function(col, row) {
var cell = this.gridmap[col];
if (!cell) {
return false;
}
cell = cell[row];
if (cell) {
if(cell.hasClass(this.options.static_class)){
return true;
}
}
return false;
};
/**
* Determines if there is a widget in the cell represented by col/row
@@ -3061,8 +3350,16 @@
if (moved_down || changed_column) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up(
$(widget), this.placeholder_grid_data.col - col + phgd.size_y);
//Make sure widget is at it's topmost position
$w = $(widget);
wgd = $w.coords().grid;
var can_go_widget_up = this.can_go_widget_up(wgd);
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
}, this));
}
@@ -3329,13 +3626,14 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_stop_overlapping_column = function(col) {
this.set_player(col, false);
//this.set_player(col, false);
var self = this;
if(this.options.shift_larger_widgets_down){
this.for_each_widget_below(col, this.cells_occupied_by_player.rows[0],
function(tcol, trow) {
self.move_widget_up(this, self.player_grid_data.size_y);
});
}
};
@@ -3347,17 +3645,37 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_stop_overlapping_row = function(row) {
this.set_player(false, row);
//this.set_player(false, row);
var self = this;
var cols = this.cells_occupied_by_player.cols;
if(this.options.shift_larger_widgets_down){
for (var c = 0, cl = cols.length; c < cl; c++) {
this.for_each_widget_below(cols[c], row, function(tcol, trow) {
console.log("from_on_stop_overlapping_row");
self.move_widget_up(this, self.player_grid_data.size_y);
});
}
}
};
//Not yet part of api - DM.
fn.new_move_widget_to = function($widget, col, row){
var self = this;
var widget_grid_data = $widget.coords().grid;
this.remove_from_gridmap(widget_grid_data);
widget_grid_data.row = row;
widget_grid_data.col = col;
this.add_to_gridmap(widget_grid_data);
$widget.attr('data-row', row);
$widget.attr('data-col', col);
this.update_widget_position(widget_grid_data, $widget);
this.$changed = this.$changed.add($widget);
return this;
}
/**
* Move a widget to a specific row and column.
@@ -3476,9 +3794,10 @@
moved.push($widget);
$next_widgets.each($.proxy(function(i, widget) {
/* $next_widgets.each($.proxy(function(i, widget) {
console.log("from_within_move_widget_up");
this.move_widget_up($(widget), y_units);
}, this));
}, this)); */
}
});
@@ -3681,6 +4000,23 @@
return this;
};
fn.can_go_down = function($el) {
var can_go_down = true;
var $gr = this;
if ($el.hasClass(this.options.static_class)){
can_go_down = false;
}
this.widgets_below($el).each(function(){
if ($(this).hasClass($gr.options.static_class)){
can_go_down = false;
}
})
return can_go_down;
}
fn.can_go_up = function($el) {
var el_grid_data = $el.coords().grid;
@@ -3876,6 +4212,15 @@
}
};
fn.clean_up_changed = function(){
$gr = this;
$gr.$changed.each(function(){
if($gr.options.shift_larger_widgets_down){
$gr.move_widget_up($(this));
}
});
}
fn._traversing_widgets = function(type, direction, col, row, callback) {
@@ -3913,7 +4258,8 @@
) {
cr = callback.call(ga[col][trow], col, trow);
matched.push(ga[col][trow]);
if (cr) { break; }
//break was causing problems, leaving for testing.
//if (cr) { break; }
}
}
}
@@ -4495,7 +4841,8 @@
max_rows += (+$(w).attr('data-sizey'));
});
this.rows = Math.max(max_rows, this.options.min_rows);
//this.rows = Math.max(max_rows, this.options.min_rows);
this.rows = this.options.max_rows;
this.baseX = ($window.width() - aw) / 2;
this.baseY = this.$wrapper.offset().top;
dist/jquery.gridster.with-extras.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
sample/css/main.css
Executable
+364
View File
@@ -0,0 +1,364 @@
/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
background: #004756;
}
/* Gridster styles */
.demo {
margin: 3em 0;
padding: 7.5em 0 5.5em;
background: #004756;
}
.demo:hover .gridster {
opacity: 1;
}
.gridster, .content, .gridster2 {
width: 940px;
margin: 0 auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
}
.content {
color: white;
}
.content p {
margin: 25px;
}
.gridster .gs_w, .gridster2 .gs_w {
background: #FFF;
cursor: pointer;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.gridster .player, .gridster2 .player {
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
.gridster .gs_w.try, .gridster2 .gs_w.try {
background-image: url(../img/sprite.png);
background-repeat: no-repeat;
background-position: 37px -169px;
}
.gridster .preview-holder, .gridster2 .preview-holder {
border: none!important;
border-radius: 0!important;
background: rgba(255,255,255,.2)!important;
}
li {
list-style: none;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
sample/css/normalize.css
Vendored Executable
+527
View File
@@ -0,0 +1,527 @@
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
sample/img/sprite.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

sample/index.html
+57
View File
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gridster Grid Swapping Demo</title>
<meta name="description" content="">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="../dist/jquery.gridster.min.css">
<script type="text/javascript">
var gridster = "";
$(document).ready(function () {
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
shift_larger_widgets_down: false
});
});
</script>
</head>
<body>
<div class="content">
<p>This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to "false". However, smaller widgets do not displace larger ones.</p>
</div>
<div class="gridster">
<ul style="height: 480px; position: relative; ">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>
<li class="try gs_w" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_w"></li>
</ul>
</div>
</body>
</html>
sample/js/plugins.js
Executable
+24
View File
@@ -0,0 +1,24 @@
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
// Place any jQuery/helper plugins in here.
src/jquery.gridster.js
+65 -21
View File
@@ -1947,8 +1947,20 @@
}
}
} else if ($gr.options.shift_larger_widgets_down && !swap) {
$overlapped_widgets.each($.proxy(function(i, w){
var $w = $(w);
var wgd = $w.coords().grid;
if($gr.can_go_down($w)){
$gr.move_widget_down($w, $gr.player_grid_data.size_y);
$gr.set_placeholder(to_col, to_row);
}
}));
}
$gr.clean_up_changed();
}));
/* To show queued items in console
@@ -1970,15 +1982,6 @@
this.set_placeholder(to_col, to_row);
}
///If set to false smaller widgets will not displace larger widgets.
if(this.options.shift_larger_widgets_down && !swap){
var constraints = this.widgets_constraints($overlapped_widgets);
this.manage_movements(constraints.can_go_up, to_col, to_row);
this.manage_movements(constraints.can_not_go_up, to_col, to_row);
}
/* if there is not widgets overlapping in the new player position,
* update the new placeholder position. */
if (!$overlapped_widgets.length) {
@@ -2184,6 +2187,8 @@
/**
* Sorts an Array of grid coords objects (representing the grid coords of
* each widget) in descending way.
* Depreciated.
*
* @method manage_movements
* @param {jQuery} $widgets A jQuery collection of HTMLElements
@@ -2216,11 +2221,13 @@
// so we need to move widget down to a position that dont
// overlaps player
var y = (to_row + this.player_grid_data.size_y) - wgd.row;
if (this.can_go_down($w)){
console.log("In Move Down!")
this.move_widget_down($w, y);
this.set_placeholder(to_col, to_row);
}
}
}
}, this));
return this;
@@ -2457,11 +2464,18 @@
});
if (moved_down || changed_column) {
/* $nexts.each($.proxy(function(i, widget) {
console.log("set_placeholder");
this.move_widget_up(
$(widget), this.placeholder_grid_data.col - col + phgd.size_y);
}, this)); */
$nexts.each($.proxy(function(i, widget) {
//Make sure widget is at it's topmost position
$w = $(widget);
wgd = $w.coords().grid;
var can_go_widget_up = this.can_go_widget_up(wgd);
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
}, this));
}
var $widgets_under_ph = this.get_widgets_under_player(
@@ -2729,11 +2743,12 @@
fn.on_stop_overlapping_column = function(col) {
//this.set_player(col, false);
var self = this;
/*this.for_each_widget_below(col, this.cells_occupied_by_player.rows[0],
if(this.options.shift_larger_widgets_down){
this.for_each_widget_below(col, this.cells_occupied_by_player.rows[0],
function(tcol, trow) {
console.log("from_on_stop_overlapping_column");
self.move_widget_up(this, self.player_grid_data.size_y);
});*/
});
}
};
@@ -2748,12 +2763,14 @@
//this.set_player(false, row);
var self = this;
var cols = this.cells_occupied_by_player.cols;
/*for (var c = 0, cl = cols.length; c < cl; c++) {
if(this.options.shift_larger_widgets_down){
for (var c = 0, cl = cols.length; c < cl; c++) {
this.for_each_widget_below(cols[c], row, function(tcol, trow) {
console.log("from_on_stop_overlapping_row");
self.move_widget_up(this, self.player_grid_data.size_y);
});
}*/
}
}
};
//Not yet part of api - DM.
@@ -3098,6 +3115,23 @@
return this;
};
fn.can_go_down = function($el) {
var can_go_down = true;
var $gr = this;
if ($el.hasClass(this.options.static_class)){
can_go_down = false;
}
this.widgets_below($el).each(function(){
if ($(this).hasClass($gr.options.static_class)){
can_go_down = false;
}
})
return can_go_down;
}
fn.can_go_up = function($el) {
var el_grid_data = $el.coords().grid;
@@ -3293,6 +3327,15 @@
}
};
fn.clean_up_changed = function(){
$gr = this;
$gr.$changed.each(function(){
if($gr.options.shift_larger_widgets_down){
$gr.move_widget_up($(this));
}
});
}
fn._traversing_widgets = function(type, direction, col, row, callback) {
@@ -3330,7 +3373,8 @@
) {
cr = callback.call(ga[col][trow], col, trow);
matched.push(ga[col][trow]);
if (cr) { break; }
//break was causing problems, leaving for testing.
//if (cr) { break; }
}
}
}