h5: del ddPlugin grid option

* always thought it was weird to have a (per) grid option when we had a list of D&D
plugins but last one won.
* now we only have a global static DD that is shared. Grid instance can be infered by element
for any needed options.

Author: adumesny

doc/CHANGES.md

@@ -43,7 +43,7 @@ Change log
 
 ## 2.2.0-dev
 
-- TBD
+- 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

@@ -82,7 +82,6 @@ gridstack.js API
   * 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
   * `'auto'` - height will be square cells initially.
 - `column` - number of columns (default: `12`) which can change on the fly with `column(N)` as well. See [example](http://gridstackjs.com/demo/column.html)
-- `ddPlugin` - class that implement drag'n'drop functionality for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used)
 - `disableDrag` - disallows dragging of widgets (default: `false`).
 - `disableOneColumnMode` - disables the onColumnMode when the grid width is less than minWidth (default: 'false')
 - `disableResize` - disallows resizing of widgets (default: `false`).

spec/gridstack-spec.ts

@@ -1634,6 +1634,7 @@ describe('gridstack', function() {
     });
   });
 
+  /*
   describe('ddPlugin option', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
@@ -1652,7 +1653,8 @@ describe('gridstack', function() {
       expect(grid.dd.isDroppable()).toBe(false);
     });
   });
-
+  */
+ 
   describe('grid.on events', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);

src/dragdrop/gridstack-dd-native.ts

@@ -8,17 +8,14 @@
 import { DDManager } from './dd-manager';
 import { DDElement } from './dd-element';
 
