gridstack 8.3.0 → 9.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 8.3.0
+ * GridStack 9.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -108,7 +108,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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,
             }, removableOptions: {
-                accept: opts.itemClass ? '.' + opts.itemClass : types_1.gridDefaults.removableOptions.accept,
+                accept: opts.itemClass || types_1.gridDefaults.removableOptions.accept,
+                decline: types_1.gridDefaults.removableOptions.decline
             } });
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
             defaults.animate = utils_1.Utils.toBool(el.getAttribute('gs-animate'));
@@ -201,7 +202,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             dd_manager_1.DDManager.pauseDrag = this.opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
-        this._updateWindowResizeEvent();
+        this._updateResizeEvent();
     }
     /**
      * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -593,11 +594,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.prototype.load = function (layout, addRemove) {
         var _this = this;
         if (addRemove === void 0) { addRemove = GridStack.addRemoveCB || true; }
-        var items = GridStack.Utils.sort(__spreadArray([], layout, true), -1, this._prevColumn || this.getColumn()); // make copy before we mod/sort
-        this._insertNotAppend = true; // since create in reverse order...
+        // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order
+        var haveCoord = layout.some(function (w) { return w.x !== undefined || w.y !== undefined; });
+        var items = haveCoord ? utils_1.Utils.sort(layout, -1, this._prevColumn || this.getColumn()) : layout;
+        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
         // 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 + n.w) > _this.opts.column; })) {
+        if (this._prevColumn && this._prevColumn !== this.opts.column && items.some(function (n) { return ((n.x || 0) + n.w) > _this.opts.column; })) {
             this._ignoreLayoutsNodeChange = true; // skip layout update
             this.engine.cacheLayout(items, this._prevColumn, true);
         }
@@ -609,8 +612,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.batchUpdate();
         // see if any items are missing from new layout and need to be removed first
         if (addRemove) {
-            var copyNodes = __spreadArray([], this.engine.nodes, true); // don't loop through array you modify
-            copyNodes.forEach(function (n) {
+            var copyNodes_1 = __spreadArray([], this.engine.nodes, true); // don't loop through array you modify
+            copyNodes_1.forEach(function (n) {
                 var item = items.find(function (w) { return n.id === w.id; });
                 if (!item) {
                     if (GridStack.addRemoveCB)
@@ -620,11 +623,20 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 }
             });
         }
-        // now add/update the widgets
+        // now add/update the widgets - starting with an empty list to reduce collision and add no-coord ones at next available spot
+        var copyNodes = this.engine.nodes;
+        this.engine.nodes = [];
         items.forEach(function (w) {
             var _a;
-            var item = (w.id !== undefined) ? _this.engine.nodes.find(function (n) { return n.id === w.id; }) : undefined;
+            var item = (w.id !== undefined) ? copyNodes.find(function (n) { return n.id === w.id; }) : undefined;
             if (item) {
+                // check if missing coord, in which case find next empty slot with new (or old if missing) sizes
+                if (w.autoPosition || w.x === undefined || w.y === undefined) {
+                    w.w = w.w || item.w;
+                    w.h = w.h || item.h;
+                    _this.engine.findEmptyPosition(w);
+                }
+                _this.engine.nodes.push(item); // now back to current list...
                 _this.update(item.el, w);
                 if ((_a = w.subGridOpts) === null || _a === void 0 ? void 0 : _a.children) { // update any sub grid as well
                     var sub = item.el.querySelector('.grid-stack');
@@ -654,6 +666,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (flag === void 0) { flag = true; }
         this.engine.batchUpdate(flag);
         if (!flag) {
+            this._updateContainerHeight();
             this._triggerRemoveEvent();
             this._triggerAddEvent();
             this._triggerChangeEvent();
@@ -699,7 +712,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (update && val !== undefined) {
             if (this._isAutoCellHeight !== (val === 'auto')) {
                 this._isAutoCellHeight = (val === 'auto');
-                this._updateWindowResizeEvent();
+                this._updateResizeEvent();
             }
         }
         if (val === 'initial' || val === 'auto') {
@@ -757,7 +770,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      */
     GridStack.prototype.column = function (column, layout) {
         if (layout === void 0) { layout = 'moveScale'; }
-        if (column < 1 || this.opts.column === column)
+        if (!column || column < 1 || this.opts.column === column)
             return this;
         var oldColumn = this.getColumn();
         // if we go into 1 column mode (which happens if we're sized less than minW unless disableOneColumnMode is on)
@@ -787,6 +800,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.engine.columnChanged(oldColumn, column, domNodes, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
+        this.doContentResize();
         // and trigger our event last...
         this._ignoreLayoutsNodeChange = true; // skip layout update
         this._triggerChangeEvent();
@@ -814,7 +828,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!this.el)
             return; // prevent multiple calls
         this.offAll();
-        this._updateWindowResizeEvent(true);
+        this._updateResizeEvent(true);
         this.setStatic(true, false); // permanently removes DD but don't set CSS class (we're going away)
         this.setAnimation(false);
         if (!removeDOM) {
@@ -962,7 +976,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             this.el.addEventListener(name, this._gsEventHandler[name]);
         }
-        else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize' || name === 'resizestop' || name === 'dropped') {
+        else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize'
+            || name === 'resizestop' || name === 'dropped' || name === 'resizecontent') {
             // drag&drop stop events NEED to be call them AFTER we update node attributes so handle them ourself.
             // do same for start event to make it easier...
             this._gsEventHandler[name] = callback;
@@ -1107,9 +1122,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             return this.update(els, opt);
         }
         GridStack.getElements(els).forEach(function (el) {
-            if (!el || !el.gridstackNode)
+            var _a;
+            var n = el === null || el === void 0 ? void 0 : el.gridstackNode;
+            if (!n)
                 return;
-            var n = el.gridstackNode;
             var w = utils_1.Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
             delete w.autoPosition;
             // move/resize widget if anything changed
@@ -1127,10 +1143,16 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 m = {}; // will use node position but validate values
             }
             // check for content changing
-            if (w.content) {
-                var sub = el.querySelector('.grid-stack-item-content');
-                if (sub && sub.innerHTML !== w.content) {
-                    sub.innerHTML = w.content;
+            if (w.content !== undefined) {
+                var itemContent = el.querySelector('.grid-stack-item-content');
+                if (!itemContent || itemContent.innerHTML === w.content)
+                    return;
+                itemContent.innerHTML = w.content;
+                // restore any sub-grid back
+                if ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.el) {
+                    itemContent.appendChild(n.subGrid.el);
+                    if (!n.subGrid.opts.styleInHead)
+                        n.subGrid._updateStyles(true); // force create
                 }
                 delete w.content;
             }
@@ -1146,14 +1168,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             utils_1.Utils.sanitizeMinMax(n);
             // finally move the widget
-            if (m) {
-                _this.engine.cleanNodes()
-                    .beginUpdate(n)
-                    .moveNode(n, m);
-                _this._updateContainerHeight();
-                _this._triggerChangeEvent();
-                _this.engine.endUpdate();
-            }
+            if (m)
+                _this.moveNode(n, m);
             if (changed) { // move will only update x,y,w,h so update the rest too
                 _this._writeAttr(el, n);
             }
@@ -1163,6 +1179,56 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         });
         return this;
     };
