Merge commit 'fcd23271948583082959ade315653d3476112bd2'

README.md

@@ -476,9 +476,11 @@ Changes
 
 #### v0.2.6-dev (Development version)
 
-- update requirements to the latest versions of jQuery and jquery-ui.
+- update requirements to the latest versions of jQuery (v3.1.0+) and jquery-ui (v1.12.0+).
 - fix jQuery `size()` ([#486](https://github.com/troolee/gridstack.js/issues/486)).
 - update _notify to allow detach ([#411](https://github.com/troolee/gridstack.js/issues/411)).
+- fix code that checks for jquery-ui ([#481](https://github.com/troolee/gridstack.js/issues/481)).
+- fix `cellWidth` calculation on empty grid
 
 #### v0.2.5 (2016-03-02)
 

dist/gridstack.js

@@ -975,6 +975,9 @@
     };
 
     GridStack.prototype._prepareElementsByNode = function(el, node) {
+        if (typeof $.ui === 'undefined') {
+            return;
+        }
         var self = this;
 
         var cellWidth;
@@ -1040,7 +1043,7 @@
             var o = $(this);
             self.grid.cleanNodes();
             self.grid.beginUpdate(node);
-            cellWidth = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
+            cellWidth = self.cellWidth();
             var strictCellHeight = Math.ceil(o.outerHeight() / o.attr('data-gs-height'));
             cellHeight = self.container.height() / parseInt(self.container.attr('data-gs-current-height'));
             self.placeholder
@@ -1160,9 +1163,7 @@
         }, triggerAddEvent);
         el.data('_gridstack_node', node);
 
-        if (!this.opts.staticGrid) {
-            this._prepareElementsByNode(el, node);
-        }
+        this._prepareElementsByNode(el, node);
     };
 
     GridStack.prototype.setAnimation = function(enable) {
@@ -1258,7 +1259,7 @@
         el.each(function(index, el) {
             el = $(el);
             var node = el.data('_gridstack_node');
-            if (self.opts.staticGrid || typeof node == 'undefined' || node === null) {
+            if (typeof node == 'undefined' || node === null || typeof $.ui === 'undefined') {
                 return;
             }
 
@@ -1278,7 +1279,7 @@
         el.each(function(index, el) {
             el = $(el);
             var node = el.data('_gridstack_node');
-            if (self.opts.staticGrid || typeof node == 'undefined' || node === null) {
+            if (typeof node == 'undefined' || node === null || typeof $.ui === 'undefined') {
                 return;
             }
 
@@ -1493,8 +1494,7 @@
     };
 
     GridStack.prototype.cellWidth = function() {
-        var o = this.container.children('.' + this.opts.itemClass).first();
-        return Math.ceil(o.outerWidth() / parseInt(o.attr('data-gs-width'), 10));
+        return Math.round(this.container.outerWidth() / this.opts.width);
     };
 
     GridStack.prototype.getCellFromPixel = function(position, useOffset) {

spec/gridstack-spec.js

@@ -220,14 +220,27 @@ describe('gridstack', function() {
         afterEach(function() {
             document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
         });
-        it('should return 96.', function() {
+        it('should return 1/12th of container width.', function() {
             var options = {
                 cellHeight: 80,
-                verticalMargin: 10
+                verticalMargin: 10,
+                width: 12
             };
             $('.grid-stack').gridstack(options);
             var grid = $('.grid-stack').data('gridstack');
-            expect(grid.cellWidth()).toBe(96);
+            var res = Math.round($('.grid-stack').outerWidth() / 12);
+            expect(grid.cellWidth()).toBe(res);
+        });
+        it('should return 1/10th of container width.', function() {
+            var options = {
+                cellHeight: 80,
+                verticalMargin: 10,
+                width: 10
+            };
+            $('.grid-stack').gridstack(options);
+            var grid = $('.grid-stack').data('gridstack');
+            var res = Math.round($('.grid-stack').outerWidth() / 10);
+            expect(grid.cellWidth()).toBe(res);
         });
     });
 

src/gridstack.js

@@ -975,6 +975,9 @@
     };
 
     GridStack.prototype._prepareElementsByNode = function(el, node) {
+        if (typeof $.ui === 'undefined') {
+            return;
+        }
         var self = this;
 
         var cellWidth;
@@ -1040,7 +1043,7 @@
             var o = $(this);
             self.grid.cleanNodes();
             self.grid.beginUpdate(node);
-            cellWidth = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
+            cellWidth = self.cellWidth();
             var strictCellHeight = Math.ceil(o.outerHeight() / o.attr('data-gs-height'));
             cellHeight = self.container.height() / parseInt(self.container.attr('data-gs-current-height'));
             self.placeholder
@@ -1160,9 +1163,7 @@
         }, triggerAddEvent);
         el.data('_gridstack_node', node);
 
-        if (!this.opts.staticGrid) {
-            this._prepareElementsByNode(el, node);
-        }
+        this._prepareElementsByNode(el, node);
     };
 
     GridStack.prototype.setAnimation = function(enable) {
@@ -1258,7 +1259,7 @@
         el.each(function(index, el) {
             el = $(el);
             var node = el.data('_gridstack_node');
-            if (self.opts.staticGrid || typeof node == 'undefined' || node === null) {
+            if (typeof node == 'undefined' || node === null || typeof $.ui === 'undefined') {
                 return;
             }
 
@@ -1278,7 +1279,7 @@
         el.each(function(index, el) {
             el = $(el);
             var node = el.data('_gridstack_node');
-            if (self.opts.staticGrid || typeof node == 'undefined' || node === null) {
+            if (typeof node == 'undefined' || node === null || typeof $.ui === 'undefined') {
                 return;
             }
 
@@ -1493,8 +1494,7 @@
     };
 
     GridStack.prototype.cellWidth = function() {
-        var o = this.container.children('.' + this.opts.itemClass).first();
-        return Math.ceil(o.outerWidth() / parseInt(o.attr('data-gs-width'), 10));
+        return Math.round(this.container.outerWidth() / this.opts.width);
     };
 
     GridStack.prototype.getCellFromPixel = function(position, useOffset) {