feature: height and width settings can now be functions (that ret…

…urn a number)
ermouth · Mar 26, 2013 · 560ccb8 · 560ccb8
1 parent 9bcbf68
commit 560ccb8
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 Features:
 - [Handsontable in Handsontable editor](http://handsontable.com/demo/handsontable.html)
 - performance and code quality fixes
+- `height` and `width` settings can now be functions (that return a number)
 
 Bugfixes:
 - autocomplete menu did not reset <li> margin

diff --git a/README.md b/README.md
@@ -111,6 +111,8 @@ The table below presents configuration options that are interpreted by `handsont
   Option                 | Type                           | Default          | Description
 -------------------------|--------------------------------|------------------|-------------
  `data`                  | array/object/function          | []               | Initial data source that will be bound to the data grid **by reference** (editing data grid alters the data source. See [Understanding binding as reference](http://handsontable.com/demo/understanding_reference.html))
+ `width`                 | number/function                | _undefined_      | Height of the grid. Can be a number or a function that returns a number
+ `height`                | number/function                | _undefined_      | Width of the grid. Can be a number or a function that returns a number
  `minRows`               | number                         | 0                | Minimum number of rows. At least that many of rows will be created during initialization
  `minCols`               | number                         | 0                | Minimum number of columns. At least that many of columns will be created during initialization
  `maxRows`               | number                         | _Infinity_       | Maximum number of rows

diff --git a/dist/jquery.handsontable.full.css b/dist/jquery.handsontable.full.css
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Mar 26 2013 00:29:15 GMT+0100 (Central European Standard Time)
+ * Date: Tue Mar 26 2013 02:15:11 GMT+0100 (Central European Standard Time)
  */
 
 .handsontable {

diff --git a/dist/jquery.handsontable.full.js b/dist/jquery.handsontable.full.js
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Mar 26 2013 00:29:15 GMT+0100 (Central European Standard Time)
+ * Date: Tue Mar 26 2013 02:15:11 GMT+0100 (Central European Standard Time)
  */
 /*jslint white: true, browser: true, plusplus: true, indent: 4, maxerr: 50 */
 
@@ -2213,6 +2213,8 @@ Handsontable.Core = function (rootElement, settings) {
 
 var settings = {
   'data': void 0,
+  'width': void 0,
+  'height': void 0,
   'startRows': 5,
   'startCols': 5,
   'minRows': 0,
@@ -2351,8 +2353,8 @@ Handsontable.TableView = function (instance) {
       that.instance.deselectCell();
     }
     else {
-        that.instance.destroyEditor();
-      }
+      that.instance.destroyEditor();
+    }
   });
 
   $table.on('selectstart', function (event) {
@@ -2497,7 +2499,7 @@ Handsontable.TableView = function (instance) {
       event.preventDefault();
       clearTextSelection();
 
-      if(settings.afterOnCellMouseDown) {
+      if (settings.afterOnCellMouseDown) {
         settings.afterOnCellMouseDown.call(that.instance, event, coords, TD);
       }
     },
@@ -2517,9 +2519,6 @@ Handsontable.TableView = function (instance) {
     },
     onCellCornerDblClick: function () {
       instance.autofill.selectAdjacent();
-    },
-    onDraw: function () {
-      $window.trigger('resize');
     }
   };
 
@@ -2529,18 +2528,22 @@ Handsontable.TableView = function (instance) {
   this.instance.forceFullRender = true; //used when data was changed
   this.render();
 
+  var lastContainerWidth = that.containerWidth;
+  var lastContainerHeight = that.containerHeight;
+
   $window.on('resize.' + instance.guid, function () {
     that.instance.registerTimeout('resizeTimeout', function () {
-      var lastContainerWidth = that.containerWidth;
-      var lastContainerHeight = that.containerHeight;
-
       that.determineContainerSize();
+      var newContainerWidth = that.containerWidth;
+      var newContainerHeight = that.containerHeight;
 
-      if (lastContainerWidth !== that.containerWidth || lastContainerHeight !== that.containerHeight) {
-        that.wt.update('width', that.containerWidth);
-        that.wt.update('height', that.containerHeight);
+      if (lastContainerWidth !== newContainerWidth || lastContainerHeight !== newContainerHeight) {
+        that.wt.update('width', newContainerWidth);
+        that.wt.update('height', newContainerHeight);
         that.instance.forceFullRender = true;
         that.render();
+        lastContainerWidth = newContainerWidth;
+        lastContainerHeight = newContainerHeight;
       }
     }, 60);
   });
@@ -2561,14 +2564,14 @@ Handsontable.TableView.prototype.isCellEdited = function () {
 Handsontable.TableView.prototype.determineContainerSize = function () {
   var settings = this.instance.getSettings();
 
-  this.containerWidth = settings.width;
-  this.containerHeight = settings.height;
+  this.containerWidth = typeof settings.width === 'function' ? settings.width() : settings.width;
+  this.containerHeight = typeof settings.height === 'function' ? settings.height() : settings.height;
 
-    var computedWidth = this.instance.rootElement.width();
+  var computedWidth = this.instance.rootElement.width();
   var computedHeight = this.instance.rootElement.height();
 
   if (settings.width === void 0 && computedWidth > 0) {
-      this.containerWidth = computedWidth;
+    this.containerWidth = computedWidth;
   }
 
   if (this.overflow === 'scroll' || this.overflow === 'auto') {
@@ -2578,7 +2581,9 @@ Handsontable.TableView.prototype.determineContainerSize = function () {
 
     if (this.instance.rootElement[0].style.height === '') {
       if (this.wt && this.wt.wtScroll.wtScrollbarV.visible) {
-        this.containerHeight += this.wt.getSetting('scrollbarHeight');
+        if (typeof this.containerHeight === 'number') { //TODO move this to Handsontable, then this typeof can be removed
+          this.containerHeight += this.wt.getSetting('scrollbarHeight');
+        }
       }
     }
   }
@@ -6275,6 +6280,9 @@ WalkontableSettings.prototype.displayRows = function () {
     , calculated;
 
   if (this.settings['height']) {
+    if (typeof this.settings['height'] !== 'number') {
+      throw new Error('Walkontable height parameter must be a number (' + typeof this.settings['height'] + ' given)');
+    }
     estimated = Math.ceil(this.settings['height'] / 20); //silly assumption but should be fine for now
     calculated = this.getSetting('totalRows') - this.getSetting('offsetRow');
     if (calculated < 0) {
@@ -6295,6 +6303,9 @@ WalkontableSettings.prototype.displayColumns = function () {
     , calculated;
 
   if (this.settings['width']) {
+    if (typeof this.settings['width'] !== 'number') {
+      throw new Error('Walkontable width parameter must be a number (' + typeof this.settings['width'] + ' given)');
+    }
     estimated = Math.ceil(this.settings['width'] / 50); //silly assumption but should be fine for now
     calculated = this.getSetting('totalColumns') - this.getSetting('offsetColumn');
     if (calculated < 0) {

diff --git a/jquery.handsontable.css b/jquery.handsontable.css
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Mar 26 2013 00:29:15 GMT+0100 (Central European Standard Time)
+ * Date: Tue Mar 26 2013 02:15:11 GMT+0100 (Central European Standard Time)
  */
 
 .handsontable {

diff --git a/jquery.handsontable.js b/jquery.handsontable.js
@@ -6,7 +6,7 @@
  * Licensed under the MIT license.
  * http://handsontable.com/
  *
- * Date: Tue Mar 26 2013 00:29:15 GMT+0100 (Central European Standard Time)
+ * Date: Tue Mar 26 2013 02:15:11 GMT+0100 (Central European Standard Time)
  */
 /*jslint white: true, browser: true, plusplus: true, indent: 4, maxerr: 50 */
 
@@ -2213,6 +2213,8 @@ Handsontable.Core = function (rootElement, settings) {
 
 var settings = {
   'data': void 0,
+  'width': void 0,
+  'height': void 0,
   'startRows': 5,
   'startCols': 5,
   'minRows': 0,
@@ -2351,8 +2353,8 @@ Handsontable.TableView = function (instance) {
       that.instance.deselectCell();
     }
     else {
-        that.instance.destroyEditor();
-      }
+      that.instance.destroyEditor();
+    }
   });
 
   $table.on('selectstart', function (event) {
@@ -2497,7 +2499,7 @@ Handsontable.TableView = function (instance) {
       event.preventDefault();
       clearTextSelection();
 
-      if(settings.afterOnCellMouseDown) {
+      if (settings.afterOnCellMouseDown) {
         settings.afterOnCellMouseDown.call(that.instance, event, coords, TD);
       }
     },
@@ -2517,9 +2519,6 @@ Handsontable.TableView = function (instance) {
     },
     onCellCornerDblClick: function () {
       instance.autofill.selectAdjacent();
-    },
-    onDraw: function () {
-      $window.trigger('resize');
     }
   };
 
@@ -2529,18 +2528,22 @@ Handsontable.TableView = function (instance) {
   this.instance.forceFullRender = true; //used when data was changed
   this.render();
 
+  var lastContainerWidth = that.containerWidth;
+  var lastContainerHeight = that.containerHeight;
+
   $window.on('resize.' + instance.guid, function () {
     that.instance.registerTimeout('resizeTimeout', function () {
-      var lastContainerWidth = that.containerWidth;
-      var lastContainerHeight = that.containerHeight;
-
       that.determineContainerSize();
+      var newContainerWidth = that.containerWidth;
+      var newContainerHeight = that.containerHeight;
 
-      if (lastContainerWidth !== that.containerWidth || lastContainerHeight !== that.containerHeight) {
-        that.wt.update('width', that.containerWidth);
-        that.wt.update('height', that.containerHeight);
+      if (lastContainerWidth !== newContainerWidth || lastContainerHeight !== newContainerHeight) {
+        that.wt.update('width', newContainerWidth);
+        that.wt.update('height', newContainerHeight);
         that.instance.forceFullRender = true;
         that.render();
+        lastContainerWidth = newContainerWidth;
+        lastContainerHeight = newContainerHeight;
       }
     }, 60);
   });
@@ -2561,14 +2564,14 @@ Handsontable.TableView.prototype.isCellEdited = function () {
 Handsontable.TableView.prototype.determineContainerSize = function () {
   var settings = this.instance.getSettings();
 
-  this.containerWidth = settings.width;
-  this.containerHeight = settings.height;
+  this.containerWidth = typeof settings.width === 'function' ? settings.width() : settings.width;
+  this.containerHeight = typeof settings.height === 'function' ? settings.height() : settings.height;
 
-    var computedWidth = this.instance.rootElement.width();
+  var computedWidth = this.instance.rootElement.width();
   var computedHeight = this.instance.rootElement.height();
 
   if (settings.width === void 0 && computedWidth > 0) {
-      this.containerWidth = computedWidth;
+    this.containerWidth = computedWidth;
   }
 
   if (this.overflow === 'scroll' || this.overflow === 'auto') {
@@ -2578,7 +2581,9 @@ Handsontable.TableView.prototype.determineContainerSize = function () {
 
     if (this.instance.rootElement[0].style.height === '') {
       if (this.wt && this.wt.wtScroll.wtScrollbarV.visible) {
-        this.containerHeight += this.wt.getSetting('scrollbarHeight');
+        if (typeof this.containerHeight === 'number') { //TODO move this to Handsontable, then this typeof can be removed
+          this.containerHeight += this.wt.getSetting('scrollbarHeight');
+        }
       }
     }
   }
@@ -6275,6 +6280,9 @@ WalkontableSettings.prototype.displayRows = function () {
     , calculated;
 
   if (this.settings['height']) {
+    if (typeof this.settings['height'] !== 'number') {
+      throw new Error('Walkontable height parameter must be a number (' + typeof this.settings['height'] + ' given)');
+    }
     estimated = Math.ceil(this.settings['height'] / 20); //silly assumption but should be fine for now
     calculated = this.getSetting('totalRows') - this.getSetting('offsetRow');
     if (calculated < 0) {
@@ -6295,6 +6303,9 @@ WalkontableSettings.prototype.displayColumns = function () {
     , calculated;
 
   if (this.settings['width']) {
+    if (typeof this.settings['width'] !== 'number') {
+      throw new Error('Walkontable width parameter must be a number (' + typeof this.settings['width'] + ' given)');
+    }
     estimated = Math.ceil(this.settings['width'] / 50); //silly assumption but should be fine for now
     calculated = this.getSetting('totalColumns') - this.getSetting('offsetColumn');
     if (calculated < 0) {

diff --git a/src/core.js b/src/core.js
@@ -2194,6 +2194,8 @@ Handsontable.Core = function (rootElement, settings) {
 
 var settings = {
   'data': void 0,
+  'width': void 0,
+  'height': void 0,
   'startRows': 5,
   'startCols': 5,
   'minRows': 0,

diff --git a/src/tableView.js b/src/tableView.js
@@ -70,8 +70,8 @@ Handsontable.TableView = function (instance) {
       that.instance.deselectCell();
     }
     else {
-        that.instance.destroyEditor();
-      }
+      that.instance.destroyEditor();
+    }
   });
 
   $table.on('selectstart', function (event) {
@@ -216,7 +216,7 @@ Handsontable.TableView = function (instance) {
       event.preventDefault();
       clearTextSelection();
 
-      if(settings.afterOnCellMouseDown) {
+      if (settings.afterOnCellMouseDown) {
         settings.afterOnCellMouseDown.call(that.instance, event, coords, TD);
       }
     },
@@ -236,9 +236,6 @@ Handsontable.TableView = function (instance) {
     },
     onCellCornerDblClick: function () {
       instance.autofill.selectAdjacent();
-    },
-    onDraw: function () {
-      $window.trigger('resize');
     }
   };
 
@@ -248,18 +245,22 @@ Handsontable.TableView = function (instance) {
   this.instance.forceFullRender = true; //used when data was changed
   this.render();
 
+  var lastContainerWidth = that.containerWidth;
+  var lastContainerHeight = that.containerHeight;
+
   $window.on('resize.' + instance.guid, function () {
     that.instance.registerTimeout('resizeTimeout', function () {
-      var lastContainerWidth = that.containerWidth;
-      var lastContainerHeight = that.containerHeight;
-
       that.determineContainerSize();
+      var newContainerWidth = that.containerWidth;
+      var newContainerHeight = that.containerHeight;
 
-      if (lastContainerWidth !== that.containerWidth || lastContainerHeight !== that.containerHeight) {
-        that.wt.update('width', that.containerWidth);
-        that.wt.update('height', that.containerHeight);
+      if (lastContainerWidth !== newContainerWidth || lastContainerHeight !== newContainerHeight) {
+        that.wt.update('width', newContainerWidth);
+        that.wt.update('height', newContainerHeight);
         that.instance.forceFullRender = true;
         that.render();
+        lastContainerWidth = newContainerWidth;
+        lastContainerHeight = newContainerHeight;
       }
     }, 60);
   });
@@ -280,14 +281,14 @@ Handsontable.TableView.prototype.isCellEdited = function () {
 Handsontable.TableView.prototype.determineContainerSize = function () {
   var settings = this.instance.getSettings();
 
-  this.containerWidth = settings.width;
-  this.containerHeight = settings.height;
+  this.containerWidth = typeof settings.width === 'function' ? settings.width() : settings.width;
+  this.containerHeight = typeof settings.height === 'function' ? settings.height() : settings.height;
 
-    var computedWidth = this.instance.rootElement.width();
+  var computedWidth = this.instance.rootElement.width();
   var computedHeight = this.instance.rootElement.height();
 
   if (settings.width === void 0 && computedWidth > 0) {
-      this.containerWidth = computedWidth;
+    this.containerWidth = computedWidth;
   }
 
   if (this.overflow === 'scroll' || this.overflow === 'auto') {
@@ -297,7 +298,9 @@ Handsontable.TableView.prototype.determineContainerSize = function () {
 
     if (this.instance.rootElement[0].style.height === '') {
       if (this.wt && this.wt.wtScroll.wtScrollbarV.visible) {
-        this.containerHeight += this.wt.getSetting('scrollbarHeight');
+        if (typeof this.containerHeight === 'number') { //TODO move this to Handsontable, then this typeof can be removed
+          this.containerHeight += this.wt.getSetting('scrollbarHeight');
+        }
       }
     }
   }