Merge pull request #1263 from adumesny/typescript

TS: type any cleanup + clone grid option fix

Author: adumesny

doc/CHANGES.md

@@ -43,6 +43,7 @@ Change log
 - fix [1229](https://github.com/gridstack/gridstack.js/issues/1229) `staticGrid` no longer disable oneColumnMode
 - fix [1195](https://github.com/gridstack/gridstack.js/issues/1195) options broken with ember hash helper - thanks [@btecu](https://github.com/btecu)
 - fix [1250](https://github.com/gridstack/gridstack.js/issues/1250) don't remove item from another grid
+- fix [1261](https://github.com/gridstack/gridstack.js/issues/1261) `init()` clones passed options so second doesn't affect first one
 
 ## 1.1.1 (2020-03-17)
 

package.json

@@ -69,7 +69,7 @@
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "^2.0.0",
     "karma-jasmine": "^3.1.1",
-    "karma-typescript": "^5.0.1",
+    "karma-typescript": "4.1.1",
     "node-sass": "^4.13.1",
     "puppeteer": "^2.1.1",
     "serve-static": "^1.14.1",

src/gridstack-dragdrop-plugin.ts

@@ -20,6 +20,7 @@ export type DDDropOpt = {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | {} | any;
 export type DDKey = 'minWidth' | 'minHeight' | string;
+export type DDValue = number | string;
 
 /** drag&drop events callbacks */
 export type DDCallback = (event: Event, arg2: GridItemHTMLElement) => void;
@@ -39,15 +40,15 @@ export class GridStackDragDropPlugin {
     this.grid = grid;
   }
 
-  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?): GridStackDragDropPlugin {
+  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }
 

src/gridstack-engine.ts

@@ -251,7 +251,7 @@ export class GridStackEngine {
   public getDirtyNodes(verify?: boolean): GridStackNode[] {
     // compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state
     if (verify) {
-      let dirtNodes = [];
+      let dirtNodes: GridStackNode[] = [];
       this.nodes.forEach(n => {
         if (n._dirty) {
           if (n.y === n._origY && n.x === n._origX && n.width === n._origW && n.height === n._origH) {
@@ -352,7 +352,7 @@ export class GridStackEngine {
       return true;
     }
 
-    let clonedNode;
+    let clonedNode: GridStackNode;
     let clone = new GridStackEngine(
       this.column,
       null,

src/gridstack.ts

@@ -72,7 +72,7 @@ export class GridStack {
       return null;
     }
     if (!el.gridstack) {
-      el.gridstack = new GridStack(el, options);
+      el.gridstack = new GridStack(el, Utils.clone(options));
     }
     return el.gridstack
   }
@@ -152,14 +152,11 @@ export class GridStack {
     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');
 
-    opts.itemClass = opts.itemClass || 'grid-stack-item';
-
     // if row property exists, replace minRow and maxRow instead
     if (opts.row) {
       opts.minRow = opts.maxRow = opts.row;
       delete opts.row;
     }
-
     let rowAttr = Utils.toNumber(el.getAttribute('data-gs-row'));
 
     // elements attributes override any passed options (like CSS style) - merge the two together
@@ -180,29 +177,28 @@ export class GridStack {
       staticGrid: false,
       _class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
       animate: Utils.toBool(el.getAttribute('data-gs-animate')) || false,
-      alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
-      resizable: Utils.defaults(opts.resizable || {}, {
+      alwaysShowResizeHandle: false,
+      resizable: {
         autoHide: !(opts.alwaysShowResizeHandle || false),
         handles: 'se'
-      }),
-      draggable: Utils.defaults(opts.draggable || {}, {
-        handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) ||
-          '.grid-stack-item-content',
+      },
+      draggable: {
+        handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || '.grid-stack-item-content',
         scroll: false,
         appendTo: 'body'
-      }),
-      disableDrag: opts.disableDrag || false,
-      disableResize: opts.disableResize || false,
+      },
+      disableDrag: false,
+      disableResize: false,
       rtl: 'auto',
       removable: false,
-      removableOptions: Utils.defaults(opts.removableOptions || {}, {
+      removableOptions: {
         accept: '.' + opts.itemClass
-      }),
+      },
       removeTimeout: 2000,
       verticalMarginUnit: 'px',
       cellHeightUnit: 'px',
-      disableOneColumnMode: opts.disableOneColumnMode || false,
-      oneColumnModeDomSort: opts.oneColumnModeDomSort
+      disableOneColumnMode: false,
+      oneColumnModeDomSort: false
     };
 
     this.opts = Utils.defaults(opts, defaults);
@@ -460,7 +456,7 @@ export class GridStack {
   /** returns an array of grid HTML elements (no placeholder) - used internally to iterate through our children */
   public getGridItems(): GridItemHTMLElement[] {
     return Array.from(this.el.children)
-      .filter(el => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[];
+      .filter((el: HTMLElement) => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[];
   }
 
   /**
@@ -781,9 +777,9 @@ export class GridStack {
       let noData = (name === 'enable' || name === 'disable');
       this._gsEventHandler = this._gsEventHandler || {};
       if (noData) {
-        this._gsEventHandler[name] = (event) => callback(event);
+        this._gsEventHandler[name] = (event: Event) => callback(event);
       } else {
-        this._gsEventHandler[name] = (event) => callback(event, event.detail);
+        this._gsEventHandler[name] = (event: CustomEvent) => callback(event, event.detail);
       }
       this.el.addEventListener(name, this._gsEventHandler[name]);
     } else if (name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resizestop' || name === 'dropped') {
@@ -1071,11 +1067,11 @@ export class GridStack {
     let margin = this.opts.verticalMargin as number;
 
     if (!this.opts.verticalMargin || this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
-      getHeight = (nbRows, nbMargins) => {
+      getHeight = (nbRows: number, nbMargins: number) => {
         return (height * nbRows + margin * nbMargins) + this.opts.cellHeightUnit;
       }
     } else {
-      getHeight = (nbRows, nbMargins) => {
+      getHeight = (nbRows: number, nbMargins: number) => {
         if (!nbRows || !nbMargins) {
           return (height * nbRows + margin * nbMargins) + this.opts.cellHeightUnit;
         }
@@ -1173,8 +1169,8 @@ export class GridStack {
   /** @internal prepares the element for drag&drop **/
   private _prepareElementsByNode(el: GridItemHTMLElement, node: GridStackNode): GridStack {
     // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
-    let cellWidth;
-    let cellFullHeight; // internal cellHeight + v-margin
+    let cellWidth: number;
+    let cellFullHeight: number; // internal cellHeight + v-margin
 
     /** called when item starts moving/resizing */
     let onStartMoving = (event, ui) => {
@@ -1220,7 +1216,7 @@ export class GridStack {
     }
 
     /** called when item is being dragged/resized */
-    let dragOrResize = (event, ui) => {
+    let dragOrResize = (event: Event, ui) => {
       let x = Math.round(ui.position.left / cellWidth);
       let y = Math.floor((ui.position.top + cellFullHeight / 2) / cellFullHeight);
       let width;
@@ -1281,8 +1277,8 @@ export class GridStack {
     }
 
     /** called when the item stops moving/resizing */
-    let onEndMoving = (event) => {
-      let { target } = event;
+    let onEndMoving = (event: Event) => {
+      let target: GridItemHTMLElement = event.target as GridItemHTMLElement;
       if (!target.gridstackNode) return;
 
       // let forceNotify = false; what is the point of calling 'change' event with no data, when the 'removed' event is already called ?
@@ -1323,7 +1319,7 @@ export class GridStack {
 
       // if we re-sized a nested grid item, let the children resize as well
       if (event.type === 'resizestop') {
-        target.querySelectorAll('.grid-stack').forEach(el => el.gridstack._onResizeHandler());
+        target.querySelectorAll('.grid-stack').forEach((el: GridHTMLElement) => el.gridstack._onResizeHandler());
       }
     }
 

src/jq/jqueryui-gridstack-dragdrop-plugin.ts

@@ -7,7 +7,7 @@
 */
 
 import { GridStack } from '../gridstack';
-import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback } from '../gridstack-dragdrop-plugin';
+import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dragdrop-plugin';
 import { GridItemHTMLElement } from '../types';
 
 // TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
@@ -23,7 +23,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     super(grid);
   }
 
-  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (opts === 'disable' || opts === 'enable') {
       $el.resizable(opts);
@@ -44,7 +44,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (opts === 'disable' || opts === 'enable') {
       $el.draggable(opts);
@@ -66,7 +66,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?): GridStackDragDropPlugin {
+  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (typeof opts.accept === 'function' && !opts._accept) {
       // convert jquery event to generic element

src/utils.ts

@@ -173,7 +173,8 @@ export class Utils {
     return Utils.closestByClass(el, name);
   }
 
-  static throttle(callback, delay) {
+  /** @internal */
+  static throttle(callback: () => void, delay: number) {
     let isWaiting = false;
 
     return function (...args) {
@@ -204,7 +205,8 @@ export class Utils {
     }
   }
 
-  static getScrollParent(el: HTMLElement) {
+  /** @internal */
+  static getScrollParent(el: HTMLElement): HTMLElement {
     let returnEl;
     if (el === null) {
       returnEl = null;