+    GridStack.prototype.moveNode = function (n, m) {
+        this.engine.cleanNodes()
+            .beginUpdate(n)
+            .moveNode(n, m);
+        this._updateContainerHeight();
+        this._triggerChangeEvent();
+        this.engine.endUpdate();
+    };
+    /** Updates widget height to match the content height to avoid v-scrollbar or dead space.
+     Note: this assumes only 1 child under '.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted */
+    GridStack.prototype.resizeToContent = function (els) {
+        var _this = this;
+        GridStack.getElements(els).forEach(function (el) {
+            var _a;
+            var n = el === null || el === void 0 ? void 0 : el.gridstackNode;
+            if (!n)
+                return;
+            if (el.parentElement !== n.grid.el)
+                return; // skip if we are not inside a grid
+            var height = el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
+            if (!height)
+                return; // 0 when hidden, skip
+            var item = el.querySelector(GridStack.resizeToContentParent);
+            if (!item)
+                return;
+            var itemH = item.clientHeight; // available height to our child (minus border, padding...)
+            var wantedH = ((_a = item.firstChild) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || itemH; // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
+            if (itemH === wantedH)
+                return;
+            height += wantedH - itemH;
+            var cell = _this.getCellHeight();
+            if (!cell)
+                return;
+            var h = Math.ceil(height / cell);
+            if (n.maxH && h > n.maxH)
+                h = n.maxH;
+            if (h !== n.h) {
+                _this._ignoreLayoutsNodeChange = true;
+                _this.moveNode(n, { h: h });
+                delete _this._ignoreLayoutsNodeChange;
+            }
+        });
+    };
+    /** call the user resize (so we can do extra work) else our build in version */
+    GridStack.prototype.resizeToContentCheck = function (el) {
+        if (GridStack.resizeToContentCB)
+            GridStack.resizeToContentCB(el);
+        else
+            this.resizeToContent(el);
+    };
     /**
      * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
      * @param value margin value
@@ -1360,6 +1426,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (!utils_1.Utils.same(node, copy)) {
             this._writeAttr(el, node);
         }
+        if (utils_1.Utils.shouldFitToContent(node))
+            el.classList.add('fit-to-content');
         this._prepareDragDropByNode(node);
         return this;
     };
@@ -1455,67 +1523,87 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         return this;
     };
     /**
-     * called when we are being resized by the window - check if the one Column Mode needs to be turned on/off
-     * and remember the prev columns we used, or get our count from parent, as well as check for auto cell height (square)
+     * called when we are being resized - check if the one Column Mode needs to be turned on/off
+     * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+     * or `fitToContent` gridItem options.
      */
-    GridStack.prototype.onParentResize = function () {
-        var _this = this;
-        if (!this.el || !this.el.clientWidth)
+    GridStack.prototype.onResize = function () {
+        var _a;
+        if (!((_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth))
             return; // return if we're gone or no size yet (will get called again)
-        var changedColumn = false;
+        if (this.prevWidth === this.el.clientWidth)
+            return; // no-op
+        this.prevWidth = this.el.clientWidth;
+        // console.log('onResize ', this.el.clientWidth);
+        this.batchUpdate();
         // see if we're nested and take our column count from our parent....
+        var columnChanged = false;
         if (this._autoColumn && this.parentGridItem) {
             if (this.opts.column !== this.parentGridItem.w) {
-                changedColumn = true;
                 this.column(this.parentGridItem.w, 'none');
+                columnChanged = true;
             }
         }
         else {
             // else check for 1 column in/out behavior
-            var oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
+            var oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize ||
+                (this.opts.column === 1 && !this._prevColumn);
             if ((this.opts.column === 1) !== oneColumn) {
-                changedColumn = true;
-                if (this.opts.animate) {
-                    this.setAnimation(false);
-                } // 1 <-> 12 is too radical, turn off animation
+                // if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for fitToContent
                 this.column(oneColumn ? 1 : this._prevColumn);
-                if (this.opts.animate) {
-                    this.setAnimation(true);
-                }
+                // if (this.opts.animate) setTimeout(() => this.setAnimation(true));
+                columnChanged = true;
             }
         }
         // make the cells content square again
-        if (this._isAutoCellHeight) {
-            if (!changedColumn && this.opts.cellHeightThrottle) {
-                if (!this._cellHeightThrottle) {
-                    this._cellHeightThrottle = utils_1.Utils.throttle(function () { return _this.cellHeight(); }, this.opts.cellHeightThrottle);
-                }
-                this._cellHeightThrottle();
-            }
-            else {
-                // immediate update if we've changed column count or have no threshold
-                this.cellHeight();
-            }
-        }
-        // finally update any nested grids
+        if (this._isAutoCellHeight)
+            this.cellHeight();
+        // update any nested grids, or items size
         this.engine.nodes.forEach(function (n) {
             if (n.subGrid)
-                n.subGrid.onParentResize();
+                n.subGrid.onResize();
         });
+        this.doContentResize(columnChanged);
+        this.batchUpdate(false);
         return this;
     };
-    /** add or remove the window size event handler */
-    GridStack.prototype._updateWindowResizeEvent = function (forceRemove) {
+    GridStack.prototype.doContentResize = function (delay, n) {
+        var _this = this;
+        if (delay === void 0) { delay = true; }
+        if (n === void 0) { n = undefined; }
+        // update any gridItem height with fitToContent, 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 (n) {
+                if (utils_1.Utils.shouldFitToContent(n))
+                    _this.resizeToContentCheck(n.el);
+            }
+            else {
+                _this.engine.nodes.forEach(function (n) {
+                    if (utils_1.Utils.shouldFitToContent(n))
+                        _this.resizeToContentCheck(n.el);
+                });
+            }
+            if (_this._gsEventHandler['resizeContent'])
+                _this._gsEventHandler['resizeContent'](null, n ? [n] : _this.engine.nodes);
+        }, delay ? 300 + 10 : 0);
+    };
+    /** add or remove the grid element size event handler */
+    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)
-        var workTodo = (this._isAutoCellHeight || !this.opts.disableOneColumnMode) && !this.parentGridItem;
-        if (!forceRemove && workTodo && !this._windowResizeBind) {
-            this._windowResizeBind = this.onParentResize.bind(this); // so we can properly remove later
-            window.addEventListener('resize', this._windowResizeBind);
-        }
-        else if ((forceRemove || !workTodo) && this._windowResizeBind) {
-            window.removeEventListener('resize', this._windowResizeBind);
-            delete this._windowResizeBind; // remove link to us so we can free
+        // or supporting new fitToContent option.
+        var trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.fitToContent || !this.opts.disableOneColumnMode || this.engine.nodes.find(function (n) { return n.fitToContent; }));
+        if (!forceRemove && trackSize && !this.resizeObserver) {
+            this._sizeThrottle = utils_1.Utils.throttle(function () { return _this.onResize(); }, this.opts.cellHeightThrottle);
+            this.resizeObserver = new ResizeObserver(function (entries) { return _this._sizeThrottle(); });
+            this.resizeObserver.observe(this.el);
+        }
+        else if ((forceRemove || !trackSize) && this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            delete this.resizeObserver;
+            delete this._sizeThrottle;
         }
         return this;
     };
