From 3449bde71bec64e634782aba06f92a007e27c3ec Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Tue, 19 Nov 2019 12:22:04 -0800 Subject: [PATCH 1/2] renamed setGridWidth() to setColumn() part of #1053 changes * kept old method as stub with warning (no code break) * added new (hidden for now) column.html demo * updated test coverage --- demo/column.html | 69 ++++++++++++++++++++++++++++++++++++++++++ demo/responsive.html | 6 ++-- doc/CHANGES.md | 2 +- doc/README.md | 6 ++-- spec/gridstack-spec.js | 58 ++++++++++++++++++++++++++++++++++- src/gridstack.d.ts | 4 +-- src/gridstack.js | 23 ++++++++------ 7 files changed, 148 insertions(+), 20 deletions(-) create mode 100644 demo/column.html diff --git a/demo/column.html b/demo/column.html new file mode 100644 index 000000000..06c49b5ee --- /dev/null +++ b/demo/column.html @@ -0,0 +1,69 @@ + + + + + + + + + Column grid demo + + + + + + + + + + + + + +
+

setColumn() grid demo

+
+ 1 Column +
+

+
+
+ + + + + diff --git a/demo/responsive.html b/demo/responsive.html index 9d8e76041..64758ba9c 100644 --- a/demo/responsive.html +++ b/demo/responsive.html @@ -72,13 +72,13 @@

Responsive grid demo

