Merge pull request #2968 from adumesny/master

Util to GridStack.createWidgetDivs() move

Author: adumesny

README.md

@@ -480,7 +480,7 @@ GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
 };
 ```
 * V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks.
-* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`Util.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
+* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`GridStack.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
 
 **Potential breaking change:**
 

demo/sizeToContent.html

@@ -109,7 +109,7 @@ <h1>sizeToContent options demo</h1>
       grid.addWidget({content: `<div>New: ${text}</div>`});
     }
     function makeWidget() {
-      let el = GridStack.Utils.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
+      let el = GridStack.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
       grid.makeWidget(el, {w:2});
     }
     function more() {

demo/two.html

@@ -107,7 +107,7 @@ <h1>Two grids demo</h1>
     // clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used.
     function myClone(el) {
       if (el.getAttribute('gs-id') === 'manual') {
-        return GridStack.Utils.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called
+        return GridStack.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called
       }
       el = el.cloneNode(true);
       // el.setAttribute('gs-id', 'foo'); // help debug #2231

doc/CHANGES.md

@@ -127,7 +127,8 @@ Change log
 * fix: [#2955](https://github.com/gridstack/gridstack.js/issues/2955) angular circular dependency
 * fix: [#2951](https://github.com/gridstack/gridstack.js/issues/2951) shadow DOM dragging re-appending fix
 * fix: [#2964](https://github.com/gridstack/gridstack.js/pull/2964) minW larger than column fix
-* feat: [#2965](https://github.com/gridstack/gridstack.js/pull/2965) internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside griditem divs are always created for content)
+* feat: [#2965](https://github.com/gridstack/gridstack.js/pull/2965) internal `_prepareDragDropByNode(n)` is now public as `prepareDragDrop(el)` so Angular, React, and others can call once the DOM content elements have been added (the outside grid item divs are always created before content)
+* break: [#2959](https://github.com/gridstack/gridstack.js/issues/2959) `Util.createWidgetDivs()` has moved to `GridStack.createWidgetDivs()` to remove circular dependencies
 
 ## 11.3.0 (2025-01-26)
 * feat: added `isIgnoreChangeCB()` if changeCB should be ignored due to column change, sizeToContent, loading, etc...

src/gridstack.ts

@@ -173,6 +173,26 @@ export class GridStack {
     return grid;
   }
 
+  /** 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);
+
+    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);
+          n.grid?.prepareDragDrop(n.el);
+        }});
+        window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes
+      }
+    } else GridStack.renderCB(cont, n);
+
+    return el;
+  }
+
   /** call this method to register your engine instead of the default one.
    * See instead `GridStackOptions.engineClass` if you only need to
    * replace just one instance.
@@ -467,7 +487,7 @@ export class GridStack {
     } else if (GridStack.addRemoveCB) {
       el = GridStack.addRemoveCB(this.el, w, true, false);
     } else {
-      el = Utils.createWidgetDivs(this.opts.itemClass, node);
+      el = GridStack.createWidgetDivs(this.opts.itemClass, node);
     }
 
     if (!el) return;

src/utils.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license
  */
 
-import { GridStack } from './gridstack';
 import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types';
 
 export interface HeightData {
@@ -115,26 +114,6 @@ export class Utils {
     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);
-
-    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);
-          n.grid?.prepareDragDrop(n.el);
-        }});
-        window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes
-      }
-    } else GridStack.renderCB(cont, n);
-
-    return el;
-  }
-
   /** create a div with the given classes */
   static createDiv(classes: string[], parent?: HTMLElement): HTMLElement {
     const el = document.createElement('div');