gridstack 11.1.2 → 11.3.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 11.1.2
+ * GridStack 11.3.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -352,14 +352,11 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         /** @internal create placeholder DIV as needed */
         get: function () {
             if (!this._placeholder) {
-                var placeholderChild = document.createElement('div'); // child so padding match item-content
-                placeholderChild.className = 'placeholder-content';
+                this._placeholder = utils_1.Utils.createDiv([this.opts.placeholderClass, types_1.gridDefaults.itemClass, this.opts.itemClass]);
+                var placeholderChild = utils_1.Utils.createDiv(['placeholder-content'], this._placeholder);
                 if (this.opts.placeholderText) {
                     placeholderChild.textContent = this.opts.placeholderText;
                 }
-                this._placeholder = document.createElement('div');
-                this._placeholder.classList.add(this.opts.placeholderClass, types_1.gridDefaults.itemClass, this.opts.itemClass);
-                this.placeholder.appendChild(placeholderChild);
             }
             return this._placeholder;
         },
@@ -378,7 +375,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * grid.addWidget({w: 3, content: 'hello'});
      *
      * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
-     * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
      */
     GridStack.prototype.addWidget = function (w) {
         if (typeof w === 'string') {
@@ -626,16 +622,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         items.forEach(function (n) { n.w = n.w || 1; n.h = n.h || 1; });
         // sort items. those without coord will be appended last
         items = utils_1.Utils.sort(items);
+        this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = true; // skip layout update
         // 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
         var maxColumn = 0;
         items.forEach(function (n) { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
         if (maxColumn > this.engine.defaultColumn)
             this.engine.defaultColumn = maxColumn;
-        if (maxColumn > column) {
-            this._ignoreLayoutsNodeChange = true; // skip layout update
+        if (maxColumn > column)
             this.engine.cacheLayout(items, maxColumn, true);
-        }
         // if given a different callback, temporally set it as global option so creating will use it
         var prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
@@ -709,6 +704,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
+        delete this.engine.skipCacheUpdate;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
         // delay adding animation back
         if (blank && ((_a = this.opts) === null || _a === void 0 ? void 0 : _a.animate))
@@ -903,11 +899,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         return Array.from(this.el.children)
             .filter(function (el) { return el.matches('.' + _this.opts.itemClass) && !el.matches('.' + _this.opts.placeholderClass); });
     };
+    /** true if changeCB should be ignored due to column change, sizeToContent, loading, etc... which caller can ignore for dirty flag case */
+    GridStack.prototype.isIgnoreChangeCB = function () { return this._ignoreLayoutsNodeChange; };
     /**
      * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
      * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
      */
     GridStack.prototype.destroy = function (removeDOM) {
+        var _a, _b;
         if (removeDOM === void 0) { removeDOM = true; }
         if (!this.el)
             return; // prevent multiple calls
@@ -924,10 +923,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this.el.parentNode.removeChild(this.el);
         }
         this._removeStylesheet();
-        if (this.parentGridNode)
-            delete this.parentGridNode.subGrid;
+        (_a = this.parentGridNode) === null || _a === void 0 ? true : delete _a.subGrid;
         delete this.parentGridNode;
         delete this.opts;
+        (_b = this._placeholder) === null || _b === void 0 ? true : delete _b.gridstackNode;
         delete this._placeholder;
         delete this.engine;
         delete this.el.gridstack; // remove circular dependency that would prevent a freeing
@@ -1020,12 +1019,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         // 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.opts.column === 1) {
-            this._ignoreLayoutsNodeChange = true;
+        var resetIgnoreLayoutsNodeChange;
+        if (this.opts.column === 1 && !this._ignoreLayoutsNodeChange) {
+            resetIgnoreLayoutsNodeChange = this._ignoreLayoutsNodeChange = true;
         }
         this._triggerAddEvent();
         this._triggerChangeEvent();
-        delete this._ignoreLayoutsNodeChange;
+        if (resetIgnoreLayoutsNodeChange)
+            delete this._ignoreLayoutsNodeChange;
         return el;
     };
     GridStack.prototype.on = function (name, callback) {
@@ -2015,6 +2016,23 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         });
         return this;
     };
+    /** @internal call when drag (and drop) needs to be cancelled (Esc key) */
+    GridStack.prototype.cancelDrag = function () {
+        var _a;
+        var n = (_a = this._placeholder) === null || _a === void 0 ? void 0 : _a.gridstackNode;
+        if (!n)
+            return;
+        if (n._isExternal) {
+            // remove any newly inserted nodes (from outside)
+            n._isAboutToRemove = true;
+            this.engine.removeNode(n);
+        }
+        else if (n._isAboutToRemove) {
+            // restore any temp removed (dragged over trash)
+            GridStack._itemRemoving(n.el, false);
+        }
+        this.engine.restoreInitial();
+    };
     /** @internal removes any drag&drop present (called during destroy) */
     GridStack.prototype._removeDD = function (el) {
         dd.draggable(el, 'destroy').resizable(el, 'destroy');
@@ -2135,13 +2153,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             cellHeight = _this.getCellHeight(true);
             // sidebar items: load any element attributes if we don't have a node
             if (!node) {
-                if (helper.hasAttribute('gridstacknode')) {
+                var attr = helper.getAttribute('data-gs-widget') || helper.getAttribute('gridstacknode'); // TBD: temp support for old V11.0.0 attribute
+                if (attr) {
                     try {
-                        node = JSON.parse(helper.getAttribute('gridstacknode'));
+                        node = JSON.parse(attr);
                     }
                     catch (error) {
-                        console.error("Gridstack dropover: Bad JSON format: ", helper.getAttribute('gridstacknode'));
+                        console.error("Gridstack dropover: Bad JSON format: ", attr);
                     }
+                    helper.removeAttribute('data-gs-widget');
                     helper.removeAttribute('gridstacknode');
                 }
                 if (!node)
@@ -2215,6 +2235,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             var wasAdded = !!_this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
             var wasSidebar = el !== helper;
             _this.placeholder.remove();
+            delete _this.placeholder.gridstackNode;
             // disable animation when replacing a placeholder (already positioned) with actual content
             var noAnim = wasAdded && _this.opts.animate;
             if (noAnim)
@@ -2350,6 +2371,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             /** called when the item stops moving/resizing */
             var onEndMoving = function (event) {
                 _this.placeholder.remove();
+                delete _this.placeholder.gridstackNode;
                 delete node._moving;
                 delete node._event;
                 delete node._lastTried;
@@ -2597,7 +2619,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 = '11.1.2';
+    GridStack.GDRev = '11.3.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map