gridstack 9.5.0 → 10.0.0

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 9.5.0
+ * GridStack 10.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -54,7 +54,6 @@ var types_1 = require("./types");
 var dd_gridstack_1 = require("./dd-gridstack");
 var dd_touch_1 = require("./dd-touch");
 var dd_manager_1 = require("./dd-manager");
-/** global instance */
 var dd = new dd_gridstack_1.DDGridStack;
 // export all dependent file as well to make it easier for users to just import the main file
 __exportStar(require("./types"), exports);
@@ -80,7 +79,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     function GridStack(el, opts) {
         if (opts === void 0) { opts = {}; }
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
@@ -104,6 +103,41 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (opts.alwaysShowResizeHandle !== undefined) {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
+        var bk = (_a = opts.columnOpts) === null || _a === void 0 ? void 0 : _a.breakpoints;
+        // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
+        var 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) {
+            var oneSize = oldOpts.oneColumnSize || 768;
+            delete oldOpts.oneColumnSize;
+            delete oldOpts.disableOneColumnMode;
+            opts.columnOpts = opts.columnOpts || {};
+            bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];
+            var oneColumn = bk.find(function (b) { return 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)
+        var resp = opts.columnOpts;
+        if (resp) {
+            if (!resp.columnWidth && !((_b = resp.breakpoints) === null || _b === void 0 ? void 0 : _b.length)) {
+                delete opts.columnOpts;
+                bk = undefined;
+            }
+            else {
+                resp.columnMax = resp.columnMax || 12;
+            }
+        }
+        if ((bk === null || bk === void 0 ? void 0 : bk.length) > 1)
+            bk.sort(function (a, b) { return (b.w || 0) - (a.w || 0); });
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
         var defaults = __assign(__assign({}, utils_1.Utils.cloneDeep(types_1.gridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || types_1.gridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || types_1.gridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || types_1.gridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || types_1.gridDefaults.staticGrid, draggable: {
                 handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || types_1.gridDefaults.draggable.handle,
@@ -118,10 +152,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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');
         }
@@ -129,7 +160,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this.el.classList.add('grid-stack-rtl');
         }
         // check if we're been nested, and if so update our style and keep pointer around (used during save)
-        var grandParent = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        var grandParent = (_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement;
         var parentGridItem = (grandParent === null || grandParent === void 0 ? void 0 : grandParent.classList.contains(types_1.gridDefaults.itemClass)) ? grandParent.gridstackNode : undefined;
         if (parentGridItem) {
             parentGridItem.subGrid = this;
@@ -199,7 +230,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (this.opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
             dd_manager_1.DDManager.pauseDrag = true;
-        if (((_b = this.opts.draggable) === null || _b === void 0 ? void 0 : _b.pause) !== undefined)
+        if (((_d = this.opts.draggable) === null || _d === void 0 ? void 0 : _d.pause) !== undefined)
             dd_manager_1.DDManager.pauseDrag = this.opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
@@ -424,7 +455,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (ops.column === 'auto') {
             autoColumn = true;
             ops.column = Math.max(node.w || 1, (nodeToAdd === null || nodeToAdd === void 0 ? void 0 : 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
         var content = node.el.querySelector('.grid-stack-item-content');
@@ -566,7 +597,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             if (this._autoColumn) {
                 o.column = 'auto';
-                delete o.disableOneColumnMode;
             }
             var origShow = o._alwaysShowResizeHandle;
             delete o._alwaysShowResizeHandle;
@@ -596,16 +626,17 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var _this = this;
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
         items = utils_1.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
+        var column = this.getColumn();
+        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else keep widget order
         var haveCoord = items.some(function (w) { return w.x !== undefined || w.y !== undefined; });
         if (haveCoord)
-            items = utils_1.Utils.sort(items, -1, this._prevColumn || this.getColumn());
+            items = utils_1.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(function (n) { return ((n.x || 0) + n.w) > _this.opts.column; })) {
+        if (items.some(function (n) { return ((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
         var prevCB = GridStack.addRemoveCB;
@@ -647,6 +678,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 if (utils_1.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;
@@ -657,7 +689,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this.engine.nodes.push(item);
                 if (utils_1.Utils.samePos(item, w)) {
                     _this.moveNode(item, __assign(__assign({}, w), { forceCollide: true }));
-                    utils_1.Utils.copyPos(w, item, true);
                 }
                 _this.update(item.el, w);
                 if ((_a = w.subGridOpts) === null || _a === void 0 ? void 0 : _a.children) { // update any sub grid as well
@@ -763,11 +794,40 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype.cellWidth = function () {
         return this._widthOrContainer() / this.getColumn();
     };
-    /** return our expected width (or parent) for 1 column check */
-    GridStack.prototype._widthOrContainer = function () {
+    /** return our expected width (or parent) , and optionally of window for dynamic column check */
+    GridStack.prototype._widthOrContainer = function (forBreakpoint) {
+        var _a;
+        if (forBreakpoint === void 0) { 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 && ((_a = this.opts.columnOpts) === null || _a === void 0 ? void 0 : _a.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 */
+    GridStack.prototype.checkDynamicColumn = function () {
+        var _a, _b;
+        var resp = this.opts.columnOpts;
+        if (!resp || (!resp.columnWidth && !((_a = resp.breakpoints) === null || _a === void 0 ? void 0 : _a.length)))
+            return false;
+        var column = this.getColumn();
+        var newColumn = column;
+        var 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;
+            var i = 0;
+            while (i < resp.breakpoints.length && w <= resp.breakpoints[i].w) {
+                newColumn = resp.breakpoints[i++].c || column;
+            }
+        }
+        if (newColumn !== column) {
+            var bk = (_b = resp.breakpoints) === null || _b === void 0 ? void 0 : _b.find(function (b) { return b.c === newColumn; });
+            this.column(newColumn, (bk === null || bk === void 0 ? void 0 : bk.layout) || resp.layout);
+            return true;
+        }
+        return false;
     };
     /**
      * re-layout grid items to reclaim any empty space. Options are:
@@ -797,31 +857,16 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!column || column < 1 || this.opts.column === column)
             return this;
         var 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)
-        var domNodes;
-        if (column === 1 && this.opts.oneColumnModeDomSort) {
-            domNodes = [];
-            this.getGridItems().forEach(function (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();
@@ -834,9 +879,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * get the number of columns in the grid (default 12)
      */
-    GridStack.prototype.getColumn = function () {
-        return this.opts.column;
-    };
+    GridStack.prototype.getColumn = function () { return this.opts.column; };
     /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */
     GridStack.prototype.getGridItems = function () {
         var _this = this;
@@ -956,9 +999,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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();
@@ -990,8 +1033,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             names.forEach(function (name) { return _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
             var noData = (name === 'enable' || name === 'disable');
             if (noData) {
                 this._gsEventHandler[name] = function (event) { return callback(event); };
@@ -1008,7 +1051,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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;
     };
@@ -1152,6 +1195,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (!n)
                 return;
             var w = utils_1.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
@@ -1193,10 +1237,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 }
             }
             utils_1.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) {
@@ -1610,15 +1654,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
         }
         else {
-            // else check for 1 column in/out behavior
-            var 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)
@@ -1642,6 +1679,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // 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(function () {
+            if (!_this.engine)
+                return; // we've been deleted in between!
             if (n) {
                 if (utils_1.Utils.shouldSizeToContent(n))
                     _this.resizeToContentCheck(n.el, useAttr);
@@ -1664,9 +1703,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype._updateResizeEvent = function (forceRemove) {
         var _this = this;
         if (forceRemove === void 0) { 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.
-        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || !this.opts.disableOneColumnMode
+        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts
             || this.engine.nodes.find(function (n) { return n.sizeToContent; }));
         if (!forceRemove && trackSize && !this.resizeObserver) {
             this._sizeThrottle = utils_1.Utils.throttle(function () { return _this.onResize(); }, this.opts.cellHeightThrottle);
@@ -2410,7 +2449,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '9.5.0';
+    GridStack.GDRev = '10.0.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map