Method constructor

src/gridstack.ts:266–412

* Construct a grid item from the given element and options * @param el the HTML element tied to this grid after it's been initialized * @param opts grid options - public for classes to access, but use methods to modify!

(public el: GridHTMLElement, public opts: GridStackOptions = {})

   * @param opts grid options - public for classes to access, but use methods to modify!
   */
  public constructor(public el: GridHTMLElement, public opts: GridStackOptions = {}) {
    el.gridstack = this;
    this.opts = opts = opts || {}; // handles null/undefined/0

    if (!el.classList.contains('grid-stack')) {
      this.el.classList.add('grid-stack');
    }

    // if row property exists, replace minRow and maxRow instead
    if (opts.row) {
      opts.minRow = opts.maxRow = opts.row;
      delete opts.row;
    }
    const rowAttr = Utils.toNumber(el.getAttribute('gs-row'));

    // flag only valid in sub-grids (handled by parent, not here)
    if (opts.column === 'auto') {
      delete opts.column;
    }
    // save original setting so we can restore on save
    if (opts.alwaysShowResizeHandle !== undefined) {
      (opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
    }

    // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
    const resp = opts.columnOpts;
    if (resp) {
      const bk = resp.breakpoints;
      if (!resp.columnWidth && !bk?.length) {
        delete opts.columnOpts;
      } else {
        resp.columnMax = resp.columnMax || 12;
        if (bk?.length > 1) bk.sort((a, b) => (b.w || 0) - (a.w || 0));
      }
    }

    // elements DOM attributes override any passed options (like CSS style) - merge the two together
    const defaults: GridStackOptions = {
      ...Utils.cloneDeep(gridDefaults),
      column: Utils.toNumber(el.getAttribute('gs-column')) || gridDefaults.column,
      minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow,
      maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || gridDefaults.maxRow,
      staticGrid: Utils.toBool(el.getAttribute('gs-static')) || gridDefaults.staticGrid,
      sizeToContent: Utils.toBool(el.getAttribute('gs-size-to-content')) || undefined,
      draggable: {
        handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle,
      },
      removableOptions: {
        accept: opts.itemClass || gridDefaults.removableOptions.accept,
        decline: gridDefaults.removableOptions.decline
      },
    };
    if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
      defaults.animate = Utils.toBool(el.getAttribute('gs-animate'))
    }

    opts = Utils.defaults(opts, defaults);
    this._initMargin(); // part of settings defaults...