gridstack 8.4.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.4.0
+ * GridStack 9.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -202,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
@@ -666,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();
@@ -711,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') {
@@ -769,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)
@@ -799,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();
@@ -826,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) {
@@ -974,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;
@@ -1165,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);
             }
@@ -1182,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
@@ -1379,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;
     };
@@ -1474,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;
     };
@@ -2094,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,
@@ -2217,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
@@ -2262,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.4.0';
+    GridStack.GDRev = '9.0.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map