gridstack 8.2.0 → 8.2.2

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 8.2.0
+ * GridStack 8.2.2
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -369,6 +369,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         if (!el)
             return;
+        // if the caller ended up initializing the widget in addRemoveCB, or we stared with one already, skip the rest
+        node = el.gridstackNode;
+        if (node && el.parentElement === this.el && this.engine.nodes.find(function (n) { return n._id === node._id; }))
+            return el;
         // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
         // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
         // So make sure we load any DOM attributes that are not specified in passed in options (which override)
@@ -383,21 +387,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         else {
             this.el.appendChild(el);
         }
-        // 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();
-        // see if there is a sub-grid to create
-        if (node.subGridOpts) {
-            this.makeSubGrid(node.el, node.subGridOpts, 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
-        if (this._prevColumn && this.opts.column === 1) {
-            this._ignoreLayoutsNodeChange = true;
-        }
-        this._triggerAddEvent();
-        this._triggerChangeEvent();
-        delete this._ignoreLayoutsNodeChange;
+        this.makeWidget(el, options);
         return el;
     };
     /**
@@ -633,7 +623,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // now add/update the widgets
         items.forEach(function (w) {
             var _a;
-            var item = (w.id || w.id === 0) ? _this.engine.nodes.find(function (n) { return n.id === w.id; }) : undefined;
+            var item = (w.id !== undefined) ? _this.engine.nodes.find(function (n) { return n.id === w.id; }) : undefined;
             if (item) {
                 _this.update(item.el, w);
                 if ((_a = w.subGridOpts) === null || _a === void 0 ? void 0 : _a.children) { // update any sub grid as well
@@ -682,7 +672,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // else get first cell height
         var el = this.el.querySelector('.' + this.opts.itemClass);
         if (el) {
-            var height = utils_1.Utils.toNumber(el.getAttribute('gs-h'));
+            var height = utils_1.Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
             return Math.round(el.offsetHeight / height);
         }
         // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)
@@ -914,8 +904,19 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var el = GridStack.getElement(els);
         this._prepareElement(el, true, options);
         this._updateContainerHeight();
+        // see if there is a sub-grid to create
+        var node = el.gridstackNode;
+        if (node.subGridOpts) {
+            this.makeSubGrid(el, node.subGridOpts, 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
+        if (this._prevColumn && this.opts.column === 1) {
+            this._ignoreLayoutsNodeChange = true;
+        }
         this._triggerAddEvent();
         this._triggerChangeEvent();
+        delete this._ignoreLayoutsNodeChange;
         return el;
     };
     /**
@@ -1067,9 +1068,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var _this = this;
         if (updateClass === void 0) { updateClass = true; }
         if (recurse === void 0) { recurse = true; }
-        if (this.opts.staticGrid === val)
+        if (!!this.opts.staticGrid === val)
             return this;
-        this.opts.staticGrid = val;
+        val ? this.opts.staticGrid = true : delete this.opts.staticGrid;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this.engine.nodes.forEach(function (n) {
@@ -1389,16 +1390,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         return this;
     };
     /** @internal call to read any default attributes from element */
-    GridStack.prototype._readAttr = function (el) {
+    GridStack.prototype._readAttr = function (el, clearDefaultAttr) {
+        if (clearDefaultAttr === void 0) { clearDefaultAttr = true; }
         var n = {};
         n.x = utils_1.Utils.toNumber(el.getAttribute('gs-x'));
         n.y = utils_1.Utils.toNumber(el.getAttribute('gs-y'));
         n.w = utils_1.Utils.toNumber(el.getAttribute('gs-w'));
         n.h = utils_1.Utils.toNumber(el.getAttribute('gs-h'));
-        if (!(n.w > 1))
-            el.removeAttribute('gs-w');
-        if (!(n.h > 1))
-            el.removeAttribute('gs-h');
         n.autoPosition = utils_1.Utils.toBool(el.getAttribute('gs-auto-position'));
         n.noResize = utils_1.Utils.toBool(el.getAttribute('gs-no-resize'));
         n.noMove = utils_1.Utils.toBool(el.getAttribute('gs-no-move'));
@@ -1406,17 +1404,24 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         n.id = el.getAttribute('gs-id');
         // read but never written out
         n.maxW = utils_1.Utils.toNumber(el.getAttribute('gs-max-w'));
-        if (n.maxW)
-            el.removeAttribute('gs-max-w');
         n.minW = utils_1.Utils.toNumber(el.getAttribute('gs-min-w'));
-        if (n.minW)
-            el.removeAttribute('gs-min-w');
         n.maxH = utils_1.Utils.toNumber(el.getAttribute('gs-max-h'));
-        if (n.maxH)
-            el.removeAttribute('gs-max-h');
         n.minH = utils_1.Utils.toNumber(el.getAttribute('gs-min-h'));
-        if (n.minH)
-            el.removeAttribute('gs-min-h');
+        // v8.x optimization to reduce un-needed attr that don't render or are default CSS
+        if (clearDefaultAttr) {
+            if (n.w === 1)
+                el.removeAttribute('gs-w');
+            if (n.h === 1)
+                el.removeAttribute('gs-h');
+            if (n.maxW)
+                el.removeAttribute('gs-max-w');
+            if (n.minW)
+                el.removeAttribute('gs-min-w');
+            if (n.maxH)
+                el.removeAttribute('gs-max-h');
+            if (n.minH)
+                el.removeAttribute('gs-min-h');
+        }
         // remove any key not found (null or false which is default)
         for (var key in n) {
             if (!n.hasOwnProperty(key))
@@ -1617,42 +1622,36 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
      * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
      * @param els widget or selector to modify.
-     * @param val if true widget will be draggable.
+     * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static.
      */
     GridStack.prototype.movable = function (els, val) {
         var _this = this;
         if (this.opts.staticGrid)
             return this; // can't move a static grid!
         GridStack.getElements(els).forEach(function (el) {
-            var node = el.gridstackNode;
-            if (!node)
+            var n = el.gridstackNode;
+            if (!n)
                 return;
-            if (val)
-                delete node.noMove;
-            else
-                node.noMove = true;
-            _this._prepareDragDropByNode(node); // init DD if need be, and adjust
+            val ? delete n.noMove : n.noMove = true;
+            _this._prepareDragDropByNode(n); // init DD if need be, and adjust
         });
         return this;
     };
     /**
      * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
      * @param els  widget or selector to modify
-     * @param val  if true widget will be resizable.
+     * @param val  if true widget will be resizable, assuming the parent grid isn't noResize or static.
      */
     GridStack.prototype.resizable = function (els, val) {
         var _this = this;
         if (this.opts.staticGrid)
             return this; // can't resize a static grid!
         GridStack.getElements(els).forEach(function (el) {
-            var node = el.gridstackNode;
-            if (!node)
+            var n = el.gridstackNode;
+            if (!n)
                 return;
-            if (val)
-                delete node.noResize;
-            else
-                node.noResize = true;
-            _this._prepareDragDropByNode(node); // init DD if need be, and adjust
+            val ? delete n.noResize : n.noResize = true;
+            _this._prepareDragDropByNode(n); // init DD if need be, and adjust
         });
         return this;
     };
@@ -1671,7 +1670,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (this.opts.staticGrid)
             return;
         this.enableMove(false, recurse);
-        this.enableResize(false, recurse); // @ts-ignore
+        this.enableResize(false, recurse);
         this._triggerEvent('disable');
         return this;
     };
@@ -1689,12 +1688,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (this.opts.staticGrid)
             return;
         this.enableMove(true, recurse);
-        this.enableResize(true, recurse); // @ts-ignore
+        this.enableResize(true, recurse);
         this._triggerEvent('enable');
         return this;
     };
     /**
-     * Enables/disables widget moving. No-op for static grids.
+     * Enables/disables widget moving. No-op for static grids, and locally defined items still overrule
      * @param recurse true (default) if sub-grids also get updated
      */
     GridStack.prototype.enableMove = function (doEnable, recurse) {
@@ -1702,9 +1701,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (recurse === void 0) { recurse = true; }
         if (this.opts.staticGrid)
             return this; // can't move a static grid!
-        this.opts.disableDrag = !doEnable; // FIRST before we update children as grid overrides #1658
+        doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658
         this.engine.nodes.forEach(function (n) {
-            _this.movable(n.el, doEnable);
+            _this._prepareDragDropByNode(n);
             if (n.subGrid && recurse)
                 n.subGrid.enableMove(doEnable, recurse);
         });
@@ -1719,9 +1718,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (recurse === void 0) { recurse = true; }
         if (this.opts.staticGrid)
             return this; // can't size a static grid!
-        this.opts.disableResize = !doEnable; // FIRST before we update children as grid overrides #1658
+        doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658
         this.engine.nodes.forEach(function (n) {
-            _this.resizable(n.el, doEnable);
+            _this._prepareDragDropByNode(n);
             if (n.subGrid && recurse)
                 n.subGrid.enableResize(doEnable, recurse);
         });
@@ -1829,8 +1828,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             cellWidth = _this.cellWidth();
             cellHeight = _this.getCellHeight(true);
             // load any element attributes if we don't have a node
-            if (!node) { // @ts-ignore private read only on ourself
-                node = _this._readAttr(el);
+            if (!node) {
+                node = _this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354
             }
             if (!node.grid) {
                 node._isExternal = true;
@@ -2245,7 +2244,7 @@ var GridStack = exports.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 = '8.2.0';
+    GridStack.GDRev = '8.2.2';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map