gridstack 11.5.1 → 12.0.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 11.5.1
+ * GridStack 12.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -234,9 +234,9 @@ class GridStack {
         }
         opts = Utils.defaults(opts, defaults);
         this._initMargin(); // part of settings defaults...
-        // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
+        // Now check if we're loading into !12 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
         this.checkDynamicColumn();
-        this.el.classList.add('gs-' + opts.column);
+        this._updateColumnVar(opts);
         if (opts.rtl === 'auto') {
             opts.rtl = (el.style.direction === 'rtl');
         }
@@ -255,7 +255,7 @@ class GridStack {
         this._isAutoCellHeight = (opts.cellHeight === 'auto');
         if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
             // make the cell content square initially (will use resize/column event to keep it square)
-            this.cellHeight(undefined, false);
+            this.cellHeight(undefined);
         }
         else {
             // append unit if any are set
@@ -263,14 +263,14 @@ class GridStack {
                 opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
                 delete opts.cellHeightUnit;
             }
-            this.cellHeight(opts.cellHeight, false);
+            const val = opts.cellHeight;
+            delete opts.cellHeight; // force initial cellHeight() call to set the value
+            this.cellHeight(val);
         }
         // see if we need to adjust auto-hide
         if (opts.alwaysShowResizeHandle === 'mobile') {
             opts.alwaysShowResizeHandle = isTouch;
         }
-        this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
-        this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
         const engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
         this.engine = new engineClass({
@@ -278,8 +278,6 @@ class GridStack {
             float: opts.float,
             maxRow: opts.maxRow,
             onChange: (cbNodes) => {
-                let maxH = 0;
-                this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h); });
                 cbNodes.forEach(n => {
                     const el = n.el;
                     if (!el)
@@ -293,11 +291,9 @@ class GridStack {
                         this._writePosAttr(el, n);
                     }
                 });
-                this._updateStyles(false, maxH); // false = don't recreate, just append if need be
+                this._updateContainerHeight();
             }
         });
