Skip to content

Commit d9e575b

Browse files
adumesnyadumesny
committed
sizeToContent fixes (animation, DOM init, cleanup)
* fix #2552 where dom init wasn't calling sizeToContent Also: * fixed drag&drop not calling size either * prevent animation when loading (from empty) and when replacing placeholder with actual content (helps in sizeToContent) * resizeToContent() no longer use dic sizing (only node.h) so we rarely have to delay for animation (only when column widget changes) * bunch of renames (internal) to make cleaner. *** POSSIBLE BREAK (unlikely) * ResizeToContentFcn doesn't take optional useAttr arg anymore
1 parent 753dd38 commit d9e575b

File tree

5 files changed

+130
-75
lines changed

5 files changed

+130
-75
lines changed

‎demo/sizeToContent.html‎

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,21 @@
1313
.grid-stack-item-content {
1414
text-align: unset;
1515
}
16+
.sidebar.inline {
17+
width: fit-content;
18+
height: fit-content;
19+
display: inline-block;
20+
padding: 0;
21+
}
1622
</style>
1723
</head>
1824
<body>
1925
<div class="container">
20-
<h1>Cell sizeToContent options demo</h1>
21-
<p>new 9.x feature that size the items to fit their content height as to not have scroll bars
22-
(unless `sizeToContent:false` in C: case). Defaulting to different initial size (see code) to show grow/shrink behavior.</p>
26+
<h1>sizeToContent options demo</h1>
27+
<p>New 9.x feature that size the items to fit their content height as to not have scroll bars
28+
<br>case C: `sizeToContent:false` to turn off.
29+
<br>case E: has soft maxsize `sizeToContent:3`, shrinking to smaller content as needed
30+
<br>Defaulting to different initial size (see code) to show grow/shrink behavior</p>
2331
<div>
2432
<a onClick="clearGrid()" class="btn btn-primary" href="#">clear</a>
2533
<a onClick="load()" class="btn btn-primary" href="#">load</a>
@@ -32,31 +40,52 @@ <h1>Cell sizeToContent options demo</h1>
3240
<a onClick="cellHeight(75)" class="btn btn-primary" href="#">75</a>
3341
Widget:
3442
<a onClick="addWidget()" class="btn btn-primary" href="#">Add</a>
35-
<a onClick="makeWidget()" class="btn btn-primary" href="#">Make</a>
43+
<a onClick="makeWidget()" class="btn btn-primary" href="#">Make w:2</a>
44+
<div class="sidebar inline">
45+
<div class="grid-stack-item" gs-w="2" gs-h="3">
46+
<div class="grid-stack-item-content"><div>Insert me 2x3</div></div>
47+
</div>
48+
</div>
3649
</div>
3750
<br>
38-
<div class="grid-stack"></div>
51+
<div id="grid1"></div>
52+
<p>from DOM test:</p>
53+
<div id="grid2">
54+
<div class="grid-stack-item" gs-x="11" gs-y="0" gs-h="4">
55+
<div class="grid-stack-item-content">
56+
<div>DOM: h:4 sized down</div>
57+
</div>
58+
</div>
59+
</div>
60+
3961
</div>
4062
<script type="text/javascript">
41-
let opts = {
42-
margin: 5,
43-
cellHeight: 50,
44-
sizeToContent: true, // default to make them all fit
45-
resizable: { handles: 'all'} // do all sides for testing
46-
// cellHeightThrottle: 100, // ms before sizeToContent happens
47-
}
48-
let grid = GridStack.init(opts);
4963
let text ='some very large content that will normally not fit in the window.'
5064
text = text + text;
5165
let count = 0;
5266
let items = [
67+
// {x:0, y:0, w:2, h:3, sizeToContent: false, content: `<div>A no h: ${text}</div>`},
5368
{x:0, y:0, w:2, content: `<div>A no h: ${text}</div>`},
5469
{x:2, y:0, w:1, h:2, content: '<div>B: shrink h=2</div>'}, // make taller than needed upfront
5570
{x:3, y:0, w:2, sizeToContent: false, content: `<div>C: WILL SCROLL. ${text}</div>`}, // prevent this from fitting testing
5671
{x:0, y:1, w:3, content: `<div>D no h: ${text} ${text}</div>`},
57-
{x:3, y:1, w:2, sizeToContent:3, content: `<div>E sizeToContent=3 <button onClick="more()">more</button><button onClick="less()">less</button><div id="dynContent">${text} ${text} ${text}</div></div>`} ];
72+
{x:3, y:1, w:2, sizeToContent:3, content: `<div>E sizeToContent=3 <button onClick="more()">more</button><button onClick="less()">less</button><div id="dynContent">${text} ${text} ${text}</div></div>`},
73+
];
5874
items.forEach(n => n.id = String(count++));
59-
grid.load(items);
75+
let opts = {
76+
margin: 5,
77+
cellHeight: 50,
78+
sizeToContent: true, // default to make them all fit
79+
resizable: { handles: 'all'}, // do all sides for testing
80+
acceptWidgets: true,
81+
// cellHeightThrottle: 100, // ms before sizeToContent happens
82+
// children: items, // test loading first
83+
}
84+
let grid = GridStack.init(opts, '#grid1');
85+
grid.load(items); // test loading after
86+
GridStack.init({...opts, children:undefined}, '#grid2');
87+
88+
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
6089

