gridstack 6.0.2 → 7.0.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 6.0.2
+ * GridStack 7.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -42,6 +42,7 @@ class GridStack {
      * @param opts
      */
     constructor(el, opts = {}) {
+        var _a, _b;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
@@ -70,10 +71,10 @@ class GridStack {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
-        let defaults = Object.assign(Object.assign({}, utils_1.Utils.cloneDeep(types_1.GridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || types_1.GridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || types_1.GridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || types_1.GridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || types_1.GridDefaults.staticGrid, draggable: {
-                handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || types_1.GridDefaults.draggable.handle,
+        let defaults = Object.assign(Object.assign({}, utils_1.Utils.cloneDeep(types_1.gridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || types_1.gridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || types_1.gridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || types_1.gridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || types_1.gridDefaults.staticGrid, draggable: {
+                handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || types_1.gridDefaults.draggable.handle,
             }, removableOptions: {
-                accept: opts.itemClass ? '.' + opts.itemClass : types_1.GridDefaults.removableOptions.accept,
+                accept: opts.itemClass ? '.' + opts.itemClass : types_1.gridDefaults.removableOptions.accept,
             } });
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
             defaults.animate = utils_1.Utils.toBool(el.getAttribute('gs-animate'));
@@ -93,12 +94,12 @@ class GridStack {
             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)
-        let parentGridItemEl = utils_1.Utils.closestByClass(this.el, types_1.GridDefaults.itemClass);
-        if (parentGridItemEl && parentGridItemEl.gridstackNode) {
-            this._isNested = parentGridItemEl.gridstackNode;
-            this._isNested.subGrid = this;
-            parentGridItemEl.classList.add('grid-stack-nested');
+        let parentGridItem = (_a = utils_1.Utils.closestUpByClass(this.el, types_1.gridDefaults.itemClass)) === null || _a === void 0 ? void 0 : _a.gridstackNode;
+        if (parentGridItem) {
+            parentGridItem.subGrid = this;
+            this.parentGridItem = parentGridItem;
             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') {
@@ -107,7 +108,7 @@ class GridStack {
         }
         else {
             // append unit if any are set
-            if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== types_1.GridDefaults.cellHeightUnit) {
+            if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== types_1.gridDefaults.cellHeightUnit) {
                 this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
                 delete this.opts.cellHeightUnit;
             }
@@ -117,7 +118,7 @@ class GridStack {
         if (this.opts.alwaysShowResizeHandle === 'mobile') {
             this.opts.alwaysShowResizeHandle = dd_touch_1.isTouch;
         }
-        this._styleSheetClass = 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0);
+        this._styleSheetClass = 'grid-stack-instance-' + gridstack_engine_1.GridStackEngine._idSeq++;
         this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
         let engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
@@ -169,6 +170,11 @@ class GridStack {
             GridStack.setupDragIn(this.opts.dragIn, this.opts.dragInOptions);
         delete this.opts.dragIn;
         delete this.opts.dragInOptions;
+        // dynamic grids require pausing during drag to detect over to nest vs push
+        if (this.opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
+            dd_manager_1.DDManager.pauseDrag = true;
+        if (((_b = this.opts.draggable) === null || _b === void 0 ? void 0 : _b.pause) !== undefined)
+            dd_manager_1.DDManager.pauseDrag = this.opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this._updateWindowResizeEvent();
@@ -271,7 +277,7 @@ class GridStack {
                 placeholderChild.innerHTML = this.opts.placeholderText;
             }
             this._placeholder = document.createElement('div');
-            this._placeholder.classList.add(this.opts.placeholderClass, types_1.GridDefaults.itemClass, this.opts.itemClass);
+            this._placeholder.classList.add(this.opts.placeholderClass, types_1.gridDefaults.itemClass, this.opts.itemClass);
             this.placeholder.appendChild(placeholderChild);
         }
         return this._placeholder;
@@ -336,26 +342,116 @@ class GridStack {
         // similar to makeWidget() that doesn't read attr again and worse re-create a new node and loose any _id
         this._prepareElement(el, true, options);
         this._updateContainerHeight();
-        // check if nested grid definition is present
-        if (node.subGrid && !node.subGrid.el) { // see if there is a sub-grid to create too
-            // if column special case it set, remember that flag and set default
-            let autoColumn;
-            let ops = node.subGrid;
-            if (ops.column === 'auto') {
-                ops.column = node.w;
-                ops.disableOneColumnMode = true; // driven by parent
-                autoColumn = true;
-            }
-            let content = node.el.querySelector('.grid-stack-item-content');
-            node.subGrid = GridStack.addGrid(content, node.subGrid);
-            if (autoColumn) {
-                node.subGrid._autoColumn = true;
-            }
+        // see if there is a sub-grid to create too
+        if (node.subGrid) {
+            this.makeSubGrid(node.el, undefined, undefined, false);
         }
         this._triggerAddEvent();
         this._triggerChangeEvent();
         return el;
     }
+    /**
+     * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
+     * from the parent subGrid options.
+     * @param el gridItem element to convert
+     * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
+     * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
+     * @returns newly created grid
+     */
+    makeSubGrid(el, ops, nodeToAdd, saveContent = true) {
+        var _a;
+        let node = el.gridstackNode;
+        if (!node) {
+            node = this.makeWidget(el).gridstackNode;
+        }
+        if ((_a = node.subGrid) === null || _a === void 0 ? void 0 : _a.el)
+            return node.subGrid; // already done
+        ops = utils_1.Utils.cloneDeep(ops || node.subGrid || Object.assign(Object.assign({}, this.opts.subGrid), { children: undefined }));
+        ops.subGrid = utils_1.Utils.cloneDeep(ops); // carry nesting settings to next one down
+        node.subGrid = ops;
+        // if column special case it set, remember that flag and set default
+        let autoColumn;
+        if (ops.column === 'auto') {
+            autoColumn = true;
+            ops.column = Math.max(node.w || 1, (nodeToAdd === null || nodeToAdd === void 0 ? void 0 : nodeToAdd.w) || 1);
+            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
+        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;
+            if (node.content) {
+                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);
+            this._prepareDragDropByNode(node); // ... and restore original D&D
+        }
+        // if we're adding an additional item, make the container large enough to have them both
+        if (nodeToAdd) {
+            let w = autoColumn ? ops.column : node.w;
+            let h = node.h + nodeToAdd.h;
+            let style = node.el.style;
+            style.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd
+            this.update(node.el, { w, h });
+            setTimeout(() => style.transition = null); // recover animation
+        }
+        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
+        if (autoColumn)
+            subGrid._autoColumn = true;
+        // add the original content back as a child of hte newly created grid
+        if (saveContent) {
+            subGrid.addWidget(newItem, newItemOpt);
+        }
+        // now add any additional node
+        if (nodeToAdd) {
+            if (nodeToAdd._moving) {
+                // create an artificial event even for the just created grid to receive this item
+                window.setTimeout(() => utils_1.Utils.simulateMouseEvent(nodeToAdd._event, 'mouseenter', subGrid.el), 0);
+            }
+            else {
+                subGrid.addWidget(node.el, node);
+            }
+        }
+        return subGrid;
+    }
+    /**
+     * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
+     * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
+     */
+    removeAsSubGrid(nodeThatRemoved) {
+        var _a;
+        let pGrid = (_a = this.parentGridItem) === null || _a === void 0 ? void 0 : _a.grid;
+        if (!pGrid)
+            return;
+        pGrid.batchUpdate();
+        pGrid.removeWidget(this.parentGridItem.el, true, true);
+        this.engine.nodes.forEach(n => {
+            // migrate any children over and offsetting by our location
+            n.x += this.parentGridItem.x;
+            n.y += this.parentGridItem.y;
+            pGrid.addWidget(n.el, n);
+        });
+        pGrid.batchUpdate(false);
+        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) {
+            window.setTimeout(() => utils_1.Utils.simulateMouseEvent(nodeThatRemoved._event, 'mouseenter', pGrid.el), 0);
+        }
+    }
     /**
     /**
      * saves the current layout returning a list of widgets for serialization which might include any nested grids.
@@ -416,7 +512,7 @@ class GridStack {
             else {
                 delete o.alwaysShowResizeHandle;
             }
-            utils_1.Utils.removeInternalAndSame(o, types_1.GridDefaults);
+            utils_1.Utils.removeInternalAndSame(o, types_1.gridDefaults);
             o.children = list;
             return o;
         }
@@ -557,7 +653,7 @@ class GridStack {
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
         if (update) {
-            this._updateStyles(true, this.getRow()); // true = force re-create, for that # of rows
+            this._updateStyles(true); // true = force re-create for current # of rows
         }
         return this;
     }
@@ -653,7 +749,7 @@ class GridStack {
         }
         this._removeStylesheet();
         this.el.removeAttribute('gs-current-row');
-        delete this._isNested;
+        delete this.parentGridItem;
         delete this.opts;
         delete this._placeholder;
         delete this.engine;
@@ -1029,15 +1125,15 @@ class GridStack {
         return this;
     }
     /** @internal */
-    _triggerEvent(name, data) {
-        let event = data ? new CustomEvent(name, { bubbles: false, detail: data }) : new Event(name);
+    _triggerEvent(type, data) {
+        let event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
         this.el.dispatchEvent(event);
         return this;
     }
     /** @internal called to delete the current dynamic style sheet used for our layout */
     _removeStylesheet() {
         if (this._styles) {
-            utils_1.Utils.removeStylesheet(this._styles._id);
+            utils_1.Utils.removeStylesheet(this._styleSheetClass);
             delete this._styles;
         }
         return this;
@@ -1048,6 +1144,8 @@ class GridStack {
         if (forceUpdate) {
             this._removeStylesheet();
         }
+        if (!maxH)
+            maxH = this.getRow();
         this._updateContainerHeight();
         // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
         if (this.opts.cellHeight === 0) {
@@ -1058,13 +1156,11 @@ class GridStack {
         let prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`;
         // create one as needed
         if (!this._styles) {
-            let id = 'gridstack-style-' + (Math.random() * 100000).toFixed();
             // 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(id, styleLocation);
+            this._styles = utils_1.Utils.createStylesheet(this._styleSheetClass, styleLocation);
             if (!this._styles)
                 return this;
-            this._styles._id = id;
             this._styles._max = 0;
             // these are done once only
             utils_1.Utils.addCSSRule(this._styles, prefix, `min-height: ${cellHeight}${cellHeightUnit}`);
@@ -1117,14 +1213,14 @@ class GridStack {
         // }
         this.el.setAttribute('gs-current-row', String(row));
         if (row === 0) {
-            this.el.style.removeProperty('height');
+            this.el.style.removeProperty('min-height');
             return this;
         }
         let cellHeight = this.opts.cellHeight;
         let unit = this.opts.cellHeightUnit;
         if (!cellHeight)
             return this;
-        this.el.style.height = row * cellHeight + unit;
+        this.el.style.minHeight = row * cellHeight + unit;
         return this;
     }
     /** @internal */
@@ -1237,10 +1333,10 @@ class GridStack {
             return; // return if we're gone or no size yet (will get called again)
         let changedColumn = false;
         // see if we're nested and take our column count from our parent....
-        if (this._autoColumn && this._isNested) {
-            if (this.opts.column !== this._isNested.w) {
+        if (this._autoColumn && this.parentGridItem) {
+            if (this.opts.column !== this.parentGridItem.w) {
                 changedColumn = true;
-                this.column(this._isNested.w, 'none');
+                this.column(this.parentGridItem.w, 'none');
             }
         }
         else {
@@ -1281,7 +1377,7 @@ class GridStack {
     /** add or remove the window size event handler */
     _updateWindowResizeEvent(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)
-        const workTodo = (this._isAutoCellHeight || !this.opts.disableOneColumnMode) && !this._isNested;
+        const 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);
@@ -1373,8 +1469,8 @@ class GridStack {
     /* eslint-disable @typescript-eslint/no-unused-vars */
     /**
      * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
-     * Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar
-     * is dynamically create and needs to change later.
+     * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
+     * is dynamically create and needs to be set later.
      * @param dragIn string selector (ex: '.sidebar .grid-stack-item')
      * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
      **/
@@ -1441,7 +1537,8 @@ 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 = '6.0.2';
+GridStack.GDRev = '7.0.0';
 const dd_touch_1 = require("./dd-touch");
+const dd_manager_1 = require("./dd-manager");
 __exportStar(require("./dd-gridstack"), exports);
 //# sourceMappingURL=gridstack.js.map