gridstack 9.5.0 → 10.0.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 9.5.0
+ * GridStack 10.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -17,7 +17,6 @@ import { gridDefaults, dragInDefaultOptions } from './types';
 import { DDGridStack } from './dd-gridstack';
 import { isTouch } from './dd-touch';
 import { DDManager } from './dd-manager';
-/** global instance */
 const dd = new DDGridStack;
 // export all dependent file as well to make it easier for users to just import the main file
 export * from './types';
@@ -175,6 +174,41 @@ class GridStack {
         if (opts.alwaysShowResizeHandle !== undefined) {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
+        let bk = opts.columnOpts?.breakpoints;
+        // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
+        const oldOpts = opts;
+        if (oldOpts.oneColumnModeDomSort) {
+            delete oldOpts.oneColumnModeDomSort;
+            console.log('Error: Gridstack oneColumnModeDomSort no longer supported. Check GridStackOptions.columnOpts instead.');
+        }
+        if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {
+            const oneSize = oldOpts.oneColumnSize || 768;
+            delete oldOpts.oneColumnSize;
+            delete oldOpts.disableOneColumnMode;
+            opts.columnOpts = opts.columnOpts || {};
+            bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];
+            let oneColumn = bk.find(b => b.c === 1);
+            if (!oneColumn) {
+                oneColumn = { c: 1, w: oneSize };
+                bk.push(oneColumn, { c: 12, w: oneSize + 1 });
+            }
+            else
+                oneColumn.w = oneSize;
+        }
+        //...end LEGACY
+        // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)
+        const resp = opts.columnOpts;
+        if (resp) {
+            if (!resp.columnWidth && !resp.breakpoints?.length) {
+                delete opts.columnOpts;
+                bk = undefined;
+            }
+            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
         let defaults = { ...Utils.cloneDeep(gridDefaults),
             column: Utils.toNumber(el.getAttribute('gs-column')) || gridDefaults.column,
@@ -196,10 +230,7 @@ class GridStack {
         opts = null; // make sure we use this.opts instead
         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)
-        if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {
-            this._prevColumn = this.getColumn();
-            this.opts.column = 1;
-        }
+        this.checkDynamicColumn();
         if (this.opts.rtl === 'auto') {
             this.opts.rtl = (el.style.direction === 'rtl');
         }
@@ -380,7 +411,7 @@ class GridStack {
         if (ops.column === 'auto') {
             autoColumn = true;
             ops.column = Math.max(node.w || 1, nodeToAdd?.w || 1);
-            ops.disableOneColumnMode = true; // driven by parent
+            delete ops.columnOpts; // driven by parent
         }
         // if we're converting an existing full item, move over the content to be the first sub item in the new grid
         let content = node.el.querySelector('.grid-stack-item-content');
@@ -516,7 +547,6 @@ class GridStack {
             }
             if (this._autoColumn) {
                 o.column = 'auto';
-                delete o.disableOneColumnMode;
             }
             const origShow = o._alwaysShowResizeHandle;
             delete o._alwaysShowResizeHandle;
@@ -544,16 +574,17 @@ class GridStack {
      */
     load(items, addRemove = GridStack.addRemoveCB || true) {
         items = Utils.cloneDeep(items); // so we can mod
-        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order
+        const column = this.getColumn();
+        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else keep widget order
         const haveCoord = items.some(w => w.x !== undefined || w.y !== undefined);
         if (haveCoord)
-            items = Utils.sort(items, -1, this._prevColumn || this.getColumn());
+            items = Utils.sort(items, -1, column);
         this._insertNotAppend = haveCoord; // if we create in reverse order...
-        // if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
+        // if we're loading a layout into for example 1 column and items don't fit, make sure to save
         // the original wanted layout so we can scale back up correctly #1471
-        if (this._prevColumn && this._prevColumn !== this.opts.column && items.some(n => ((n.x || 0) + n.w) > this.opts.column)) {
+        if (items.some(n => ((n.x || 0) + (n.w || 1)) > column)) {
             this._ignoreLayoutsNodeChange = true; // skip layout update
-            this.engine.cacheLayout(items, this._prevColumn, true);
+            this.engine.cacheLayout(items, 12, true); // TODO: 12 is arbitrary. use max value in layout ?
         }
         // if given a different callback, temporally set it as global option so creating will use it
         const prevCB = GridStack.addRemoveCB;
@@ -594,6 +625,7 @@ class GridStack {
                 if (Utils.shouldSizeToContent(item))
                     w.h = item.h;
                 // check if missing coord, in which case find next empty slot with new (or old if missing) sizes
+                this.engine.nodeBoundFix(w); // before widthChanged is checked below...
                 if (w.autoPosition || w.x === undefined || w.y === undefined) {
                     w.w = w.w || item.w;
                     w.h = w.h || item.h;
@@ -604,7 +636,6 @@ class GridStack {
                 this.engine.nodes.push(item);
                 if (Utils.samePos(item, w)) {
                     this.moveNode(item, { ...w, forceCollide: true });
-                    Utils.copyPos(w, item, true);
                 }
                 this.update(item.el, w);
                 if (w.subGridOpts?.children) { // update any sub grid as well
@@ -707,11 +738,37 @@ class GridStack {
     cellWidth() {
         return this._widthOrContainer() / this.getColumn();
     }
-    /** return our expected width (or parent) for 1 column check */
-    _widthOrContainer() {
+    /** return our expected width (or parent) , and optionally of window for dynamic column check */
+    _widthOrContainer(forBreakpoint = false) {
         // use `offsetWidth` or `clientWidth` (no scrollbar) ?
         // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
-        return (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
+        return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
+    }
+    /** checks for dynamic column count for our current size, returning true if changed */
+    checkDynamicColumn() {
+        const resp = this.opts.columnOpts;
+        if (!resp || (!resp.columnWidth && !resp.breakpoints?.length))
+            return false;
+        const column = this.getColumn();
+        let newColumn = column;
+        const w = this._widthOrContainer(true);
+        if (resp.columnWidth) {
+            newColumn = Math.min(Math.round(w / resp.columnWidth) || 1, resp.columnMax);
+        }
+        else {
+            // find the closest breakpoint (already sorted big to small) that matches
+            newColumn = resp.columnMax;
+            let i = 0;
+            while (i < resp.breakpoints.length && w <= resp.breakpoints[i].w) {
+                newColumn = resp.breakpoints[i++].c || column;
+            }
+        }
+        if (newColumn !== column) {
+            const bk = resp.breakpoints?.find(b => b.c === newColumn);
+            this.column(newColumn, bk?.layout || resp.layout);
+            return true;
+        }
+        return false;
     }
     /**
      * re-layout grid items to reclaim any empty space. Options are:
@@ -738,31 +795,16 @@ class GridStack {
         if (!column || column < 1 || this.opts.column === column)
             return this;
         let oldColumn = this.getColumn();
-        // if we go into 1 column mode due to size change (disableOneColumnMode is off and we hit min width)
-        // then remember the original columns so we can restore.
-        if (column === 1 && !this.opts.disableOneColumnMode) {
-            this._prevColumn = oldColumn;
-        }
-        else {
-            delete this._prevColumn;
-        }
+        this.opts.column = column;
+        if (!this.engine)
+            return this; // called in constructor, noting else to do
+        this.engine.column = column;
         this.el.classList.remove('gs-' + oldColumn);
         this.el.classList.add('gs-' + column);
-        this.opts.column = this.engine.column = column;
-        // update the items now - see if the dom order nodes should be passed instead (else default to current list)
-        let domNodes;
-        if (column === 1 && this.opts.oneColumnModeDomSort) {
-            domNodes = [];
-            this.getGridItems().forEach(el => {
-                if (el.gridstackNode) {
-                    domNodes.push(el.gridstackNode);
-                }
-            });
-            if (!domNodes.length) {
-                domNodes = undefined;
-            }
-        }
-        this.engine.columnChanged(oldColumn, column, domNodes, layout);
+        // 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, undefined, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
         this.doContentResize();
@@ -775,9 +817,7 @@ class GridStack {
     /**
      * get the number of columns in the grid (default 12)
      */
-    getColumn() {
-        return this.opts.column;
-    }
+    getColumn() { return this.opts.column; }
     /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */
     getGridItems() {
         return Array.from(this.el.children)
@@ -894,9 +934,9 @@ class GridStack {
         if (node.subGridOpts) {
             this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
         }
-        // if we're adding an item into 1 column (_prevColumn is set only when going to 1) make sure
+        // if we're adding an item into 1 column make sure
         // we don't override the larger 12 column layout that was already saved. #1985
-        if (this._prevColumn && this.opts.column === 1) {
+        if (this.opts.column === 1) {
             this._ignoreLayoutsNodeChange = true;
         }
         this._triggerAddEvent();
@@ -927,8 +967,8 @@ class GridStack {
             names.forEach(name => this.on(name, callback));
             return this;
         }
+        // native CustomEvent handlers - cash the generic handlers so we can easily remove
         if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {
-            // native CustomEvent handlers - cash the generic handlers so we can easily remove
             let noData = (name === 'enable' || name === 'disable');
             if (noData) {
                 this._gsEventHandler[name] = (event) => callback(event);
@@ -945,7 +985,7 @@ class GridStack {
             this._gsEventHandler[name] = callback;
         }
         else {
-            console.log('GridStack.on(' + name + ') event not supported, but you can still use $(".grid-stack").on(...) while jquery-ui is still used internally.');
+            console.log('GridStack.on(' + name + ') event not supported');
         }
         return this;
     }
@@ -1077,6 +1117,7 @@ class GridStack {
             if (!n)
                 return;
             let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
+            this.engine.nodeBoundFix(w);
             delete w.autoPosition;
             delete w.id;
             // move/resize widget if anything changed
@@ -1118,10 +1159,10 @@ class GridStack {
                 }
             }
             Utils.sanitizeMinMax(n);
-            // finally move the widget
-            if (m !== undefined)
+            // finally move the widget and update attr
+            if (m)
                 this.moveNode(n, m);
-            if (changed) { // move will only update x,y,w,h so update the rest too
+            if (m || changed) {
                 this._writeAttr(el, n);
             }
             if (ddChanged) {
@@ -1526,15 +1567,8 @@ class GridStack {
             }
         }
         else {
-            // else check for 1 column in/out behavior
-            let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize ||
-                (this.opts.column === 1 && !this._prevColumn);
-            if ((this.opts.column === 1) !== oneColumn) {
-                // if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for sizeToContent
-                this.column(oneColumn ? 1 : this._prevColumn);
-                // if (this.opts.animate) setTimeout(() => this.setAnimation(true));
-                columnChanged = true;
-            }
+            // else check for dynamic column
+            columnChanged = this.checkDynamicColumn();
         }
         // make the cells content square again
         if (this._isAutoCellHeight)
@@ -1554,6 +1588,8 @@ class GridStack {
         // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count
         // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?
         setTimeout(() => {
+            if (!this.engine)
+                return; // we've been deleted in between!
             if (n) {
                 if (Utils.shouldSizeToContent(n))
                     this.resizeToContentCheck(n.el, useAttr);
@@ -1574,9 +1610,9 @@ class GridStack {
     }
     /** add or remove the grid element size event handler */
     _updateResizeEvent(forceRemove = false) {
-        // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting oneColumn (i.e. doing work)
+        // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting dynamic column (i.e. doing work)
         // or supporting new sizeToContent option.
-        const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || !this.opts.disableOneColumnMode
+        const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
             || this.engine.nodes.find(n => n.sizeToContent));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = Utils.throttle(() => this.onResize(), this.opts.cellHeightThrottle);
@@ -2301,6 +2337,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 = '9.5.0';
+GridStack.GDRev = '10.0.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map