6190
function clearGrid() {
6291
grid.removeAll();
@@ -78,7 +107,7 @@ <h1>Cell sizeToContent options demo</h1>
78107
doc.body.innerHTML = `<div class="item"><div class="grid-stack-item-content"><div>New Make: ${text}</div></div></div>`;
79108
let el = doc.body.children[0];
80109
grid.el.appendChild(el);
81-
grid.makeWidget(el);
110+
grid.makeWidget(el, {w:2});
82111
}
83112
function more() {
84113
let cont = document.getElementById('dynContent');

‎doc/CHANGES.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8+
- [10.0.0-dev (TBD)](#1000-dev-tbd)
89
- [10.0.0 (2023-11-20)](#1000-2023-11-20)
910
- [9.5.1 (2023-11-11)](#951-2023-11-11)
1011
- [9.5.0 (2023-10-26)](#950-2023-10-26)
@@ -105,13 +106,20 @@ Change log
105106

106107
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
107108

109+
## 10.0.0-dev (TBD)
110+
* fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent
111+
* fix: issues with sizeToContent and animation, cleanup, etc...
112+
* fix: [#2558](https://github.com/gridstack/gridstack.js/pull/2558) remove style node in shadow root
113+
* fix: [#2556](https://github.com/gridstack/gridstack.js/pull/2556) make sure 'new GridStack(el)' set el.gridstack=this right away
114+
* cleanup: [#2550](https://github.com/gridstack/gridstack.js/pull/2550) Optimize resize arrow (~88% lighter from 1.82 KB to 225B)
115+
108116
## 10.0.0 (2023-11-20)
109117
* feat [#2542](https://github.com/gridstack/gridstack.js/pull/2542) we now support much richer responsive behavior with `GridStackOptions.columnOpts` including any breakpoint width:column pairs, or automatic column sizing.
110118
* `disableOneColumnMode`, `oneColumnSize`, `oneColumnModeDomSort` have been removed (see v10 migration doc)
111119

112120
## 9.5.1 (2023-11-11)
113121
* fix [#2525](https://github.com/gridstack/gridstack.js/commit/2525) Fixed unhandled exception happening in _mouseMove handler
114-
* fix potential crash in doContentResize() if grid gets deleted by the time the delay happens
122+
* fix potential crash in resizeToContentCheck() if grid gets deleted by the time the delay happens
115123
* fix [#2527](https://github.com/gridstack/gridstack.js/issues/2527) Incorrect layout on grid load in one column mode
116124
* fix [#2496](https://github.com/gridstack/gridstack.js/issues/2496) animation on init, introduced in 8.1.1
117125

‎doc/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ gridstack.js API
5353
- [`isAreaEmpty(x, y, width, height)`](#isareaemptyx-y-width-height)
5454
- [`load(layout: GridStackWidget[], boolean | ((w: GridStackWidget, add: boolean) => void) = true)`](#loadlayout-gridstackwidget-boolean--w-gridstackwidget-add-boolean--void---true)
5555
- [`makeWidget(el)`](#makewidgetel)
56-
- [`makeSubgrid(el)`](#makesubgridel)
56+
- [`makeSubGrid(el)`](#makesubgridel)
5757
- [`margin(value: numberOrString)`](#marginvalue-numberorstring)
5858
- [`movable(el, val)`](#movableel-val)
5959
- [`removeWidget(el, removeDOM = true, triggerEvent = true)`](#removewidgetel-removedom--true-triggerevent--true)

0 commit comments

Comments
 (0)