Thanks to visit codestin.com
Credit goes to github.com

Skip to content

loading into smaller screen with responsive layout:'list' #3015

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
Apr 13, 2025
Merged

loading into smaller screen with responsive layout:'list' #3015

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: 2 additions & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,8 @@ Change log
## 12-dev (TBD)
* feat: [#2854](https://github.com/gridstack/gridstack.js/pull/2854) Removed dynamic stylesheet and migrated to CSS vars. Thank you [lmartorella](https://github.com/lmartorella)
* feat: [#3013](https://github.com/gridstack/gridstack.js/pull/3013) columns no longer require custom classes nor `gridstack-extra.css` as we now use CSS vars.
* fix: [#2978](https://github.com/gridstack/gridstack.js/issues/2978) Very slow operation in 11.2.0 and higher with large blocks
* fix: [#2947](https://github.com/gridstack/gridstack.js/issues/2947) loading responsive `layout:'list'` into smaller screen doesn't layout correctly.

## 11.5.1 (2025-03-23)
* revert: [#2981](https://github.com/gridstack/gridstack.js/issues/2981) Locked was incorrectly changed. fixed doc instead
Expand Down
40 changes: 40 additions & 0 deletions spec/e2e/html/2947_load_responsive_list_smaller.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<head>
<title>Responsive column</title>
<link rel="stylesheet" href="../../../demo/demo.css"/>
<script src="../../../dist/gridstack-all.js"></script>
</head>
<body>
<h1>Responsive: load into smaller size</h1>
<span>Number of Columns:</span> <span id="column-text"></span>
<div class="grid-stack">

<script type="text/javascript">
let children = [ // our initial 12 column layout
{x: 0, y: 0, w: 12},
{x: 0, y: 1, w: 3},
{x: 3, y: 1, w: 3},
{x: 6, y: 1, w: 3},
{x: 9, y: 1, w: 3},
];
children.forEach((n, i) => {n.id = i; n.content = String(i)});

let grid = GridStack.init({
cellHeight: 80,
columnOpts: {
breakpoints: [
{ c: 8, w: 1200 },
{ c: 6, w: 996 },
{ c: 3, w: 768 },
{ c: 1, w: 480 },
],
layout: "list",
},
children})
.on('change', (ev, gsItems) => text.innerHTML = grid.getColumn());

let text = document.querySelector('#column-text');
text.innerHTML = grid.getColumn();
</script>
</body>
</html>
26 changes: 19 additions & 7 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@ export class GridStack {
protected _autoColumn?: boolean;
/** @internal meant to store the scale of the active grid */
protected dragTransform: DragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };
protected responseLayout: ColumnOptions;
private _skipInitialResize: boolean;

/**
Expand Down Expand Up @@ -338,7 +339,7 @@ export class GridStack {
opts = Utils.defaults(opts, defaults);
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)
// Now check if we're loading into !12 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
this.checkDynamicColumn();
this._updateColumnVar(opts);

Expand Down Expand Up @@ -713,7 +714,16 @@ export class GridStack {
let maxColumn = 0;
items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w) });
if (maxColumn > this.engine.defaultColumn) this.engine.defaultColumn = maxColumn;
if (maxColumn > column) this.engine.cacheLayout(items, maxColumn, true);
if (maxColumn > column) {
// if we're loading (from empty) into a smaller column, check for special responsive layout
if (this.engine.nodes.length === 0 && this.responseLayout) {
this.engine.nodes = items;
this.engine.columnChanged(maxColumn, column, this.responseLayout);
items = this.engine.nodes;
this.engine.nodes = [];
delete this.responseLayout;
} else this.engine.cacheLayout(items, maxColumn, true);
}

// if given a different callback, temporally set it as global option so creating will use it
const prevCB = GridStack.addRemoveCB;
Expand Down Expand Up @@ -948,16 +958,18 @@ export class GridStack {

const oldColumn = this.getColumn();
this.opts.column = column;
if (!this.engine) return this; // called in constructor, noting else to do
if (!this.engine) {
// called in constructor, noting else to do but remember that breakpoint layout
this.responseLayout = layout;
return this;
}

this.engine.column = column;
this.el.classList.remove('gs-' + oldColumn);
this._updateColumnVar();

// update the items now, checking if we have a custom children layout
/*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
if (newChildren) this.load(newChildren);
else*/ this.engine.columnChanged(oldColumn, column, layout);
// update the items now
this.engine.columnChanged(oldColumn, column, layout);
if (this._isAutoCellHeight) this.cellHeight();

this.resizeToContentCheck(true); // wait for width resizing
Expand Down