Merge pull request #1388 from adumesny/develop

adumesny · web-flow · commit 5c421b796faa · 2020-09-27T08:46:42.000-07:00
HTML5 grid build support
diff --git a/demo/h5dragdrop.html b/demo/h5dragdrop.html
@@ -5,15 +5,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Advanced grid demo</title>
+  <title>HTML5 grid demo</title>
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="demo.css" />
 
   <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
 
-  <script src="../dist/gridstack.all.js"></script>
+  <script src="../dist/gridstack.html5.js"></script>
 
   <style type="text/css">
     .grid-stack-item-removing {
@@ -28,7 +28,7 @@
 </head>
 
 <body>
-  <h1>Advanced Demo</h1>
+  <h1>Advanced HTML5 Demo</h1>
   <div class="row">
     <div class="col-md-2 d-none d-md-block">
       <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
@@ -114,8 +114,7 @@ <h1>Advanced Demo</h1>
       dragIn: '.newWidget',  // class that can be dragged from outside
       dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
       removable: '#trash', // drag-out delete class
-      removeTimeout: 100,
-      ddPlugin: GridStack.getDDPlugin(1)
+      removeTimeout: 100
     });
 
     grid.on('added removed change', function(e, items) {
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [3.0.0-dev](#300-dev)
+- [2.0.1-dev](#201-dev)
 - [2.0.1 (2020-09-26)](#201-2020-09-26)
 - [2.0.0 (2020-09-07)](#200-2020-09-07)
 - [1.2.1 (2020-09-04)](#121-2020-09-04)
@@ -38,7 +38,7 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 3.0.0-dev
+## 2.0.1-dev
 
 - TBD
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "3.0.0-dev",
+  "version": "2.0.1-dev",
   "description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",
diff --git a/src/dragdrop/dd-base-impl.ts b/src/dragdrop/dd-base-impl.ts
@@ -1,3 +1,10 @@
+// dd-base-impl.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 export type EventCallback = (event: Event) => boolean|void;
 export abstract class DDBaseImplement {
   disabled = false;
diff --git a/src/dragdrop/dd-draggable.ts b/src/dragdrop/dd-draggable.ts
@@ -1,3 +1,10 @@
+// dd-draggable.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDManager } from './dd-manager';
 import { DDUtils } from './dd-utils';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
diff --git a/src/dragdrop/dd-droppable.ts b/src/dragdrop/dd-droppable.ts
@@ -1,3 +1,10 @@
+// dd-droppable.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDDraggble } from './dd-draggable';
 import { DDManager } from './dd-manager';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
diff --git a/src/dragdrop/dd-element.ts b/src/dragdrop/dd-element.ts
@@ -1,3 +1,10 @@
+// dd-elements.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDResizable, DDResizableOpt } from './dd-resizable';
 import { GridItemHTMLElement } from './../types';
 import { DDDraggble, DDDraggbleOpt } from './dd-draggable';
diff --git a/src/dragdrop/dd-manager.ts b/src/dragdrop/dd-manager.ts
@@ -1,3 +1,10 @@
+// dd-manager.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDDraggble } from './dd-draggable';
 export class DDManager {
   static dragElement: DDDraggble;
diff --git a/src/dragdrop/dd-resizable-handle.ts b/src/dragdrop/dd-resizable-handle.ts
@@ -1,3 +1,10 @@
+// dd-resizable-handle.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDUtils } from "./dd-utils";
 
 export interface DDResizableHandleOpt {
diff --git a/src/dragdrop/dd-resizable.ts b/src/dragdrop/dd-resizable.ts
@@ -1,3 +1,10 @@
+// dd-resizable.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDResizableHandle } from './dd-resizable-handle';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { DDUtils } from './dd-utils';
diff --git a/src/dragdrop/dd-utils.ts b/src/dragdrop/dd-utils.ts
@@ -1,3 +1,10 @@
+// dd-utils.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 export class DDUtils {
   static clone(el: HTMLElement): HTMLElement {
     const node = el.cloneNode(true) as HTMLElement;
diff --git a/src/dragdrop/gridstack-dd-native.ts b/src/dragdrop/gridstack-dd-native.ts
@@ -1,3 +1,10 @@
+// gridstack-dd-native.ts 2.0.1-dev @preserve
+
+/**
+ * https://gridstackjs.com/
+ * (c) 2020 Alain Dumesny, rhlin
+ * gridstack.js may be freely distributed under the MIT license.
+*/
 import { DDManager } from './dd-manager';
 import { DDElement } from './dd-element';
 
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
@@ -1,4 +1,4 @@
-// gridstack-dd.ts 3.0.0-dev @preserve
+// gridstack-dd.ts 2.0.1-dev @preserve
 
 /**
  * https://gridstackjs.com/
@@ -30,16 +30,16 @@ export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: Grid
  */
 export class GridStackDD {
   protected grid: GridStack;
-  static registeredPlugins: typeof GridStackDD[] = [];
+  static registeredPlugins: typeof GridStackDD;
 
   /** call this method to register your plugin instead of the default no-op one */
   static registerPlugin(pluginClass: typeof GridStackDD) {
-    GridStackDD.registeredPlugins.push(pluginClass);
+    GridStackDD.registeredPlugins = pluginClass;
   }
 
   /** get the current registered plugin to use */
   static get(): typeof GridStackDD {
-    return GridStackDD.registeredPlugins[0] || GridStackDD;
+    return GridStackDD.registeredPlugins || GridStackDD;
   }
 
   public constructor(grid: GridStack) {
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -1,4 +1,4 @@
-// gridstack-engine.ts 3.0.0-dev @preserve
+// gridstack-engine.ts 2.0.1-dev @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1,11 +1,10 @@
-// gridstack.ts 3.0.0-dev @preserve
+// gridstack.ts 2.0.1-dev @preserve
 
 /**
  * https://gridstackjs.com/
  * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.
 */
-import './gridstack-poly.js';
 
 import { GridStackEngine } from './gridstack-engine';
 import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils } from './utils';
@@ -18,12 +17,6 @@ export * from './utils';
 export * from './gridstack-engine';
 export * from './gridstack-dd';
 
-// TEMPORARY import the jquery-ui drag&drop since we don't have alternative yet and don't expect users to create their own yet
-import './jq/gridstack-dd-jqueryui';
-export * from './jq/gridstack-dd-jqueryui';
-import './dragdrop/gridstack-dd-native';
-export * from './dragdrop/gridstack-dd-native';
-
 export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 
 export interface GridHTMLElement extends HTMLElement {
@@ -89,16 +82,6 @@ export class GridStack {
     }
     return el.gridstack
   }
-  /**
-   * Will return i-th DDPlusgin registerd in GridStackDD
-   * @param i i-th plugin (default to 0)
-   *
-   * @example
-   * let GridStackDDJQueryUI = GridStack.getDDPlugin(0);
-   */
-  public static getDDPlugin(i = 0) {
-    return GridStackDD.registeredPlugins[i];
-  }
 
   /**
    * Will initialize a list of elements (given a selector) and return an array of grids.
diff --git a/src/index-html5.ts b/src/index-html5.ts
@@ -0,0 +1,13 @@
+// index.html5.ts 2.0.1-dev - everything you need for a Grid that uses HTML5 native drag&drop (work in progress) @preserve
+
+import './gridstack-poly.js';
+
+export * from './types';
+export * from './utils';
+export * from './gridstack-engine';
+export * from './gridstack-dd';
+export * from './gridstack';
+
+export * from './dragdrop/gridstack-dd-native';
+
+// declare module 'gridstack'; for umd ?
diff --git a/src/index-jq.ts b/src/index-jq.ts
@@ -0,0 +1,13 @@
+// index.jq.ts 2.0.1-dev - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature) @preserve
+
+import './gridstack-poly.js';
+
+export * from './types';
+export * from './utils';
+export * from './gridstack-engine';
+export * from './gridstack-dd';
+export * from './gridstack';
+
+export * from './jq/gridstack-dd-jqueryui';
+
+// declare module 'gridstack'; for umd ?
diff --git a/src/index-static.ts b/src/index-static.ts
@@ -0,0 +1,11 @@
+// index.static.ts 2.0.1-dev - everything you need for a static Grid (non draggable) @preserve
+
+import './gridstack-poly.js';
+
+export * from './types';
+export * from './utils';
+export * from './gridstack-engine';
+export * from './gridstack-dd';
+export * from './gridstack';
+
+// declare module 'gridstack'; for umd ?
diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts
@@ -1,4 +1,4 @@
-// gridstack-dd-jqueryui.ts 3.0.0-dev @preserve
+// gridstack-dd-jqueryui.ts 2.0.1-dev @preserve
 
 /** JQuery UI Drag&Drop plugin
  * https://gridstackjs.com/
@@ -10,14 +10,14 @@ import { GridStack, GridStackElement } from '../gridstack';
 import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd';
 import { GridItemHTMLElement, DDDragInOpt } from '../types';
 
-// TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
-// see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
+// export all jq symbols see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
+// TODO: let user bring their own jq or jq-ui version
 import * as $ from './jquery';
 export { $ };
 export * from './jquery-ui';
 
 /**
- * Jquery-ui based drag'n'drop plugin.
+ * legacy Jquery-ui based drag'n'drop plugin.
  */
 export class GridStackDDJQueryUI extends GridStackDD {
   public constructor(grid: GridStack) {
diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,4 @@
-// types.ts 3.0.0-dev @preserve
+// types.ts 2.0.1-dev @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,4 +1,4 @@
-// utils.ts 3.0.0-dev @preserve
+// utils.ts 2.0.1-dev @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,7 +2,9 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    'gridstack.all': './src/gridstack.ts',
+    'gridstack.all': './src/index-jq.ts',
+    'gridstack.html5': './src/index-html5.ts',
+    'gridstack.static': './src/index-static.ts'
   },
   mode: 'production', // production vs development
   devtool: 'source-map',

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "gridstack",`
`3`		`- "version": "3.0.0-dev",`
	`3`	`+ "version": "2.0.1-dev",`
`4`	`4`	`"description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",`
`5`	`5`	`"main": "./dist/gridstack.js",`
`6`	`6`	`"types": "./dist/gridstack.d.ts",`