Skip to content

Commit f7f3e48

Browse files
adumesnyadumesny
authored
Merge pull request #2940 from adumesny/master
custom drag handle + lazyLoad fix
2 parents 1ff5040 + 2b63bab commit f7f3e48

File tree

6 files changed

+40
-22
lines changed

6 files changed

+40
-22
lines changed

‎demo/demo.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@ h1 {
5353
text-align: center;
5454
background-color: #18bc9c;
5555
}
56+
57+
.card-header {
58+
margin: 0;
59+
cursor: move;
60+
min-height: 25px;
61+
background-color: #16af91;
62+
}
63+
.card-header:hover {
64+
background-color: #149b80;
65+
}
66+
5667
.ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content {
5768
background-color: #777;
5869
}

‎demo/lazy_load.html

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,36 @@
88

99
<link rel="stylesheet" href="demo.css"/>
1010
<script src="../dist/gridstack-all.js"></script>
11-
1211
</head>
1312
<body>
1413
<div>
15-
<h1>Lazy loading demo</h1>
14+
<h1>Lazy loading + renderCB demo</h1>
1615
<p>New V11 GridStackWidget.lazyLoad feature. open console and see widget content (or angular components) created as they become visible.</p>
1716
<div style="height: 300px; overflow-y: auto">
1817
<div class="grid-stack"></div>
1918
</div>
2019
</div>
2120
<script type="text/javascript">
22-
// print when widgets are created
21+
// print when widgets are created, verify dragging by newly added content
2322
GridStack.renderCB = function(el, w) {
24-
el.textContent = w.content;
23+
const title = document.createElement('h3');
24+
title.textContent = 'Drag me by title';
25+
title.className = 'card-header';
26+
el.appendChild(title);
27+
const div = document.createElement('div');
28+
div.textContent = w.id;
29+
el.appendChild(div);
2530
console.log('created node id ', w.id);
2631
};
32+
2733
let children = [];
2834
for (let y = 0; y <= 5; y++) children.push({x:0, y, id:String(y), content: String(y)});
35+
2936
let grid = GridStack.init({
3037
cellHeight: 200,
3138
children,
3239
lazyLoad: true, // delay creation until visible
40+
handle: '.card-header',
3341
});
3442
</script>
3543
</body>

‎demo/title_drag.html

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,6 @@
88

99
<link rel="stylesheet" href="demo.css"/>
1010
<script src="../dist/gridstack-all.js"></script>
11-
<style type="text/css">
12-
.card-header {
13-
cursor: move;
14-
min-height: 25px;
15-
}
16-
.card-header:hover {
17-
background-color: rgba(0,0,0,0.1);
18-
}
19-
.card {
20-
text-align: left;
21-
}
22-
</style>
23-
2411
</head>
2512
<body>
2613
<div class="container-fluid">

‎doc/CHANGES.md

Lines changed: 5 additions & 0 deletions
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+
- [11.3.0-dev (TBD)](#1130-dev-tbd)
89
- [11.3.0 (2025-01-26)](#1130-2025-01-26)
910
- [11.2.0 (2024-12-29)](#1120-2024-12-29)
1011
- [11.1.2 (2024-12-08)](#1112-2024-12-08)
@@ -120,6 +121,10 @@ Change log
120121

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

124+
## 11.3.0-dev (TBD)
125+
* fix: [#2921](https://github.com/gridstack/gridstack.js/pull/2921) replace initMouseEvent with MouseEvent constructor and added composed: true
126+
* fix: [#2939](https://github.com/gridstack/gridstack.js/issues/2939) custom drag handle not working with LazyLoad
127+
123128
## 11.3.0 (2025-01-26)
124129
* feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...
125130
* feat: added `responsive_none.html` demo and fixed layout:'none' to bound check the layout (no-op unless it must change)

‎src/gridstack.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1697,7 +1697,8 @@ export class GridStack {
16971697
sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
16981698
if (sizeToContent) this.resizeToContentCheck(false, node);
16991699

1700-
this._prepareDragDropByNode(node);
1700+
if (!Utils.lazyLoad(node)) this._prepareDragDropByNode(node);
1701+
17011702
return this;
17021703
}
17031704

‎src/utils.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,18 +110,24 @@ export class Utils {
110110
return els;
111111
}
112112

113+
/** true if widget (or grid) makes this item lazyLoad */
114+
static lazyLoad(n: GridStackNode): boolean {
115+
return n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
116+
}
117+
113118
/** create the default grid item divs, and content possibly lazy loaded calling GridStack.renderCB */
114119
static createWidgetDivs(itemClass: string, n: GridStackNode): HTMLElement {
115120
const el = Utils.createDiv(['grid-stack-item', itemClass]);
116121
const cont = Utils.createDiv(['grid-stack-item-content'], el);
117122

118-
const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
119-
if (lazyLoad) {
123+
if (Utils.lazyLoad(n)) {
120124
if (!n.visibleObservable) {
121125
n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {
122126
n.visibleObservable?.disconnect();
123127
delete n.visibleObservable;
124-
GridStack.renderCB(cont, n)
128+
GridStack.renderCB(cont, n);
129+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
130+
(n.grid as any)?._prepareDragDropByNode(n); // access protected method. TODO: do we expose that for React to call too (after dom is ready)
125131
}});
126132
window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes
127133
}
@@ -582,7 +588,7 @@ export class Utils {
582588
button: 0,
583589
relatedTarget: e.target
584590
});
585-
591+
586592
(target || e.target).dispatchEvent(simulatedEvent);
587593
}
588594

0 commit comments

Comments
 (0)