Skip to content

Allow cell height in cm and mm units #2574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 14, 2023
+14 −3
Merged

Allow cell height in cm and mm units #2574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion doc/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions spec/utils-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand All @@ -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');
});
Expand Down
9 changes: 8 additions & 1 deletion src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)?$/);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do browser support cm ? and how would I convert this to px to do match (which I do for rem/em)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browsers do support cm/mm. You can see the spec here: https://www.w3.org/TR/css-values-3/#absolute-lengths
There's also a conversion rate given for cm to px. I updated the getCellHeight method to accommodate for cm/mm units

if (!match) {
throw new Error(`Invalid height val = ${val}`);
}
Expand Down