From c14aaa2981ad5af414d35b3577bebcc90247b139 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Thu, 24 Feb 2022 10:24:21 -0800 Subject: [PATCH] grid option minWidth -> OneColumnSize * renamed to be much lclearer, added support for old field value (JS only) to not break binary compatibility * fix #1937 --- README.md | 2 +- doc/CHANGES.md | 1 + spec/gridstack-spec.ts | 4 ++-- src/gridstack.ts | 12 +++++++++--- src/types.ts | 6 +++--- src/utils.ts | 13 +++++++------ 6 files changed, 23 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index e1b40a8b4..f37e1ee7b 100644 --- a/README.md +++ b/README.md @@ -409,7 +409,7 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and 2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated. -3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `minWidth` or `disableOneColumnMode`. +3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `oneColumnSize` or `disableOneColumnMode`. **Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 46f38a4e2..b1ff674bd 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -70,6 +70,7 @@ Change log ## 5.0.0-dev (TBD) * add `GridStack.registerEngine()` to let user use their own custom layout engine subclass. Thank you [Thomas] for sponsoring it. +* grid option `minWidth` is now `oneColumnSize` to make it clearer, but old field will still work (JS only) for a while ## 5.0.0 (2022-01-10) * add [#992](https://github.com/gridstack/gridstack.js/issues/992) support dragging into and out of nested grids from parents! Thank you [@arclogos132](https://github.com/arclogos132) for sponsoring it. diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts index 103a66fd8..7a5e761fe 100644 --- a/spec/gridstack-spec.ts +++ b/spec/gridstack-spec.ts @@ -527,11 +527,11 @@ describe('gridstack', function() { expect(grid.getColumn()).toBe(1); }); it('should go to 1 column with large minW', function() { - let grid = GridStack.init({minWidth: 1000}); + let grid = GridStack.init({oneColumnSize: 1000}); expect(grid.getColumn()).toBe(1); }); it('should stay at 12 with minW', function() { - let grid = GridStack.init({minWidth: 300}); + let grid = GridStack.init({oneColumnSize: 300}); expect(grid.getColumn()).toBe(12); }); it('should stay at 12 column', function() { diff --git a/src/gridstack.ts b/src/gridstack.ts index 75f278d55..1dbcaf19b 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -56,7 +56,7 @@ const GridDefaults: GridStackOptions = { cellHeightThrottle: 100, margin: 10, auto: true, - minWidth: 768, + oneColumnSize: 768, float: false, staticGrid: false, animate: true, @@ -261,6 +261,12 @@ export class GridStack { if (opts.column === 'auto') { delete opts.column; } + // 'minWidth' legacy support in 5.1 + let anyOpts = opts as any; + if (anyOpts.minWidth !== undefined) { + opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth; + delete anyOpts.minWidth; + } // elements attributes override any passed options (like CSS style) - merge the two together let defaults: GridStackOptions = {...Utils.cloneDeep(GridDefaults), @@ -292,7 +298,7 @@ export class GridStack { this.initMargin(); // part of settings defaults... // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column) - if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.minWidth) { + if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) { this._prevColumn = this.getColumn(); this.opts.column = 1; } @@ -1388,7 +1394,7 @@ export class GridStack { } } else { // else check for 1 column in/out behavior - let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.minWidth; + let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize; if ((this.opts.column === 1) !== oneColumn) { changedColumn = true; if (this.opts.animate) { this.setAnimation(false); } // 1 <-> 12 is too radical, turn off animation diff --git a/src/types.ts b/src/types.ts index 5d35560ed..89505bec5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -85,7 +85,7 @@ export interface GridStackOptions { /** disallows dragging of widgets (default?: false) */ disableDrag?: boolean; - /** disables the onColumnMode when the grid width is less than minWidth (default?: false) */ + /** disables the onColumnMode when the grid width is less than oneColumnSize (default?: false) */ disableOneColumnMode?: boolean; /** disallows resizing of widgets (default?: false). */ @@ -150,8 +150,8 @@ export interface GridStackOptions { */ minRow?: number; - /** minimal width. If grid width is less, grid will be shown in one column mode (default?: 768) */ - minWidth?: number; + /** minimal width before grid will be shown in one column mode (default?: 768) */ + oneColumnSize?: number; /** * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column diff --git a/src/utils.ts b/src/utils.ts index e2185d1b9..4ab25ef68 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -220,16 +220,17 @@ export class Utils { } /** copies over b size & position (GridStackPosition), and possibly min/max as well */ - static copyPos(a: GridStackWidget, b: GridStackWidget, minMax = false): GridStackWidget { + static copyPos(a: GridStackWidget, b: GridStackWidget, doMinMax = false): GridStackWidget { a.x = b.x; a.y = b.y; a.w = b.w; a.h = b.h; - if (!minMax) return a; - if (b.minW) a.minW = b.minW; - if (b.minH) a.minH = b.minH; - if (b.maxW) a.maxW = b.maxW; - if (b.maxH) a.maxH = b.maxH; + if (doMinMax) { + if (b.minW) a.minW = b.minW; + if (b.minH) a.minH = b.minH; + if (b.maxW) a.maxW = b.maxW; + if (b.maxH) a.maxH = b.maxH; + } return a; }