gridstack 5.1.1 → 6.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 5.1.1
+ * GridStack 6.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -38,12 +38,10 @@ exports.GridStack = void 0;
  */
 var gridstack_engine_1 = require("./gridstack-engine");
 var utils_1 = require("./utils");
-var gridstack_ddi_1 = require("./gridstack-ddi");
 // export all dependent file as well to make it easier for users to just import the main file
 __exportStar(require("./types"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./gridstack-engine"), exports);
-__exportStar(require("./gridstack-ddi"), exports);
 // default values for grid options - used during init and when saving out
 var GridDefaults = {
     column: 12,
@@ -63,14 +61,12 @@ var GridDefaults = {
     float: false,
     staticGrid: false,
     animate: true,
-    alwaysShowResizeHandle: false,
+    alwaysShowResizeHandle: 'mobile',
     resizable: {
-        autoHide: true,
         handles: 'se'
     },
     draggable: {
         handle: '.grid-stack-item-content',
-        scroll: false,
         appendTo: 'body'
     },
     disableDrag: false,
@@ -83,7 +79,7 @@ var GridDefaults = {
     marginUnit: 'px',
     cellHeightUnit: 'px',
     disableOneColumnMode: false,
-    oneColumnModeDomSort: false
+    oneColumnModeDomSort: false,
 };
 /**
  * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
@@ -127,16 +123,15 @@ var GridStack = /** @class */ (function () {
             opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth;
             delete anyOpts.minWidth;
         }
-        // elements attributes override any passed options (like CSS style) - merge the two together
-        var defaults = __assign(__assign({}, utils_1.Utils.cloneDeep(GridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || 12, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || 0, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || 0, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || false, _styleSheetClass: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0), alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false, resizable: {
-                autoHide: !(opts.alwaysShowResizeHandle || false),
-                handles: 'se'
-            }, draggable: {
-                handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || '.grid-stack-item-content',
-                scroll: false,
-                appendTo: 'body'
+        // save original setting so we can restore on save
+        if (opts.alwaysShowResizeHandle !== undefined) {
+            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(GridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || GridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || GridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || GridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || GridDefaults.staticGrid, _styleSheetClass: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0), draggable: {
+                handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || GridDefaults.draggable.handle,
             }, removableOptions: {
-                accept: '.' + (opts.itemClass || 'grid-stack-item')
+                accept: opts.itemClass ? '.' + opts.itemClass : 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'));
@@ -176,6 +171,10 @@ var GridStack = /** @class */ (function () {
             }
             this.cellHeight(this.opts.cellHeight, false);
         }
+        // see if we need to adjust auto-hide
+        if (this.opts.alwaysShowResizeHandle === 'mobile') {
+            this.opts.alwaysShowResizeHandle = dd_touch_1.isTouch;
+        }
         this.el.classList.add(this.opts._styleSheetClass);
         this._setStaticClass();
         var engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
@@ -215,7 +214,7 @@ var GridStack = /** @class */ (function () {
                 });
             });
             elements_1.sort(function (a, b) { return a.i - b.i; }).forEach(function (e) { return _this._prepareElement(e.el); });
-            this.commit();
+            this.batchUpdate(false);
         }
         this.setAnimation(this.opts.animate);
         this._updateStyles();
@@ -477,6 +476,14 @@ var GridStack = /** @class */ (function () {
                 o.column = 'auto';
                 delete o.disableOneColumnMode;
             }
+            var origShow = o._alwaysShowResizeHandle;
+            delete o._alwaysShowResizeHandle;
+            if (origShow !== undefined) {
+                o.alwaysShowResizeHandle = origShow;
+            }
+            else {
+                delete o.alwaysShowResizeHandle;
+            }
             utils_1.Utils.removeInternalAndSame(o, GridDefaults);
             o.children = list;
             return o;
@@ -545,17 +552,24 @@ var GridStack = /** @class */ (function () {
             }
         });
         this.engine.removedNodes = removed;
-        this.commit();
+        this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
         return this;
     };
     /**
-     * Initializes batch updates. You will see no changes until `commit()` method is called.
+     * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
+     * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
      */
-    GridStack.prototype.batchUpdate = function () {
-        this.engine.batchUpdate();
+    GridStack.prototype.batchUpdate = function (flag) {
+        if (flag === void 0) { flag = true; }
+        this.engine.batchUpdate(flag);
+        if (!flag) {
+            this._triggerRemoveEvent();
+            this._triggerAddEvent();
+            this._triggerChangeEvent();
+        }
         return this;
     };
     /**
@@ -630,16 +644,6 @@ var GridStack = /** @class */ (function () {
         // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
         return (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
     };
-    /**
-     * Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
-     */
-    GridStack.prototype.commit = function () {
-        this.engine.commit();
-        this._triggerRemoveEvent();
-        this._triggerAddEvent();
-        this._triggerChangeEvent();
-        return this;
-    };
     /** re-layout grid items to reclaim any empty space */
     GridStack.prototype.compact = function () {
         this.engine.compact();
@@ -896,7 +900,7 @@ var GridStack = /** @class */ (function () {
                 return;
             // remove our DOM data (circular link) and drag&drop permanently
             delete el.gridstackNode;
-            gridstack_ddi_1.GridStackDDI.get().remove(el);
+            _this._removeDD(el);
             _this.engine.removeNode(node, removeDOM, triggerEvent);
             if (removeDOM && el.parentElement) {
                 el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM
@@ -913,11 +917,12 @@ var GridStack = /** @class */ (function () {
      * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
      */
     GridStack.prototype.removeAll = function (removeDOM) {
+        var _this = this;
         if (removeDOM === void 0) { removeDOM = true; }
         // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
         this.engine.nodes.forEach(function (n) {
             delete n.el.gridstackNode;
-            gridstack_ddi_1.GridStackDDI.get().remove(n.el);
+            _this._removeDD(n.el);
         });
         this.engine.removeAll(removeDOM);
         this._triggerRemoveEvent();
@@ -1455,7 +1460,7 @@ var GridStack = /** @class */ (function () {
         return this;
     };
     /*
-     * drag&drop empty stubs that will be implemented in gridstack-dd.ts for non static grid
+     * drag&drop empty stubs that will be implemented in dd-gridstack.ts for non static grid
      * so we don't incur the load unless needed.
      * NOTE: had to make those methods public in order to define them else as
      *   GridStack.prototype._setupAcceptWidget = function()
@@ -1467,7 +1472,7 @@ var GridStack = /** @class */ (function () {
      * 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.
      * @param dragIn string selector (ex: '.sidebar .grid-stack-item')
-     * @param dragInOptions options - see DDDragInOpt. (default: {revert: 'invalid', handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}
+     * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
      **/
     GridStack.setupDragIn = function (dragIn, dragInOptions) { };
     /**
@@ -1510,6 +1515,8 @@ var GridStack = /** @class */ (function () {
      * Enables/disables widget resizing. No-op for static grids.
      */
     GridStack.prototype.enableResize = function (doEnable) { return this; };
+    /** @internal removes any drag&drop present (called during destroy) */
+    GridStack.prototype._removeDD = function (el) { return this; };
     /** @internal called to add drag over support to support widgets */
     GridStack.prototype._setupAcceptWidget = function () { return this; };
     /** @internal called to setup a trash drop zone if the user specifies it */
@@ -1522,11 +1529,16 @@ var GridStack = /** @class */ (function () {
     GridStack.prototype._dragOrResize = function (el, event, ui, node, cellWidth, cellHeight) { return; };
     /** @internal called when a node leaves our area (mouse out or shape outside) **/
     GridStack.prototype._leave = function (el, helper) { return; };
+    // legacy method removed
+    GridStack.prototype.commit = function () { utils_1.obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; };
     /** scoping so users can call GridStack.Utils.sort() for example */
     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.0';
     return GridStack;
 }());
 exports.GridStack = GridStack;
+var dd_touch_1 = require("./dd-touch");
+__exportStar(require("./dd-gridstack"), exports);
 //# sourceMappingURL=gridstack.js.map