gridstack 11.1.2 → 11.3.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 11.1.2
+ * GridStack 11.3.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -135,14 +135,11 @@ class GridStack {
     /** @internal create placeholder DIV as needed */
     get placeholder() {
         if (!this._placeholder) {
-            const placeholderChild = document.createElement('div'); // child so padding match item-content
-            placeholderChild.className = 'placeholder-content';
+            this._placeholder = Utils.createDiv([this.opts.placeholderClass, gridDefaults.itemClass, this.opts.itemClass]);
+            const placeholderChild = 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, gridDefaults.itemClass, this.opts.itemClass);
-            this.placeholder.appendChild(placeholderChild);
         }
         return this._placeholder;
     }
@@ -338,7 +335,6 @@ class GridStack {
      * 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
      */
     addWidget(w) {
         if (typeof w === 'string') {
@@ -580,16 +576,15 @@ class GridStack {
         items.forEach(n => { n.w = n.w || 1; n.h = n.h || 1; });
         // sort items. those without coord will be appended last
         items = 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
         let maxColumn = 0;
         items.forEach(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
         const prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
@@ -662,6 +657,7 @@ class GridStack {
         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 && this.opts?.animate)
@@ -846,6 +842,8 @@ class GridStack {
         return Array.from(this.el.children)
             .filter((el) => 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 */
+    isIgnoreChangeCB() { 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`).
@@ -866,10 +864,10 @@ class GridStack {
             this.el.parentNode.removeChild(this.el);
         }
         this._removeStylesheet();
-        if (this.parentGridNode)
-            delete this.parentGridNode.subGrid;
+        delete this.parentGridNode?.subGrid;
         delete this.parentGridNode;
         delete this.opts;
+        delete this._placeholder?.gridstackNode;
         delete this._placeholder;
         delete this.engine;
         delete this.el.gridstack; // remove circular dependency that would prevent a freeing
@@ -961,12 +959,14 @@ class GridStack {
         }
         // 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;
+        let 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;
     }
     on(name, callback) {
@@ -1910,6 +1910,22 @@ class GridStack {
         });
         return this;
     }
+    /** @internal call when drag (and drop) needs to be cancelled (Esc key) */
+    cancelDrag() {
+        const n = this._placeholder?.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) */
     _removeDD(el) {
         dd.draggable(el, 'destroy').resizable(el, 'destroy');
@@ -2028,13 +2044,15 @@ class GridStack {
             cellHeight = this.getCellHeight(true);
             // sidebar items: load any element attributes if we don't have a node
             if (!node) {
-                if (helper.hasAttribute('gridstacknode')) {
+                const 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)
@@ -2107,6 +2125,7 @@ class GridStack {
             const wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
             const wasSidebar = el !== helper;
             this.placeholder.remove();
+            delete this.placeholder.gridstackNode;
             // disable animation when replacing a placeholder (already positioned) with actual content
             const noAnim = wasAdded && this.opts.animate;
             if (noAnim)
@@ -2241,6 +2260,7 @@ class GridStack {
             /** called when the item stops moving/resizing */
             const onEndMoving = (event) => {
                 this.placeholder.remove();
+                delete this.placeholder.gridstackNode;
                 delete node._moving;
                 delete node._event;
                 delete node._lastTried;
@@ -2488,6 +2508,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 = '11.1.2';
+GridStack.GDRev = '11.3.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map