gridstack 5.0.0 → 5.1.0

package/dist/es5/gridstack.d.ts

@@ -1,8 +1,8 @@
 /*!
- * GridStack 5.0
+ * GridStack 5.1.0
  * https://gridstackjs.com/
  *
- * Copyright (c) 2021 Alain Dumesny
+ * Copyright (c) 2021-2022 Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 import { GridStackEngine } from './gridstack-engine';
@@ -70,6 +70,11 @@ export declare class GridStack {
      * @param opt grids options used to initialize the grid, and list of children
      */
     static addGrid(parent: HTMLElement, opt?: GridStackOptions): GridStack;
+    /** call this method to register your engine instead of the default one.
+     * See instead `GridStackOptions.engineClass` if you only need to
+     * replace just one instance.
+     */
+    static registerEngine(engineClass: typeof GridStackEngine): void;
     /** scoping so users can call GridStack.Utils.sort() for example */
     static Utils: typeof Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
@@ -80,6 +85,7 @@ export declare class GridStack {
     engine: GridStackEngine;
     /** grid options - public for classes to access, but use methods to modify! */
     opts: GridStackOptions;
+    protected static engineClass: typeof GridStackEngine;
     /**
      * Construct a grid item from the given element and options
      * @param el
@@ -149,7 +155,7 @@ export declare class GridStack {
     /** Gets current cell width. */
     cellWidth(): number;
     /** return our expected width (or parent) for 1 column check */
-    private _widthOrContainer;
+    protected _widthOrContainer(): number;
     /**
      * Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
      */
@@ -294,7 +300,7 @@ export declare class GridStack {
      */
     onParentResize(): GridStack;
     /** add or remove the window size event handler */
-    private _updateWindowResizeEvent;
+    protected _updateWindowResizeEvent(forceRemove?: boolean): GridStack;
     /**
      * 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

package/dist/es5/gridstack.js

@@ -30,10 +30,10 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 5.0
+ * GridStack 5.1.0
  * https://gridstackjs.com/
  *
- * Copyright (c) 2021 Alain Dumesny
+ * Copyright (c) 2021-2022 Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 var gridstack_engine_1 = require("./gridstack-engine");
@@ -59,7 +59,7 @@ var GridDefaults = {
     cellHeightThrottle: 100,
     margin: 10,
     auto: true,
-    minWidth: 768,
+    oneColumnSize: 768,
     float: false,
     staticGrid: false,
     animate: true,
@@ -120,6 +120,13 @@ var GridStack = /** @class */ (function () {
         if (opts.column === 'auto') {
             delete opts.column;
         }
+        // 'minWidth' legacy support in 5.1
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var anyOpts = opts;
+        if (anyOpts.minWidth !== undefined) {
+            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),
@@ -136,9 +143,9 @@ var GridStack = /** @class */ (function () {
         }
         this.opts = utils_1.Utils.defaults(opts, defaults);
         opts = null; // make sure we use this.opts instead
-        this.initMargin(); // part of settings 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)
-        if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.minWidth) {
+        if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {
             this._prevColumn = this.getColumn();
             this.opts.column = 1;
         }
@@ -171,7 +178,8 @@ var GridStack = /** @class */ (function () {
         }
         this.el.classList.add(this.opts._styleSheetClass);
         this._setStaticClass();
-        this.engine = new gridstack_engine_1.GridStackEngine({
+        var engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
+        this.engine = new engineClass({
             column: this.getColumn(),
             float: this.opts.float,
             maxRow: this.opts.maxRow,
@@ -310,6 +318,13 @@ var GridStack = /** @class */ (function () {
         }
         return grid;
     };
+    /** call this method to register your engine instead of the default one.
+     * See instead `GridStackOptions.engineClass` if you only need to
+     * replace just one instance.
+     */
+    GridStack.registerEngine = function (engineClass) {
+        GridStack.engineClass = engineClass;
+    };
     Object.defineProperty(GridStack.prototype, "placeholder", {
         /** @internal create placeholder DIV as needed */
         get: function () {
@@ -1026,7 +1041,7 @@ var GridStack = /** @class */ (function () {
         // re-use existing margin handling
         this.opts.margin = value;
         this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;
-        this.initMargin();
+        this._initMargin();
         this._updateStyles(true); // true = force re-create
         return this;
     };
@@ -1314,7 +1329,7 @@ var GridStack = /** @class */ (function () {
         }
         else {
             // else check for 1 column in/out behavior
-            var oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.minWidth;
+            var oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
             if ((this.opts.column === 1) !== oneColumn) {
                 changedColumn = true;
                 if (this.opts.animate) {
@@ -1377,7 +1392,7 @@ var GridStack = /** @class */ (function () {
     /** @internal */
     GridStack.getGridElements = function (els) { return utils_1.Utils.getElements(els); };
     /** @internal initialize margin top/bottom/left/right and units */
-    GridStack.prototype.initMargin = function () {
+    GridStack.prototype._initMargin = function () {
         var data;
         var margin = 0;
         // support passing multiple values like CSS (ex: '5px 10px 0 20px')