Merge pull request #1255 from adumesny/typescript

TS: detachNode -> removeDOM rename

Author: adumesny

doc/CHANGES.md

@@ -195,7 +195,7 @@ thanks [@ermcgrat](https://github.com/ermcgrat) and others for pointing out code
 
 - update requirements to the latest versions of jQuery (v3.1.0+) and jquery-ui (v1.12.0+).
 - fix jQuery `size()` ([#486](https://github.com/gridstack/gridstack.js/issues/486)).
-- update `destroy([detachGrid])` call ([#422](https://github.com/gridstack/gridstack.js/issues/422)).
+- update `destroy([removeDOM])` call ([#422](https://github.com/gridstack/gridstack.js/issues/422)).
 - don't mutate options when calling `draggable` and `resizable`. ([#505](https://github.com/gridstack/gridstack.js/issues/505)).
 - update _notify to allow detach ([#411](https://github.com/gridstack/gridstack.js/issues/411)).
 - fix code that checks for jquery-ui ([#481](https://github.com/gridstack/gridstack.js/issues/481)).
@@ -217,7 +217,7 @@ thanks [@ermcgrat](https://github.com/ermcgrat) and others for pointing out code
 - add `setAnimation` method to API
 - add `column` method ([#227](https://github.com/gridstack/gridstack.js/issues/227))
 - add `removable`/`removeTimeout` *(experimental)*
-- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/gridstack/gridstack.js/issues/216)) (thanks @jhpedemonte)
+- add `removeDOM` parameter to `destroy` method ([#216](https://github.com/gridstack/gridstack.js/issues/216)) (thanks @jhpedemonte)
 - add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/gridstack/gridstack.js/issues/237))
 - add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/gridstack/gridstack.js/issues/188))
 - add `added` and `removed` events for when a widget is added or removed, respectively. ([#54](https://github.com/gridstack/gridstack.js/issues/54))

doc/README.md

@@ -28,7 +28,7 @@ gridstack.js API
   - [cellWidth()](#cellwidth)
   - [commit()](#commit)
   - [column(column, doNotPropagate)](#columncolumn-donotpropagate)
-  - [destroy([detachGrid])](#destroydetachgrid)
+  - [destroy([removeDOM])](#destroyremovedom)
   - [disable()](#disable)
   - [enable()](#enable)
   - [enableMove(doEnable, includeNewWidgets)](#enablemovedoenable-includenewwidgets)
@@ -45,8 +45,8 @@ gridstack.js API
   - [minWidth(el, val)](#minwidthel-val)
   - [movable(el, val)](#movableel-val)
   - [move(el, x, y)](#moveel-x-y)
-  - [removeWidget(el[, detachNode])](#removewidgetel-detachnode)
-  - [removeAll([detachNode])](#removealldetachnode)
+  - [removeWidget(el[, removeDOM])](#removewidgetel-removedom)
+  - [removeAll([removeDOM])](#removeallremovedom)
   - [resize(el, width, height)](#resizeel-width-height)
   - [resizable(el, val)](#resizableel-val)
   - [setAnimation(doAnimate)](#setanimationdoanimate)
@@ -295,13 +295,13 @@ else you will need to generate correct CSS (see https://github.com/gridstack/gri
 - `column` - Integer > 0 (default 12), if missing it will return the current count instead.
 - `doNotPropagate` - if true existing widgets will not be updated during a set.
 
-### destroy([detachGrid])
+### destroy([removeDOM])
 
 Destroys a grid instance.
 
 Parameters:
 
-- `detachGrid` - if `false` nodes and grid will not be removed from the DOM (Optional. Default `true`).
+- `removeDOM` - if `false` nodes and grid will not be removed from the DOM (Optional. Default `true`).
 
 ### disable()
 
@@ -431,22 +431,22 @@ Parameters:
 - `el` - widget to move
 - `x`, `y` - new position. If value is `null` or `undefined` it will be ignored.
 
-### removeWidget(el[, detachNode])
+### removeWidget(el[, removeDOM])
 
 Removes widget from the grid.
 
 Parameters:
 
 - `el` - widget to remove.
-- `detachNode` - if `false` node won't be removed from the DOM (Optional. Default `true`).
+- `removeDOM` - if `false` node won't be removed from the DOM (Optional. Default `true`).
 
-### removeAll([detachNode])
+### removeAll([removeDOM])
 
 Removes all widgets from the grid.
 
 Parameters:
 
-- `detachNode` - if `false` nodes won't be removed from the DOM (Optional. Default `true`).
+- `removeDOM` - if `false` nodes won't be removed from the DOM (Optional. Default `true`).
 
 ### resize(el, width, height)
 

src/gridstack-engine.ts

@@ -9,7 +9,7 @@
 import { Utils, obsolete } from './utils';
 import { GridStackNode } from './types';
 
-export type onChangeCB = (nodes: GridStackNode[], detachNode?: boolean) => void;
+export type onChangeCB = (nodes: GridStackNode[], removeDOM?: boolean) => void;
 
 /**
  * Defines the GridStack engine that does most no DOM grid manipulation.
@@ -268,13 +268,12 @@ export class GridStackEngine {
   }
 
   /** @internal */
-  private _notify(nodes?: GridStackNode | GridStackNode[], detachNode?: boolean): GridStackEngine {
+  private _notify(nodes?: GridStackNode | GridStackNode[], removeDOM = true): GridStackEngine {
     if (this.batchMode) { return this }
-    detachNode = (detachNode === undefined ? true : detachNode);
     nodes = (nodes === undefined ? [] : (Array.isArray(nodes) ? nodes : [nodes]) );
     let dirtyNodes = nodes.concat(this.getDirtyNodes());
     if (this.onchange) {
-      this.onchange(dirtyNodes, detachNode);
+      this.onchange(dirtyNodes, removeDOM);
     }
     return this;
   }
@@ -320,25 +319,26 @@ export class GridStackEngine {
     return node;
   }
 
-  public removeNode(node: GridStackNode, detachNode = true, triggerRemoveEvent = false): GridStackEngine {
+  public removeNode(node: GridStackNode, removeDOM = true, triggerRemoveEvent = false): GridStackEngine {
     if (triggerRemoveEvent) {
       this.removedNodes.push(node);
     }
     node._id = null; // hint that node is being removed
     this.nodes = this.nodes.filter(n => n !== node);
     this._packNodes();
-    this._notify(node, detachNode);
+    this._notify(node, removeDOM);
     return this;
   }
 
-  public removeAll(detachNode?: boolean): GridStackEngine {
+  public removeAll(removeDOM = true): GridStackEngine {
     delete this._layouts;
     if (this.nodes.length === 0) { return this }
-    detachNode = (detachNode === undefined ? true : detachNode);
-    this.nodes.forEach(n => { n._id = null; }); // hint that node is being removed
+    if (removeDOM) {
+      this.nodes.forEach(n => { n._id = null; }); // hint that node is being removed
+    }
     this.removedNodes = this.nodes;
     this.nodes = [];
-    this._notify(this.removedNodes, detachNode);
+    this._notify(this.removedNodes, removeDOM);
     return this;
   }
 

src/gridstack.ts

@@ -242,13 +242,12 @@ export class GridStack {
 
     this._initStyles();
 
-    this.engine = new GridStackEngine(this.opts.column, (cbNodes, detachNode) => {
-      detachNode = (detachNode === undefined ? true : detachNode);
+    this.engine = new GridStackEngine(this.opts.column, (cbNodes, removeDOM = true) => {
       let maxHeight = 0;
       this.engine.nodes.forEach(n => { maxHeight = Math.max(maxHeight, n.y + n.height) });
       cbNodes.forEach(n => {
         let el = n.el;
-        if (detachNode && n._id === null) {
+        if (removeDOM && n._id === null) {
           if (el && el.parentNode) { el.parentNode.removeChild(el) }
         } else {
           this._writeAttrs(el, n.x, n.y, n.width, n.height);
@@ -466,13 +465,13 @@ export class GridStack {
 
   /**
    * Destroys a grid instance.
-   * @param detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true).
+   * @param removeDOM if `false` grid and items elements will not be removed from the DOM (Optional. Default `true`).
    */
-  public destroy(detachGrid = true): GridStack {
+  public destroy(removeDOM = true): GridStack {
     window.removeEventListener('resize', this._onResizeHandler);
     this.disable();
-    if (!detachGrid) {
-      this.removeAll(false);
+    if (!removeDOM) {
+      this.removeAll(removeDOM);
       this.el.classList.remove(this.opts._class);
       delete this.el.gridstack;
     } else {
@@ -825,9 +824,9 @@ export class GridStack {
   /**
    * Removes widget from the grid.
    * @param el  widget or selector to modify
-   * @param detachNode if false DOM node won't be removed from the tree (Default? true).
+   * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
    */
-  public removeWidget(els: GridStackElement, detachNode = true): GridStack {
+  public removeWidget(els: GridStackElement, removeDOM = true): GridStack {
     this.getElements(els).forEach(el => {
       if (el.parentElement !== this.el) return; // not our child!
       let node = el.gridstackNode;
@@ -841,7 +840,7 @@ export class GridStack {
       delete el.gridstackNode;
       this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
 
-      this.engine.removeNode(node, detachNode, true); // true for trigger event
+      this.engine.removeNode(node, removeDOM, true); // true for trigger event
     });
     this._triggerRemoveEvent();
     this._triggerChangeEvent();
@@ -850,15 +849,15 @@ export class GridStack {
 
   /**
    * Removes all widgets from the grid.
-   * @param detachNode if false DOM nodes won't be removed from the tree (Default? true).
+   * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
    */
-  public removeAll(detachNode?: boolean): GridStack {
+  public removeAll(removeDOM = true): GridStack {
     // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
     this.engine.nodes.forEach(n => {
       delete n.el.gridstackNode;
       this.dd.draggable(n.el, 'destroy').resizable(n.el, 'destroy');
     });
-    this.engine.removeAll(detachNode);
+    this.engine.removeAll(removeDOM);
     this._triggerRemoveEvent();
     return this;
   }