@@ -1979,7 +2067,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /** @internal mark item for removal */
     GridStack.prototype._itemRemoving = function (el, remove) {
         var node = el ? el.gridstackNode : undefined;
-        if (!node || !node.grid)
+        if (!node || !node.grid || el.classList.contains(this.opts.removableOptions.decline))
             return;
         remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;
         remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
@@ -2047,17 +2135,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                     return;
                 node.el = target;
                 if (node._isAboutToRemove) {
-                    var gridToNotify = el.gridstackNode.grid;
-                    if (gridToNotify._gsEventHandler[event.type]) {
-                        gridToNotify._gsEventHandler[event.type](event, target);
+                    var grid = el.gridstackNode.grid;
+                    if (grid._gsEventHandler[event.type]) {
+                        grid._gsEventHandler[event.type](event, target);
                     }
-                    _this._removeDD(el);
-                    gridToNotify.engine.removedNodes.push(node);
-                    gridToNotify._triggerRemoveEvent();
-                    // break circular links and remove DOM
-                    delete el.gridstackNode;
-                    delete node.el;
-                    el.remove();
+                    grid.engine.nodes.push(node); // temp add it back so we can proper remove it next
+                    grid.removeWidget(el, true, true);
                 }
                 else {
                     utils_1.Utils.removePositioningStyles(target);
@@ -2080,6 +2163,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this._updateContainerHeight(); // @ts-ignore
                 _this._triggerChangeEvent();
                 _this.engine.endUpdate();
+                if (event.type === 'resizestop')
+                    _this.doContentResize(false, node);
             };
             dd.draggable(el, {
                 start: onStartMoving,
@@ -2203,7 +2288,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);
             delete node._skipDown;
             if (resizing && node.subGrid)
-                node.subGrid.onParentResize();
+                node.subGrid.onResize();
             this._extraDragRow = 0; // @ts-ignore
             this._updateContainerHeight();
             var target = event.target; // @ts-ignore
@@ -2248,11 +2333,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     };
     // legacy method removed
     GridStack.prototype.commit = function () { (0, utils_1.obsolete)(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; };
+    /** parent class for sizing content. defaults to '.grid-stack-item-content' */
+    GridStack.resizeToContentParent = '.grid-stack-item-content';
     /** scoping so users can call GridStack.Utils.sort() for example */
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '8.3.0';
+    GridStack.GDRev = '9.0.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map