gridstack 10.1.0 → 10.1.2

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 10.1.0
+ * GridStack 10.1.2
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -151,10 +151,12 @@ class GridStack {
     }
     /**
      * Construct a grid item from the given element and options
-     * @param el
-     * @param opts
+     * @param el the HTML element tied to this grid after it's been initialized
+     * @param opts grid options - public for classes to access, but use methods to modify!
      */
     constructor(el, opts = {}) {
+        this.el = el;
+        this.opts = opts;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
@@ -162,7 +164,6 @@ class GridStack {
         /** @internal meant to store the scale of the active grid */
         this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };
         el.gridstack = this;
-        this.el = el; // exposed HTML element to the user
         opts = opts || {}; // handles null/undefined/0
         if (!el.classList.contains('grid-stack')) {
             this.el.classList.add('grid-stack');
@@ -217,7 +218,8 @@ class GridStack {
         if (bk?.length > 1)
             bk.sort((a, b) => (b.w || 0) - (a.w || 0));
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
-        let defaults = { ...Utils.cloneDeep(gridDefaults),
+        let defaults = {
+            ...Utils.cloneDeep(gridDefaults),
             column: Utils.toNumber(el.getAttribute('gs-column')) || gridDefaults.column,
             minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow,
             maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || gridDefaults.maxRow,
@@ -233,16 +235,15 @@ class GridStack {
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
             defaults.animate = Utils.toBool(el.getAttribute('gs-animate'));
         }
-        this.opts = Utils.defaults(opts, defaults);
-        opts = null; // make sure we use this.opts instead
+        opts = Utils.defaults(opts, defaults);
         this._initMargin(); // part of settings defaults...
         // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
         this.checkDynamicColumn();
-        this.el.classList.add('gs-' + this.opts.column);
-        if (this.opts.rtl === 'auto') {
-            this.opts.rtl = (el.style.direction === 'rtl');
+        this.el.classList.add('gs-' + opts.column);
+        if (opts.rtl === 'auto') {
+            opts.rtl = (el.style.direction === 'rtl');
         }
-        if (this.opts.rtl) {
+        if (opts.rtl) {
             this.el.classList.add('grid-stack-rtl');
         }
         // check if we're been nested, and if so update our style and keep pointer around (used during save)
@@ -254,31 +255,31 @@ class GridStack {
             this.el.classList.add('grid-stack-nested');
             parentGridItem.el.classList.add('grid-stack-sub-grid');
         }
-        this._isAutoCellHeight = (this.opts.cellHeight === 'auto');
-        if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {
+        this._isAutoCellHeight = (opts.cellHeight === 'auto');
+        if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
             // make the cell content square initially (will use resize/column event to keep it square)
             this.cellHeight(undefined, false);
         }
         else {
             // append unit if any are set
-            if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
-                this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
-                delete this.opts.cellHeightUnit;
+            if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
+                opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
+                delete opts.cellHeightUnit;
             }
-            this.cellHeight(this.opts.cellHeight, false);
+            this.cellHeight(opts.cellHeight, false);
         }
         // see if we need to adjust auto-hide
-        if (this.opts.alwaysShowResizeHandle === 'mobile') {
-            this.opts.alwaysShowResizeHandle = isTouch;
+        if (opts.alwaysShowResizeHandle === 'mobile') {
+            opts.alwaysShowResizeHandle = isTouch;
         }
         this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
         this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
-        let engineClass = this.opts.engineClass || GridStack.engineClass || GridStackEngine;
+        let engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
         this.engine = new engineClass({
             column: this.getColumn(),
-            float: this.opts.float,
-            maxRow: this.opts.maxRow,
+            float: opts.float,
+            maxRow: opts.maxRow,
             onChange: (cbNodes) => {
                 let maxH = 0;
                 this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h); });
@@ -300,25 +301,25 @@ class GridStack {
         });
         // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
         this._updateStyles(false, 0);
-        if (this.opts.auto) {
+        if (opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
             this.getGridItems().forEach(el => this._prepareElement(el));
             this.batchUpdate(false);
         }
         // load any passed in children as well, which overrides any DOM layout done above
-        if (this.opts.children) {
-            let children = this.opts.children;
-            delete this.opts.children;
+        if (opts.children) {
+            let children = opts.children;
+            delete opts.children;
             if (children.length)
                 this.load(children); // don't load empty
         }
         // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
-        this.setAnimation(this.opts.animate);
+        this.setAnimation(opts.animate);
         // dynamic grids require pausing during drag to detect over to nest vs push
-        if (this.opts.subGridDynamic && !DDManager.pauseDrag)
+        if (opts.subGridDynamic && !DDManager.pauseDrag)
             DDManager.pauseDrag = true;
-        if (this.opts.draggable?.pause !== undefined)
-            DDManager.pauseDrag = this.opts.draggable.pause;
+        if (opts.draggable?.pause !== undefined)
+            DDManager.pauseDrag = opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this._updateResizeEvent();
@@ -585,10 +586,17 @@ class GridStack {
     load(items, addRemove = GridStack.addRemoveCB || true) {
         items = Utils.cloneDeep(items); // so we can mod
         const column = this.getColumn();
+        // if we have a mix of new items without coordinates and existing items, separate them out so they can be added after #2639
+        let addAfter = items.filter(n => (n.x === undefined || n.y === undefined) && !Utils.find(this.engine.nodes, n.id));
+        if (addAfter.length && addAfter.length !== items.length) {
+            items = items.filter(n => !Utils.find(addAfter, n.id));
+        }
+        else
+            addAfter = [];
         // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else keep widget order
         const haveCoord = items.some(w => w.x !== undefined || w.y !== undefined);
         if (haveCoord)
-            items = Utils.sort(items, -1, column);
+            items = Utils.sort(items, -1);
         this._insertNotAppend = haveCoord; // if we create in reverse order...
         // 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
@@ -662,15 +670,20 @@ class GridStack {
                 this.addWidget(w);
             }
         });
+        // finally append any separate ones that didn't have explicit coordinates last so they can find next empty spot
+        if (addRemove) {
+            addAfter.forEach(w => this.addWidget(w));
+        }
         this.engine.removedNodes = removed;
         this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
-        // delay adding animation back
-        if (noAnim && this.opts.animate)
-            setTimeout(() => this.setAnimation(this.opts.animate));
+        // delay adding animation back, but check to make sure grid (opt) is still around
+        if (noAnim && this.opts?.animate)
+            setTimeout(() => { if (this.opts)
+                this.setAnimation(this.opts.animate); });
         return this;
     }
     /**
@@ -1042,7 +1055,7 @@ class GridStack {
             }
             if (!node)
                 return;
-            if (GridStack.addRemoveCB) {
+            if (removeDOM && GridStack.addRemoveCB) {
                 GridStack.addRemoveCB(this.el, node, false, false);
             }
             // remove our DOM data (circular link) and drag&drop permanently
@@ -1062,15 +1075,21 @@ class GridStack {
     /**
      * Removes all widgets from the grid.
      * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+     * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
      */
-    removeAll(removeDOM = true) {
+    removeAll(removeDOM = true, triggerEvent = true) {
         // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
         this.engine.nodes.forEach(n => {
+            if (removeDOM && GridStack.addRemoveCB) {
+                GridStack.addRemoveCB(this.el, n, false, false);
+            }
             delete n.el.gridstackNode;
-            this._removeDD(n.el);
+            if (!this.opts.staticGrid)
+                this._removeDD(n.el);
         });
-        this.engine.removeAll(removeDOM);
-        this._triggerRemoveEvent();
+        this.engine.removeAll(removeDOM, triggerEvent);
+        if (triggerEvent)
+            this._triggerRemoveEvent();
         return this;
     }
     /**
@@ -1334,8 +1353,9 @@ class GridStack {
             }
             // prevent added nodes from also triggering 'change' event (which is called next)
             this.engine.addedNodes.forEach(n => { delete n._dirty; });
-            this._triggerEvent('added', this.engine.addedNodes);
+            const addedNodes = [...this.engine.addedNodes];
             this.engine.addedNodes = [];
+            this._triggerEvent('added', addedNodes);
         }
         return this;
     }
@@ -1344,8 +1364,9 @@ class GridStack {
         if (this.engine.batchMode)
             return this;
         if (this.engine.removedNodes?.length) {
-            this._triggerEvent('removed', this.engine.removedNodes);
+            const removedNodes = [...this.engine.removedNodes];
             this.engine.removedNodes = [];
+            this._triggerEvent('removed', removedNodes);
         }
         return this;
     }
@@ -1917,7 +1938,7 @@ class GridStack {
         };
         dd.droppable(this.el, {
             accept: (el) => {
-                let node = el.gridstackNode;
+                let node = el.gridstackNode || this._readAttr(el, false);
                 // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
                 if (node?.grid === this)
                     return true;
@@ -1932,7 +1953,7 @@ class GridStack {
                     let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets);
                     canAccept = el.matches(selector);
                 }
-                // finally check to make sure we actually have space left #1571
+                // finally check to make sure we actually have space left #1571 #2633
                 if (canAccept && node && this.opts.maxRow) {
                     let n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
                     canAccept = this.engine.willItFit(n);
@@ -1994,7 +2015,7 @@ class GridStack {
                 node._temporaryRemoved = true; // so we can insert it
             }
             // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)
-            this._itemRemoving(node.el, false);
+            GridStack._itemRemoving(node.el, false);
             dd.on(el, 'drag', onDrag);
             // make sure this is called at least once when going fast #1578
             onDrag(event, el, helper);
@@ -2092,35 +2113,36 @@ class GridStack {
             if (this._gsEventHandler['dropped']) {
                 this._gsEventHandler['dropped']({ ...event, type: 'dropped' }, origNode && origNode.grid ? origNode : undefined, node);
             }
-            // delay adding animation back
+            // delay adding animation back, but check to make sure grid (opt) is still around
             if (noAnim)
-                setTimeout(() => this.setAnimation(this.opts.animate));
+                setTimeout(() => { if (this.opts)
+                    this.setAnimation(this.opts.animate); });
             return false; // prevent parent from receiving msg (which may be grid as well)
         });
         return this;
     }
     /** @internal mark item for removal */
-    _itemRemoving(el, remove) {
-        let node = el ? el.gridstackNode : undefined;
-        if (!node || !node.grid || el.classList.contains(this.opts.removableOptions.decline))
+    static _itemRemoving(el, remove) {
+        const node = el ? el.gridstackNode : undefined;
+        if (!node?.grid || el.classList.contains(node.grid.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');
     }
     /** @internal called to setup a trash drop zone if the user specifies it */
     _setupRemoveDrop() {
-        if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
-            let trashEl = document.querySelector(this.opts.removable);
-            if (!trashEl)
-                return this;
-            // only register ONE drop-over/dropout callback for the 'trash', and it will
-            // update the passed in item and parent grid because the 'trash' is a shared resource anyway,
-            // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
-            if (!dd.isDroppable(trashEl)) {
-                dd.droppable(trashEl, this.opts.removableOptions)
-                    .on(trashEl, 'dropover', (event, el) => this._itemRemoving(el, true))
-                    .on(trashEl, 'dropout', (event, el) => this._itemRemoving(el, false));
-            }
+        if (typeof this.opts.removable !== 'string')
+            return this;
+        let trashEl = document.querySelector(this.opts.removable);
+        if (!trashEl)
+            return this;
+        // only register ONE static drop-over/dropout callback for the 'trash', and it will
+        // update the passed in item and parent grid because the '.trash' is a shared resource anyway,
+        // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
+        if (!this.opts.staticGrid && !dd.isDroppable(trashEl)) {
+            dd.droppable(trashEl, this.opts.removableOptions)
+                .on(trashEl, 'dropover', (event, el) => GridStack._itemRemoving(el, true))
+                .on(trashEl, 'dropout', (event, el) => GridStack._itemRemoving(el, false));
         }
         return this;
     }
@@ -2375,7 +2397,7 @@ class GridStack {
         node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
         if (this.opts.removable === true) { // boolean vs a class string
             // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
-            this._itemRemoving(el, true);
+            GridStack._itemRemoving(el, true);
         }
         // finally if item originally came from another grid, but left us, restore things back to prev info
         if (el._gridstackNodeOrig) {
@@ -2400,6 +2422,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 = '10.1.0';
+GridStack.GDRev = '10.1.2';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map