From c998cb49b375f6175adea8172a384d7b6c58adec Mon Sep 17 00:00:00 2001 From: vieron Date: Mon, 23 Jul 2012 15:15:26 +0200 Subject: [PATCH] updated docs and dist --- dist/jquery.gridster.css | 72 ++-- dist/jquery.gridster.js | 523 ++++++++++++++++++++---- dist/jquery.gridster.min.css | 4 +- dist/jquery.gridster.min.js | 4 +- docs/api.js | 1 + docs/classes/Collision.html | 2 + docs/classes/Coords.html | 4 +- docs/classes/Draggable.html | 222 ++++++++++ docs/classes/Gridster.html | 402 +++++++++++++++--- docs/data.json | 197 ++++++--- docs/files/src_jquery.collision.js.html | 12 +- docs/files/src_jquery.coords.js.html | 30 +- docs/files/src_jquery.draggable.js.html | 338 +++++++++++++++ docs/files/src_jquery.gridster.js.html | 274 +++++++++---- docs/index.html | 2 + grunt.js | 2 +- index.html | 38 +- 17 files changed, 1762 insertions(+), 365 deletions(-) create mode 100644 docs/classes/Draggable.html create mode 100644 docs/files/src_jquery.draggable.js.html diff --git a/dist/jquery.gridster.css b/dist/jquery.gridster.css index 36923624c..800e228bb 100644 --- a/dist/jquery.gridster.css +++ b/dist/jquery.gridster.css @@ -1,49 +1,57 @@ -/*! gridster.js - v0.1.0 - 2012-07-20 +/*! gridster.js - v0.1.0 - 2012-07-23 * https://github.com/ducksboard/gridster.js * Copyright (c) 2012 ducksboard; Licensed MIT, GPL */ .gridster { - position:relative; + position:relative; } .gridster > * { - margin: 0 auto; - -webkit-transition: height .4s; - -moz-transition: height .4s; - -o-transition: height .4s; - -ms-transition: height .4s; - transition: height .4s; + margin: 0 auto; + -webkit-transition: height .4s; + -moz-transition: height .4s; + -o-transition: height .4s; + -ms-transition: height .4s; + transition: height .4s; } .gridster .gs_w{ - z-index: 2; - position: absolute; - background: rgba(0,0,0,.23); -} - -.ready .gs_w:not(.player):not(.preview-holder):not(.ui-draggable-dragging) { - -webkit-transition: left .3s, top .3s; - -moz-transition: left .3s, top .3s; - -o-transition: left .3s, top .3s; -} - -.gridster.dragging .ui-sortable-helper { - z-index: 9; -} - -.gridster .preview-holder { - border: 2px dashed #333; - border-radius: 5px; - z-index: 1; - background:#FFF; + z-index: 2; position: absolute; } -.gridster .ui-draggable-dragging { - z-index: 10!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; } - /*uncomment this if you draggable.helper option to "clone"*/ +.gridster .preview-holder { + z-index: 1; + position: absolute; + background-color: #fff; + border-color: #fff; + opacity: 0.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 { + z-index: 10!important; + -webkit-transition: none!important; + -moz-transition: none!important; + -o-transition: none!important; + transition: none!important; +} + +/* Uncomment this if you set helper : "clone" in draggable options */ /*.gridster .player { - display: none!important; + opacity:0; }*/ diff --git a/dist/jquery.gridster.js b/dist/jquery.gridster.js index a9c966a37..54497cffa 100644 --- a/dist/jquery.gridster.js +++ b/dist/jquery.gridster.js @@ -1,10 +1,10 @@ -/*! gridster.js - v0.1.0 - 2012-07-20 +/*! gridster.js - v0.1.0 - 2012-07-23 * https://github.com/ducksboard/gridster.js * Copyright (c) 2012 ducksboard; Licensed MIT, GPL */ ;(function($, window, document, undefined){ /** - * Coords description + * Coords * * @class Coords * @param {HTMLElement|Object} obj HTMLElement or a literal Object with the left, top, width and height properties. @@ -30,12 +30,20 @@ this.original_coords = this.get(); }; - fn.set = function() { + + fn.set = function(update, not_update_offsets) { var el = this.el; - if (el) { - this.data = el.offset(); - this.data.width || (this.data.width = el.width()); - this.data.height || (this.data.height = el.height()); + + if (el && !update) { + this.data = {} || el.offset(); + this.data.width = el.width(); + this.data.height = el.height(); + }; + + if (el && update && !not_update_offsets) { + var offset = el.offset(); + this.data.top = offset.top; + this.data.left = offset.left; } var d = this.data; @@ -53,19 +61,23 @@ return this; }; + fn.update = function(data){ if (!data && !this.el) { return this; } if (data) { - var new_data = $.extend(this.data, data); + var new_data = $.extend({}, this.data, data); this.data = new_data; + return this.set(true, true); } - this.set(); + + this.set(true); return this; }; + fn.get = function(){ return this.coords; }; @@ -195,18 +207,18 @@ } }; - fn.find_collisions = function(){ + fn.find_collisions = function(player_data_coords){ var self = this; 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 player_coords = self.$element.coords().update().get(); var $collider_coords_ins = ($collider.isCoords) ? - $collider.update() : $collider.coords(); + $collider : $collider.coords(); var collider_coords = $collider_coords_ins.get(); var overlaps = self.overlaps(player_coords, collider_coords); @@ -246,8 +258,8 @@ }; - fn.get_closest_colliders = function(){ - var colliders = this.find_collisions(); + fn.get_closest_colliders = function(player_data_coords){ + var colliders = this.find_collisions(player_data_coords); var min_area = 100; colliders.sort(function(a, b){ @@ -283,30 +295,9 @@ }(jQuery, window, document)); -;(function($, window, document, undefined) { - - var defaults = { - widget_selector: '> li', - widget_margins: [10, 10], - widget_base_dimensions: [400, 225], - extra_rows: 0, - extra_cols: 0, - min_cols: 1, - min_rows: 10, - autogenerate_stylesheet: true, - serialize_params: function($w, wgd) { - return { - col: wgd.col, - row: wgd.row - }; - }, - collision: {}, - draggable: {} - }; - - +(function(window, undefined) { /* Debounce and throttle functions taken from underscore.js */ - var debounce = function(func, wait, immediate) { + window.debounce = function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; @@ -321,10 +312,10 @@ }; - var throttle = function(func, wait) { + window.throttle = function(func, wait) { var context, args, timeout, throttling, more, result; var whenDone = debounce( - function(){ more = throttling = false; }, wait, true); + function(){ more = throttling = false; }, wait); return function() { context = this; args = arguments; var later = function() { @@ -344,6 +335,248 @@ }; }; +})(window) + +;(function($, window, document, undefined){ + + var defaults = { + items: '.gs_w', + distance: 1, + limit: true, + offset_left: 0, + drag: function(e){}, + start : function(e, ui){}, + stop : function(e){} + }; + + var $body = $(document.body); + + + /** + * Draggable + * + * @class Draggable + * @constructor + */ + function Draggable(element, options) { + this.options = $.extend(defaults, options); + this.$container = $(element); + this.$dragitems = $(this.options.items, this.$container); + this.is_dragging = false; + this.player_min_left = 0 + this.options.offset_left; + + this.init(); + }; + + var fn = Draggable.prototype; + + fn.init = function() { + this.$container.css('position', 'relative'); + this.enable(); + }; + + fn.get_actual_pos = function($el) { + var pos = $el.position(); + return pos; + }; + + + fn.get_mouse_pos = function(e) { + return { + left: e.clientX, + top: e.clientY + }; + }; + + + fn.drag_handler = function(e) { + 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); + + $body.on('mousemove.draggable', 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) { + throttle(self.on_dragmove.call(self, mme), 130); + }; + + return false; + + }); + + return false; + }; + + + fn.on_dragstart = function(e) { + e.preventDefault(); + this.drag_start = true; + this.is_dragging = true; + this.$container_offset = this.$container.offset(); + if (this.options.helper === 'clone') { + this.$helper = this.$player.clone().appendTo(this.$container).addClass('helper'); + this.helper = true; + }else{ + this.helper = false; + } + this.el_init_offset = this.$player.offset(); + this.player_width = this.$player.width(); + this.player_max_left = this.$container.width() - this.player_width + this.options.offset_left; + if (this.options.start) { + this.options.start.call(this.$player, e, { + helper: this.helper ? this.$helper : this.$player + }); + }; + return false; + }; + + + fn.get_offset = function(e) { + e.preventDefault(); + var mouse_actual_pos = this.get_mouse_pos(e); + var diff_x = mouse_actual_pos.left - this.mouse_init_pos.left; + var diff_y = mouse_actual_pos.top - this.mouse_init_pos.top; + + var left = this.el_init_offset.left + diff_x - this.$container_offset.left; + var top = this.el_init_offset.top + diff_y - this.$container_offset.top; + + 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 { + left: left, + top: top + } + }; + + + fn.on_dragmove = function(e) { + var offset = this.get_offset(e); + + (this.helper ? this.$helper : this.$player).css({ + 'position': 'absolute', + 'left' : offset.left, + 'top' : offset.top + }); + + var ui = { + 'position': { + 'left': offset.left, + 'top': offset.top + } + }; + + if (this.options.drag) { + this.options.drag.call(this.$player, e, ui); + } + return false; + }; + + + fn.on_dragstop = function(e) { + var offset = this.get_offset(e); + + this.drag_start = false; + + var ui = { + 'position': { + 'left': offset.left, + 'top': offset.top + } + } + + if (this.options.stop) { + this.options.stop.call(this.$player, e, ui); + } + + if (this.helper) { + this.$helper.remove(); + } + + return false; + }; + + + fn.enable = function(){ + this.$container.on('mousedown.draggable', this.options.items, $.proxy(this.drag_handler, this)); + $body.on('mouseup.draggable', $.proxy(function(e) { + this.is_dragging = false; + $body.off('mousemove.draggable'); + if (this.drag_start) { + this.on_dragstop(e); + } + }, this)); + }; + + + fn.disable = function(){ + this.$container.off('mousedown.draggable'); + $body.off('mouseup.draggable'); + }; + + + fn.destroy = function(){ + this.disable(); + $.removeData(this.$container, 'draggable'); + }; + + + //jQuery adapter + $.fn.draggable = function ( options ) { + return this.each(function () { + if (!$.data(this, 'draggable')) { + $.data(this, 'draggable', new Draggable( this, options )); + } + }); + }; + + +}(jQuery, window, document)); + +;(function($, window, document, undefined) { + + var defaults = { + widget_selector: '> li', + widget_margins: [10, 10], + widget_base_dimensions: [400, 225], + extra_rows: 0, + extra_cols: 0, + min_cols: 1, + min_rows: 10, + autogenerate_stylesheet: true, + avoid_overlapped_widgets: true, + serialize_params: function($w, wgd) { + return { + col: wgd.col, + row: wgd.row + }; + }, + collision: {}, + draggable: { + distance: 4 + } + }; + /** * @class Gridster @@ -401,6 +634,8 @@ this.init(); } + Gridster.generated_stylesheets = []; + var fn = Gridster.prototype; fn.init = function() { @@ -415,6 +650,31 @@ }; + /** + * Disable dragging. + * + * @method enable + * @return {Class} Returns the instance of the Gridster Class. + */ + fn.disable = function(){ + this.$wrapper.find('.player-revert').removeClass('player-revert'); + this.drag_api.disable(); + return this; + } + + + /** + * Enable dragging. + * + * @method enable + * @return {Class} Returns the instance of the Gridster Class. + */ + fn.enable = function(){ + this.drag_api.enable(); + return this; + } + + /** * Add a new widget to the grid. * @@ -422,7 +682,7 @@ * @param {String} html The string representing the HTML of the widget. * @param {Number} size_x The nº of rows the widget occupies horizontally. * @param {Number} size_y The nº of columns the widget occupies vertically. - * @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing + * @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing. * the widget that was just created. */ fn.add_widget = function(html, size_x, size_y) { @@ -439,12 +699,9 @@ this.register_widget($w); - this.$widgets.draggable('destroy'); - this.draggable(); - this.set_dom_grid_height(); - $w.fadeIn(); + return $w.fadeIn(); }; @@ -504,7 +761,6 @@ this.$widgets = this.$widgets.not($el); var $nexts = this.widgets_below($el); - this.remove_from_gridmap(wgd); $el.fadeOut($.proxy(function(){ @@ -562,7 +818,8 @@ * @return {Array} Returns the instance of the Gridster class. */ fn.register_widget = function($el) { - var widget_grid_data = { + + var wgd = { 'col': parseInt($el.attr('data-col'), 10), 'row': parseInt($el.attr('data-row'), 10), 'size_x': parseInt($el.attr('data-sizex'), 10), @@ -570,13 +827,27 @@ 'el': $el }; + if (this.options.avoid_overlapped_widgets && + !this.can_move_to( + { size_x: wgd.size_x, size_y: wgd.size_y }, wgd.col, wgd.row) + ) { + wgd = this.next_position(wgd.size_x, wgd.size_y); + wgd.el = $el; + $el.attr({ + 'data-col': wgd.col, + 'data-row': wgd.row, + 'data-sizex': wgd.size_x, + 'data-sizey': wgd.size_y + }); + }; + // attach Coord object to player data-coord attribute $el.data('coords', $el.coords()); // Extend Coord object with grid position info - $el.data('coords').grid = widget_grid_data; + $el.data('coords').grid = wgd; - this.add_to_gridmap(widget_grid_data, $el); + this.add_to_gridmap(wgd, $el); this.widgets.push($el); return this; }; @@ -647,8 +918,10 @@ fn.draggable = function() { var self = this; var draggable_options = $.extend(true, {}, this.options.draggable, { - // containment : this.$wrapper, + offset_left: this.options.widget_margins[0], + items: '.gs_w', start: function(event, ui) { + self.$widgets.filter('.player-revert').removeClass('player-revert'); self.$player = $(this); self.$helper = self.options.draggable.helper === 'clone' ? $(ui.helper) : self.$player; @@ -658,16 +931,16 @@ self.$el.trigger('gridster:dragstart'); }, stop: function(event, ui) { - self.on_stop_drag.call(self, ui); + self.on_stop_drag.call(self, event, ui); self.$el.trigger('gridster:dragstop'); }, - drag: throttle(function(event, ui) { + drag: function(event, ui) { self.on_drag.call(self, event, ui); self.$el.trigger('gridster:drag'); - }, 100, true) + } }); - this.$widgets.draggable(draggable_options); + this.drag_api = this.$el.draggable(draggable_options).data('draggable'); return this; }; @@ -681,8 +954,10 @@ * See http://jqueryui.com/demos/draggable/ for more info. */ fn.on_start_drag = function(event, ui) { + + this.$helper.add(this.$player).add(this.$wrapper).addClass('dragging'); + this.$player.addClass('player'); - this.$wrapper.addClass('dragging'); this.player_grid_data = this.$player.coords().grid; this.placeholder_grid_data = $.extend({}, this.player_grid_data); @@ -701,8 +976,9 @@ this.last_cols = []; this.last_rows = []; + // see jquery.collision.js - this.drag_api = this.$helper.collision( + this.collision_api = this.$helper.collision( colliders, this.options.collision); this.$preview_holder = $('
  • ', { @@ -730,7 +1006,11 @@ * See http://jqueryui.com/demos/draggable/ for more info. */ fn.on_drag = function(event, ui) { - this.colliders_data = this.drag_api.get_closest_colliders(); + var abs_offset = { + left: ui.position.left + this.baseX, + top: ui.position.top + this.baseY + } + this.colliders_data = this.collision_api.get_closest_colliders(abs_offset); this.on_overlapped_column_change( this.on_start_overlapping_column, @@ -763,8 +1043,11 @@ * See http://jqueryui.com/demos/draggable/ for more info. */ fn.on_stop_drag = function(event, ui) { - this.$wrapper.removeClass('dragging'); - this.colliders_data = this.drag_api.get_closest_colliders(); + this.$helper.add(this.$player).add(this.$wrapper).removeClass('dragging'); + + ui.position.left = ui.position.left + this.baseX; + ui.position.top = ui.position.top + this.baseY; + this.colliders_data = this.collision_api.get_closest_colliders(ui.position); this.on_overlapped_column_change( this.on_start_overlapping_column, @@ -776,13 +1059,14 @@ this.on_stop_overlapping_row ); - this.$player.add(this.$helper).attr({ + this.$player + .addClass('player-revert').removeClass('player').attr({ 'data-col': this.placeholder_grid_data.col, 'data-row': this.placeholder_grid_data.row }).css({ 'left': '', 'top': '' - }).removeClass('player'); + }); this.$changed = this.$changed.add(this.$player); @@ -1276,12 +1560,21 @@ size_y: phgd.size_y, size_x: phgd.size_x }); + + //Prevents widgets go out of the grid + var right_col = (col + phgd.size_x - 1); + if (right_col > this.cols) { + col = col - (right_col - col); + }; + var moved_down = this.placeholder_grid_data.row < row; var changed_column = this.placeholder_grid_data.col !== col; this.placeholder_grid_data.col = col; this.placeholder_grid_data.row = row; + + this.cells_occupied_by_placeholder = this.get_cells_occupied( this.placeholder_grid_data); @@ -1631,24 +1924,28 @@ var can_go_up = true; y_units || (y_units = 1); - if (!this.can_go_up($widget)) { return false; } //break; + // if (!this.can_go_up($widget)) { return false; } //break; + console.log($widget, y_units); this.for_each_column_occupied(el_grid_data, function(col){ // can_go_up if ($.inArray($widget, moved) === -1) { - var widget_grid_data = $widget.coords().grid; + var widget_grid_data = $.extend({}, el_grid_data); var next_row = actual_row - y_units; next_row = this.can_go_up_to_row(widget_grid_data, col, next_row); - if (!next_row) { + console.log('can_go_up_to_row?', $widget, y_units, next_row); + if (next_row === false) { return true; } var $next_widgets = this.widgets_below($widget); + console.log('$next_widgets', $next_widgets); this.remove_from_gridmap(widget_grid_data); widget_grid_data.row = next_row; this.add_to_gridmap(widget_grid_data); - $widget.attr('data-row', widget_grid_data.row); + console.log($widget, 'next-row', next_row); + $widget.attr('data-row', next_row); this.$changed = this.$changed.add($widget); moved.push($widget); @@ -1733,9 +2030,13 @@ r = actual_row; while (r--){ - if (this.is_empty(tcol, r) && - !this.is_placeholder_in(tcol, r) + var $w = this.is_widget(tcol, r); + console.log(tcol, r, $w, this.is_empty(tcol, r)); + if ($w && $w.is(widget_grid_data.el) || + (this.is_empty(tcol, r) && + !this.is_placeholder_in(tcol, r)) ) { + console.log('push', tcol, r); urc[tcol].push(r); }else{ break; @@ -1749,6 +2050,8 @@ }); + console.log('urc', urc); + if (!result) { return false; } //get common rows starting from upper position in all the columns widget occupies @@ -1865,7 +2168,8 @@ if (initial_row === 1) { return false; } this.for_each_column_occupied(el_grid_data, function(col){ - if (this.is_occupied(col, prev_row) || + if (!$el.is(this.is_widget(col, prev_row)) && + this.is_occupied(col, prev_row) || this.is_player(col, prev_row) || this.is_placeholder_in(col, prev_row) ) { @@ -1902,6 +2206,12 @@ }; var result = true; + //Prevents widgets go out of the grid + var right_col = col + widget_grid_data.size_x - 1; + if (right_col > this.cols) { + return false; + }; + this.for_each_cell_occupied(future_wd, function(tcol, trow){ var $tw = this.is_widget(tcol, trow); if ($tw && (!widget_grid_data.el || $tw.is($w))) { @@ -2146,6 +2456,33 @@ }; + + fn.get_widgets_from = function(col, row) { + var ga = this.gridmap; + var $widgets = $(); + + if (col) { + $widgets = $widgets.add( + this.$widgets.filter(function(){ + var tcol = $(this).attr('data-col'); + return (tcol == col || tcol > col); + }) + ); + }; + + if (row) { + $widgets = $widgets.add( + this.$widgets.filter(function(){ + var trow = $(this).attr('data-row'); + return (trow == row || trow > row); + }) + ); + }; + + return $widgets; + } + + /** * Set the current height of the parent grid. * @@ -2168,7 +2505,7 @@ * @param {Number} cols Number of rows. * @return {Object} Returns the instance of the Gridster class. */ - fn.generate_stylesheet = function(rows, cols) { + fn.generate_stylesheet = function(opts) { var styles = ''; var extra_cells = 10; var max_size_y = 6; @@ -2176,28 +2513,50 @@ var i; var rules; + opts || (opts = {}); + opts.cols || (opts.cols = this.cols); + opts.rows || (opts.rows = this.rows); + opts.namespace || (opts.namespace = ''); + opts.widget_base_dimensions || + (opts.widget_base_dimensions = this.options.widget_base_dimensions); + opts.widget_margins || + (opts.widget_margins = this.options.widget_margins); + opts.min_widget_width = (opts.widget_margins[0] * 2) + + opts.widget_base_dimensions[0]; + opts.min_widget_height = (opts.widget_margins[1] * 2) + + opts.widget_base_dimensions[1]; + + var serialized_opts = $.param(opts); + // don't duplicate stylesheets for the same configuration + if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) { + return false; + }; + + Gridster.generated_stylesheets.push(serialized_opts); + /* generate CSS styles for cols */ - for (i = cols + extra_cells; i >= 0; i--) { - styles += '[data-col="'+ (i + 1) +'"] { left: ' + - (i * this.min_widget_width) + + for (i = opts.cols + extra_cells; i >= 0; i--) { + styles += opts.namespace + ' [data-col="'+ (i + 1) +'"] { left: ' + + ((i * opts.widget_base_dimensions[0]) + (i *opts.widget_margins[0]) + ((i+1) * opts.widget_margins[0])) + 'px;} '; } /* generate CSS styles for rows */ - for (i = rows + extra_cells; i >= 0; i--) { - styles += '[data-row="' + (i + 1) + '"] { top: ' + - (i * this.min_widget_height) + 'px;} '; + for (i = opts.rows + extra_cells; i >= 0; i--) { + styles += opts.namespace + ' [data-row="' + (i + 1) + '"] { top: ' + + ((i * opts.widget_base_dimensions[1]) + (i * opts.widget_margins[1]) + ((i+1) * opts.widget_margins[1]) ) + + 'px;} '; } for (var y = 1; y < max_size_y; y++) { - styles += '[data-sizey="' + (y) + '"] { height: ' + - (y * this.options.widget_base_dimensions[1] + (y-1)*(this.options.widget_margins[1]*2)) + 'px;}'; + styles += opts.namespace + ' [data-sizey="' + (y) + '"] { height: ' + + (y * opts.widget_base_dimensions[1] + (y-1)*(opts.widget_margins[1]*2)) + 'px;}'; } for (var x = 1; x < max_size_x; x++) { - styles += '[data-sizex="' + (x) + '"] { width: ' + - (x * this.options.widget_base_dimensions[0] + (x-1)*(this.options.widget_margins[0]*2)) + 'px;}'; + styles += opts.namespace + ' [data-sizex="' + (x) + '"] { width: ' + + (x * opts.widget_base_dimensions[0] + (x-1)*(opts.widget_margins[0]*2)) + 'px;}'; } return this.add_style_tag(styles); @@ -2328,19 +2687,19 @@ var min_cols = Math.max.apply(null, actual_cols); var min_rows = Math.max.apply(null, actual_rows); - cols = Math.max(min_cols, cols, this.options.min_cols); - rows = Math.max(min_rows, rows, this.options.min_rows); + this.cols = Math.max(min_cols, cols, this.options.min_cols); + this.rows = Math.max(min_rows, rows, this.options.min_rows); this.baseX = ($(window).width() - aw) / 2; this.baseY = this.$wrapper.offset().top; if (this.options.autogenerate_stylesheet) { - this.generate_stylesheet(rows, cols); + this.generate_stylesheet(); } /* more faux rows that needed are created so that there are cells * where drag beyond the limits */ - return this.generate_faux_grid(rows, cols); + return this.generate_faux_grid(this.rows, this.cols); }; diff --git a/dist/jquery.gridster.min.css b/dist/jquery.gridster.min.css index 332f0cacd..7d676b6f5 100644 --- a/dist/jquery.gridster.min.css +++ b/dist/jquery.gridster.min.css @@ -1,3 +1,3 @@ -/*! gridster.js - v0.1.0 - 2012-07-20 +/*! gridster.js - v0.1.0 - 2012-07-23 * https://github.com/ducksboard/gridster.js -* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute;background:rgba(0,0,0,.23)}.ready .gs_w:not(.player):not(.preview-holder):not(.ui-draggable-dragging){-webkit-transition:left .3s,top .3s;-moz-transition:left .3s,top .3s;-o-transition:left .3s,top .3s}.gridster.dragging .ui-sortable-helper{z-index:9}.gridster .preview-holder{border:2px dashed #333;border-radius:5px;z-index:1;background:#FFF;position:absolute}.gridster .ui-draggable-dragging{z-index:10!important} \ No newline at end of file +* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute}.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}.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{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important} \ No newline at end of file diff --git a/dist/jquery.gridster.min.js b/dist/jquery.gridster.min.js index c22f589be..bb48c41ad 100644 --- a/dist/jquery.gridster.min.js +++ b/dist/jquery.gridster.min.js @@ -1,4 +1,4 @@ -/*! gridster.js - v0.1.0 - 2012-07-20 +/*! gridster.js - v0.1.0 - 2012-07-23 * https://github.com/ducksboard/gridster.js * Copyright (c) 2012 ducksboard; Licensed MIT, GPL */ -(function(a,b,c,d){function e(b){return b[0]&&a.isPlainObject(b[0])?this.data=b[0]:this.el=b,this.isCoords=!0,this.coords={},this.init(),this}var f=e.prototype;f.init=function(){this.set(),this.original_coords=this.get()},f.set=function(){var a=this.el;a&&(this.data=a.offset(),this.data.width||(this.data.width=a.width()),this.data.height||(this.data.height=a.height()));var b=this.data;return this.coords.x1=b.left,this.coords.y1=b.top,this.coords.x2=b.left+b.width,this.coords.y2=b.top+b.height,this.coords.cx=b.left+b.width/2,this.coords.cy=b.top+b.height/2,this.coords.width=b.width,this.coords.height=b.height,this.coords.el=a||!1,this},f.update=function(b){if(!b&&!this.el)return this;if(b){var c=a.extend(this.data,b);this.data=c}return this.set(),this},f.get=function(){return this.coords},a.fn.coords=function(){if(this.data("coords"))return this.data("coords");var a=new e(this,arguments[0]);return this.data("coords",a),a}})(jQuery,window,document),function(a,b,c,d){function f(b,c,d){this.options=a.extend(e,d),this.$element=b,this.last_colliders=[],this.last_colliders_coords=[],typeof c=="string"||c instanceof jQuery?this.$colliders=a(c,this.options.colliders_context).not(this.$element):this.colliders=a(c),this.init()}var e={colliders_context:c.body,on_overlap:function(a){},on_overlap_start:function(a){},on_overlap_stop:function(a){}},g=f.prototype;g.init=function(){this.find_collisions()},g.overlaps=function(a,b){var c=!1,d=!1;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)c=!0;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)d=!0;return c&&d},g.detect_overlapping_region=function(a,b){var c="",d="";return a.y1>b.cy&&a.y1b.y1&&a.y2b.cx&&a.x1b.x1&&a.x2 li",widget_margins:[10,10],widget_base_dimensions:[400,225],extra_rows:0,extra_cols:0,min_cols:1,min_rows:10,autogenerate_stylesheet:!0,serialize_params:function(a,b){return{col:b.col,row:b.row}},collision:{},draggable:{}},f=function(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)};c&&!d&&a.apply(e,f),clearTimeout(d),d=setTimeout(g,b)}},g=function(a,b){var c,d,e,g,h,i,j=f(function(){h=g=!1},b,!0);return function(){c=this,d=arguments;var f=function(){e=null,h&&a.apply(c,d),j()};return e||(e=setTimeout(f,b)),g?h=!0:i=a.apply(c,d),j(),g=!0,i}},i=h.prototype;i.init=function(){this.generate_grid_and_stylesheet(),this.get_widgets_from_DOM(),this.set_dom_grid_height(),this.$wrapper.addClass("ready"),this.draggable(),a(b).bind("resize",g(a.proxy(this.recalculate_faux_grid,this),200))},i.add_widget=function(b,c,d){var e=this.next_position(c,d),f=a(b).attr({"data-col":e.col,"data-row":e.row,"data-sizex":e.size_x,"data-sizey":e.size_y}).addClass("gs_w").appendTo(this.$el).hide();this.$widgets=this.$widgets.add(f),this.register_widget(f),this.$widgets.draggable("destroy"),this.draggable(),this.set_dom_grid_height(),f.fadeIn()},i.next_position=function(a,b){a||(a=1),b||(b=1);var c=this.gridmap,d=c.length,e=[];for(var f=1;f",{"class":"preview-holder","data-row":this.$player.attr("data-row"),"data-col":this.$player.attr("data-col"),css:{width:e.width,height:e.height}}).appendTo(this.$el),this.options.draggable.start&&this.options.draggable.start.call(this,b,c)},i.on_drag=function(a,b){this.colliders_data=this.drag_api.get_closest_colliders(),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.helper&&this.$player&&this.$player.css({left:b.position.left,top:b.position.top}),this.options.draggable.drag&&this.options.draggable.drag.call(this,a,b)},i.on_stop_drag=function(a,b){this.$wrapper.removeClass("dragging"),this.colliders_data=this.drag_api.get_closest_colliders(),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.$player.add(this.$helper).attr({"data-col":this.placeholder_grid_data.col,"data-row":this.placeholder_grid_data.row}).css({left:"",top:""}).removeClass("player"),this.$changed=this.$changed.add(this.$player),this.cells_occupied_by_player=this.get_cells_occupied(this.placeholder_grid_data),this.set_cells_player_occupies(this.placeholder_grid_data.col,this.placeholder_grid_data.row),this.$player.coords().grid.row=this.placeholder_grid_data.row,this.$player.coords().grid.col=this.placeholder_grid_data.col,this.$player=null,this.$preview_holder.remove(),this.set_dom_grid_height(),this.options.draggable.stop&&this.options.draggable.stop.call(this,a,b)},i.on_overlapped_column_change=function(b,c){if(!this.colliders_data.length)return;var d=this.get_targeted_columns(this.colliders_data[0].el.data.col),e=this.last_cols.length,f=d.length,g;for(g=0;gb.row?1:-1}),a},i.sort_by_row_and_col_asc=function(a){return a=a.sort(function(a,b){return a.row>b.row||a.row==b.row&&a.col>b.col?1:-1}),a},i.sort_by_col_asc=function(a){return a=a.sort(function(a,b){return a.col>b.col?1:-1}),a},i.sort_by_row_desc=function(a){return a=a.sort(function(a,b){return a.row+a.size_y=0&&a.inArray(c,d.rows)>=0},i.is_placeholder_in=function(b,c){var d=this.cells_occupied_by_placeholder||[];return this.is_placeholder_in_col(b)&&a.inArray(c,d.rows)>=0},i.is_placeholder_in_col=function(b){var c=this.cells_occupied_by_placeholder||[];return a.inArray(b,c.cols)>=0},i.is_empty=function(a,b){return typeof this.gridmap[a]!="undefined"&&typeof this.gridmap[a][b]!="undefined"&&this.gridmap[a][b]===!1?!0:!1},i.is_occupied=function(a,b){return this.gridmap[a]?this.gridmap[a][b]?!0:!1:!1},i.is_widget=function(a,b){var c=this.gridmap[a];return c?(c=c[b],c?c:!1):!1},i.is_widget_under_player=function(a,b){return this.is_widget(a,b)?this.is_player_in(a,b):!1},i.get_widgets_under_player=function(){var b=this.cells_occupied_by_player,c=a([]);return a.each(b.cols,a.proxy(function(d,e){a.each(b.rows,a.proxy(function(a,b){this.is_widget(e,b)&&(c=c.add(this.gridmap[e][b]))},this))},this)),c},i.set_placeholder=function(b,c){var d=a.extend({},this.placeholder_grid_data),e=this.widgets_below({col:d.col,row:d.row,size_y:d.size_y,size_x:d.size_x}),f=this.placeholder_grid_data.row0)if(this.is_empty(a,h)||this.is_player(a,h)||this.is_widget(a,h)&&g[h].is(f))d[a].push(h),e=h0){if(this.is_occupied(a,g)&&!this.is_player(a,g))break;!this.is_player(a,g)&&!this.is_placeholder_in(a,g)&&d[a].push(g),g=b?a[d[0]]:!1},i.get_widgets_overlapped=function(){var b,c=a([]),d=[],e=this.cells_occupied_by_player.rows.slice(0);return e.reverse(),a.each(this.cells_occupied_by_player.cols,a.proxy(function(b,f){a.each(e,a.proxy(function(b,e){if(!this.gridmap[f])return!0;var g=this.gridmap[f][e];this.is_occupied(f,e)&&!this.is_player(g)&&a.inArray(g,d)===-1&&(c=c.add(g),d.push(g))},this))},this)),c},i.on_start_overlapping_column=function(a){this.set_player(a,!1)},i.on_start_overlapping_row=function(a){this.set_player(!1,a)},i.on_stop_overlapping_column=function(a){this.set_player();var b=this;this.for_each_widget_below(a,this.cells_occupied_by_player.rows[0],function(a,c){b.move_widget_up(this,b.player_grid_data.size_y)})},i.on_stop_overlapping_row=function(a){this.set_player();var b=this,c=this.cells_occupied_by_player.cols;for(var d=0,e=c.length;d0&&this.move_widget_down(d,f)},this)),h.row=i,this.update_widget_position(h,b),b.attr("data-row",h.row),this.$changed=this.$changed.add(b),f.push(b)}},i.can_go_up_to_row=function(b,c,d){var e=this.gridmap,f=!0,g=[],h=b.row,i;this.for_each_column_occupied(b,function(a){var b=e[a];g[a]=[],i=h;while(i--)if(this.is_empty(a,i)&&!this.is_placeholder_in(a,i))g[a].push(i);else break;if(!g[a].length)return f=!1,!0});if(!f)return!1;i=d;for(i=1;i0?c:0},i.widgets_below=function(b){var c=a.isPlainObject(b)?b:b.coords().grid,d=this,e=this.gridmap,f=c.row+c.size_y-1,g=a([]);return this.for_each_column_occupied(c,function(b){d.for_each_widget_below(b,f,function(b,c){if(!d.is_player(this)&&a.inArray(this,g)===-1)return g=g.add(this),!0})}),this.sort_by_row_asc(g)},i.set_cells_player_occupies=function(a,b){return this.remove_from_gridmap(this.placeholder_grid_data),this.placeholder_grid_data.col=a,this.placeholder_grid_data.row=b,this.add_to_gridmap(this.placeholder_grid_data,this.$player),this},i.empty_cells_player_occupies=function(){return this.remove_from_gridmap(this.placeholder_grid_data),this},i.can_go_up=function(a){var b=a.coords().grid,c=b.row,d=c-1,e=this.gridmap,f=[],g=!0;return c===1?!1:(this.for_each_column_occupied(b,function(a){if(this.is_occupied(a,d)||this.is_player(a,d)||this.is_placeholder_in(a,d))return g=!1,!0}),g)},i.can_move_to=function(a,b,c){var d=this.gridmap,e=a.el,f={size_y:a.size_y,size_x:a.size_x,col:b,row:c},g=!0;return this.for_each_cell_occupied(f,function(b,c){var d=this.is_widget(b,c);d&&(!a.el||d.is(e))&&(g=!1)}),g},i.get_targeted_columns=function(a){var b=(a||this.player_grid_data.col)+(this.player_grid_data.size_x-1),c=[];for(var d=a;d<=b;d++)c.push(d);return c},i.get_targeted_rows=function(a){var b=(a||this.player_grid_data.row)+(this.player_grid_data.size_y-1),c=[];for(var d=a;d<=b;d++)c.push(d);return c},i.get_cells_occupied=function(a){var b={cols:[],rows:[]},c;arguments[1]instanceof jQuery&&(a=arguments[1].coords().grid);for(c=0;c0&&this.is_widget(d,m)&&a.inArray(g[d][m],l)===-1){h=f.call(g[d][m],d,m),l.push(g[d][m]);if(h)break}},"for_each/below":function(){for(m=e+1,i=g[d].length;m=1;e--)for(a=b[e].length-1;a>=1;a--)if(this.is_widget(e,a)){c.push(a),d[a]=e;break}var f=Math.max.apply(null,c);return this.highest_occupied_cell={col:d[f],row:f},this.highest_occupied_cell},i.set_dom_grid_height=function(){var a=this.get_highest_occupied_cell().row;return this.$el.css("height",a*this.min_widget_height),this},i.generate_stylesheet=function(a,b){var c="",d=10,e=6,f=6,g,h;for(g=b+d;g>=0;g--)c+='[data-col="'+(g+1)+'"] { left: '+g*this.min_widget_width+"px;} ";for(g=a+d;g>=0;g--)c+='[data-row="'+(g+1)+'"] { top: '+g*this.min_widget_height+"px;} ";for(var i=1;i0;d--){this.gridmap[d]=[];for(e=b;e>0;e--){var f=a({left:this.baseX+(d-1)*this.min_widget_width,top:this.baseY+(e-1)*this.min_widget_height,width:this.min_widget_width,height:this.min_widget_height,col:d,row:e,original_col:d,original_row:e}).coords();this.gridmap[d][e]=!1,this.faux_grid.push(f)}}return this},i.recalculate_faux_grid=function(){var c=this.$wrapper.width();return this.baseX=(a(b).width()-c)/2,this.baseY=this.$wrapper.offset().top,a.each(this.faux_grid,a.proxy(function(a,b){this.faux_grid[a]=b.update({left:this.baseX+(b.data.col-1)*this.min_widget_width,top:this.baseY+(b.data.row-1)*this.min_widget_height})},this)),this},i.get_widgets_from_DOM=function(){return this.$widgets.each(a.proxy(function(b,c){this.register_widget(a(c))},this)),this},i.generate_grid_and_stylesheet=function(){var c=this.$wrapper.width(),d=this.$wrapper.height(),e=Math.floor(c/this.min_widget_width)+this.options.extra_cols,f=Math.floor(d/this.min_widget_height)+this.options.extra_rows,g=this.$widgets.map(function(){return a(this).attr("data-col")}),h=this.$widgets.map(function(){return a(this).attr("data-row")}),i=Math.max.apply(null,g),j=Math.max.apply(null,h);return e=Math.max(i,e,this.options.min_cols),f=Math.max(j,f,this.options.min_rows),this.baseX=(a(b).width()-c)/2,this.baseY=this.$wrapper.offset().top,this.options.autogenerate_stylesheet&&this.generate_stylesheet(f,e),this.generate_faux_grid(f,e)},a.fn.gridster=function(b){return this.each(function(){a(this).data("gridster")||a(this).data("gridster",new h(this,b))})}}(jQuery,window,document); \ No newline at end of file +(function(a,b,c,d){function e(b){return b[0]&&a.isPlainObject(b[0])?this.data=b[0]:this.el=b,this.isCoords=!0,this.coords={},this.init(),this}var f=e.prototype;f.init=function(){this.set(),this.original_coords=this.get()},f.set=function(a,b){var c=this.el;c&&!a&&(this.data={}||c.offset(),this.data.width=c.width(),this.data.height=c.height());if(c&&a&&!b){var d=c.offset();this.data.top=d.top,this.data.left=d.left}var e=this.data;return this.coords.x1=e.left,this.coords.y1=e.top,this.coords.x2=e.left+e.width,this.coords.y2=e.top+e.height,this.coords.cx=e.left+e.width/2,this.coords.cy=e.top+e.height/2,this.coords.width=e.width,this.coords.height=e.height,this.coords.el=c||!1,this},f.update=function(b){if(!b&&!this.el)return this;if(b){var c=a.extend({},this.data,b);return this.data=c,this.set(!0,!0)}return this.set(!0),this},f.get=function(){return this.coords},a.fn.coords=function(){if(this.data("coords"))return this.data("coords");var a=new e(this,arguments[0]);return this.data("coords",a),a}})(jQuery,window,document),function(a,b,c,d){function f(b,c,d){this.options=a.extend(e,d),this.$element=b,this.last_colliders=[],this.last_colliders_coords=[],typeof c=="string"||c instanceof jQuery?this.$colliders=a(c,this.options.colliders_context).not(this.$element):this.colliders=a(c),this.init()}var e={colliders_context:c.body,on_overlap:function(a){},on_overlap_start:function(a){},on_overlap_stop:function(a){}},g=f.prototype;g.init=function(){this.find_collisions()},g.overlaps=function(a,b){var c=!1,d=!1;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)c=!0;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)d=!0;return c&&d},g.detect_overlapping_region=function(a,b){var c="",d="";return a.y1>b.cy&&a.y1b.y1&&a.y2b.cx&&a.x1b.x1&&a.x2c.options.distance||f>c.options.distance?d?(d=!1,c.on_dragstart.call(c,a),!1):(c.is_dragging==!0&&throttle(c.on_dragmove.call(c,a),130),!1):!1}),!1},h.on_dragstart=function(a){return a.preventDefault(),this.drag_start=!0,this.is_dragging=!0,this.$container_offset=this.$container.offset(),this.options.helper==="clone"?(this.$helper=this.$player.clone().appendTo(this.$container).addClass("helper"),this.helper=!0):this.helper=!1,this.el_init_offset=this.$player.offset(),this.player_width=this.$player.width(),this.player_max_left=this.$container.width()-this.player_width+this.options.offset_left,this.options.start&&this.options.start.call(this.$player,a,{helper:this.helper?this.$helper:this.$player}),!1},h.get_offset=function(a){a.preventDefault();var b=this.get_mouse_pos(a),c=b.left-this.mouse_init_pos.left,d=b.top-this.mouse_init_pos.top,e=this.el_init_offset.left+c-this.$container_offset.left,f=this.el_init_offset.top+d-this.$container_offset.top;return this.options.limit&&(e>this.player_max_left?e=this.player_max_left:e li",widget_margins:[10,10],widget_base_dimensions:[400,225],extra_rows:0,extra_cols:0,min_cols:1,min_rows:10,autogenerate_stylesheet:!0,avoid_overlapped_widgets:!0,serialize_params:function(a,b){return{col:b.col,row:b.row}},collision:{},draggable:{distance:4}};f.generated_stylesheets=[];var g=f.prototype;g.init=function(){this.generate_grid_and_stylesheet(),this.get_widgets_from_DOM(),this.set_dom_grid_height(),this.$wrapper.addClass("ready"),this.draggable(),a(b).bind("resize",throttle(a.proxy(this.recalculate_faux_grid,this),200))},g.disable=function(){return this.drag_api.disable(),this},g.enable=function(){return this.drag_api.enable(),this},g.add_widget=function(b,c,d){var e=this.next_position(c,d),f=a(b).attr({"data-col":e.col,"data-row":e.row,"data-sizex":e.size_x,"data-sizey":e.size_y}).addClass("gs_w").appendTo(this.$el).hide();return this.$widgets=this.$widgets.add(f),this.register_widget(f),this.set_dom_grid_height(),f.fadeIn()},g.next_position=function(a,b){a||(a=1),b||(b=1);var c=this.gridmap,d=c.length,e=[];for(var f=1;f",{"class":"preview-holder","data-row":this.$player.attr("data-row"),"data-col":this.$player.attr("data-col"),css:{width:e.width,height:e.height}}).appendTo(this.$el),this.options.draggable.start&&this.options.draggable.start.call(this,b,c)},g.on_drag=function(a,b){var c={left:b.position.left+this.baseX,top:b.position.top+this.baseY};this.colliders_data=this.collision_api.get_closest_colliders(c),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.helper&&this.$player&&this.$player.css({left:b.position.left,top:b.position.top}),this.options.draggable.drag&&this.options.draggable.drag.call(this,a,b)},g.on_stop_drag=function(a,b){this.$helper.add(this.$player).add(this.$wrapper).removeClass("dragging"),b.position.left=b.position.left+this.baseX,b.position.top=b.position.top+this.baseY,this.colliders_data=this.collision_api.get_closest_colliders(b.position),this.on_overlapped_column_change(this.on_start_overlapping_column,this.on_stop_overlapping_column),this.on_overlapped_row_change(this.on_start_overlapping_row,this.on_stop_overlapping_row),this.$player.addClass("player-revert").removeClass("player").attr({"data-col":this.placeholder_grid_data.col,"data-row":this.placeholder_grid_data.row}).css({left:"",top:""}),this.$changed=this.$changed.add(this.$player),this.cells_occupied_by_player=this.get_cells_occupied(this.placeholder_grid_data),this.set_cells_player_occupies(this.placeholder_grid_data.col,this.placeholder_grid_data.row),this.$player.coords().grid.row=this.placeholder_grid_data.row,this.$player.coords().grid.col=this.placeholder_grid_data.col,this.$player=null,this.$preview_holder.remove(),this.set_dom_grid_height(),this.options.draggable.stop&&this.options.draggable.stop.call(this,a,b)},g.on_overlapped_column_change=function(b,c){if(!this.colliders_data.length)return;var d=this.get_targeted_columns(this.colliders_data[0].el.data.col),e=this.last_cols.length,f=d.length,g;for(g=0;gb.row?1:-1}),a},g.sort_by_row_and_col_asc=function(a){return a=a.sort(function(a,b){return a.row>b.row||a.row==b.row&&a.col>b.col?1:-1}),a},g.sort_by_col_asc=function(a){return a=a.sort(function(a,b){return a.col>b.col?1:-1}),a},g.sort_by_row_desc=function(a){return a=a.sort(function(a,b){return a.row+a.size_y=0&&a.inArray(c,d.rows)>=0},g.is_placeholder_in=function(b,c){var d=this.cells_occupied_by_placeholder||[];return this.is_placeholder_in_col(b)&&a.inArray(c,d.rows)>=0},g.is_placeholder_in_col=function(b){var c=this.cells_occupied_by_placeholder||[];return a.inArray(b,c.cols)>=0},g.is_empty=function(a,b){return typeof this.gridmap[a]!="undefined"&&typeof this.gridmap[a][b]!="undefined"&&this.gridmap[a][b]===!1?!0:!1},g.is_occupied=function(a,b){return this.gridmap[a]?this.gridmap[a][b]?!0:!1:!1},g.is_widget=function(a,b){var c=this.gridmap[a];return c?(c=c[b],c?c:!1):!1},g.is_widget_under_player=function(a,b){return this.is_widget(a,b)?this.is_player_in(a,b):!1},g.get_widgets_under_player=function(){var b=this.cells_occupied_by_player,c=a([]);return a.each(b.cols,a.proxy(function(d,e){a.each(b.rows,a.proxy(function(a,b){this.is_widget(e,b)&&(c=c.add(this.gridmap[e][b]))},this))},this)),c},g.set_placeholder=function(b,c){var d=a.extend({},this.placeholder_grid_data),e=this.widgets_below({col:d.col,row:d.row,size_y:d.size_y,size_x:d.size_x}),f=b+d.size_x-1;f>this.cols&&(b=b-(f-b));var g=this.placeholder_grid_data.row0)if(this.is_empty(a,h)||this.is_player(a,h)||this.is_widget(a,h)&&g[h].is(f))d[a].push(h),e=h0){if(this.is_occupied(a,g)&&!this.is_player(a,g))break;!this.is_player(a,g)&&!this.is_placeholder_in(a,g)&&d[a].push(g),g=b?a[d[0]]:!1},g.get_widgets_overlapped=function(){var b,c=a([]),d=[],e=this.cells_occupied_by_player.rows.slice(0);return e.reverse(),a.each(this.cells_occupied_by_player.cols,a.proxy(function(b,f){a.each(e,a.proxy(function(b,e){if(!this.gridmap[f])return!0;var g=this.gridmap[f][e];this.is_occupied(f,e)&&!this.is_player(g)&&a.inArray(g,d)===-1&&(c=c.add(g),d.push(g))},this))},this)),c},g.on_start_overlapping_column=function(a){this.set_player(a,!1)},g.on_start_overlapping_row=function(a){this.set_player(!1,a)},g.on_stop_overlapping_column=function(a){this.set_player();var b=this;this.for_each_widget_below(a,this.cells_occupied_by_player.rows[0],function(a,c){b.move_widget_up(this,b.player_grid_data.size_y)})},g.on_stop_overlapping_row=function(a){this.set_player();var b=this,c=this.cells_occupied_by_player.cols;for(var d=0,e=c.length;d0&&this.move_widget_down(d,f)},this)),h.row=i,this.update_widget_position(h,b),b.attr("data-row",h.row),this.$changed=this.$changed.add(b),f.push(b)}},g.can_go_up_to_row=function(b,c,d){var e=this.gridmap,f=!0,g=[],h=b.row,i;this.for_each_column_occupied(b,function(a){var b=e[a];g[a]=[],i=h;while(i--)if(this.is_empty(a,i)&&!this.is_placeholder_in(a,i))g[a].push(i);else break;if(!g[a].length)return f=!1,!0});if(!f)return!1;i=d;for(i=1;i0?c:0},g.widgets_below=function(b){var c=a.isPlainObject(b)?b:b.coords().grid,d=this,e=this.gridmap,f=c.row+c.size_y-1,g=a([]);return this.for_each_column_occupied(c,function(b){d.for_each_widget_below(b,f,function(b,c){if(!d.is_player(this)&&a.inArray(this,g)===-1)return g=g.add(this),!0})}),this.sort_by_row_asc(g)},g.set_cells_player_occupies=function(a,b){return this.remove_from_gridmap(this.placeholder_grid_data),this.placeholder_grid_data.col=a,this.placeholder_grid_data.row=b,this.add_to_gridmap(this.placeholder_grid_data,this.$player),this},g.empty_cells_player_occupies=function(){return this.remove_from_gridmap(this.placeholder_grid_data),this},g.can_go_up=function(a){var b=a.coords().grid,c=b.row,d=c-1,e=this.gridmap,f=[],g=!0;return c===1?!1:(this.for_each_column_occupied(b,function(a){if(this.is_occupied(a,d)||this.is_player(a,d)||this.is_placeholder_in(a,d))return g=!1,!0}),g)},g.can_move_to=function(a,b,c){var d=this.gridmap,e=a.el,f={size_y:a.size_y,size_x:a.size_x,col:b,row:c},g=!0,h=b+a.size_x-1;return h>this.cols?!1:(this.for_each_cell_occupied(f,function(b,c){var d=this.is_widget(b,c);d&&(!a.el||d.is(e))&&(g=!1)}),g)},g.get_targeted_columns=function(a){var b=(a||this.player_grid_data.col)+(this.player_grid_data.size_x-1),c=[];for(var d=a;d<=b;d++)c.push(d);return c},g.get_targeted_rows=function(a){var b=(a||this.player_grid_data.row)+(this.player_grid_data.size_y-1),c=[];for(var d=a;d<=b;d++)c.push(d);return c},g.get_cells_occupied=function(a){var b={cols:[],rows:[]},c;arguments[1]instanceof jQuery&&(a=arguments[1].coords().grid);for(c=0;c0&&this.is_widget(d,m)&&a.inArray(g[d][m],l)===-1){h=f.call(g[d][m],d,m),l.push(g[d][m]);if(h)break}},"for_each/below":function(){for(m=e+1,i=g[d].length;m=1;e--)for(a=b[e].length-1;a>=1;a--)if(this.is_widget(e,a)){c.push(a),d[a]=e;break}var f=Math.max.apply(null,c);return this.highest_occupied_cell={col:d[f],row:f},this.highest_occupied_cell},g.get_widgets_from=function(b,c){var d=this.gridmap,e=a();return b&&(e=e.add(this.$widgets.filter(function(){var c=a(this).attr("data-col");return c==b||c>b}))),c&&(e=e.add(this.$widgets.filter(function(){var b=a(this).attr("data-row");return b==c||b>c}))),e},g.set_dom_grid_height=function(){var a=this.get_highest_occupied_cell().row;return this.$el.css("height",a*this.min_widget_height),this},g.generate_stylesheet=function(b){var c="",d=10,e=6,g=6,h,i;b||(b={}),b.cols||(b.cols=this.cols),b.rows||(b.rows=this.rows),b.namespace||(b.namespace=""),b.widget_base_dimensions||(b.widget_base_dimensions=this.options.widget_base_dimensions),b.widget_margins||(b.widget_margins=this.options.widget_margins),b.min_widget_width=b.widget_margins[0]*2+b.widget_base_dimensions[0],b.min_widget_height=b.widget_margins[1]*2+b.widget_base_dimensions[1];var j=a.param(b);if(a.inArray(j,f.generated_stylesheets)>=0)return!1;f.generated_stylesheets.push(j);for(h=b.cols+d;h>=0;h--)c+=b.namespace+' [data-col="'+(h+1)+'"] { left: '+(h*b.widget_base_dimensions[0]+h*b.widget_margins[0]+(h+1)*b.widget_margins[0])+"px;} ";for(h=b.rows+d;h>=0;h--)c+=b.namespace+' [data-row="'+(h+1)+'"] { top: '+(h*b.widget_base_dimensions[1]+h*b.widget_margins[1]+(h+1)*b.widget_margins[1])+"px;} ";for(var k=1;k0;d--){this.gridmap[d]=[];for(e=b;e>0;e--){var f=a({left:this.baseX+(d-1)*this.min_widget_width,top:this.baseY+(e-1)*this.min_widget_height,width:this.min_widget_width,height:this.min_widget_height,col:d,row:e,original_col:d,original_row:e}).coords();this.gridmap[d][e]=!1,this.faux_grid.push(f)}}return this},g.recalculate_faux_grid=function(){var c=this.$wrapper.width();return this.baseX=(a(b).width()-c)/2,this.baseY=this.$wrapper.offset().top,a.each(this.faux_grid,a.proxy(function(a,b){this.faux_grid[a]=b.update({left:this.baseX+(b.data.col-1)*this.min_widget_width,top:this.baseY+(b.data.row-1)*this.min_widget_height})},this)),this},g.get_widgets_from_DOM=function(){return this.$widgets.each(a.proxy(function(b,c){this.register_widget(a(c))},this)),this},g.generate_grid_and_stylesheet=function(){var c=this.$wrapper.width(),d=this.$wrapper.height(),e=Math.floor(c/this.min_widget_width)+this.options.extra_cols,f=Math.floor(d/this.min_widget_height)+this.options.extra_rows,g=this.$widgets.map(function(){return a(this).attr("data-col")}),h=this.$widgets.map(function(){return a(this).attr("data-row")}),i=Math.max.apply(null,g),j=Math.max.apply(null,h);return this.cols=Math.max(i,e,this.options.min_cols),this.rows=Math.max(j,f,this.options.min_rows),this.baseX=(a(b).width()-c)/2,this.baseY=this.$wrapper.offset().top,this.options.autogenerate_stylesheet&&this.generate_stylesheet(),this.generate_faux_grid(this.rows,this.cols)},a.fn.gridster=function(b){return this.each(function(){a(this).data("gridster")||a(this).data("gridster",new f(this,b))})}}(jQuery,window,document); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 80392888e..8b7efa7ac 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,6 +3,7 @@ YUI.add("yuidoc-meta", function(Y) { "classes": [ "Collision", "Coords", + "Draggable", "Gridster" ], "modules": [], diff --git a/docs/classes/Collision.html b/docs/classes/Collision.html index 4acf1b1e4..74c25d5b5 100644 --- a/docs/classes/Collision.html +++ b/docs/classes/Collision.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • diff --git a/docs/classes/Coords.html b/docs/classes/Coords.html index e315cfc5f..603259dcf 100644 --- a/docs/classes/Coords.html +++ b/docs/classes/Coords.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • @@ -107,7 +109,7 @@
    -

    Coords description

    +

    Coords

    diff --git a/docs/classes/Draggable.html b/docs/classes/Draggable.html new file mode 100644 index 000000000..62f883a3a --- /dev/null +++ b/docs/classes/Draggable.html @@ -0,0 +1,222 @@ + + + + + Draggable + + + + + + + + +
    +
    +
    + + +

    + +
    +
    + API Docs for: +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    Draggable Class

    +
    + + + + + +
    + Defined in: src/jquery.draggable.js:24 +
    + + + + + +
    + + + +
    +

    Draggable

    +
    + + +
    +

    Constructor

    +
    +

    Draggable

    + + + () + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/jquery.draggable.js:24 + +

    + + + + + +
    + +
    + +
    + + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/Gridster.html b/docs/classes/Gridster.html index fe4b5d598..c052ce942 100644 --- a/docs/classes/Gridster.html +++ b/docs/classes/Gridster.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • @@ -106,7 +108,7 @@
    - Defined in: src/jquery.gridster.js:70 + Defined in: src/jquery.gridster.js:33
    @@ -172,7 +174,7 @@ - src/jquery.gridster.js:70 + src/jquery.gridster.js:33

    @@ -497,6 +499,20 @@ + + +
  • + enable + + + +
    • + +
  • + enable + + +
  • @@ -847,6 +863,13 @@ +
    • + +
  • + sort_by_row_asc + + +
  • @@ -939,7 +962,7 @@ - src/jquery.gridster.js:1899 + src/jquery.gridster.js:2004

    @@ -1049,7 +1072,7 @@ - src/jquery.gridster.js:339 + src/jquery.gridster.js:342

    @@ -1182,7 +1205,7 @@ - src/jquery.gridster.js:140 + src/jquery.gridster.js:129

    @@ -1260,7 +1283,7 @@ HTMLElement: - Returns the jQuery wrapped HTMLElement representing + Returns the jQuery wrapped HTMLElement representing. the widget that was just created. @@ -1317,7 +1340,7 @@ - src/jquery.gridster.js:995 + src/jquery.gridster.js:1048

    @@ -1435,7 +1458,7 @@ - src/jquery.gridster.js:1402 + src/jquery.gridster.js:1455

    @@ -1572,7 +1595,7 @@ upper row possible.

    - src/jquery.gridster.js:1044 + src/jquery.gridster.js:1097

    @@ -1690,7 +1713,7 @@ upper row possible.

    - src/jquery.gridster.js:1574 + src/jquery.gridster.js:1627

    @@ -1817,7 +1840,7 @@ into account the dimensions (size_y and size_x attrs. - src/jquery.gridster.js:361 + src/jquery.gridster.js:364

    @@ -1888,7 +1911,7 @@ into account the dimensions (size_y and size_x attrs. - src/jquery.gridster.js:1537 + src/jquery.gridster.js:1590

    @@ -1905,6 +1928,148 @@ into account the dimensions (size_y and size_x attrs. +
    +

    Returns:

    + +
    + + + Class: + + Returns the instance of the Gridster Class. + +
    +
    + + + + + + +
    +

    enable

    + + + () + + + + + Class + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/jquery.gridster.js:105 + +

    + + + + + +
    + +
    +

    Disable dragging.

    +
    + + + + +
    +

    Returns:

    + +
    + + + Class: + + Returns the instance of the Gridster Class. + +
    +
    + + + +
    + + +
    +

    enable

    + + + () + + + + + Class + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/jquery.gridster.js:117 + +

    + + + + + +
    + +
    +

    Enable dragging.

    +
    + + + +

    Returns:

    @@ -1975,7 +2140,7 @@ into account the dimensions (size_y and size_x attrs. - src/jquery.gridster.js:1671 + src/jquery.gridster.js:1730

    @@ -2103,7 +2268,7 @@ each one.

    - src/jquery.gridster.js:1692 + src/jquery.gridster.js:1751

    @@ -2231,7 +2396,7 @@ each one.

    - src/jquery.gridster.js:1711 + src/jquery.gridster.js:1770

    @@ -2364,7 +2529,7 @@ each one.

    - src/jquery.gridster.js:1777 + src/jquery.gridster.js:1836

    @@ -2511,7 +2676,7 @@ iteration. The value of this inside the function is the jQuery wrap - src/jquery.gridster.js:1793 + src/jquery.gridster.js:1852

    @@ -2652,7 +2817,7 @@ iteration. The value of this inside the function is the jQuery wrap - src/jquery.gridster.js:1922 + src/jquery.gridster.js:2027

    @@ -2762,7 +2927,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1996 + src/jquery.gridster.js:2101

    @@ -2850,7 +3015,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1855 + src/jquery.gridster.js:1941

    @@ -2969,7 +3134,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1643 + src/jquery.gridster.js:1702

    @@ -3063,7 +3228,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1809 + src/jquery.gridster.js:1868

    @@ -3144,7 +3309,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1608 + src/jquery.gridster.js:1667

    @@ -3249,7 +3414,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1626 + src/jquery.gridster.js:1685

    @@ -3366,7 +3531,7 @@ detect row or column that we want to go.

    - src/jquery.gridster.js:1095 + src/jquery.gridster.js:1148

    @@ -3494,7 +3659,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:1982 + src/jquery.gridster.js:2087

    @@ -3565,7 +3730,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:1173 + src/jquery.gridster.js:1226

    @@ -3636,7 +3801,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:931 + src/jquery.gridster.js:975

    @@ -3723,7 +3888,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:850 + src/jquery.gridster.js:894

    @@ -3848,7 +4013,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:869 + src/jquery.gridster.js:913

    @@ -3973,7 +4138,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:823 + src/jquery.gridster.js:867

    @@ -4092,7 +4257,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:837 + src/jquery.gridster.js:881

    @@ -4202,7 +4367,7 @@ theupperrowsarray. Iteration starts from row specified insrc/jquery.gridster.js:791 + src/jquery.gridster.js:835

    @@ -4330,7 +4495,7 @@ HTMLElements.

    - src/jquery.gridster.js:808 + src/jquery.gridster.js:852

    @@ -4456,7 +4621,7 @@ and col given.

    - src/jquery.gridster.js:889 + src/jquery.gridster.js:933

    @@ -4582,7 +4747,7 @@ else returns the jQuery HTMLElement - src/jquery.gridster.js:914 + src/jquery.gridster.js:958

    @@ -4714,7 +4879,7 @@ params and if this is under the widget that is being dragged.

    - src/jquery.gridster.js:745 + src/jquery.gridster.js:789

    @@ -4856,7 +5021,7 @@ each widget) in descending way.

    - src/jquery.gridster.js:1357 + src/jquery.gridster.js:1410

    @@ -4975,7 +5140,7 @@ each widget) in descending way.

    - src/jquery.gridster.js:1268 + src/jquery.gridster.js:1321

    @@ -5087,7 +5252,7 @@ if they can.

    - src/jquery.gridster.js:1311 + src/jquery.gridster.js:1364

    @@ -5213,7 +5378,7 @@ if they can.

    - src/jquery.gridster.js:173 + src/jquery.gridster.js:159

    @@ -5335,7 +5500,7 @@ if they can.

    - src/jquery.gridster.js:444 + src/jquery.gridster.js:452

    @@ -5448,7 +5613,7 @@ if they can.

    - src/jquery.gridster.js:521 + src/jquery.gridster.js:545

    @@ -5576,7 +5741,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:561 + src/jquery.gridster.js:585

    @@ -5700,7 +5865,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:395 + src/jquery.gridster.js:400

    @@ -5807,7 +5972,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:1206 + src/jquery.gridster.js:1259

    @@ -5911,7 +6076,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:1218 + src/jquery.gridster.js:1271

    @@ -6017,7 +6182,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:470 + src/jquery.gridster.js:489

    @@ -6124,7 +6289,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:1230 + src/jquery.gridster.js:1283

    @@ -6228,7 +6393,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:1248 + src/jquery.gridster.js:1301

    @@ -6322,7 +6487,7 @@ overlapped or stops being overlapped.

    - src/jquery.gridster.js:1958 + src/jquery.gridster.js:2063

    @@ -6394,7 +6559,7 @@ the browser is resized.

    - src/jquery.gridster.js:277 + src/jquery.gridster.js:265

    @@ -6476,7 +6641,7 @@ mapped array of positions.

    - src/jquery.gridster.js:326 + src/jquery.gridster.js:329

    @@ -6581,7 +6746,7 @@ mapped array of positions.

    - src/jquery.gridster.js:217 + src/jquery.gridster.js:201

    @@ -6685,7 +6850,7 @@ mapped array of positions.

    - src/jquery.gridster.js:243 + src/jquery.gridster.js:231

    @@ -6783,7 +6948,7 @@ mapped array of positions.

    - src/jquery.gridster.js:265 + src/jquery.gridster.js:253

    @@ -6871,7 +7036,7 @@ mapped array of positions.

    - src/jquery.gridster.js:1520 + src/jquery.gridster.js:1573

    @@ -6980,7 +7145,7 @@ mapped array of positions.

    - src/jquery.gridster.js:1841 + src/jquery.gridster.js:1927

    @@ -7067,7 +7232,7 @@ mapped array of positions.

    - src/jquery.gridster.js:953 + src/jquery.gridster.js:997

    @@ -7194,7 +7359,7 @@ mapped array of positions.

    - src/jquery.gridster.js:597 + src/jquery.gridster.js:621

    @@ -7315,7 +7480,7 @@ mapped array of positions.

    - src/jquery.gridster.js:686 + src/jquery.gridster.js:710

    @@ -7420,7 +7585,7 @@ each widget) in ascending way.

    - src/jquery.gridster.js:706 + src/jquery.gridster.js:750

    @@ -7476,6 +7641,111 @@ coords of each widget) in ascending way.

    +
    + + +
    +

    sort_by_row_asc

    + + +
    + (
      + +
    • + + widgets + +
      • + +
    ) +
    + + + + + Array + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/jquery.gridster.js:730 + +

    + + + + + +
    + +
    +

    Sorts an Array of grid coords objects (representing the grid coords of +each widget) placing first the empty cells upper left.

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + widgets + Array + + + + +
      +

      Array of grid coords objects

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Array: + + Returns the array sorted. + +
    +
    + + +
    @@ -7525,7 +7795,7 @@ coords of each widget) in ascending way.

    - src/jquery.gridster.js:726 + src/jquery.gridster.js:770

    @@ -7636,7 +7906,7 @@ each widget) in descending way.

    - src/jquery.gridster.js:305 + src/jquery.gridster.js:308

    @@ -7759,7 +8029,7 @@ the grid coords object passed in the grid_data param.

    - src/jquery.gridster.js:1491 + src/jquery.gridster.js:1544

    @@ -7863,7 +8133,7 @@ the grid coords object passed in the grid_data param.

    - src/jquery.gridster.js:650 + src/jquery.gridster.js:674

    diff --git a/docs/data.json b/docs/data.json index 45ae5c0f7..63b56646c 100644 --- a/docs/data.json +++ b/docs/data.json @@ -19,6 +19,15 @@ "fors": {}, "namespaces": {} }, + "src/jquery.draggable.js": { + "name": "src/jquery.draggable.js", + "modules": {}, + "classes": { + "Draggable": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/jquery.gridster.js": { "name": "src/jquery.gridster.js", "modules": {}, @@ -104,7 +113,7 @@ ], "file": "src/jquery.coords.js", "line": 10, - "description": "Coords description", + "description": "Coords", "params": [ { "name": "obj", @@ -114,6 +123,19 @@ ], "is_constructor": 1 }, + "Draggable": { + "name": "Draggable", + "shortname": "Draggable", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "file": "src/jquery.draggable.js", + "line": 24, + "description": "Draggable", + "is_constructor": 1 + }, "Gridster": { "name": "Gridster", "shortname": "Gridster", @@ -123,7 +145,7 @@ "plugin_for": [], "extension_for": [], "file": "src/jquery.gridster.js", - "line": 70, + "line": 33, "uses": [ "Coords", "Collision" @@ -215,7 +237,31 @@ "classitems": [ { "file": "src/jquery.gridster.js", - "line": 140, + "line": 105, + "description": "Disable dragging.", + "itemtype": "method", + "name": "enable", + "return": { + "description": "Returns the instance of the Gridster Class.", + "type": "Class" + }, + "class": "Gridster" + }, + { + "file": "src/jquery.gridster.js", + "line": 117, + "description": "Enable dragging.", + "itemtype": "method", + "name": "enable", + "return": { + "description": "Returns the instance of the Gridster Class.", + "type": "Class" + }, + "class": "Gridster" + }, + { + "file": "src/jquery.gridster.js", + "line": 129, "description": "Add a new widget to the grid.", "itemtype": "method", "name": "add_widget", @@ -237,14 +283,14 @@ } ], "return": { - "description": "Returns the jQuery wrapped HTMLElement representing\n the widget that was just created.", + "description": "Returns the jQuery wrapped HTMLElement representing.\n the widget that was just created.", "type": "HTMLElement" }, "class": "Gridster" }, { "file": "src/jquery.gridster.js", - "line": 173, + "line": 159, "description": "Get the most left column below to add a new widget.", "itemtype": "method", "name": "next_position", @@ -268,7 +314,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 217, + "line": 201, "description": "Remove a widget from the grid.", "itemtype": "method", "name": "remove_widget", @@ -287,7 +333,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 243, + "line": 231, "description": "Returns a serialized array of the widgets in the grid.", "itemtype": "method", "name": "serialize", @@ -307,7 +353,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 265, + "line": 253, "description": "Returns a serialized array of the widgets that have changed their position.", "itemtype": "method", "name": "serialize_changed", @@ -319,7 +365,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 277, + "line": 265, "description": "Creates the grid coords object representing the widget a add it to the\nmapped array of positions.", "itemtype": "method", "name": "register_widget", @@ -331,7 +377,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 305, + "line": 308, "description": "Update in the mapped array of positions the value of cells represented by\nthe grid coords object passed in the `grid_data` param.", "params": [ { @@ -355,7 +401,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 326, + "line": 329, "description": "Remove a widget from the mapped array of positions.", "itemtype": "method", "name": "remove_from_gridmap", @@ -374,7 +420,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 339, + "line": 342, "description": "Add a widget to the mapped array of positions.", "itemtype": "method", "name": "add_to_gridmap", @@ -398,7 +444,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 361, + "line": 364, "description": "Make widgets draggable. It Wraps the jQuery UI Draggable Plugin.", "itemtype": "method", "name": "draggable", @@ -410,7 +456,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 395, + "line": 400, "description": "This function is executed when the player begins to be dragged.", "itemtype": "method", "name": "on_start_drag", @@ -430,7 +476,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 444, + "line": 452, "description": "This function is executed when the player is being dragged.", "itemtype": "method", "name": "on_drag", @@ -450,7 +496,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 470, + "line": 489, "description": "This function is executed when the player stops being dragged.", "itemtype": "method", "name": "on_stop_drag", @@ -470,7 +516,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 521, + "line": 545, "description": "Executes the callbacks passed as arguments when a column begins to be\noverlapped or stops being overlapped.", "params": [ { @@ -494,7 +540,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 561, + "line": 585, "description": "Executes the callbacks passed as arguments when a row starts to be\noverlapped or stops being overlapped.", "params": [ { @@ -518,7 +564,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 597, + "line": 621, "description": "Sets the current position of the player", "params": [ { @@ -542,7 +588,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 650, + "line": 674, "description": "See which of the widgets in the $widgets param collection can go to\na upper row and which not.", "itemtype": "method", "name": "widgets_contraints", @@ -561,7 +607,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 686, + "line": 710, "description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in ascending way.", "itemtype": "method", "name": "sort_by_row_asc", @@ -580,7 +626,26 @@ }, { "file": "src/jquery.gridster.js", - "line": 706, + "line": 730, + "description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) placing first the empty cells upper left.", + "itemtype": "method", + "name": "sort_by_row_asc", + "params": [ + { + "name": "widgets", + "description": "Array of grid coords objects", + "type": "Array" + } + ], + "return": { + "description": "Returns the array sorted.", + "type": "Array" + }, + "class": "Gridster" + }, + { + "file": "src/jquery.gridster.js", + "line": 750, "description": "Sorts an Array of grid coords objects by column (representing the grid\ncoords of each widget) in ascending way.", "itemtype": "method", "name": "sort_by_row_asc", @@ -599,7 +664,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 726, + "line": 770, "description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in descending way.", "itemtype": "method", "name": "sort_by_row_desc", @@ -618,7 +683,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 745, + "line": 789, "description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in descending way.", "itemtype": "method", "name": "manage_movements", @@ -647,7 +712,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 791, + "line": 835, "description": "Determines if there is a widget in the row and col given. Or if the\nHTMLElement passed as first argument is the player.", "itemtype": "method", "name": "is_player", @@ -672,7 +737,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 808, + "line": 852, "description": "Determines if the widget that is being dragged is currently over the row\nand col given.", "itemtype": "method", "name": "is_player_in", @@ -696,7 +761,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 823, + "line": 867, "description": "Determines if the placeholder is currently over the row and col given.", "itemtype": "method", "name": "is_placeholder_in", @@ -720,7 +785,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 837, + "line": 881, "description": "Determines if the placeholder is currently over the column given.", "itemtype": "method", "name": "is_placeholder_in_col", @@ -739,7 +804,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 850, + "line": 894, "description": "Determines if the cell represented by col and row params is empty.", "itemtype": "method", "name": "is_empty", @@ -763,7 +828,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 869, + "line": 913, "description": "Determines if the cell represented by col and row params is occupied.", "itemtype": "method", "name": "is_occupied", @@ -787,7 +852,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 889, + "line": 933, "description": "Determines if there is a widget in the cell represented by col/row params.", "itemtype": "method", "name": "is_widget", @@ -811,7 +876,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 914, + "line": 958, "description": "Determines if there is a widget in the cell represented by col/row\nparams and if this is under the widget that is being dragged.", "itemtype": "method", "name": "is_widget_under_player", @@ -835,7 +900,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 931, + "line": 975, "description": "Get widgets overlapping with the player.", "itemtype": "method", "name": "get_widgets_under_player", @@ -847,7 +912,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 953, + "line": 997, "description": "Put placeholder at the row and column specified.", "itemtype": "method", "name": "set_placeholder", @@ -871,7 +936,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 995, + "line": 1048, "description": "Determines whether the player can move to a position above.", "itemtype": "method", "name": "can_go_player_up", @@ -890,7 +955,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1044, + "line": 1097, "description": "Determines whether a widget can move to a position above.", "itemtype": "method", "name": "can_go_widget_up", @@ -909,7 +974,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1095, + "line": 1148, "description": "Search a valid row for the widget represented by `widget_grid_data' in\nthe `upper_rows` array. Iteration starts from row specified in `min_row`.", "itemtype": "method", "name": "get_valid_rows", @@ -938,7 +1003,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1173, + "line": 1226, "description": "Get widgets overlapping with the player.", "itemtype": "method", "name": "get_widgets_overlapped", @@ -950,7 +1015,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1206, + "line": 1259, "description": "This callback is executed when the player begins to collide with a column.", "itemtype": "method", "name": "on_start_overlapping_column", @@ -969,7 +1034,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1218, + "line": 1271, "description": "A callback executed when the player begins to collide with a row.", "itemtype": "method", "name": "on_start_overlapping_row", @@ -988,7 +1053,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1230, + "line": 1283, "description": "A callback executed when the the player ends to collide with a column.", "itemtype": "method", "name": "on_stop_overlapping_column", @@ -1007,7 +1072,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1248, + "line": 1301, "description": "This callback is executed when the player ends to collide with a row.", "itemtype": "method", "name": "on_stop_overlapping_row", @@ -1026,7 +1091,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1268, + "line": 1321, "description": "Move a widget to a specific row. The cell or cells must be empty.\nIf the widget has widgets below, all of these widgets will be moved also\nif they can.", "itemtype": "method", "name": "move_widget_to", @@ -1045,7 +1110,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1311, + "line": 1364, "description": "Move up the specified widget and all below it.", "itemtype": "method", "name": "move_widget_up", @@ -1070,7 +1135,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1357, + "line": 1410, "description": "Move down the specified widget and all below it.", "itemtype": "method", "name": "move_widget_down", @@ -1094,7 +1159,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1402, + "line": 1455, "description": "Check if the widget can move to the specified row, else returns the\nupper row possible.", "itemtype": "method", "name": "can_go_up_to_row", @@ -1123,7 +1188,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1491, + "line": 1544, "description": "Get widgets below a widget.", "itemtype": "method", "name": "widgets_below", @@ -1142,7 +1207,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1520, + "line": 1573, "description": "Update the array of mapped positions with the new player position.", "itemtype": "method", "name": "set_cells_player_occupies", @@ -1166,7 +1231,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1537, + "line": 1590, "description": "Remove from the array of mapped positions the reference to the player.", "itemtype": "method", "name": "empty_cells_player_occupies", @@ -1178,7 +1243,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1574, + "line": 1627, "description": "Check if it's possible to move a widget to a specific col/row. It takes\ninto account the dimensions (`size_y` and `size_x` attrs. of the grid coords\n object) the widget occupies.", "itemtype": "method", "name": "can_move_to", @@ -1207,7 +1272,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1608, + "line": 1667, "description": "Given the leftmost column returns all columns that are overlapping with the player.", "itemtype": "method", "name": "get_targeted_columns", @@ -1227,7 +1292,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1626, + "line": 1685, "description": "Given the upper row returns all rows that are overlapping with the player.", "itemtype": "method", "name": "get_targeted_rows", @@ -1247,7 +1312,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1643, + "line": 1702, "description": "Get all columns and rows that a widget occupies.", "itemtype": "method", "name": "get_cells_occupied", @@ -1266,7 +1331,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1671, + "line": 1730, "description": "Iterate over the cells occupied by a widget executing a function for\neach one.", "itemtype": "method", "name": "for_each_cell_occupied", @@ -1290,7 +1355,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1692, + "line": 1751, "description": "Iterate over the columns occupied by a widget executing a function for\neach one.", "itemtype": "method", "name": "for_each_column_occupied", @@ -1314,7 +1379,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1711, + "line": 1770, "description": "Iterate over the rows occupied by a widget executing a function for\neach one.", "itemtype": "method", "name": "for_each_row_occupied", @@ -1338,7 +1403,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1777, + "line": 1836, "description": "Iterate over each widget above the column and row specified.", "itemtype": "method", "name": "for_each_widget_above", @@ -1367,7 +1432,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1793, + "line": 1852, "description": "Iterate over each widget below the column and row specified.", "itemtype": "method", "name": "for_each_widget_below", @@ -1396,7 +1461,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1809, + "line": 1868, "description": "Returns the highest occupied cell in the grid.", "itemtype": "method", "name": "get_highest_occupied_cell", @@ -1408,7 +1473,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1841, + "line": 1927, "description": "Set the current height of the parent grid.", "itemtype": "method", "name": "set_dom_grid_height", @@ -1420,7 +1485,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1855, + "line": 1941, "description": "It generates the neccessary styles to position the widgets.", "itemtype": "method", "name": "generate_stylesheet", @@ -1444,7 +1509,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1899, + "line": 2004, "description": "Injects the given CSS as string to the head of the document.", "itemtype": "method", "name": "add_style_tag", @@ -1463,7 +1528,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1922, + "line": 2027, "description": "Generates a faux grid to collide with it when a widget is dragged and\ndetect row or column that we want to go.", "itemtype": "method", "name": "generate_faux_grid", @@ -1487,7 +1552,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1958, + "line": 2063, "description": "Recalculates the offsets for the faux grid. You need to use it when\nthe browser is resized.", "itemtype": "method", "name": "recalculate_faux_grid", @@ -1499,7 +1564,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1982, + "line": 2087, "description": "Get all widgets in the DOM and register them.", "itemtype": "method", "name": "get_widgets_from_DOM", @@ -1511,7 +1576,7 @@ }, { "file": "src/jquery.gridster.js", - "line": 1996, + "line": 2101, "description": "Calculate columns and rows to be set based on the configuration\n parameters, grid dimensions, etc ...", "itemtype": "method", "name": "generate_grid_and_stylesheet", diff --git a/docs/files/src_jquery.collision.js.html b/docs/files/src_jquery.collision.js.html index 18bf3441a..0d078d2bd 100644 --- a/docs/files/src_jquery.collision.js.html +++ b/docs/files/src_jquery.collision.js.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • @@ -211,18 +213,18 @@ } }; - fn.find_collisions = function(){ + fn.find_collisions = function(player_data_coords){ var self = this; 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 player_coords = self.$element.coords().update().get(); var $collider_coords_ins = ($collider.isCoords) ? - $collider.update() : $collider.coords(); + $collider : $collider.coords(); var collider_coords = $collider_coords_ins.get(); var overlaps = self.overlaps(player_coords, collider_coords); @@ -262,8 +264,8 @@ }; - fn.get_closest_colliders = function(){ - var colliders = this.find_collisions(); + fn.get_closest_colliders = function(player_data_coords){ + var colliders = this.find_collisions(player_data_coords); var min_area = 100; colliders.sort(function(a, b){ diff --git a/docs/files/src_jquery.coords.js.html b/docs/files/src_jquery.coords.js.html index 0b0b63e7b..ef5dd34b9 100644 --- a/docs/files/src_jquery.coords.js.html +++ b/docs/files/src_jquery.coords.js.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • @@ -101,7 +103,7 @@ ;(function($, window, document, undefined){ /** - * Coords description + * Coords * * @class Coords * @param {HTMLElement|Object} obj HTMLElement or a literal Object with the left, top, width and height properties. @@ -127,12 +129,20 @@ this.original_coords = this.get(); }; - fn.set = function() { + + fn.set = function(update, not_update_offsets) { var el = this.el; - if (el) { - this.data = el.offset(); - this.data.width || (this.data.width = el.width()); - this.data.height || (this.data.height = el.height()); + + if (el && !update) { + this.data = {} || el.offset(); + this.data.width = el.width(); + this.data.height = el.height(); + }; + + if (el && update && !not_update_offsets) { + var offset = el.offset(); + this.data.top = offset.top; + this.data.left = offset.left; } var d = this.data; @@ -150,19 +160,23 @@ return this; }; + fn.update = function(data){ if (!data && !this.el) { return this; } if (data) { - var new_data = $.extend(this.data, data); + var new_data = $.extend({}, this.data, data); this.data = new_data; + return this.set(true, true); } - this.set(); + + this.set(true); return this; }; + fn.get = function(){ return this.coords; }; diff --git a/docs/files/src_jquery.draggable.js.html b/docs/files/src_jquery.draggable.js.html new file mode 100644 index 000000000..01b39af04 --- /dev/null +++ b/docs/files/src_jquery.draggable.js.html @@ -0,0 +1,338 @@ + + + + + src/jquery.draggable.js + + + + + + + + +
    +
    +
    + + +

    + +
    +
    + API Docs for: +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/jquery.draggable.js

    + +
    + 
    +/*
+ * jquery.draggable
+ * https://github.com/ducksboard/gridster.js
+ *
+ * Copyright (c) 2012 ducksboard
+ * Licensed under the MIT, GPL licenses.
+ */
+
+;(function($, window, document, undefined){
+
+    var defaults = {
+        items: '.gs_w',
+        distance: 1,
+        limit: true,
+        offset_left: 0,
+        drag: function(e){},
+        start : function(e, ui){},
+        stop : function(e){}
+    };
+
+    var $body = $(document.body);
+
+
+    /**
+    * Draggable
+    *
+    * @class Draggable
+    * @constructor
+    */
+    function Draggable(element, options) {
+      this.options = $.extend(defaults, options);
+      this.$container = $(element);
+      this.$dragitems = $(this.options.items, this.$container);
+      this.is_dragging = false;
+      this.player_min_left = 0 + this.options.offset_left;
+
+      this.init();
+    };
+
+    var fn = Draggable.prototype;
+
+    fn.init = function() {
+        this.$container.css('position', 'relative');
+        this.enable();
+    };
+
+    fn.get_actual_pos = function($el) {
+        var pos = $el.position();
+        return pos;
+    };
+
+
+    fn.get_mouse_pos = function(e) {
+        return {
+            left: e.clientX,
+            top: e.clientY
+        };
+    };
+
+
+    fn.drag_handler = function(e) {
+        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);
+
+        $body.on('mousemove.draggable', 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) {
+                throttle(self.on_dragmove.call(self, mme), 130);
+            };
+
+            return false;
+
+        });
+
+        return false;
+    };
+
+
+    fn.on_dragstart = function(e) {
+        e.preventDefault();
+        this.drag_start = true;
+        this.is_dragging = true;
+        this.$container_offset = this.$container.offset();
+        if (this.options.helper === 'clone') {
+            this.$helper = this.$player.clone().appendTo(this.$container).addClass('helper');
+            this.helper = true;
+        }else{
+            this.helper = false;
+        }
+        this.el_init_offset = this.$player.offset();
+        this.player_width = this.$player.width();
+        this.player_max_left = this.$container.width() - this.player_width + this.options.offset_left;
+        if (this.options.start) {
+            this.options.start.call(this.$player, e, {
+                helper: this.helper ? this.$helper : this.$player
+            });
+        };
+        return false;
+    };
+
+
+    fn.get_offset = function(e) {
+        e.preventDefault();
+        var mouse_actual_pos = this.get_mouse_pos(e);
+        var diff_x = mouse_actual_pos.left - this.mouse_init_pos.left;
+        var diff_y = mouse_actual_pos.top - this.mouse_init_pos.top;
+
+        var left = this.el_init_offset.left + diff_x - this.$container_offset.left;
+        var top = this.el_init_offset.top + diff_y - this.$container_offset.top;
+
+        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 {
+            left: left,
+            top: top
+        }
+    };
+
+
+    fn.on_dragmove = function(e) {
+        var offset = this.get_offset(e);
+
+        (this.helper ? this.$helper : this.$player).css({
+            'position': 'absolute',
+            'left' : offset.left,
+            'top' : offset.top
+        });
+
+        var ui = {
+            'position': {
+                'left': offset.left,
+                'top': offset.top
+            }
+        };
+
+        if (this.options.drag) {
+            this.options.drag.call(this.$player, e, ui);
+        }
+        return false;
+    };
+
+
+    fn.on_dragstop = function(e) {
+        var offset = this.get_offset(e);
+
+        this.drag_start = false;
+
+        var ui = {
+            'position': {
+                'left': offset.left,
+                'top': offset.top
+            }
+        }
+
+        if (this.options.stop) {
+            this.options.stop.call(this.$player, e, ui);
+        }
+
+        if (this.helper) {
+            this.$helper.remove();
+        }
+
+        return false;
+    };
+
+
+    fn.enable = function(){
+        this.$container.on('mousedown.draggable', this.options.items, $.proxy(this.drag_handler, this));
+        $body.on('mouseup.draggable', $.proxy(function(e) {
+            this.is_dragging = false;
+            $body.off('mousemove.draggable');
+            if (this.drag_start) {
+                this.on_dragstop(e);
+            }
+        }, this));
+    };
+
+
+    fn.disable = function(){
+        this.$container.off('mousedown.draggable');
+        $body.off('mouseup.draggable');
+    };
+
+
+    fn.destroy = function(){
+        this.disable();
+        $.removeData(this.$container, 'draggable');
+    };
+
+
+    //jQuery adapter
+    $.fn.draggable = function ( options ) {
+        return this.each(function () {
+            if (!$.data(this, 'draggable')) {
+                $.data(this, 'draggable', new Draggable( this, options ));
+            }
+        });
+    };
+
+
+}(jQuery, window, document));
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_jquery.gridster.js.html b/docs/files/src_jquery.gridster.js.html index 4b865c9dc..4df4a9e48 100644 --- a/docs/files/src_jquery.gridster.js.html +++ b/docs/files/src_jquery.gridster.js.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • @@ -109,6 +111,7 @@ min_cols: 1, min_rows: 10, autogenerate_stylesheet: true, + avoid_overlapped_widgets: true, serialize_params: function($w, wgd) { return { col: wgd.col, @@ -116,47 +119,9 @@ }; }, collision: {}, - draggable: {} - }; - - - /* Debounce and throttle functions taken from underscore.js */ - var 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); - }; - }; - - - var throttle = function(func, wait) { - var context, args, timeout, throttling, more, result; - var whenDone = debounce( - function(){ more = throttling = false; }, wait, true); - 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; - }; + draggable: { + distance: 4 + } }; @@ -216,6 +181,8 @@ this.init(); } + Gridster.generated_stylesheets = []; + var fn = Gridster.prototype; fn.init = function() { @@ -230,6 +197,30 @@ }; + /** + * Disable dragging. + * + * @method enable + * @return {Class} Returns the instance of the Gridster Class. + */ + fn.disable = function(){ + this.drag_api.disable(); + return this; + } + + + /** + * Enable dragging. + * + * @method enable + * @return {Class} Returns the instance of the Gridster Class. + */ + fn.enable = function(){ + this.drag_api.enable(); + return this; + } + + /** * Add a new widget to the grid. * @@ -237,7 +228,7 @@ * @param {String} html The string representing the HTML of the widget. * @param {Number} size_x The nº of rows the widget occupies horizontally. * @param {Number} size_y The nº of columns the widget occupies vertically. - * @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing + * @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing. * the widget that was just created. */ fn.add_widget = function(html, size_x, size_y) { @@ -254,12 +245,9 @@ this.register_widget($w); - this.$widgets.draggable('destroy'); - this.draggable(); - this.set_dom_grid_height(); - $w.fadeIn(); + return $w.fadeIn(); }; @@ -299,9 +287,7 @@ } if (valid_pos.length) { - var next_position = this.sort_by_row_desc(valid_pos); - next_position = this.sort_by_col_asc(next_position)[0]; - return next_position; + return this.sort_by_row_and_col_asc(valid_pos)[0]; } return false; }; @@ -314,7 +300,7 @@ * @param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove. * @return {Class} Returns the instance of the Gridster Class. */ - fn.remove_widget = function(el) { + fn.remove_widget = function(el, callback) { var $el = el instanceof jQuery ? el : $(el); var wgd = $el.coords().grid; @@ -329,6 +315,10 @@ $nexts.each($.proxy(function(i, widget){ this.move_widget_up( $(widget), wgd.size_y ); }, this)); + + if (callback) { + callback.apply(this, el); + }; }, this)); }; @@ -375,7 +365,8 @@ * @return {Array} Returns the instance of the Gridster class. */ fn.register_widget = function($el) { - var widget_grid_data = { + + var wgd = { 'col': parseInt($el.attr('data-col'), 10), 'row': parseInt($el.attr('data-row'), 10), 'size_x': parseInt($el.attr('data-sizex'), 10), @@ -383,13 +374,27 @@ 'el': $el }; + if (this.options.avoid_overlapped_widgets && + !this.can_move_to( + { size_x: wgd.size_x, size_y: wgd.size_y }, wgd.col, wgd.row) + ) { + wgd = this.next_position(wgd.size_x, wgd.size_y); + wgd.el = $el; + $el.attr({ + 'data-col': wgd.col, + 'data-row': wgd.row, + 'data-sizex': wgd.size_x, + 'data-sizey': wgd.size_y + }); + }; + // attach Coord object to player data-coord attribute $el.data('coords', $el.coords()); // Extend Coord object with grid position info - $el.data('coords').grid = widget_grid_data; + $el.data('coords').grid = wgd; - this.add_to_gridmap(widget_grid_data, $el); + this.add_to_gridmap(wgd, $el); this.widgets.push($el); return this; }; @@ -460,28 +465,30 @@ fn.draggable = function() { var self = this; var draggable_options = $.extend(true, {}, this.options.draggable, { - // containment : this.$wrapper, + offset_left: this.options.widget_margins[0], + items: '.gs_w', start: function(event, ui) { + self.$widgets.filter('.player-revert').removeClass('player-revert'); self.$player = $(this); self.$helper = self.options.draggable.helper === 'clone' ? $(ui.helper) : self.$player; + self.helper = !self.$helper.is(self.$player); self.on_start_drag.call(self, event, ui); self.$el.trigger('gridster:dragstart'); }, stop: function(event, ui) { - self.on_stop_drag.call(self, ui); + self.on_stop_drag.call(self, event, ui); self.$el.trigger('gridster:dragstop'); }, - drag: throttle(function(event, ui) { + drag: function(event, ui) { self.on_drag.call(self, event, ui); self.$el.trigger('gridster:drag'); - }, 100, true) + } }); - this.$widgets.draggable(draggable_options); - - return this; + this.drag_api = this.$el.draggable(draggable_options).data('draggable'); + return this; }; @@ -494,8 +501,10 @@ * See http://jqueryui.com/demos/draggable/ for more info. */ fn.on_start_drag = function(event, ui) { + + this.$helper.add(this.$player).add(this.$wrapper).addClass('dragging'); + this.$player.addClass('player'); - this.$wrapper.addClass('dragging'); this.player_grid_data = this.$player.coords().grid; this.placeholder_grid_data = $.extend({}, this.player_grid_data); @@ -514,8 +523,9 @@ this.last_cols = []; this.last_rows = []; + // see jquery.collision.js - this.drag_api = this.$helper.collision( + this.collision_api = this.$helper.collision( colliders, this.options.collision); this.$preview_holder = $('<li />', { @@ -543,7 +553,11 @@ * See http://jqueryui.com/demos/draggable/ for more info. */ fn.on_drag = function(event, ui) { - this.colliders_data = this.drag_api.get_closest_colliders(); + var abs_offset = { + left: ui.position.left + this.baseX, + top: ui.position.top + this.baseY + } + this.colliders_data = this.collision_api.get_closest_colliders(abs_offset); this.on_overlapped_column_change( this.on_start_overlapping_column, @@ -555,6 +569,13 @@ this.on_stop_overlapping_row ); + if (this.helper && this.$player) { + this.$player.css({ + 'left': ui.position.left, + 'top': ui.position.top + }); + } + if (this.options.draggable.drag) { this.options.draggable.drag.call(this, event, ui); } @@ -569,7 +590,11 @@ * See http://jqueryui.com/demos/draggable/ for more info. */ fn.on_stop_drag = function(event, ui) { - this.colliders_data = this.drag_api.get_closest_colliders(); + this.$helper.add(this.$player).add(this.$wrapper).removeClass('dragging'); + + ui.position.left = ui.position.left + this.baseX; + ui.position.top = ui.position.top + this.baseY; + this.colliders_data = this.collision_api.get_closest_colliders(ui.position); this.on_overlapped_column_change( this.on_start_overlapping_column, @@ -581,13 +606,14 @@ this.on_stop_overlapping_row ); - this.$player.add(this.$helper).attr({ + this.$player + .addClass('player-revert').removeClass('player').attr({ 'data-col': this.placeholder_grid_data.col, 'data-row': this.placeholder_grid_data.row }).css({ 'left': '', 'top': '' - }).removeClass('player'); + }); this.$changed = this.$changed.add(this.$player); @@ -796,6 +822,26 @@ }; + /** + * Sorts an Array of grid coords objects (representing the grid coords of + * each widget) placing first the empty cells upper left. + * + * @method sort_by_row_asc + * @param {Array} widgets Array of grid coords objects + * @return {Array} Returns the array sorted. + */ + fn.sort_by_row_and_col_asc = function(widgets) { + widgets = widgets.sort(function(a, b){ + if (a.row > b.row || a.row == b.row && a.col > b.col) { + return 1; + } + return -1; + }); + + return widgets; + }; + + /** * Sorts an Array of grid coords objects by column (representing the grid * coords of each widget) in ascending way. @@ -1061,12 +1107,21 @@ size_y: phgd.size_y, size_x: phgd.size_x }); + + //Prevents widgets go out of the grid + var right_col = (col + phgd.size_x - 1); + if (right_col > this.cols) { + col = col - (right_col - col); + }; + var moved_down = this.placeholder_grid_data.row < row; var changed_column = this.placeholder_grid_data.col !== col; this.placeholder_grid_data.col = col; this.placeholder_grid_data.row = row; + + this.cells_occupied_by_placeholder = this.get_cells_occupied( this.placeholder_grid_data); @@ -1687,6 +1742,12 @@ }; var result = true; + //Prevents widgets go out of the grid + var right_col = col + widget_grid_data.size_x - 1; + if (right_col > this.cols) { + return false; + }; + this.for_each_cell_occupied(future_wd, function(tcol, trow){ var $tw = this.is_widget(tcol, trow); if ($tw && (!widget_grid_data.el || $tw.is($w))) { @@ -1931,6 +1992,33 @@ }; + + fn.get_widgets_from = function(col, row) { + var ga = this.gridmap; + var $widgets = $(); + + if (col) { + $widgets = $widgets.add( + this.$widgets.filter(function(){ + var tcol = $(this).attr('data-col'); + return (tcol == col || tcol > col); + }) + ); + }; + + if (row) { + $widgets = $widgets.add( + this.$widgets.filter(function(){ + var trow = $(this).attr('data-row'); + return (trow == row || trow > row); + }) + ); + }; + + return $widgets; + } + + /** * Set the current height of the parent grid. * @@ -1953,7 +2041,7 @@ * @param {Number} cols Number of rows. * @return {Object} Returns the instance of the Gridster class. */ - fn.generate_stylesheet = function(rows, cols) { + fn.generate_stylesheet = function(opts) { var styles = ''; var extra_cells = 10; var max_size_y = 6; @@ -1961,28 +2049,47 @@ var i; var rules; + opts || (opts = {}); + opts.cols || (opts.cols = this.cols); + opts.rows || (opts.rows = this.rows); + opts.namespace || (opts.namespace = ''); + opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions); + opts.widget_margins || (opts.widget_margins = this.options.widget_margins); + + opts.min_widget_width = (opts.widget_margins[0] * 2) + opts.widget_base_dimensions[0]; + opts.min_widget_height = (opts.widget_margins[1] * 2) + opts.widget_base_dimensions[1]; + + var serialized_opts = $.param(opts); + // don't duplicate stylesheets for the same configuration + if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) { + return false; + }; + + Gridster.generated_stylesheets.push(serialized_opts); + /* generate CSS styles for cols */ - for (i = cols + extra_cells; i >= 0; i--) { - styles += '[data-col="'+ (i + 1) +'"] { left: ' + - (i * this.min_widget_width) + + for (i = opts.cols + extra_cells; i >= 0; i--) { + styles += opts.namespace + ' [data-col="'+ (i + 1) +'"] { left: ' + + ((i * opts.widget_base_dimensions[0]) + (i *opts.widget_margins[0] ) + ((i+1) * opts.widget_margins[0])) + 'px;} '; } /* generate CSS styles for rows */ - for (i = rows + extra_cells; i >= 0; i--) { - styles += '[data-row="' + (i + 1) + '"] { top: ' + - (i * this.min_widget_height) + 'px;} '; + for (i = opts.rows + extra_cells; i >= 0; i--) { + styles += opts.namespace + ' [data-row="' + (i + 1) + '"] { top: ' + + ((i * opts.widget_base_dimensions[1]) + (i * opts.widget_margins[1]) + ((i+1) * opts.widget_margins[1]) ) + + 'px;} '; } for (var y = 1; y < max_size_y; y++) { - styles += '[data-sizey="' + (y) + '"] { height: ' + - (y * this.options.widget_base_dimensions[1] + (y-1)*(this.options.widget_margins[1]*2)) + 'px;}'; + styles += opts.namespace + ' [data-sizey="' + (y) + '"] { height: ' + + (y * opts.widget_base_dimensions[1] + (y-1)*(opts.widget_margins[1]*2)) + 'px;}'; } for (var x = 1; x < max_size_x; x++) { - styles += '[data-sizex="' + (x) + '"] { width: ' + - (x * this.options.widget_base_dimensions[0] + (x-1)*(this.options.widget_margins[0]*2)) + 'px;}'; + styles += opts.namespace + ' [data-sizex="' + (x) + '"] { width: ' + + (x * opts.widget_base_dimensions[0] + (x-1)*(opts.widget_margins[0]*2)) + 'px;}'; } return this.add_style_tag(styles); @@ -2113,24 +2220,19 @@ var min_cols = Math.max.apply(null, actual_cols); var min_rows = Math.max.apply(null, actual_rows); - cols = Math.max(min_cols, cols, this.options.min_cols); - rows = Math.max(min_rows, rows, this.options.min_rows); + this.cols = Math.max(min_cols, cols, this.options.min_cols); + this.rows = Math.max(min_rows, rows, this.options.min_rows); - //this.support_grid_width = cols * this.min_widget_width; - // this.support_grid_width = this.wrapper_width; - - // this.support_grid_height = rows * this.min_widget_height; this.baseX = ($(window).width() - aw) / 2; this.baseY = this.$wrapper.offset().top; - //this.baseX = 0; if (this.options.autogenerate_stylesheet) { - this.generate_stylesheet(rows, cols); + this.generate_stylesheet(); } /* more faux rows that needed are created so that there are cells * where drag beyond the limits */ - return this.generate_faux_grid(rows, cols); + return this.generate_faux_grid(this.rows, this.cols); }; diff --git a/docs/index.html b/docs/index.html index 3da554286..b51bc488f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -46,6 +46,8 @@
  • Coords
    • +
  • Draggable
    • +
  • Gridster
    • diff --git a/grunt.js b/grunt.js index f0b2f9d34..aa31d6a54 100644 --- a/grunt.js +++ b/grunt.js @@ -13,7 +13,7 @@ module.exports = function(grunt) { }, concat: { dist_js: { - src: ['', '', '', '.js>'], + src: ['', '', '', 'src/utils.js', '', '.js>'], dest: 'dist/<%= pkg.name %>.js' }, dist_css: { diff --git a/index.html b/index.html index 2486a21e5..296a890a0 100755 --- a/index.html +++ b/index.html @@ -56,7 +56,7 @@


    @@ -196,11 +201,20 @@

    autogenerate_stylesheet: true

    If true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the <head> of the document. You can set this to false, and write your own CSS targeting rows and cols via data-attributes like so: [data-col="1"] { left: 10px; }

    +

    avoid_overlapped_widgets: true

    +

    Avoid that widgets loaded from the DOM can be overlapped. It is helpful if the positions were bad stored in the database or if there was any conflict.

    +

    serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row } }

    Return the data you want for each widget in the serialize method. Two arguments are passed: `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid coords object (`col`, `row`, `size_x`, `size_y`).

    -

    draggable: {}

    -

    The configuration object of the jQuery UI Draggable Plugin. See http://jqueryui.com/demos/draggable/ for more information.

    +

    draggable.start: function(event, ui){}

    +

    Executes a function when dragging starts.

    + +

    draggable.drag: function(event, ui){}

    +

    Executes a function when the mouse is moved during the dragging.

    + +

    draggable.stop: function(event, ui){}

    +

    Executes a function when dragging stops.

    collision.on_overlap_start: function(collider_data) { }

    Executes a function first time a widget overlaps with a "faux" grid cell.

    @@ -292,7 +306,7 @@
    -

    Reminds that gridster.js depends on jQuery and jQuery UI draggable. Download the latest release at jQuery and jQuery UI. +

    Reminds that gridster.js depends on jQuery. Download the latest release at jQuery.

    gridster.js

    @@ -354,7 +368,6 @@ - @@ -367,10 +380,7 @@ widget_margins: [10, 10], widget_base_dimensions: [140, 140], min_cols: 6, - min_rows: 10, - draggable: { - helper: "clone" - } + min_rows: 10 }).data('gridster'); });