-        // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
-        this._updateStyles(false, 0);
         if (opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
             this.engine._loading = true; // loading collision check
@@ -312,7 +308,6 @@ class GridStack {
             if (children.length)
                 this.load(children); // don't load empty
         }
-        // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
         this.setAnimation();
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (opts.subGridDynamic && !DDManager.pauseDrag)
@@ -323,6 +318,11 @@ class GridStack {
         this._setupAcceptWidget();
         this._updateResizeEvent();
     }
+    _updateColumnVar(opts = this.opts) {
+        this.el.classList.add('gs-' + opts.column);
+        if (typeof opts.column === 'number')
+            this.el.style.setProperty('--gs-column-width', `${100 / opts.column}%`);
+    }
     /**
      * add a new widget and returns it.
      *
@@ -604,8 +604,18 @@ class GridStack {
         items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
         if (maxColumn > this.engine.defaultColumn)
             this.engine.defaultColumn = maxColumn;
-        if (maxColumn > column)
-            this.engine.cacheLayout(items, maxColumn, true);
+        if (maxColumn > column) {
+            // if we're loading (from empty) into a smaller column, check for special responsive layout
+            if (this.engine.nodes.length === 0 && this.responseLayout) {
+                this.engine.nodes = items;
+                this.engine.columnChanged(maxColumn, column, this.responseLayout);
+                items = this.engine.nodes;
+                this.engine.nodes = [];
+                delete this.responseLayout;
+            }
+            else
+                this.engine.cacheLayout(items, maxColumn, true);
+        }
         // if given a different callback, temporally set it as global option so creating will use it
         const prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
@@ -738,16 +748,15 @@ class GridStack {
      *
      * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
      * if pass 0 the CSS will be generated by the application instead.
-     * @param update (Optional) if false, styles will not be updated
      *
      * @example
      * grid.cellHeight(100); // same as 100px
      * grid.cellHeight('70px');
      * grid.cellHeight(grid.cellWidth() * 1.2);
      */
-    cellHeight(val, update = true) {
+    cellHeight(val) {
         // if not called internally, check if we're changing mode
-        if (update && val !== undefined) {
+        if (val !== undefined) {
             if (this._isAutoCellHeight !== (val === 'auto')) {
                 this._isAutoCellHeight = (val === 'auto');
                 this._updateResizeEvent();
@@ -768,10 +777,10 @@ class GridStack {
         }
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
+        // finally update var and container
+        this.el.style.setProperty('--gs-cell-height', `${this.opts.cellHeight}${this.opts.cellHeightUnit}`);
+        this._updateContainerHeight();
         this.resizeToContentCheck();
-        if (update) {
-            this._updateStyles(true); // true = force re-create for current # of rows
-        }
         return this;
     }
     /** Gets current cell width. */
@@ -825,8 +834,6 @@ class GridStack {
     /**
      * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
      * as well as cache the original layout so you can revert back to previous positions without loss.
-     * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
-     * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
      * @param column - Integer > 0 (default 12).
      * @param layout specify the type of re-layout that will happen (position, size, etc...).
      * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
@@ -836,15 +843,16 @@ class GridStack {
             return this;
         const oldColumn = this.getColumn();
         this.opts.column = column;
-        if (!this.engine)
-            return this; // called in constructor, noting else to do
+        if (!this.engine) {
+            // called in constructor, noting else to do but remember that breakpoint layout
+            this.responseLayout = layout;
+            return this;
+        }
         this.engine.column = column;
         this.el.classList.remove('gs-' + oldColumn);
-        this.el.classList.add('gs-' + column);
-        // update the items now, checking if we have a custom children layout
-        /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
-        if (newChildren) this.load(newChildren);
-        else*/ this.engine.columnChanged(oldColumn, column, layout);
+        this._updateColumnVar();
+        // update the items now
+        this.engine.columnChanged(oldColumn, column, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
         this.resizeToContentCheck(true); // wait for width resizing
@@ -878,14 +886,13 @@ class GridStack {
         this.setAnimation(false);
         if (!removeDOM) {
             this.removeAll(removeDOM);
-            this.el.classList.remove(this._styleSheetClass);
             this.el.removeAttribute('gs-current-row');
         }
         else {
             this.el.parentNode.removeChild(this.el);
         }
-        this._removeStylesheet();
-        delete this.parentGridNode?.subGrid;
+        if (this.parentGridNode)
+            delete this.parentGridNode.subGrid;
         delete this.parentGridNode;
         delete this.opts;
         delete this._placeholder?.gridstackNode;
@@ -967,8 +974,8 @@ class GridStack {
      */
     makeWidget(els, options) {
         const el = GridStack.getElement(els);
-        if (!el)
-            return;
+        if (!el || el.gridstackNode)
+            return el;
         if (!el.parentElement)
             this.el.appendChild(el);
         this._prepareElement(el, true, options);
@@ -1159,7 +1166,7 @@ class GridStack {
         if (o.animate !== undefined)
             this.setAnimation();
         if (o.cellHeight) {
-            this.cellHeight(o.cellHeight, true);
+            this.cellHeight(o.cellHeight);
             delete o.cellHeight;
         }
         if (o.class && o.class !== opts.class) {
@@ -1230,8 +1237,7 @@ class GridStack {
                     // restore any sub-grid back
                     if (n.subGrid?.el) {
                         itemContent.appendChild(n.subGrid.el);
-                        if (!n.subGrid.opts.styleInHead)
-                            n.subGrid._updateStyles(true); // force create
+                        n.subGrid._updateContainerHeight();
                     }
                 }
                 delete w.content;
@@ -1390,7 +1396,7 @@ class GridStack {
      */
     margin(value) {
         const isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);
-        // check if we can skip re-creating our CSS file... won't check if multi values (too much hassle)
+        // check if we can skip... won't check if multi values (too much hassle)
         if (!isMultiValue) {
             const data = Utils.parseHeight(value);
             if (this.opts.marginUnit === data.unit && this.opts.margin === data.h)
@@ -1400,7 +1406,6 @@ class GridStack {
         this.opts.margin = value;
         this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;
         this._initMargin();
-        this._updateStyles(true); // true = force re-create
         return this;
     }
     /** returns current margin number value (undefined if 4 sides don't match) */
@@ -1475,74 +1480,6 @@ class GridStack {
         this.el.dispatchEvent(event);
         return this;
     }
-    /** @internal called to delete the current dynamic style sheet used for our layout */
-    _removeStylesheet() {
-        if (this._styles) {
-            const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            Utils.removeStylesheet(this._styleSheetClass, styleLocation);
-            delete this._styles;
-        }
-        return this;
-    }
-    /** @internal updated/create the CSS styles for row based layout and initial margin setting */
-    _updateStyles(forceUpdate = false, maxH) {
-        // call to delete existing one if we change cellHeight / margin
-        if (forceUpdate) {
-            this._removeStylesheet();
-        }
-        if (maxH === undefined)
-            maxH = this.getRow();
-        this._updateContainerHeight();
-        // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
-        if (this.opts.cellHeight === 0) {
-            return this;
-        }
-        const cellHeight = this.opts.cellHeight;
-        const cellHeightUnit = this.opts.cellHeightUnit;
-        const prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`;
-        // create one as needed
-        if (!this._styles) {
-            // insert style to parent (instead of 'head' by default) to support WebComponent
-            const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {
-                nonce: this.opts.nonce,
-            });
-            if (!this._styles)
-                return this;
-            this._styles._max = 0;
-            // these are done once only
-            Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`);
-            // content margins
-            const top = this.opts.marginTop + this.opts.marginUnit;
-            const bottom = this.opts.marginBottom + this.opts.marginUnit;
-            const right = this.opts.marginRight + this.opts.marginUnit;
-            const left = this.opts.marginLeft + this.opts.marginUnit;
-            const content = `${prefix} > .grid-stack-item-content`;
-            const placeholder = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
-            Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
-            Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
-            // resize handles offset (to match margin)
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}; top: ${top}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}; top: ${top}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`, `left: ${left}`);
-            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);
-        }
-        // now update the height specific fields
-        maxH = maxH || this._styles._max;
-        if (maxH > this._styles._max) {
-            const getHeight = (rows) => (cellHeight * rows) + cellHeightUnit;
-            for (let i = this._styles._max + 1; i <= maxH; i++) { // start at 1
-                Utils.addCSSRule(this._styles, `${prefix}[gs-y="${i}"]`, `top: ${getHeight(i)}`);
-                Utils.addCSSRule(this._styles, `${prefix}[gs-h="${i + 1}"]`, `height: ${getHeight(i + 1)}`); // start at 2
-            }
-            this._styles._max = maxH;
-        }
-        return this;
-    }
     /** @internal */
     _updateContainerHeight() {
         if (!this.engine || this.engine.batchMode)
@@ -1594,14 +1531,19 @@ class GridStack {
             this.prepareDragDrop(node.el);
         return this;
     }
-    /** @internal call to write position x,y,w,h attributes back to element */
+    /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */
     _writePosAttr(el, n) {
-        if (n.x !== undefined && n.x !== null) {
-            el.setAttribute('gs-x', String(n.x));
-        }
-        if (n.y !== undefined && n.y !== null) {
-            el.setAttribute('gs-y', String(n.y));
-        }
+        // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
+        if ((!n._moving && !n._resizing) || this._placeholder === el) {
+            // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
+            el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null;
+            el.style.left = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
+            el.style.width = n.w > 1 ? `calc(${n.w} * var(--gs-column-width))` : null;
+            el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null;
+        }
+        // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS
+        n.x > 0 ? el.setAttribute('gs-x', String(n.x)) : el.removeAttribute('gs-x');
+        n.y > 0 ? el.setAttribute('gs-y', String(n.y)) : el.removeAttribute('gs-y');
         n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
         n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
         return this;
@@ -1807,42 +1749,27 @@ class GridStack {
             margin = this.opts.margin = data.h;
         }
         // see if top/bottom/left/right need to be set as well
-        if (this.opts.marginTop === undefined) {
-            this.opts.marginTop = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginTop);
-            this.opts.marginTop = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginBottom === undefined) {
-            this.opts.marginBottom = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginBottom);
-            this.opts.marginBottom = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginRight === undefined) {
-            this.opts.marginRight = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginRight);
-            this.opts.marginRight = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginLeft === undefined) {
-            this.opts.marginLeft = margin;
-        }
-        else {
-            data = Utils.parseHeight(this.opts.marginLeft);
-            this.opts.marginLeft = data.h;
-            delete this.opts.margin;
-        }
+        const keys = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
+        keys.forEach(k => {
+            if (this.opts[k] === undefined) {
+                this.opts[k] = margin;
+            }
+            else {
+                data = Utils.parseHeight(this.opts[k]);
+                this.opts[k] = data.h;
+                delete this.opts.margin;
+            }
+        });
         this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead...
         if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {
             this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()
         }
+        // finally Update the CSS margin variables (inside the cell height) */
+        const style = this.el.style;
+        style.setProperty('--gs-item-margin-top', `${this.opts.marginTop}${this.opts.marginUnit}`);
+        style.setProperty('--gs-item-margin-bottom', `${this.opts.marginBottom}${this.opts.marginUnit}`);
+        style.setProperty('--gs-item-margin-right', `${this.opts.marginRight}${this.opts.marginUnit}`);
+        style.setProperty('--gs-item-margin-left', `${this.opts.marginLeft}${this.opts.marginUnit}`);
         return this;
     }
     /* ===========================================================================================
@@ -2252,8 +2179,6 @@ class GridStack {
                 this.resizeToContentCheck(false, node);
                 if (subGrid) {
                     subGrid.parentGridNode = node;
-                    if (!subGrid.opts.styleInHead)
-                        subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
                 }
                 this._updateContainerHeight();
             }
@@ -2344,6 +2269,7 @@ class GridStack {
                 this.placeholder.remove();
                 delete this.placeholder.gridstackNode;
                 delete node._moving;
+                delete node._resizing;
                 delete node._event;
                 delete node._lastTried;
                 const widthChanged = node.w !== node._orig.w;
@@ -2436,6 +2362,7 @@ class GridStack {
         node._lastUiPosition = ui.position;
         node._prevYPix = ui.position.top;
         node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)
+        node._resizing = (event.type === 'resizestart');
         delete node._lastTried;
         if (event.type === 'dropover' && node._temporaryRemoved) {
             // console.log('engine.addNode x=' + node.x); // TEST
@@ -2596,6 +2523,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '11.5.1';
+GridStack.GDRev = '12.0.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map