if (isBreakpoint('xs')) { $('#grid-size').text('One column mode'); } else if (isBreakpoint('sm')) { - grid.setGridWidth(3); + grid.setColumn(3); $('#grid-size').text(3); } else if (isBreakpoint('md')) { - grid.setGridWidth(6); + grid.setColumn(6); $('#grid-size').text(6); } else if (isBreakpoint('lg')) { - grid.setGridWidth(12); + grid.setColumn(12); $('#grid-size').text(12); } }; diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 241555bcb..9b0f2bdb8 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -24,7 +24,7 @@ Change log ## v0.5.2-dev (upcoming changes) -- grid options `width` is now `column`, and `height` is now `maxRow` which match what they are. Old names are still supported for now (with console warnings). Also various fixes for custom # of column and re-wrote entire doc section ([#1053](https://github.com/gridstack/gridstack.js/issues/1053)). +- grid options `width` is now `column`, and `height` is now `maxRow`, and method `setGridWidth()` is now `setColumn()` which match what they are. Old names are still supported for now (with console warnings). Also various fixes for custom # of column and re-wrote entire doc section ([#1053](https://github.com/gridstack/gridstack.js/issues/1053)). - fix widgets not animating when animate: true is used. on every move, styles were recreated-fix should slightly improve gridstack.js speed ([#937](https://github.com/gridstack/gridstack.js/issues/937)). - fix moving widgets when having multiple grids. jquery-ui workaround ([#1043](https://github.com/gridstack/gridstack.js/issues/1043)). - switch to eslint ([#763](https://github.com/gridstack/gridstack.js/issues/763)). diff --git a/doc/README.md b/doc/README.md index a8162dffc..597cc5d4f 100644 --- a/doc/README.md +++ b/doc/README.md @@ -47,7 +47,7 @@ gridstack.js API - [resize(el, width, height)](#resizeel-width-height) - [resizable(el, val)](#resizableel-val) - [setAnimation(doAnimate)](#setanimationdoanimate) - - [setGridWidth(gridWidth, doNotPropagate)](#setgridwidthgridwidth-donotpropagate) + - [setColumn(column, doNotPropagate)](#setcolumncolumn-donotpropagate) - [setStatic(staticValue)](#setstaticstaticvalue) - [update(el, x, y, width, height)](#updateel-x-y-width-height) - [verticalMargin()](#verticalmargin) @@ -436,11 +436,11 @@ Toggle the grid animation state. Toggles the `grid-stack-animate` class. - `doAnimate` - if `true` the grid will animate. -### setGridWidth(gridWidth, doNotPropagate) +### setColumn(column, doNotPropagate) (Experimental) Modify number of columns in the grid. Will attempt to update existing widgets to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css`. -- `gridWidth` - Integer between 1 and 12. +- `column` - Integer between 1 and 12. - `doNotPropagate` - if true existing widgets will not be updated. ### setStatic(staticValue) diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js index aa61b5df3..115c87f77 100644 --- a/spec/gridstack-spec.js +++ b/spec/gridstack-spec.js @@ -3,7 +3,7 @@ describe('gridstack', function() { var e; var w; - // grid has 4x2 and 4x4 top-left aligned - used all most test cases + // grid has 4x2 and 4x4 top-left aligned - used on most test cases var gridstackHTML = '
' + '
' + @@ -271,6 +271,62 @@ describe('gridstack', function() { }); }); + describe('grid.column', function() { + beforeEach(function() { + document.body.insertAdjacentHTML('afterbegin', gridstackHTML); + }); + afterEach(function() { + document.body.removeChild(document.getElementById('gs-cont')); + }); + it('should have no changes', function() { + var options = { + column: 12 + }; + $('.grid-stack').gridstack(options); + var grid = $('.grid-stack').data('gridstack'); + expect(grid.opts.column).toBe(12); + grid.setColumn(12); + expect(grid.opts.column).toBe(12); + grid.setGridWidth(12); // old API + expect(grid.opts.column).toBe(12); + }); + it('should change column number, no relayout', function() { + var options = { + column: 12 + }; + $('.grid-stack').gridstack(options); + var grid = $('.grid-stack').data('gridstack'); + var items = $('.grid-stack-item'); + + grid.setColumn(10, false); + expect(grid.opts.column).toBe(10); + for (var j = 0; j < items.length; j++) { + expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0); + } + + grid.setColumn(9, true); + expect(grid.opts.column).toBe(9); + for (var j = 0; j < items.length; j++) { + expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0); + } + }); + it('should change column number and relayout items', function() { + var options = { + column: 12 + }; + $('.grid-stack').gridstack(options); + var grid = $('.grid-stack').data('gridstack'); + var items = $('.grid-stack-item'); + + grid.setColumn(1); + expect(grid.opts.column).toBe(1); + for (var j = 0; j < items.length; j++) { + expect(parseInt($(items[j]).attr('data-gs-x'), 10)).toBe(0); + // TODO: check Y position but I don't currently agree with order. [Alain] + } + }); + }); + describe('grid.minWidth', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts index 68fa25bde..957b59224 100644 --- a/src/gridstack.d.ts +++ b/src/gridstack.d.ts @@ -264,10 +264,10 @@ interface GridStack { /** * (Experimental) Modify number of columns in the grid. Will attempt to update existing widgets * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css`. - * @param gridWidth - Integer between 1 and 12. + * @param column - Integer between 1 and 12. * @param doNotPropagate if true existing widgets will not be updated. */ - setGridWidth(gridWidth: number, doNotPropagate: boolean): void; + setColumn(column: number, doNotPropagate: boolean): void; /** * Toggle the grid static state. Also toggle the grid-stack-static class. diff --git a/src/gridstack.js b/src/gridstack.js index b8f4e213d..59f804eb9 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -250,11 +250,8 @@ /*eslint-disable camelcase */ Utils.is_intercepted = obsolete(Utils.isIntercepted, 'is_intercepted', 'isIntercepted'); - Utils.create_stylesheet = obsolete(Utils.createStylesheet, 'create_stylesheet', 'createStylesheet'); - Utils.remove_stylesheet = obsolete(Utils.removeStylesheet, 'remove_stylesheet', 'removeStylesheet'); - Utils.insert_css_rule = obsolete(Utils.insertCSSRule, 'insert_css_rule', 'insertCSSRule'); /*eslint-enable camelcase */ @@ -697,7 +694,7 @@ opts.itemClass = opts.itemClass || 'grid-stack-item'; var isNested = this.container.closest('.' + opts.itemClass).length > 0; - this.opts = Utils.defaults(opts || {}, { + this.opts = Utils.defaults(opts, { column: parseInt(this.container.attr('data-gs-column')) || 12, maxRow: parseInt(this.container.attr('data-gs-max-row')) || 0, itemClass: 'grid-stack-item', @@ -1229,7 +1226,7 @@ var distance = ui.position.top - node._prevYPix; node._prevYPix = ui.position.top; Utils.updateScrollPosition(el[0], ui, distance); - if (el.data('inTrashZone') || x < 0 || x >= self.grid.width || y < 0 || + if (el.data('inTrashZone') || x < 0 || x >= self.grid.column || y < 0 || (!self.grid.float && y > self.grid.getGridHeight())) { if (!node._temporaryRemoved) { if (self.opts.removable === true) { @@ -1807,15 +1804,21 @@ this.grid.commit(); }; - GridStack.prototype.setGridWidth = function(gridWidth,doNotPropagate) { + GridStack.prototype.setColumn = function(column, doNotPropagate) { + if (this.opts.column === column) { return; } this.container.removeClass('grid-stack-' + this.opts.column); if (doNotPropagate !== true) { - this._updateNodeWidths(this.opts.column, gridWidth); + this._updateNodeWidths(this.opts.column, column); } - this.opts.column = gridWidth; - this.grid.width = gridWidth; - this.container.addClass('grid-stack-' + gridWidth); + this.opts.column = this.grid.column = column; + this.container.addClass('grid-stack-' + column); }; + // legacy call from <= 0.5.2 - use new method instead. + GridStack.prototype.setGridWidth = function(column, doNotPropagate) { + console.warn('gridstack.js: setGridWidth() is deprecated as of v0.5.3 and has been replaced ' + + 'with setColumn(). It will be **completely** removed in v1.0.'); + this.setColumn(column, doNotPropagate); + } /*eslint-disable camelcase */ GridStackEngine.prototype.batch_update = obsolete(GridStackEngine.prototype.batchUpdate); From 1ea827f704bdc93ad6cc331b5b11a6f4d08105d6 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Tue, 19 Nov 2019 13:41:37 -0800 Subject: [PATCH 2/2] changes.md tweaks --- doc/CHANGES.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 9b0f2bdb8..5d1a85262 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -24,19 +24,19 @@ Change log ## v0.5.2-dev (upcoming changes) -- grid options `width` is now `column`, and `height` is now `maxRow`, and method `setGridWidth()` is now `setColumn()` which match what they are. Old names are still supported for now (with console warnings). Also various fixes for custom # of column and re-wrote entire doc section ([#1053](https://github.com/gridstack/gridstack.js/issues/1053)). +- grid options `width` is now `column`, `height` now `maxRow`, and `setGridWidth()` now `setColumn()` to match what they are. Old names are still supported (console warnings). Various fixes for custom # of column and re-wrote entire doc section ([#1053](https://github.com/gridstack/gridstack.js/issues/1053)). - fix widgets not animating when animate: true is used. on every move, styles were recreated-fix should slightly improve gridstack.js speed ([#937](https://github.com/gridstack/gridstack.js/issues/937)). - fix moving widgets when having multiple grids. jquery-ui workaround ([#1043](https://github.com/gridstack/gridstack.js/issues/1043)). - switch to eslint ([#763](https://github.com/gridstack/gridstack.js/issues/763)). -- null values to addWidget() exception fix ([#1042](https://github.com/gridstack/gridstack.js/issues/1042)). +- fix null values `addWidget()` options ([#1042](https://github.com/gridstack/gridstack.js/issues/1042)). ## v0.5.2 (2019-11-13) -- undefined x,y position messes up grid ([#1017](https://github.com/gridstack/gridstack.js/issues/1017)). +- undefined `x,y` position messes up grid ([#1017](https://github.com/gridstack/gridstack.js/issues/1017)). - changed code to 2 spaces. - fix minHeight during `onStartMoving()` ([#999](https://github.com/gridstack/gridstack.js/issues/999)). - TypeScript definition file now included - no need to include @types/gridstack, easier to update ([#1036](https://github.com/gridstack/gridstack.js/pull/1036)). -- new addWidget(el, options) to pass object so you don't have to spell 10 params. ([#907](https://github.com/gridstack/gridstack.js/issues/907)). +- new `addWidget(el, options)` to pass object so you don't have to spell 10 params. ([#907](https://github.com/gridstack/gridstack.js/issues/907)). ## v0.5.1 (2019-11-07) @@ -57,11 +57,11 @@ Change log ## v0.4.0 (2018-05-11) - widgets can have their own resize handles. Use `data-gs-resize-handles` element attribute to use. For example, `data-gs-resize-handles="e,w"` will make the particular widget only resize west and east. ([#494](https://github.com/gridstack/gridstack.js/issues/494)). -- enable sidebar items to be duplicated properly. Pass `helper: 'clone'` in `draggable` options. ([#661](https://github.com/gridstack/gridstack.js/issues/661), ([#396](https://github.com/gridstack/gridstack.js/issues/396), ([#499](https://github.com/gridstack/gridstack.js/issues/499)). +- enable sidebar items to be duplicated properly. Pass `helper: 'clone'` in `draggable` options. ([#661](https://github.com/gridstack/gridstack.js/issues/661), [#396](https://github.com/gridstack/gridstack.js/issues/396), [#499](https://github.com/gridstack/gridstack.js/issues/499)). - fix `staticGrid` grid option ([#743](https://github.com/gridstack/gridstack.js/issues/743)) - preserve inline styles when moving/cloning items (thanks [@silverwind](https://github.com/silverwind)) - fix bug causing heights not to get set ([#744](https://github.com/gridstack/gridstack.js/issues/744)) -- allow grid to have min-height, fixes ([#628](https://github.com/gridstack/gridstack.js/issues/628)) (thanks [@adumesny](https://github.com/adumesny)) +- allow grid to have min-height, fixes ([#628](https://github.com/gridstack/gridstack.js/issues/628)) thanks [@adumesny](https://github.com/adumesny) - widget x and y are now ints (thanks [@DonnchaC](https://github.com/donnchac)) - allow all droppable options (thanks [@vigor-vlad](https://github.com/vigor-vlad)) - properly track mouse position in `getCellFromPixel` (thanks [@aletorrado](https://github.com/aletorrado)) @@ -74,7 +74,7 @@ Change log - prevent extra checks for removing widget when dragging off grid. - trigger `added` when a widget is added via dropping from one grid to another. - trigger `removed` when a widget is removed via dropping from one grid to another. -- trigger `removed` when a widget is removed via dropping on a removable zone ([#607](https://github.com/gridstack/gridstack.js/issues/607) and [#550])(https://github.com/gridstack/gridstack.js/issues/550)). +- trigger `removed` when a widget is removed via dropping on a removable zone ([#607](https://github.com/gridstack/gridstack.js/issues/607) and [#550](https://github.com/gridstack/gridstack.js/issues/550)). - trigger custom event for `resizestop` called `gsresizestop` ([#577](https://github.com/gridstack/gridstack.js/issues/577) and [#398](https://github.com/gridstack/gridstack.js/issues/398)). - prevent dragging/resizing in `oneColumnMode` ([#593](https://github.com/gridstack/gridstack.js/issues/593)). - add `oneColumnModeClass` option to grid. @@ -99,7 +99,7 @@ Change log - `cellHeight` and `verticalMargin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs). - add `maxWidth`/`maxHeight` methods. - add `enableMove`/`enableResize` methods. -- fix window resize issue #331. +- fix window resize issue [#331](https://github.com/gridstack/gridstack.js/issues/331)). - add options `disableDrag` and `disableResize`. - fix `batchUpdate`/`commit` (Thank to @radiolips) - remove dependency of FontAwesome @@ -147,16 +147,16 @@ Change log - fix grid initialization - add `cell_height`/`cell_width` API methods -- fix boolean attributes (issue #31) +- fix boolean attributes ([#31](https://github.com/gridstack/gridstack.js/issues/31)) ## v0.2.1 (2014-12-09) -- add widgets locking (issue #19) +- add widgets locking ([#19](https://github.com/gridstack/gridstack.js/issues/19)) - add `will_it_fit` API method -- fix auto-positioning (issue #20) +- fix auto-positioning ([#20](https://github.com/gridstack/gridstack.js/issues/20)) - add animation (thanks to @ishields) -- fix `y` coordinate calculation when dragging (issue #18) -- fix `remove_widget` (issue #16) +- fix `y` coordinate calculation when dragging ([#18](https://github.com/gridstack/gridstack.js/issues/18)) +- fix `remove_widget` ([#16](https://github.com/gridstack/gridstack.js/issues/16)) - minor fixes