Skip to content

Added minRow and row #1173

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 5 commits into from
Feb 29, 2020
Merged

Added minRow and row #1173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
baa8cde
Added minRow and row
Feb 27, 2020
d52cc93
Improved minRow and row is not a shortcut for minRow and maxRow
ferretwithaberet Feb 28, 2020
03c986d
Fixed minRow and maxRow
ferretwithaberet Feb 28, 2020
b54d6c9
Merge pull request #1 from gridstack/develop
ferretwithaberet Feb 28, 2020
597d484
Update README.md
ferretwithaberet Feb 28, 2020
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
4 changes: 4 additions & 0 deletions doc/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ gridstack.js API
* a string (ex: '100px', '10em', '10rem', '10%')
* 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
* `'auto'` - height will be calculated to match cell width (initial square grid).
- `row` - number of rows. This is a shortcut of writting `minRow: sameValue, maxRow: sameValue`.
Copy link
Member

@adumesny adumesny Feb 29, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

great, but all those need to be alphabetized please. also row should say something like:

row - fixed number of rows which prevents the grid from changing as items are added/removed/moved, Shortcut for setting minRow: N, maxRow: N. default is 0 no constrain. EXPERIMENTAL - see maxRow

- `column` - number of columns (default: `12`) which can change on the fly with `column(N)` as well. See [example](http://gridstackjs.com/demo/column.html)
- `ddPlugin` - class that implement drag'n'drop functionallity for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used)
- `disableDrag` - disallows dragging of widgets (default: `false`).
Expand All @@ -86,6 +87,7 @@ gridstack.js API
- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
- `handleClass` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
- `itemClass` - widget class (default: `'grid-stack-item'`)
- `minRow` - minimum rows amount. Default is `0`
- `maxRow` - maximum rows amount. Default is `0` which means no maximum rows
- `minWidth` - minimal width. If window width is less than or equal to, grid will be shown in one-column mode (default: `768`)
- `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)
Expand All @@ -103,7 +105,9 @@ gridstack.js API
## Grid attributes

- `data-gs-animate` - turns animation on
- `data-gs-row` - number of rows. This is a shortcut of writting `data-gs-min-row="sameValue" data-gs-max-row="sameValue"` .
- `data-gs-column` - amount of columns. Setting non-default value must be supported by equivalent change in CSS, [see docs here](https://github.com/gridstack/gridstack.js#change-grid-columns).
- `data-gs-min-row` - minimum rows amount. Default is `0`.
- `data-gs-max-row` - maximum rows amount. Default is `0` which means no maximum rows.
- `data-gs-current-row` - current rows amount. Set by the library only. Can be used by the CSS rules.

Expand Down
13 changes: 12 additions & 1 deletion src/gridstack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -693,6 +693,12 @@

opts = opts || {};

// if row property exists, replace minRow and maxRow
Copy link
Member

Choose a reason for hiding this comment

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

move that down - feel weird to be first thing we check... like right after 715 where we set opts values.

if (opts.row) {
opts.minRow = opts.row;
opts.maxRow = opts.row;
}

this.$el = $(el); // TODO: legacy code
this.el = this.$el.get(0); // exposed HTML element to the user

Expand All @@ -709,8 +715,10 @@
var isNested = this.$el.closest('.' + opts.itemClass).length > 0;

this.opts = Utils.defaults(opts, {
row: parseInt(this.$el.attr('data-gs-row')) || 0,
column: parseInt(this.$el.attr('data-gs-column')) || 12,
maxRow: parseInt(this.$el.attr('data-gs-max-row')) || 0,
minRow: parseInt(this.$el.attr('data-gs-row')) ? parseInt(this.$el.attr('data-gs-row')) : parseInt(this.$el.attr('data-gs-min-row')) || 0,
Copy link
Member

Choose a reason for hiding this comment

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

please extract this.$el.attr('data-gs-row') into a var right above - easier to read/parse. maybe minRowAttr

maxRow: parseInt(this.$el.attr('data-gs-row')) ? parseInt(this.$el.attr('data-gs-row')) : parseInt(this.$el.attr('data-gs-max-row')) || 0,
itemClass: 'grid-stack-item',
placeholderClass: 'grid-stack-placeholder',
placeholderText: '',
Expand Down Expand Up @@ -1156,6 +1164,9 @@
GridStack.prototype._updateContainerHeight = function() {
if (this.engine._batchMode) { return; }
var row = this.engine.getRow();
if (row < this.opts.minRow) {
Copy link
Member

Choose a reason for hiding this comment

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

yep, that is the right place to put it. as you can see you can also accomplish this with CSS min-height on the grid div, but setting minRow can be easier for some.

row = this.opts.minRow;
}
// check for css min height. Each row is cellHeight + verticalMargin, until last one which has no margin below
var cssMinHeight = parseInt(this.$el.css('min-height'));
if (cssMinHeight > 0) {
Expand Down