h5: remove jquery from tests, switch to h5 version

* changed the tests to not have any $() jquery anymore and switch them to use the html5 DD instead
* all demos now use html5 version, added two-jq.html for legacy and to compare
* reverted back to karma-typescript 4.1.1 to get correct error line numbers
* gridstack.all.js no longer exist. changed all to gridstack-h5.js and readme
(more changes on how to include later)
* isResizable (new) / isDraggable / isDroppable work on a single element
as it was confusting to e list of items (could be miss-match)
* latest tool lock file

Author: adumesny

Gruntfile.js

@@ -40,8 +40,6 @@ module.exports = function(grunt) {
       dist: {
         files: {
           'dist/gridstack-poly.js': ['src/gridstack-poly.js'],
-          //'dist/jq/jquery.js': ['src/jq/jquery.js'],
-          //'dist/jq/jquery-ui.js': ['src/jq/jquery-ui.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
         }
@@ -58,14 +56,6 @@ module.exports = function(grunt) {
         files: {
           'dist/jq/jquery.js': 'src/jq/jquery.js',
           'dist/jq/jquery-ui.js': 'src/jq/jquery-ui.js',
-          /*
-          'dist/jq/gridstack-dd-jqueryui.min.js': 'dist/jq/gridstack-dd-jqueryui.js',
-          'dist/gridstack-dd.min.js': 'dist/gridstack-dd.js',
-          'dist/gridstack-engine.min.js': 'dist/gridstack-engine.js',
-          'dist/gridstack-poly.min.js': 'src/gridstack-poly.js',
-          'dist/types.min.js': 'dist/types.js',
-          'dist/utils.min.js': 'dist/utils.js',
-          */
         }
       }
     },

README.md

@@ -77,7 +77,7 @@ alternatively in html
 
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
-<script src="node_modules/gridstack/dist/gridstack.all.js"></script>
+<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
 ```
 
 ## Basic usage
@@ -127,7 +127,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example
 
 ## Requirements
 
-GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
+GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack-h5.js` and `gridstack.min.css` (layouts are done using CSS column based %).
 
 ## API Documentation
 
@@ -262,7 +262,7 @@ Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch
 working on touch-based devices.
 
 ```html
-<script src="gridstack.all.js"></script>
+<script src="gridstack-jq.js"></script>
 <script src="jquery.ui.touch-punch.min.js"></script>
 ```
 
@@ -358,12 +358,11 @@ v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes a
 
 # jQuery Application
 
-We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
+We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) in `gridstack-jq.js`. IFF your app needs to bring your own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
 
-Note: v2.0.0 does not currently support importing GridStack Drag&Drop without also including our jquery + jqueryui. Still trying to figure how to make that bundle possible. You will have to use 1.x
-
-As for events, you can still use `$(".grid-stack").on(...)` while jqueryui is used internally for things we don't support, but recommended you don't as that will get dropped at some point.
+NOTE: v2.x / v3.0.0 does not currently support importing GridStack Drag&Drop without also including our jquery + jquery-ui. Still trying to figure how to make that bundle possible. You will have to use 1.x for now...
 
+As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support.
 
 # Changes
 

demo/advance-h5.html

@@ -13,7 +13,7 @@
   <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-h5.js"></script>
 
   <style type="text/css">
     .grid-stack-item-removing {

demo/advance.html

@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
   <link rel="stylesheet" href="demo.css"/>
 
-  <script src="../dist/gridstack.all.js"></script>
+  <script src="../dist/gridstack-h5.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
 </head>
 <body>

demo/anijs.html

@@ -8,7 +8,7 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-  <script src="../dist/gridstack.all.js"></script>
+  <script src="../dist/gridstack-h5.js"></script>
 </head>
 <body>
   <div class="container-fluid">

demo/column.html

@@ -7,7 +7,7 @@
   <title>Float grid demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <script src="../dist/gridstack.all.js"></script>
+  <script src="../dist/gridstack-h5.js"></script>
 
 </head>
 <body>

demo/experiment/test.html

@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="demo.css"/>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js"></script>
-  <script src="../dist/gridstack.all.js"></script>
+  <script src="../dist/gridstack-h5.js"></script>
 </head>
 <body>
   <div class="container-fluid">