gridstack 6.0.2 → 7.0.0

package/dist/es5/gridstack.js

@@ -30,7 +30,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 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
@@ -62,6 +62,7 @@ var GridStack = /** @class */ (function () {
     function GridStack(el, opts) {
         var _this = this;
         if (opts === void 0) { opts = {}; }
+        var _a, _b;
         /** @internal */
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
@@ -90,10 +91,10 @@ var GridStack = /** @class */ (function () {
             opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
         }
         // elements DOM attributes override any passed options (like CSS style) - merge the two together
-        var defaults = __assign(__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,
+        var defaults = __assign(__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'));
@@ -113,12 +114,12 @@ var GridStack = /** @class */ (function () {
             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)
-        var 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');
+        var 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') {
@@ -127,7 +128,7 @@ var GridStack = /** @class */ (function () {
         }
         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;
             }
@@ -137,7 +138,7 @@ var GridStack = /** @class */ (function () {
         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();
         var engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
@@ -189,6 +190,11 @@ var GridStack = /** @class */ (function () {
             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();
@@ -297,7 +303,7 @@ var GridStack = /** @class */ (function () {
                     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;
@@ -365,26 +371,118 @@ var GridStack = /** @class */ (function () {
         // 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
-            var autoColumn = void 0;
-            var ops = node.subGrid;
-            if (ops.column === 'auto') {
-                ops.column = node.w;
-                ops.disableOneColumnMode = true; // driven by parent
-                autoColumn = true;
-            }
-            var 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
+     */
+    GridStack.prototype.makeSubGrid = function (el, ops, nodeToAdd, saveContent) {
+        var _a;
+        if (saveContent === void 0) { saveContent = true; }
+        var 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 || __assign(__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
+        var 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
+        var content = node.el.querySelector('.grid-stack-item-content');
+        var newItem;
+        var newItemOpt;
+        if (saveContent) {
+            this._removeDD(node.el); // remove D&D since it's set on content div
+            var 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 = __assign(__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) {
+            var w = autoColumn ? ops.column : node.w;
+            var h = node.h + nodeToAdd.h;
+            var style_1 = node.el.style;
+            style_1.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd
+            this.update(node.el, { w: w, h: h });
+            setTimeout(function () { return style_1.transition = null; }); // recover animation
+        }
+        var 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(function () { return 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)
+     */
+    GridStack.prototype.removeAsSubGrid = function (nodeThatRemoved) {
+        var _this = this;
+        var _a;
+        var 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(function (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(function () { return 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.
@@ -447,7 +545,7 @@ var GridStack = /** @class */ (function () {
             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;
         }
@@ -593,7 +691,7 @@ var GridStack = /** @class */ (function () {
         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;
     };
@@ -692,7 +790,7 @@ var GridStack = /** @class */ (function () {
         }
         this._removeStylesheet();
         this.el.removeAttribute('gs-current-row');
-        delete this._isNested;
+        delete this.parentGridItem;
         delete this.opts;
         delete this._placeholder;
         delete this.engine;
@@ -1079,15 +1177,15 @@ var GridStack = /** @class */ (function () {
         return this;
     };
     /** @internal */
-    GridStack.prototype._triggerEvent = function (name, data) {
-        var event = data ? new CustomEvent(name, { bubbles: false, detail: data }) : new Event(name);
+    GridStack.prototype._triggerEvent = function (type, data) {
+        var 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 */
     GridStack.prototype._removeStylesheet = function () {
         if (this._styles) {
-            utils_1.Utils.removeStylesheet(this._styles._id);
+            utils_1.Utils.removeStylesheet(this._styleSheetClass);
             delete this._styles;
         }
         return this;
@@ -1099,6 +1197,8 @@ var GridStack = /** @class */ (function () {
         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) {
@@ -1109,13 +1209,11 @@ var GridStack = /** @class */ (function () {
         var prefix = "." + this._styleSheetClass + " > ." + this.opts.itemClass;
         // create one as needed
         if (!this._styles) {
-            var id = 'gridstack-style-' + (Math.random() * 100000).toFixed();
             // insert style to parent (instead of 'head' by default) to support WebComponent
             var 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);
@@ -1168,14 +1266,14 @@ var GridStack = /** @class */ (function () {
         // }
         this.el.setAttribute('gs-current-row', String(row));
         if (row === 0) {
-            this.el.style.removeProperty('height');
+            this.el.style.removeProperty('min-height');
             return this;
         }
         var cellHeight = this.opts.cellHeight;
         var 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 */
@@ -1291,10 +1389,10 @@ var GridStack = /** @class */ (function () {
             return; // return if we're gone or no size yet (will get called again)
         var 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 {
@@ -1336,7 +1434,7 @@ var GridStack = /** @class */ (function () {
     GridStack.prototype._updateWindowResizeEvent = function (forceRemove) {
         if (forceRemove === void 0) { 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)
-        var workTodo = (this._isAutoCellHeight || !this.opts.disableOneColumnMode) && !this._isNested;
+        var 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);
@@ -1434,8 +1532,8 @@ var GridStack = /** @class */ (function () {
     /* 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'}
      **/
@@ -1500,10 +1598,11 @@ var 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 = '6.0.2';
+    GridStack.GDRev = '7.0.0';
     return GridStack;
 }());
 exports.GridStack = GridStack;
 var dd_touch_1 = require("./dd-touch");
+var dd_manager_1 = require("./dd-manager");
 __exportStar(require("./dd-gridstack"), exports);
 //# sourceMappingURL=gridstack.js.map