Merge branch 'master' of https://github.com/DecksterTeam/gridster.js

Author: David Morse

CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="v0.6.5"></a>
+### v0.6.5 (2015-04-06)
+
+
+#### Bug Fixes
+
+* **gridster:** fixed bugs in centering_widgets (widgets were getting smushed when being resized ([86053f8b](http://github.com/DecksterTeam/gridster.js/commit/86053f8be3d73a9db3d7eabc595324123dbcff13))
+
 <a name="v0.6.4"></a>
 ### v0.6.4 (2015-03-19)
 

Gruntfile.js

@@ -133,11 +133,11 @@ module.exports = function(grunt) {
 
     bump: {
       options: {
-        files: ['package.json'],
+        files: ['package.json', 'bower.json'],
         updateConfigs: ['pkg'],
         commit: true,
         commitMessage: 'Release v%VERSION%',
-        commitFiles: ['package.json', 'CHANGELOG.md', 'dist/'], // '-a' for all files
+        commitFiles: ['package.json', 'bower.json', 'CHANGELOG.md', 'dist/'], // '-a' for all files
         createTag: true,
         tagName: 'v%VERSION%',
         tagMessage: 'Version %VERSION%',

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "gridster",
   "homepage": "https://github.com/DecksterTeam/gridster.js",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "dependencies": {
     "jquery": "~1.11.2"
   },

dist/jquery.gridster.css

@@ -1,7 +1,7 @@
-/*! gridster.js - v0.6.4 - 2015-04-04
-* http://gridster.net/
-* Copyright (c) 2015 decksterteam; Licensed  */
-
+/*! gridster.js - v0.6.5 - 2015-04-06
+* http://gridster.net/
+* Copyright (c) 2015 decksterteam; Licensed  */
+
 .gridster {
     position:relative;
 }

dist/jquery.gridster.js

@@ -1,7 +1,7 @@
-/*! gridster.js - v0.6.4 - 2015-04-04
-* http://gridster.net/
-* Copyright (c) 2015 decksterteam; Licensed  */
-
+/*! gridster.js - v0.6.5 - 2015-04-06
+* http://gridster.net/
+* Copyright (c) 2015 decksterteam; Licensed  */
+
 ;(function(root, factory) {
 
     if (typeof define === 'function' && define.amd) {
@@ -119,7 +119,7 @@
     return Coords;
 
 }));
-
+
 ;(function(root, factory) {
 
     if (typeof define === 'function' && define.amd) {
@@ -354,7 +354,7 @@
     return Collision;
 
 }));
-
+
 ;(function(window, undefined) {
 
     /* Delay, debounce and throttle functions taken from underscore.js
@@ -427,7 +427,7 @@
     };
 
 })(window);
-
+
 ;(function(root, factory) {
 
     if (typeof define === 'function' && define.amd) {
@@ -845,14 +845,14 @@
     };
 
     //jQuery adapter
-    $.fn.drag = function ( options ) {
+    $.fn.gridDraggable = function ( options ) {
         return new Draggable(this, options);
     };
 
     return Draggable;
 
 }));
-
+
 ;(function(root, factory) {
 
     if (typeof define === 'function' && define.amd) {
@@ -1106,6 +1106,12 @@
         this.draggable();
         this.options.resize.enabled && this.resizable();
 
+        if (this.options.center_widgets) {
+            setTimeout($.proxy(function () {
+              this.center_widgets();
+            }, this), 0);
+        }
+
         $(window).bind('resize.gridster', throttle(
             $.proxy(this.recalculate_faux_grid, this), 200));
     };
@@ -1222,6 +1228,12 @@
 
         this.drag_api.set_limits((this.cols * this.min_widget_width) + ((this.cols + 1) * this.options.widget_margins[0]));
 
+        if (this.options.center_widgets) {
+            setTimeout($.proxy(function () {
+              this.center_widgets();
+            }, this), 0);
+        }
+
         return $w.fadeIn({complete: function () { if(callback) callback.call(this); }});
     };
 
@@ -1297,23 +1309,32 @@
     * @param {Number} size_x The number of columns that will occupy the widget.
     *  By default <code>size_x</code> is limited to the space available from
     *  the column where the widget begins, until the last column to the right.
+    * @param {Boolean} [reposition] Set to false to not move the widget to
+    *  the left if there is insufficient space on the right.
     * @param {Number} size_y The number of rows that will occupy the widget.
     * @param {Function} [callback] Function executed when the widget is removed.
     * @return {HTMLElement} Returns $widget.
     */
-    fn.resize_widget = function($widget, size_x, size_y, callback) {
+    fn.resize_widget = function($widget, size_x, size_y, reposition, callback) {
         var wgd = $widget.coords().grid;
         var col = wgd.col;
         var max_cols = this.options.max_cols;
+        reposition !== false && (reposition = true);
         var old_size_y = wgd.size_y;
         var old_col = wgd.col;
         var new_col = old_col;
 
         size_x || (size_x = wgd.size_x);
         size_y || (size_y = wgd.size_y);
 
-        if (max_cols !== Infinity) {
-            size_x = Math.min(size_x, max_cols - col + 1);
+        //if (max_cols !== Infinity) {
+        //    size_x = Math.min(size_x, max_cols - col + 1);
+        //}
+
+        if (reposition && old_col + size_x - 1 > this.cols) {
+          var diff = old_col + (size_x - 1) - this.cols;
+          var c = old_col - diff;
+          new_col = Math.max(1, c);
         }
 
         if (size_y > old_size_y) {
@@ -1352,10 +1373,11 @@
      *  representing the widget.
      * @param {Number} size_x The number of cols that will occupy the widget.
      * @param {Number} size_y The number of rows that will occupy the widget.
+     * @param {Number} col The column to resize the widget from.
      * @param {Function} [callback] Function executed when the widget is expanded.
      * @return {HTMLElement} Returns $widget.
      */
-    fn.expand_widget = function($widget, size_x, size_y, callback) {
+    fn.expand_widget = function($widget, size_x, size_y, col, callback) {
       var wgd = $widget.coords().grid;
       var max_size_x = Math.floor(($(window).width() - this.options.widget_margins[0] * 2) / this.min_widget_width);
       size_x =  size_x || Math.min(max_size_x, this.cols);
@@ -1365,7 +1387,7 @@
       $widget.attr('pre_expand_col', wgd.col);
       $widget.attr('pre_expand_sizex', wgd.size_x);
       $widget.attr('pre_expand_sizey', wgd.size_y);
-      var new_col = 1;
+      var new_col = col || 1;
 
       if (size_y > old_size_y) {
         this.add_faux_rows(Math.max(size_y - old_size_y, 0));
@@ -1470,15 +1492,16 @@
      * @method center_widgets
      */
     fn.center_widgets = debounce(function () {
-      var window_width = $(window).width();
+      var wrapper_width = this.$wrapper.width();
       var col_size = this.options.widget_base_dimensions[0] + (2 * this.options.widget_margins[0]);
-      var col_count = Math.floor(Math.max(Math.floor(window_width / col_size), this.min_col_count) / 2) * 2;
+      var col_count = Math.floor(Math.max(Math.floor(wrapper_width / col_size), this.min_col_count) / 2) * 2;
 
       this.options.min_cols = col_count;
       this.options.max_cols = col_count;
       this.options.extra_cols = 0;
       this.options.max_size_x = col_count;
       this.set_dom_grid_width(col_count);
+      this.cols = col_count;
 
       var col_dif = (col_count - this.prev_col_count) / 2;
 
@@ -1515,28 +1538,30 @@
 
 
     fn.get_min_col = function () {
-      var min_col = this.min_col_count;
-      this.$widgets.each($.proxy(function(i, widget) {
-        var $widget = $(widget);
-        var value = parseInt($widget.attr("data-col"));
-        min_col = Math.min(min_col, value);
-      }, this));
-      return min_col;
+      return Math.min.apply(Math, this.$widgets.map($.proxy(function (key, widget) {
+        return this.get_cells_occupied($(widget).coords().grid).cols;
+      }, this)).get());
     };
 
 
     fn.shift_cols = function (col_dif) {
-      this.$widgets.each($.proxy(function(i, widget) {
-        var $widget = $(widget);
+      var widgets_coords = this.$widgets.map($.proxy(function(i, widget) {
+        var $w = $(widget);
+        return this.dom_to_coords($w);
+      }, this));
+      widgets_coords = Gridster.sort_by_row_and_col_asc(widgets_coords);
+
+      widgets_coords.each($.proxy(function(i, widget) {
+        var $widget = $(widget.el);
         var wgd = $widget.coords().grid;
-        var value = parseInt($widget.attr("data-col"));
+        var col = parseInt($widget.attr("data-col"));
+
         var new_grid_data = {
-          col: Math.round(value + col_dif),
+          col: col + col_dif,
           row: wgd.row,
           size_x: wgd.size_x,
           size_y: wgd.size_y
         };
-
         setTimeout($.proxy(function () {
           this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
         }, this), 0);
@@ -1925,12 +1950,6 @@
 
         this.options.resize.enabled && this.add_resize_handle($el);
 
-        if (this.options.center_widgets) {
-          setTimeout($.proxy(function () {
-            this.center_widgets();
-          }, this), 0);
-        }
-
         return posChanged;
     };
 
@@ -2066,7 +2085,7 @@
             }, 60)
           });
 
-        this.drag_api = this.$el.drag(draggable_options);
+        this.drag_api = this.$el.gridDraggable(draggable_options);
         return this;
     };
 
@@ -2078,7 +2097,7 @@
     * @return {Class} Returns instance of gridster Class.
     */
     fn.resizable = function() {
-        this.resize_api = this.$el.drag({
+        this.resize_api = this.$el.gridDraggable({
             items: '.' + this.options.resize.handle_class,
             offset_left: this.options.widget_margins[0],
             container_width: this.container_width,
@@ -2480,7 +2499,7 @@
         if (size_x !== this.resize_last_sizex ||
             size_y !== this.resize_last_sizey) {
 
-            this.resize_widget(this.$resized_widget, size_x, size_y);
+            this.resize_widget(this.$resized_widget, size_x, size_y, false);
             this.set_dom_grid_width(this.cols);
 
             this.$resize_preview_holder.css({
@@ -3866,16 +3885,17 @@
             cols = this.get_highest_occupied_cell().col;
         }
 
-        var max_cols = (this.options.autogrow_cols ? this.options.max_cols : this.cols);
+        var max_cols = (this.options.autogrow_cols ? this.options.max_cols :
+            this.cols);
 
         cols = Math.min(max_cols, Math.max(cols, this.options.min_cols));
         this.container_width = ((cols + 1) * this.options.widget_margins[0]) + (cols * this.min_widget_width);
-        if(this.is_responsive()) {
-         this.$el.css({'min-width': '100%', 'max-width': '100%'});
-         return this; //if we are responsive exit before setting the width of $el
-        }
         this.$el.css('width', this.container_width);
 
+        if(this.is_responsive()) {
+          this.$el.css({'min-width': '100%', 'max-width': '100%'});
+          return this;
+        }
         return this;
     };
 
@@ -3973,16 +3993,13 @@
         opts.widget_base_dimensions ||
             (opts.widget_base_dimensions = this.options.widget_base_dimensions);
 
+        opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
 
         if(this.is_responsive()) {
-          opts.widget_base_dimensions = [this.get_responsive_col_width(), opts.widget_base_dimensions[1]];
+            opts.widget_base_dimensions = [this.get_responsive_col_width(), opts.widget_base_dimensions[1]];
+            this.toggle_collapsed_grid(full_width, opts);
         }
 
-        opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
-
-
-        this.toggle_collapsed_grid(full_width, opts);
-
         // don't duplicate stylesheets for the same configuration
         var serialized_opts = $.param(opts);
         if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) {
@@ -4267,11 +4284,11 @@
      *
      * @param wrapper
      */
-    fn.set_num_columns = function (wrapper) {
+    fn.set_num_columns = function (wrapper_width) {
 
       var max_cols = this.options.max_cols;
 
-      var cols = Math.floor(wrapper / (this.min_widget_width + this.options.widget_margins[0])) +
+      var cols = Math.floor(wrapper_width / (this.min_widget_width + this.options.widget_margins[0])) +
       this.options.extra_cols;
 
       var actual_cols = this.$widgets.map(function() {