-import { GridStack, GridStackElement } from '../gridstack';
+import { GridStackElement } from '../gridstack';
 import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd';
 import { GridItemHTMLElement, DDDragInOpt } from '../types';
 
 /**
  * HTML 5 Native DragDrop based drag'n'drop plugin.
  */
 export class GridStackDDNative extends GridStackDD {
-  public constructor(grid: GridStack) {
-    super(grid);
-  }
 
   public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDDNative {
     let dEl = this.getGridStackDDElement(el);
@@ -31,9 +28,10 @@ export class GridStackDDNative extends GridStackDD {
     } else if (opts === 'option') {
       dEl.setupResizable({ [key]: value });
     } else {
-      let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : this.grid.opts.resizable.handles;
+      const grid = el.gridstackNode.grid;
+      let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles;
       dEl.setupResizable({
-        ...this.grid.opts.resizable,
+        ...grid.opts.resizable,
         ...{ handles: handles },
         ...{
           start: opts.start,
@@ -56,12 +54,13 @@ export class GridStackDDNative extends GridStackDD {
     } else if (opts === 'option') {
       dEl.setupDraggable({ [key]: value });
     } else {
+      const grid = el.gridstackNode.grid;
       dEl.setupDraggable({
-        ...this.grid.opts.draggable,
+        ...grid.opts.draggable,
         ...{
-          containment: (this.grid.opts._isNested && !this.grid.opts.dragOut)
-            ? this.grid.el.parentElement
-            : (this.grid.opts.draggable.containment || null),
+          containment: (grid.opts._isNested && !grid.opts.dragOut)
+            ? grid.el.parentElement
+            : (grid.opts.draggable.containment || null),
           start: opts.start,
           stop: opts.stop,
           drag: opts.drag

src/gridstack-dd.ts

@@ -7,7 +7,7 @@
 */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import { GridStack, GridStackElement } from './gridstack';
+import { GridStackElement } from './gridstack';
 import { GridItemHTMLElement, DDDragInOpt } from './types';
 
 /** Drag&Drop drop options */
@@ -29,7 +29,6 @@ export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: Grid
  * Base class for drag'n'drop plugin.
  */
 export class GridStackDD {
-  protected grid: GridStack;
   static registeredPlugins: typeof GridStackDD;
 
   /** call this method to register your plugin instead of the default no-op one */
@@ -42,10 +41,6 @@ export class GridStackDD {
     return GridStackDD.registeredPlugins || GridStackDD;
   }
 
-  public constructor(grid: GridStack) {
-    this.grid = grid;
-  }
-
   /** removes any drag&drop present (called during destroy) */
   public remove(el: GridItemHTMLElement): GridStackDD {
     this.draggable(el, 'destroy').resizable(el, 'destroy');

src/gridstack.ts

@@ -42,6 +42,9 @@ interface GridCSSStyleSheet extends CSSStyleSheet {
   _max?: number; // internal tracker of the max # of rows we created\
 }
 
+/** current drag&drop plugin being used - first grid will initialize */
+let dd: GridStackDD;
+
 /**
  * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
  * Note: your grid elements MUST have the following classes for the CSS layout to work:
@@ -123,9 +126,6 @@ export class GridStack {
   /** grid options - public for classes to access, but use methods to modify! */
   public opts: GridStackOptions;
 
-  /** current drag&drop plugin being used */
-  public dd: GridStackDD;
-
   /** @internal */
   private placeholder: HTMLElement;
   /** @internal */
@@ -223,12 +223,7 @@ export class GridStack {
     this.opts = Utils.defaults(opts, defaults);
     this.initMargin();
 
-    if (this.opts.ddPlugin === false) {
-      this.opts.ddPlugin = GridStackDD;
-    } else if (this.opts.ddPlugin === undefined) {
-      this.opts.ddPlugin = GridStackDD.get();
-    }
-    this.dd = new (this.opts.ddPlugin as typeof GridStackDD)(this);
+    dd = dd || new (GridStackDD.get())();
 
     if (this.opts.rtl === 'auto') {
       this.opts.rtl = el.style.direction === 'rtl';
@@ -792,11 +787,11 @@ export class GridStack {
       if (!node) { return }
       node.noMove = !(val || false);
       if (node.noMove) {
-        this.dd.draggable(el, 'disable');
+        dd.draggable(el, 'disable');
         el.classList.remove('ui-draggable-handle');
       } else {
         this._prepareDragDropByNode(node); // init DD if need be
-        this.dd.draggable(el, 'enable');
+        dd.draggable(el, 'enable');
         el.classList.remove('ui-draggable-handle');
       }
     });
@@ -904,7 +899,7 @@ export class GridStack {
 
       // remove our DOM data (circular link) and drag&drop permanently
       delete el.gridstackNode;
-      this.dd.remove(el);
+      dd.remove(el);
 
       this.engine.removeNode(node, removeDOM, triggerEvent);
 
@@ -927,7 +922,7 @@ export class 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.remove(n.el);
+      dd.remove(n.el);
     });
     this.engine.removeAll(removeDOM);
     this._triggerRemoveEvent();
@@ -962,10 +957,10 @@ export class GridStack {
       if (!node) { return; }
       node.noResize = !(val || false);
       if (node.noResize) {
-        this.dd.resizable(el, 'disable');
+        dd.resizable(el, 'disable');
       } else {
         this._prepareDragDropByNode(node); // init DD if need be
-        this.dd.resizable(el, 'enable');
+        dd.resizable(el, 'enable');
       }
     });
     return this;
@@ -1230,7 +1225,7 @@ export class GridStack {
     if (this.opts.staticGrid || node.locked ||
       ((node.noMove || this.opts.disableDrag) && (node.noResize || this.opts.disableResize))) {
       if (node._initDD) {
-        this.dd.remove(node.el); // nukes everything instead of just disable, will add some styles back next
+        dd.remove(node.el); // nukes everything instead of just disable, will add some styles back next
         delete node._initDD;
       }
       node.el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
@@ -1274,8 +1269,8 @@ export class GridStack {
       node._beforeDragY = node.y;
       node._prevYPix = ui.position.top;
 
-      this.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
-      this.dd.resizable(el, 'option', 'minHeight', cellHeight * (node.minHeight || 1));
+      dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
+      dd.resizable(el, 'option', 'minHeight', cellHeight * (node.minHeight || 1));
     }
 
     /** called when item is being dragged/resized */
@@ -1357,7 +1352,7 @@ export class GridStack {
           gridToNotify._gsEventHandler[event.type](event, target);
         }
         gridToNotify.engine.removedNodes.push(node);
-        gridToNotify.dd.remove(el);
+        dd.remove(el);
         delete el.gridstackNode; // hint we're removing it next and break circular link
         gridToNotify._triggerRemoveEvent();
         if (el.parentElement) {
@@ -1392,7 +1387,7 @@ export class GridStack {
       }
     }
 
-    this.dd
+    dd
       .draggable(el, {
         start: onStartMoving,
         stop: onEndMoving,
@@ -1407,10 +1402,10 @@ export class GridStack {
 
     // finally fine tune drag vs move by disabling any part...
     if (node.noMove || this.opts.disableDrag) {
-      this.dd.draggable(el, 'disable');
+      dd.draggable(el, 'disable');
     }
     if (node.noResize || this.opts.disableResize) {
-      this.dd.resizable(el, 'disable');
+      dd.resizable(el, 'disable');
     }
     return this;
   }
@@ -1585,8 +1580,8 @@ export class GridStack {
   /** @internal call to setup dragging in from the outside (say toolbar), with options */
   private _setupDragIn():  GridStack {
     if (!this.opts.staticGrid && typeof this.opts.dragIn === 'string') {
-      if (!this.dd.isDraggable(this.opts.dragIn)) {
-        this.dd.dragIn(this.opts.dragIn, this.opts.dragInOptions);
+      if (!dd.isDraggable(this.opts.dragIn)) {
+        dd.dragIn(this.opts.dragIn, this.opts.dragInOptions);
       }
     }
     return this;
@@ -1597,10 +1592,10 @@ export class GridStack {
     if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
       let trashZone = document.querySelector(this.opts.removable) as HTMLElement;
       if (!trashZone) return this;
-      if (!this.dd.isDroppable(trashZone)) {
-        this.dd.droppable(trashZone, this.opts.removableOptions);
+      if (!dd.isDroppable(trashZone)) {
+        dd.droppable(trashZone, this.opts.removableOptions);
       }
-      this.dd
+      dd
         .on(trashZone, 'dropover', (event, el) => {
           let node = el.gridstackNode;
           if (!node || node.grid !== this) return;
@@ -1650,7 +1645,7 @@ export class GridStack {
       }
     };
 
-    this.dd
+    dd
       .droppable(this.el, {
         accept: (el: GridItemHTMLElement) => {
           let node: GridStackNode = el.gridstackNode;
@@ -1690,7 +1685,7 @@ export class GridStack {
         el.gridstackNode = newNode;
         el._gridstackNodeOrig = node;
 
-        this.dd.on(el, 'drag', onDrag);
+        dd.on(el, 'drag', onDrag);
         return false; // prevent parent from receiving msg (which may be grid as well)
       })
       .on(this.el, 'dropout', (event, el: GridItemHTMLElement) => {
@@ -1700,7 +1695,7 @@ export class GridStack {
         if (!node || !node._isOutOfGrid) {
           return;
         }
-        this.dd.off(el, 'drag');
+        dd.off(el, 'drag');
         node.el = null;
         this.engine.removeNode(node);
         if (this.placeholder.parentNode === this.el) {
@@ -1729,7 +1724,7 @@ export class GridStack {
         this.engine.cleanupNode(node); // removes all internal _xyz values (including the _id so add that back)
         node._id = _id;
         node.grid = this;
-        this.dd.off(el, 'drag');
+        dd.off(el, 'drag');
         // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
         // as the helper will be nuked by jqueryui otherwise
         if (helper !== el) {
@@ -1738,7 +1733,7 @@ export class GridStack {
           el = el.cloneNode(true) as GridItemHTMLElement;
         } else {
           el.remove(); // reduce flicker as we change depth here, and size further down
-          this.dd.remove(el);
+          dd.remove(el);
         }
         el.gridstackNode = node;
         node.el = el;

src/jq/gridstack-dd-jqueryui.ts

@@ -6,7 +6,7 @@
  * gridstack.js may be freely distributed under the MIT license.
 */
 
-import { GridStack, GridStackElement } from '../gridstack';
+import { GridStackElement } from '../gridstack';
 import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd';
 import { GridItemHTMLElement, DDDragInOpt } from '../types';
 
@@ -22,9 +22,6 @@ import './jquery-ui';
  * legacy Jquery-ui based drag'n'drop plugin.
  */
 export class GridStackDDJQueryUI extends GridStackDD {
-  public constructor(grid: GridStack) {
-    super(grid);
-  }
 
   public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD {
     let $el: JQuery = $(el);
@@ -37,9 +34,10 @@ export class GridStackDDJQueryUI extends GridStackDD {
     } else if (opts === 'option') {
       $el.resizable(opts, key, value);
     } else {
-      let handles = $el.data('gs-resize-handles') ? $el.data('gs-resize-handles') : this.grid.opts.resizable.handles;
+      const grid = el.gridstackNode.grid;
+      let handles = $el.data('gs-resize-handles') ? $el.data('gs-resize-handles') : grid.opts.resizable.handles;
       $el.resizable({
-        ...this.grid.opts.resizable,
+        ...grid.opts.resizable,
         ...{ handles: handles },
         ...{
           start: opts.start, // || function() {},
@@ -62,9 +60,10 @@ export class GridStackDDJQueryUI extends GridStackDD {
     } else if (opts === 'option') {
       $el.draggable(opts, key, value);
     } else {
-      $el.draggable({...this.grid.opts.draggable, ...{ // was using $.extend()
-        containment: (this.grid.opts._isNested && !this.grid.opts.dragOut) ?
-          $(this.grid.el).parent() : (this.grid.opts.draggable.containment || null),
+      const grid = el.gridstackNode.grid;
+      $el.draggable({...grid.opts.draggable, ...{ // was using $.extend()
+        containment: (grid.opts._isNested && !grid.opts.dragOut) ?
+          $(grid.el).parent() : (grid.opts.draggable.containment || null),
         start: opts.start, // || function() {},
         stop: opts.stop, // || function() {},
         drag: opts.drag // || function() {}

src/types.ts

@@ -7,7 +7,6 @@
 */
 
 import { GridStack } from './gridstack';
-import { GridStackDD } from './gridstack-dd';
 
 
 /** different layout options when changing # of columns,
@@ -61,11 +60,6 @@ export interface GridStackOptions {
   /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns */
   column?: number;
 
-  /** class that implement drag'n'drop functionality for gridstack. If false grid will be static.
-   * (default?: undefined - first available plugin will be used)
-   */
-  ddPlugin?: false | typeof GridStackDD;
-
   /** disallows dragging of widgets (default?: false) */
   disableDrag?: boolean;