gridstack 7.2.2 → 7.3.0

package/dist/gridstack.js

@@ -12,7 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 7.2.2
+ * GridStack 7.3.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -162,20 +162,7 @@ class GridStack {
         });
         if (this.opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
-            let elements = [];
-            let column = this.getColumn();
-            if (column === 1 && this._prevColumn)
-                column = this._prevColumn; // do 12 column when reading into 1 column mode
-            this.getGridItems().forEach(el => {
-                let x = parseInt(el.getAttribute('gs-x'));
-                let y = parseInt(el.getAttribute('gs-y'));
-                elements.push({
-                    el,
-                    // if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order
-                    i: (Number.isNaN(x) ? 1000 : x) + (Number.isNaN(y) ? 1000 : y) * column
-                });
-            });
-            elements.sort((a, b) => b.i - a.i).forEach(e => this._prepareElement(e.el)); // revert sort so lowest item wins
+            this.getGridItems().forEach(el => this._prepareElement(el));
             this.batchUpdate(false);
         }
         // load any passed in children as well, which overrides any DOM layout done above
@@ -271,11 +258,17 @@ class GridStack {
             return null;
         // create the grid element, but check if the passed 'parent' already has grid styling and should be used instead
         let el = parent;
-        if (!parent.classList.contains('grid-stack')) {
-            let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-            doc.body.innerHTML = `<div class="grid-stack ${opt.class || ''}"></div>`;
-            el = doc.body.children[0];
-            parent.appendChild(el);
+        const parentIsGrid = parent.classList.contains('grid-stack');
+        if (!parentIsGrid || opt.addRemoveCB) {
+            if (opt.addRemoveCB) {
+                el = opt.addRemoveCB(parent, opt, true, true);
+            }
+            else {
+                let doc = document.implementation.createHTMLDocument(''); // IE needs a param
+                doc.body.innerHTML = `<div class="grid-stack ${opt.class || ''}"></div>`;
+                el = doc.body.children[0];
+                parent.appendChild(el);
+            }
         }
         // create grid class and load any children
         let grid = GridStack.init(opt, el);
@@ -319,7 +312,7 @@ class GridStack {
      */
     addWidget(els, options) {
         function isGridStackWidget(w) {
-            return w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
+            return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
         }
         let el;
         let node;
@@ -334,7 +327,7 @@ class GridStack {
                 el = node.el; // re-use element stored in the node
             }
             else if (this.opts.addRemoveCB) {
-                el = this.opts.addRemoveCB(this, options, true);
+                el = this.opts.addRemoveCB(this.el, options, true, false);
             }
             else {
                 let content = (options === null || options === void 0 ? void 0 : options.content) || '';
@@ -367,7 +360,7 @@ class GridStack {
         this._updateContainerHeight();
         // see if there is a sub-grid to create
         if (node.subGrid) {
-            this.makeSubGrid(node.el, undefined, undefined, false);
+            this.makeSubGrid(node.el, undefined, 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
         // we don't override the larger 12 column layout that was already saved. #1985
@@ -413,16 +406,11 @@ class GridStack {
             ops.disableOneColumnMode = true; // 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
-        // TODO: support this.opts.addRemoveCB for frameworks
         let content = node.el.querySelector('.grid-stack-item-content');
         let newItem;
         let newItemOpt;
         if (saveContent) {
             this._removeDD(node.el); // remove D&D since it's set on content div
-            let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-            doc.body.innerHTML = `<div class="grid-stack-item"></div>`;
-            newItem = doc.body.children[0];
-            newItem.appendChild(content);
             newItemOpt = Object.assign(Object.assign({}, node), { x: 0, y: 0 });
             utils_1.Utils.removeInternalForSave(newItemOpt);
             delete newItemOpt.subGrid;
@@ -430,9 +418,18 @@ class GridStack {
                 newItemOpt.content = node.content;
                 delete node.content;
             }
-            doc.body.innerHTML = `<div class="grid-stack-item-content"></div>`;
-            content = doc.body.children[0];
-            node.el.appendChild(content);
+            if (this.opts.addRemoveCB) {
+                newItem = this.opts.addRemoveCB(this.el, newItemOpt, true, false);
+            }
+            else {
+                let doc = document.implementation.createHTMLDocument(''); // IE needs a param
+                doc.body.innerHTML = `<div class="grid-stack-item"></div>`;
+                newItem = doc.body.children[0];
+                newItem.appendChild(content);
+                doc.body.innerHTML = `<div class="grid-stack-item-content"></div>`;
+                content = doc.body.children[0];
+                node.el.appendChild(content);
+            }
             this._prepareDragDropByNode(node); // ... and restore original D&D
         }
         // if we're adding an additional item, make the container large enough to have them both
@@ -444,6 +441,9 @@ class GridStack {
             this.update(node.el, { w, h });
             setTimeout(() => style.transition = null); // recover animation
         }
+        if (this.opts.addRemoveCB) {
+            ops.addRemoveCB = ops.addRemoveCB || this.opts.addRemoveCB;
+        }
         let subGrid = node.subGrid = GridStack.addGrid(content, ops);
         if (nodeToAdd === null || nodeToAdd === void 0 ? void 0 : nodeToAdd._moving)
             subGrid._isTemp = true; // prevent re-nesting as we add over
@@ -483,6 +483,8 @@ class GridStack {
             pGrid.addWidget(n.el, n);
         });
         pGrid.batchUpdate(false);
+        if (this.parentGridItem)
+            delete this.parentGridItem.subGrid;
         delete this.parentGridItem;
         // create an artificial event for the original grid now that this one is gone (got a leave, but won't get enter)
         if (nodeThatRemoved) {
@@ -589,7 +591,7 @@ class GridStack {
                 let item = items.find(w => n.id === w.id);
                 if (!item) {
                     if (this.opts.addRemoveCB)
-                        this.opts.addRemoveCB(this, n, false);
+                        this.opts.addRemoveCB(this.el, n, false, false);
                     removed.push(n); // batch keep track
                     this.removeWidget(n.el, true, false);
                 }
@@ -785,6 +787,8 @@ class GridStack {
         }
         this._removeStylesheet();
         this.el.removeAttribute('gs-current-row');
+        if (this.parentGridItem)
+            delete this.parentGridItem.subGrid;
         delete this.parentGridItem;
         delete this.opts;
         delete this._placeholder;
@@ -1200,7 +1204,9 @@ class GridStack {
         if (!this._styles) {
             // insert style to parent (instead of 'head' by default) to support WebComponent
             let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            this._styles = utils_1.Utils.createStylesheet(this._styleSheetClass, styleLocation);
+            this._styles = utils_1.Utils.createStylesheet(this._styleSheetClass, styleLocation, {
+                nonce: this.opts.nonce,
+            });
             if (!this._styles)
                 return this;
             this._styles._max = 0;
@@ -2037,7 +2043,9 @@ class GridStack {
                 return; // handled by dropover
             let distance = ui.position.top - node._prevYPix;
             node._prevYPix = ui.position.top;
-            utils_1.Utils.updateScrollPosition(el, ui.position, distance);
+            if (this.opts.draggable.scroll !== false) {
+                utils_1.Utils.updateScrollPosition(el, ui.position, distance);
+            }
             // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
             let left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
             let top = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
@@ -2146,5 +2154,5 @@ exports.GridStack = GridStack;
 GridStack.Utils = utils_1.Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = gridstack_engine_1.GridStackEngine;
-GridStack.GDRev = '7.2.2';
+GridStack.GDRev = '7.3.0';
 //# sourceMappingURL=gridstack.js.map