Merge pull request #2940 from adumesny/master

adumesny · web-flow · commit f7f3e48b6bac · 2025-02-08T13:05:43.000-08:00
custom drag handle + lazyLoad fix
diff --git a/demo/demo.css b/demo/demo.css
@@ -53,6 +53,17 @@ h1 {
   text-align: center;
   background-color: #18bc9c;
 }
+
+.card-header {
+  margin: 0;
+  cursor: move;
+  min-height: 25px;
+  background-color: #16af91;
+}
+.card-header:hover {
+  background-color: #149b80;
+}
+
 .ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content {
   background-color: #777;
 }
diff --git a/demo/lazy_load.html b/demo/lazy_load.html
@@ -8,28 +8,36 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack-all.js"></script>
-
 </head>
 <body>
   <div>
-    <h1>Lazy loading demo</h1>
+    <h1>Lazy loading + renderCB demo</h1>
     <p>New V11 GridStackWidget.lazyLoad feature. open console and see widget content (or angular components) created as they become visible.</p>
     <div style="height: 300px; overflow-y: auto">
       <div class="grid-stack"></div>
     </div>
   </div>
   <script type="text/javascript">
-    // print when widgets are created
+    // print when widgets are created, verify dragging by newly added content
     GridStack.renderCB = function(el, w) {
-      el.textContent = w.content;
+      const title = document.createElement('h3');
+      title.textContent = 'Drag me by title';
+      title.className = 'card-header';
+      el.appendChild(title);
+      const div = document.createElement('div');
+      div.textContent = w.id;
+      el.appendChild(div);
       console.log('created node id ', w.id);
     };
+
     let children = [];
     for (let y = 0; y <= 5; y++) children.push({x:0, y, id:String(y), content: String(y)});
+    
     let grid = GridStack.init({
       cellHeight: 200,
       children,
       lazyLoad: true,  // delay creation until visible
+      handle: '.card-header',
     });
   </script>
 </body>
diff --git a/demo/title_drag.html b/demo/title_drag.html
@@ -8,19 +8,6 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack-all.js"></script>
-  <style type="text/css">
-    .card-header {
-      cursor: move;
-      min-height: 25px;
-    }
-    .card-header:hover {
-      background-color: rgba(0,0,0,0.1);
-    }
-    .card {
-      text-align: left;
-    }
-  </style>
-
 </head>
 <body>
   <div class="container-fluid">
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [11.3.0-dev (TBD)](#1130-dev-tbd)
 - [11.3.0 (2025-01-26)](#1130-2025-01-26)
 - [11.2.0 (2024-12-29)](#1120-2024-12-29)
 - [11.1.2 (2024-12-08)](#1112-2024-12-08)
@@ -120,6 +121,10 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 11.3.0-dev (TBD)
+* fix: [#2921](https://github.com/gridstack/gridstack.js/pull/2921) replace initMouseEvent with MouseEvent constructor and added composed: true
+* fix: [#2939](https://github.com/gridstack/gridstack.js/issues/2939) custom drag handle not working with LazyLoad
+
 ## 11.3.0 (2025-01-26)
 * feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...
 * feat: added `responsive_none.html` demo and fixed layout:'none' to bound check the layout (no-op unless it must change)
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1697,7 +1697,8 @@ export class GridStack {
     sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
     if (sizeToContent) this.resizeToContentCheck(false, node);
 
-    this._prepareDragDropByNode(node);
+    if (!Utils.lazyLoad(node)) this._prepareDragDropByNode(node);
+
     return this;
   }
 
diff --git a/src/utils.ts b/src/utils.ts
@@ -110,18 +110,24 @@ export class Utils {
     return els;
   }
 
+  /** true if widget (or grid) makes this item lazyLoad */
+  static lazyLoad(n: GridStackNode): boolean {
+    return n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
+  }
+
   /** create the default grid item divs, and content possibly lazy loaded calling GridStack.renderCB */
   static createWidgetDivs(itemClass: string, n: GridStackNode): HTMLElement {
     const el = Utils.createDiv(['grid-stack-item', itemClass]);
     const cont = Utils.createDiv(['grid-stack-item-content'], el);
 
-    const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
-    if (lazyLoad) {
+    if (Utils.lazyLoad(n)) {
       if (!n.visibleObservable) {
         n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {
           n.visibleObservable?.disconnect();
           delete n.visibleObservable;
-          GridStack.renderCB(cont, n)
+          GridStack.renderCB(cont, n);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (n.grid as any)?._prepareDragDropByNode(n); // access protected method. TODO: do we expose that for React to call too (after dom is ready)
         }});
         window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes
       }
@@ -582,7 +588,7 @@ export class Utils {
       button: 0,
       relatedTarget: e.target
     });
-  
+
     (target || e.target).dispatchEvent(simulatedEvent);
   }
 

Original file line number	Diff line number	Diff line change
`@@ -1697,7 +1697,8 @@ export class GridStack {`
`1697`	`1697`	`sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');`
`1698`	`1698`	`if (sizeToContent) this.resizeToContentCheck(false, node);`
`1699`	`1699`
`1700`		`- this._prepareDragDropByNode(node);`
	`1700`	`+ if (!Utils.lazyLoad(node)) this._prepareDragDropByNode(node);`
	`1701`	`+`
`1701`	`1702`	`return this;`
`1702`	`1703`	`}`
`1703`	`1704`