diff --git a/doc/README.md b/doc/README.md index 74aba53b8..76a7f1b5c 100644 --- a/doc/README.md +++ b/doc/README.md @@ -87,7 +87,7 @@ gridstack.js API - `auto` - if `false` gridstack will not initialize existing items (default: `true`) - `cellHeight`- one cell height (default?: 'auto'). Can be: * an integer (px) - * a string (ex: '100px', '10em', '10rem'). Note: % doesn't right - see [CellHeight](http://gridstackjs.com/demo/cell-height.html) + * a string (ex: '100px', '10em', '10rem', '10cm'). Note: % doesn't right - see [CellHeight](http://gridstackjs.com/demo/cell-height.html) * 0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files. * `auto` - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle` * `initial` - similar to 'auto' (start at square cells) but stay that size during window resizing. diff --git a/spec/utils-spec.ts b/spec/utils-spec.ts index 04dc18e84..f3590e815 100644 --- a/spec/utils-spec.ts +++ b/spec/utils-spec.ts @@ -76,6 +76,8 @@ describe('gridstack utils', function() { expect(Utils.parseHeight('12.3vh')).toEqual(jasmine.objectContaining({h: 12.3, unit: 'vh'})); expect(Utils.parseHeight('12.3vw')).toEqual(jasmine.objectContaining({h: 12.3, unit: 'vw'})); expect(Utils.parseHeight('12.3%')).toEqual(jasmine.objectContaining({h: 12.3, unit: '%'})); + expect(Utils.parseHeight('12.5cm')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'cm'})); + expect(Utils.parseHeight('12.5mm')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'mm'})); expect(Utils.parseHeight('12.5')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'px'})); expect(function() { Utils.parseHeight('12.5 df'); }).toThrowError('Invalid height'); }); @@ -89,6 +91,8 @@ describe('gridstack utils', function() { expect(Utils.parseHeight('-12.3vh')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'vh'})); expect(Utils.parseHeight('-12.3vw')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'vw'})); expect(Utils.parseHeight('-12.3%')).toEqual(jasmine.objectContaining({h: -12.3, unit: '%'})); + expect(Utils.parseHeight('-12.3cm')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'cm'})); + expect(Utils.parseHeight('-12.3mm')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'mm'})); expect(Utils.parseHeight('-12.5')).toEqual(jasmine.objectContaining({h: -12.5, unit: 'px'})); expect(function() { Utils.parseHeight('-12.5 df'); }).toThrowError('Invalid height'); }); diff --git a/src/gridstack.ts b/src/gridstack.ts index fd5bd1771..abab38119 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -811,13 +811,20 @@ export class GridStack { (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) { return this.opts.cellHeight as number; } - // do rem/em to px conversion + // do rem/em/cm/mm to px conversion if (this.opts.cellHeightUnit === 'rem') { return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(document.documentElement).fontSize); } if (this.opts.cellHeightUnit === 'em') { return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(this.el).fontSize); } + if (this.opts.cellHeightUnit === 'cm') { + // 1cm = 96px/2.54. See https://www.w3.org/TR/css-values-3/#absolute-lengths + return (this.opts.cellHeight as number) * (96 / 2.54); + } + if (this.opts.cellHeightUnit === 'mm') { + return (this.opts.cellHeight as number) * (96 / 2.54) / 10; + } // else get first cell height let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement; if (el) { diff --git a/src/utils.ts b/src/utils.ts index a4a23453b..46358d5ef 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -219,7 +219,7 @@ export class Utils { if (typeof val === 'string') { if (val === 'auto' || val === '') h = 0; else { - let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/); + let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/); if (!match) { throw new Error(`Invalid height val = ${val}`); }