Merge pull request #1491 from adumesny/develop

more update(el, opts) changes

Author: adumesny

doc/CHANGES.md

@@ -48,7 +48,7 @@ Change log
 - fix [1484](https://github.com/gridstack/gridstack.js/issues/1484) dragging between 2 grids and back (regression in 2.0.1) 
 - fix [1471](https://github.com/gridstack/gridstack.js/issues/1471) `load()` into 1 column mode doesn't resize back to 12 correctly
 - fix [1235](https://github.com/gridstack/gridstack.js/issues/1235) `update(el, opts)` re-write to take all `GridStackWidget` options (not just x,y,width,height) and do everything efficiently.
-Fixed `locked()`, `move()`, `resize()`, `minWidth()`,etc... to call update() instead which does all the constrain, not just update attributes!
+Hiding `locked()`, `move()`, `resize()`, `minWidth()`, etc... as they just simply call update() which does all the constrain now as well!
 - del `ddPlugin` grid option as we only have one drag&drop plugin at runtime, which is defined by the include you use (HTML5 vs jquery vs none)
 
 ## 2.2.0 (2020-11-7)

doc/README.md

@@ -40,23 +40,16 @@ gridstack.js API
   - [getMargin()](#getmargin)
   - [isAreaEmpty(x, y, width, height)](#isareaemptyx-y-width-height)
   - [load(layout: GridStackWidget[], boolean | ((w: GridStackWidget, add: boolean) => void)  = true)](#loadlayout-gridstackwidget-boolean--w-gridstackwidget-add-boolean--void---true)
-  - [locked(el, val)](#lockedel-val)
   - [makeWidget(el)](#makewidgetel)
   - [margin(value: numberOrString)](#marginvalue-numberorstring)
-  - [maxHeight(el, val)](#maxheightel-val)
-  - [minHeight(el, val)](#minheightel-val)
-  - [maxWidth(el, val)](#maxwidthel-val)
-  - [minWidth(el, val)](#minwidthel-val)
   - [movable(el, val)](#movableel-val)
-  - [move(el, x, y)](#moveel-x-y)
   - [removeWidget(el, removeDOM = true, triggerEvent = true)](#removewidgetel-removedom--true-triggerevent--true)
   - [removeAll(removeDOM = true)](#removeallremovedom--true)
-  - [resize(el, width, height)](#resizeel-width-height)
   - [resizable(el, val)](#resizableel-val)
   - [save(saveContent = true): GridStackWidget[]](#savesavecontent--true-gridstackwidget)
   - [setAnimation(doAnimate)](#setanimationdoanimate)
   - [setStatic(staticValue)](#setstaticstaticvalue)
-  - [update(el, x, y, width, height)](#updateel-x-y-width-height)
+  - [update(el: GridStackElement, opts: GridStackWidget)](#updateel-gridstackelement-opts-gridstackwidget)
   - [willItFit(x, y, width, height, autoPosition)](#willitfitx-y-width-height-autoposition)
 - [Utils](#utils)
   - [GridStack.Utils.sort(nodes[, dir[, width]])](#gridstackutilssortnodes-dir-width)
@@ -398,13 +391,6 @@ Checks if specified area is empty.
 - `addAndRemove` boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving the user control of insertion.
 - see [example](http://gridstackjs.com/demo/serialization.html)
 
-### locked(el, val)
-
-Locks/unlocks widget.
-
-- `el` - widget or selector to modify.
-- `val` - if `true` widget will be locked.
-
 ### makeWidget(el)
 
 If you add elements to your gridstack container by hand, you have to tell gridstack afterwards to make them widgets. If you want gridstack to add the elements for you, use `addWidget` instead.
@@ -428,50 +414,13 @@ gap between grid item and content (default?: 10). This will set all 4 sides and
  - string with space separated values (ex: `'5px 10px 0 20px'` for all 4 sides, or `'5em 10em'` for top/bottom and left/right pairs like CSS).
  - Note: all sides must have same units (last one wins, default px)
 
-### maxHeight(el, val)
-
-Set the `maxHeight` for a widget.
-
-- `el` - widget to modify.
-- `val` - A numeric value of the number of rows
-
-### minHeight(el, val)
-
-Set the `minHeight` for a widget.
-
-- `el` - widget to modify.
-- `val` - A numeric value of the number of rows
-
-### maxWidth(el, val)
-
-Set the `maxWidth` for a widget.
-
-- `el` - widget to modify.
-- `val` - A numeric value of the number of columns
-
-### minWidth(el, val)
-
-Set the `minWidth` for a widget.
-
-- `el` - widget to modify.
-- `val` - A numeric value of the number of columns
-
 ### movable(el, val)
 
 Enables/Disables moving.
 
 - `el` - widget to modify
 - `val` - if `true` widget will be draggable.
 
-### move(el, x, y)
-
-Changes widget position
-
-Parameters:
-
-- `el` - widget to move
-- `x`, `y` - new position. If value is `null` or `undefined` it will be ignored.
-
 ### removeWidget(el, removeDOM = true, triggerEvent = true)
 
 Removes widget from the grid.
@@ -490,15 +439,6 @@ Parameters:
 
 - `removeDOM` - if `false` nodes won't be removed from the DOM (Optional. Default `true`).
 
-### resize(el, width, height)
-
-Changes widget size
-
-Parameters:
-
-- `el` - widget to resize
-- `width`, `height` - new dimensions. If value is `null` or `undefined` it will be ignored.
-
 ### resizable(el, val)
 
 Enables/Disables resizing.
@@ -523,15 +463,14 @@ Toggle the grid static state.  Also toggle the `grid-stack-static` class.
 
 - `staticValue` - if `true` the grid becomes static.
 
-### update(el, x, y, width, height)
+### update(el: GridStackElement, opts: GridStackWidget)
 
 Parameters:
 
-- `el` - widget to move
-- `x`, `y` - new position. If value is `null` or `undefined` it will be ignored.
-- `width`, `height` - new dimensions. If value is `null` or `undefined` it will be ignored.
+- `el` - widget to move (element or class string)
+- `opts` - updates all the possible item attributes passed in the structure (x,y,width,height, etc..). Only those set will be updated.
 
-Updates widget position/size.
+Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed and more.
 
 ### willItFit(x, y, width, height, autoPosition)
 

spec/gridstack-spec.ts

@@ -1768,27 +1768,13 @@ describe('gridstack', function() {
     afterEach(function() {
       document.body.removeChild(document.getElementById('gs-cont'));
     });
+    /* saving as example
     it('warning if OLD setGridWidth is called', function() {
       let grid: any = GridStack.init();
       grid.setGridWidth(11); // old 0.5.2 API
       expect(grid.getColumn()).toBe(11);
       expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
     });
-    it('warning if OLD setColumn is called', function() {
-      let grid: any = GridStack.init();
-      grid.setColumn(10); // old 0.6.4 API
-      expect(grid.getColumn()).toBe(10);
-      expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setColumn` is deprecated in v0.6.4 and has been replaced with `column`. It will be **completely** removed in v1.0');
-    });
-    it('warning if OLD grid height is set', function() {
-      let grid = (GridStack as any).init({height: 10}); // old 0.5.2 Opt now maxRow
-      expect(grid.opts.maxRow).toBe(10);
-      expect(grid.engine.maxRow).toBe(10);
-      expect(console.warn).toHaveBeenCalledWith('gridstack.js: Option `height` is deprecated in v0.5.3 and has been replaced with `maxRow`. It will be **completely** removed in v1.0');
-    });
-    it('warning if OLD oneColumnModeClass is set (no changes)', function() {
-      (GridStack as any).init({oneColumnModeClass: 'foo'}); // deleted 0.6.3 Opt
-      expect(console.warn).toHaveBeenCalledWith('gridstack.js: Option `oneColumnModeClass` is deprecated in v0.6.3. Use class `.grid-stack-1` instead');
-    });
+    */
   });
 });

src/gridstack.ts

@@ -7,7 +7,7 @@
 */
 
 import { GridStackEngine } from './gridstack-engine';
-import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils, HeightData } from './utils';
+import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, Utils, HeightData } from './utils';
 import { GridStackElement, GridItemHTMLElement, GridStackWidget, GridStackNode, GridStackOptions, numberOrString, ColumnOptions } from './types';
 import { GridStackDDI } from './gridstack-ddi';
 
@@ -147,14 +147,8 @@ export class GridStack {
     this.el = el; // exposed HTML element to the user
     opts = opts || {}; // handles null/undefined/0
 
-    obsoleteOpts(opts, 'width', 'column', 'v0.5.3');
-    obsoleteOpts(opts, 'height', 'maxRow', 'v0.5.3');
     obsoleteOpts(opts, 'verticalMargin', 'margin', 'v2.0');
-    obsoleteOptsDel(opts, 'oneColumnModeClass', 'v0.6.3', '. Use class `.grid-stack-1` instead');
 
-    // container attributes
-    obsoleteAttr(this.el, 'data-gs-width', 'data-gs-column', 'v0.5.3');
-    obsoleteAttr(this.el, 'data-gs-height', 'data-gs-max-row', 'v0.5.3');
     obsoleteAttr(this.el, 'data-gs-current-height', 'data-gs-current-row', 'v1.0.0');
 
     // if row property exists, replace minRow and maxRow instead
@@ -713,15 +707,6 @@ export class GridStack {
     return this.engine.isAreaEmpty(x, y, width, height);
   }
 
-  /**
-   * Locks/unlocks widget.
-   * @param el element or selector to modify.
-   * @param locked if true widget will be locked.
-   */
-  public locked(els: GridStackElement, locked: boolean): GridStack {
-    return this.update(els, {locked});
-  }
-
   /**
    * If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets.
    * If you want gridstack to add the elements for you, use `addWidget()` instead.
@@ -742,52 +727,6 @@ export class GridStack {
     return el;
   }
 
-  /**
-   * Set the maxWidth for a widget.
-   * @param els widget or selector to modify.
-   * @param maxWidth A numeric value of the number of columns
-   */
-  public maxWidth(els: GridStackElement, maxWidth: number): GridStack {
-    return this.update(els, {maxWidth});
-  }
-
-  /**
-   * Set the minWidth for a widget.
-   * @param els widget or selector to modify.
-   * @param minWidth A numeric value of the number of columns
-   */
-  public minWidth(els: GridStackElement, minWidth: number): GridStack {
-    return this.update(els, {minWidth});
-  }
-
-  /**
-   * Set the maxHeight for a widget.
-   * @param els widget or selector to modify.
-   * @param maxHeight A numeric value of the number of rows
-   */
-  public maxHeight(els: GridStackElement, maxHeight: number): GridStack {
-    return this.update(els, {maxHeight});
-  }
-
-  /**
-   * Set the minHeight for a widget.
-   * @param els widget or selector to modify.
-   * @param minHeight A numeric value of the number of rows
-   */
-  public minHeight(els: GridStackElement, minHeight: number): GridStack {
-    return this.update(els, {minHeight});
-  }
-
-  /**
-   * Changes widget position
-   * @param els  widget or singular selector to modify
-   * @param x new position x. If value is null or undefined it will be ignored.
-   * @param y new position y. If value is null or undefined it will be ignored.
-   */
-  public move(els: GridStackElement, x?: number, y?: number): GridStack {
-    return this.update(els, {x, y});
-  }
-
   /**
    * Event handler that extracts our CustomEvent data out automatically for receiving custom
    * notifications (see doc for supported events)
@@ -903,16 +842,6 @@ export class GridStack {
     return this;
   }
 
-  /**
-   * Changes widget size
-   * @param els  widget or singular selector to modify
-   * @param width new dimensions width. If value is null or undefined it will be ignored.
-   * @param height  new dimensions height. If value is null or undefined it will be ignored.
-   */
-  public resize(els: GridStackElement, width?: number, height?: number): GridStack {
-    return this.update(els, {width, height});
-  }
-
   /**
    * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
    * @param doAnimate if true the grid will animate.
@@ -940,7 +869,7 @@ export class GridStack {
   }
 
   /**
-   * Updates widget position/size.
+   * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.
    * @param els  widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)
    * @param opt new widget options (x,y,width,height, etc..). Only those set will be updated.
    */
@@ -1357,21 +1286,13 @@ export class GridStack {
   }
 
   /** @internal convert a potential selector into actual element */
-  public static getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement {
-    return Utils.getElement(els);
-  }
+  public static getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement { return Utils.getElement(els) }
   /** @internal */
-  public static getElements(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement[] {
-    return Utils.getElements(els);
-  }
+  public static getElements(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement[] { return Utils.getElements(els) }
   /** @internal */
-  public static getGridElement(els: GridStackElement): GridHTMLElement {
-    return GridStack.getElement(els);
-  }
+  public static getGridElement(els: GridStackElement): GridHTMLElement { return GridStack.getElement(els) }
   /** @internal */
-  public static getGridElements(els: string): GridHTMLElement[] {
-    return Utils.getElements(els);
-  }
+  public static getGridElements(els: string): GridHTMLElement[] { return Utils.getElements(els) }
 
   /** @internal initialize margin top/bottom/left/right and units */
   private initMargin(): GridStack {
@@ -1437,21 +1358,6 @@ export class GridStack {
     return this;
   }
 
-  /** @internal called to update an element(s) attributes and node values */
-  private _updateAttr(els: GridStackElement, val: number, attr: string, field: string): GridStack {
-    GridStack.getElements(els).forEach(el => {
-      if (val) {
-        el.setAttribute(attr, String(val));
-      } else {
-        el.removeAttribute(attr);
-      }
-      if (el.gridstackNode) {
-        el.gridstackNode[field] = (val || undefined);
-      }
-    });
-    return this;
-  }
-
   /*
    * drag&drop empty stubs that will be implemented in gridstack-dd.ts for non static grid
    * so we don't incur the load unless needed.
@@ -1486,11 +1392,19 @@ export class GridStack {
   /** @internal prepares the element for drag&drop **/
   public _prepareDragDropByNode(node: GridStackNode): GridStack { return this; }
 
-  // legacy method renames
+  // 2.x API that just calls the new and better update() - keep those around for backward compat only...
+  /** @internal */
+  public locked(els: GridStackElement, locked: boolean): GridStack { return this.update(els, {locked}) }
+  /** @internal */
+  public maxWidth(els: GridStackElement, maxWidth: number): GridStack { return this.update(els, {maxWidth}) }
+  /** @internal */
+  public minWidth(els: GridStackElement, minWidth: number): GridStack {  return this.update(els, {minWidth}) }
+  /** @internal */
+  public maxHeight(els: GridStackElement, maxHeight: number): GridStack { return this.update(els, {maxHeight}) }
   /** @internal */
-  private setGridWidth = obsolete(this, GridStack.prototype.column, 'setGridWidth', 'column', 'v0.5.3');
+  public minHeight(els: GridStackElement, minHeight: number): GridStack { return this.update(els, {minHeight}) }
   /** @internal */
-  private setColumn = obsolete(this, GridStack.prototype.column, 'setColumn', 'column', 'v0.6.4');
+  public move(els: GridStackElement, x?: number, y?: number): GridStack { return this.update(els, {x, y}) }
   /** @internal */
-  private getGridHeight = obsolete(this, GridStackEngine.prototype.getRow, 'getGridHeight', 'getRow', 'v1.0.0');
+  public resize(els: GridStackElement, width?: number, height?: number): GridStack { return this.update(els, {width, height}) }
 }