Skip to content

Commit 7307ee1

Browse files
adumesnyadumesny
authored
Merge pull request #2924 from adumesny/master
added `responsive_none.html`
2 parents e6cddad + 6ecba48 commit 7307ee1

File tree

5 files changed

+54
-12
lines changed

5 files changed

+54
-12
lines changed

‎demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ <h1>Demos</h1>
2626
<li><a href="react.html">ReactJS</a></li>
2727
<li><a href="responsive.html">Responsive: by column size</a></li>
2828
<li><a href="responsive_break.html">Responsive: using breakpoints</a></li>
29+
<li><a href="responsive_none.html">Responsive: using layout:'none'</a></li>
2930
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
3031
<li><a href="serialization.html">Serialization</a></li>
3132
<li><a href="sizeToContent.html">Size To Content</a></li>

‎demo/responsive_none.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Responsive layout:'none'</title>
8+
9+
<link rel="stylesheet" href="demo.css"/>
10+
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
11+
<script src="../dist/gridstack-all.js"></script>
12+
13+
</head>
14+
<body>
15+
<div class="container-fluid">
16+
<h1>Responsive layout:'none'</h1>
17+
<p>show loading a fixed (<b>layout:'none'</b>) but still responsive design (150px columns) with items w:2-4</p>
18+
<p>showing how it will not change the layout unless it doesn't fit. loading into small view remembers the full layout (column:6)</p>
19+
<div class="grid-stack"></div>
20+
</div>
21+
<script src="events.js"></script>
22+
<script type="text/javascript">
23+
let children = [ {}, {}, {}];
24+
children.forEach((w, i) => {
25+
w.x=i, w.y=i, // comment out to have autoPosition:true which behaves differently
26+
w.w=i+2, w.content = `${i} w:${w.w}`})
27+
28+
GridStack.init({
29+
children,
30+
column: 6,
31+
cellHeight: 100,
32+
columnOpts: {
33+
columnWidth: 150,
34+
columnMax: 12,
35+
layout: 'none',
36+
},
37+
});
38+
</script>
39+
</body>
40+
</html>

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ Change log
122122

123123
## 11.2.0-dev (TBD)
124124
* feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...
125+
* feat: added `responsive_none.html` demo and fixed layout:'none' to bound check the layout (no-op unless it must change)
125126

126127
## 11.2.0 (2024-12-29)
127128
* feat: [#2695](https://github.com/gridstack/gridstack.js/issues/2695) 'Esc' to cancel now works on sidebar external items, also works dragging over trash.

‎src/gridstack-engine.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export class GridStackEngine {
4444
public _loading?: boolean
4545
/** @internal true while we are resizing widgets during column resize to skip certain parts */
4646
protected _inColumnResize?: boolean;
47+
/** true when grid.load() already cached the layout and can skip out of bound caching info */
48+
public skipCacheUpdate?: boolean;
4749
/** @internal true if we have some items locked */
4850
protected _hasLocked: boolean;
4951
/** @internal unique global internal _id counter */
@@ -415,7 +417,7 @@ export class GridStackEngine {
415417
// remember it's position & width so we can restore back (1 -> 12 column) #1655 #1985
416418
// IFF we're not in the middle of column resizing!
417419
const saveOrig = (node.x || 0) + (node.w || 1) > this.column;
418-
if (saveOrig && this.column < this.defaultColumn && !this._inColumnResize && node._id && this.findCacheLayout(node, this.defaultColumn) === -1) {
420+
if (saveOrig && this.column < this.defaultColumn && !this._inColumnResize && !this.skipCacheUpdate && node._id && this.findCacheLayout(node, this.defaultColumn) === -1) {
419421
const copy = {...node}; // need _id + positions
420422
if (copy.autoPosition || copy.x === undefined) { delete copy.x; delete copy.y; }
421423
else copy.x = Math.min(this.defaultColumn - 1, copy.x);
@@ -829,9 +831,6 @@ export class GridStackEngine {
829831
public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine {
830832
if (!this.nodes.length || !column || prevColumn === column) return this;
831833

832-
// in this mode no layout is done whatsoever, up to the caller to handle it
833-
if (layout === 'none') return this;
834-
835834
// simpler shortcuts layouts
836835
const doCompact = layout === 'compact' || layout === 'list';
837836
if (doCompact) {
@@ -900,7 +899,7 @@ export class GridStackEngine {
900899
if (typeof layout === 'function') {
901900
layout(column, prevColumn, newNodes, nodes);
902901
} else {
903-
const ratio = doCompact ? 1 : column / prevColumn;
902+
const ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn;
904903
const move = (layout === 'move' || layout === 'moveScale');
905904
const scale = (layout === 'scale' || layout === 'moveScale');
906905
nodes.forEach(node => {

‎src/gridstack.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -696,15 +696,14 @@ export class GridStack {
696696
// sort items. those without coord will be appended last
697697
items = Utils.sort(items);
698698

699+
this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = true; // skip layout update
700+
699701
// if we're loading a layout into for example 1 column and items don't fit, make sure to save
700702
// the original wanted layout so we can scale back up correctly #1471
701703
let maxColumn = 0;
702704
items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w) });
703705
if (maxColumn > this.engine.defaultColumn) this.engine.defaultColumn = maxColumn;
704-
if (maxColumn > column) {
705-
this._ignoreLayoutsNodeChange = true; // skip layout update
706-
this.engine.cacheLayout(items, maxColumn, true);
707-
}
706+
if (maxColumn > column) this.engine.cacheLayout(items, maxColumn, true);
708707

709708
// if given a different callback, temporally set it as global option so creating will use it
710709
const prevCB = GridStack.addRemoveCB;
@@ -778,6 +777,7 @@ export class GridStack {
778777

779778
// after commit, clear that flag
780779
delete this._ignoreLayoutsNodeChange;
780+
delete this.engine.skipCacheUpdate;
781781
prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
782782
// delay adding animation back
783783
if (blank && this.opts?.animate) this.setAnimation(this.opts.animate, true);
@@ -1098,12 +1098,13 @@ export class GridStack {
10981098

10991099
// if we're adding an item into 1 column make sure
11001100
// we don't override the larger 12 column layout that was already saved. #1985
1101-
if (this.opts.column === 1) {
1102-
this._ignoreLayoutsNodeChange = true;
1101+
let resetIgnoreLayoutsNodeChange: boolean;
1102+
if (this.opts.column === 1 && !this._ignoreLayoutsNodeChange) {
1103+
resetIgnoreLayoutsNodeChange = this._ignoreLayoutsNodeChange = true;
11031104
}
11041105
this._triggerAddEvent();
11051106
this._triggerChangeEvent();
1106-
delete this._ignoreLayoutsNodeChange;
1107+
if (resetIgnoreLayoutsNodeChange) delete this._ignoreLayoutsNodeChange;
11071108

11081109
return el;
11091110
}

0 commit comments

Comments
 (0)