Method createWidgetDivs

src/gridstack.ts:478–495

* Create the default grid item divs and content (possibly lazy loaded) by using GridStack.renderCB(). * * @param n GridStackNode definition containing widget configuration * @returns the created HTML element with proper grid item structure * * @example * const element = grid.create

(n: GridStackNode)

   * const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' });
   */
  public createWidgetDivs(n: GridStackNode): HTMLElement {
    const el = Utils.createDiv(['grid-stack-item', this.opts.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;
  }

  /**
   * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them