Method addWidget

src/gridstack.ts:432–467

* add a new widget and returns it. * * Widget will be always placed even if result height is more than actual grid height. * You need to use `willItFit()` before calling addWidget for additional check. * See also `makeWidget(el)` for DOM element. * * @example * const grid = Grid

(w: GridStackWidget)

   * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
   */
  public addWidget(w: GridStackWidget): GridItemHTMLElement {
    if (!w) return;
    if (typeof w === 'string') { console.error('V11: GridStack.addWidget() does not support string anymore. see #2736'); return; }
    if ((w as HTMLElement).ELEMENT_NODE) { console.error('V11: GridStack.addWidget() does not support HTMLElement anymore. use makeWidget()'); return this.makeWidget(w as HTMLElement); }

    let el: GridItemHTMLElement;
    let node: GridStackNode = w;
    node.grid = this;
    if (node.el) {
      el = node.el; // re-use element stored in the node
    } else if (GridStack.addRemoveCB) {
      el = GridStack.addRemoveCB(this.el, w, true, false);
    } else {
      el = this.createWidgetDivs(node);
    }

    if (!el) return;

    // if the caller ended up initializing the widget in addRemoveCB, or we stared with one already, skip the rest
    node = el.gridstackNode;
    if (node && el.parentElement === this.el && this.engine.nodes.find(n => n._id === node._id)) return el;

    // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
    // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
    // So make sure we load any DOM attributes that are not specified in passed in options (which override)
    const domAttr = this._readAttr(el);
    Utils.defaults(w, domAttr);
    this.engine.prepareNode(w);
    // this._writeAttr(el, w); why write possibly incorrect values back when makeWidget() will ?

    this.el.appendChild(el);

    this.makeWidget(el, w);

    return el;
  }

  /**
   * Create the default grid item divs and content (possibly lazy loaded) by using GridStack.renderCB().