more IE support

* some cleanup and documendation for #1887 for IE

Author: adumesny

Gruntfile.js

@@ -39,7 +39,7 @@ module.exports = function(grunt) {
     copy: {
       dist: {
         files: {
-          'dist/gridstack-poly.js': ['src/gridstack-poly.js'],
+          'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
         }

README.md

@@ -92,19 +92,28 @@ which means you can possibly bring your own version
   },
 ```
 
-Alternatively in html
+Alternatively (single combined file) in html
 
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
-<!-- HTML5 drag&drop (68k) -->
+<!-- HTML5 drag&drop (70k) -->
 <script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
-<!-- OR jquery-ui drag&drop (193k) -->
+<!-- OR jquery-ui drag&drop (195k) -->
 <script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
-<!-- OR static grid (38k) -->
+<!-- OR static grid (40k) -->
 <script src="node_modules/gridstack/dist/gridstack-static.js"></script>
 ```
 
-Note: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
+**Note**: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
+
+**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future).
+You can use the es5 files and polyfill (larger) for older browser instead. For example:
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
+<script src="node_modules/gridstack/dist/es5/gridstack-jq.js"></script>
+```
+
 
 ## Basic usage
 

demo/web1.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>
 
-  <!-- support for ie -->
+  <!-- support for IE -->
   <script src="../dist/es5/gridstack-poly.js"></script>
   <script src="../dist/es5/gridstack-jq.js"></script>
 </head>

demo/web2.html

@@ -13,7 +13,9 @@
   <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-jq.js"></script>
+  <!-- support for IE -->
+  <script src="../dist/es5/gridstack-poly.js"></script>
+  <script src="../dist/es5/gridstack-jq.js"></script>
 
   <style type="text/css">
     .grid-stack-item-removing {

doc/CHANGES.md

@@ -63,6 +63,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 4.3.1-dev TBD
+* add [#1887](https://github.com/gridstack/gridstack.js/pull/1887) support for IE (new es5 folder) by [@SmileLifeIven](https://github.com/SmileLifeIven)
+
 ## 4.3.1 (2021-10-18)
 * fix [#1868](https://github.com/gridstack/gridstack.js/issues/1868) prevent swap during resize
 * fix [#1849](https://github.com/gridstack/gridstack.js/issues/1849) [#1816](https://github.com/gridstack/gridstack.js/issues/1816) save highest resolution in 1 column mode

package.json

@@ -19,7 +19,9 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json && yarn doc",
+    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:es5 && yarn doc",
+    "build:es6": "webpack && tsc --stripInternal",
+    "build:es5": "webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json",
     "w": "rm -rf dist/* && grunt && webpack",
     "t": "rm -rf dist/* && grunt && tsc --stripInternal",
     "doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",

src/gridstack-poly.js

@@ -1,5 +1,5 @@
 /**
- * gridstack-poly.ts 4.3.1-dev - used for older browser support (not currently supported in v2+)
+ * gridstack-poly.ts 4.3.1-dev used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
@@ -221,7 +221,7 @@ if (!Array.prototype['forEach']) {
   };
 }
 
-// https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent
+// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function(){
   try{
       new window.CustomEvent('T');
@@ -259,7 +259,7 @@ if (!Array.prototype['forEach']) {
  });
 })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
 
-// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/matches
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
 if (!Element.prototype.matches) {
   Element.prototype.matches =
       Element.prototype.matchesSelector ||

src/gridstack.ts

@@ -163,7 +163,7 @@ export class GridStack {
     // create the grid element, but check if the passed 'parent' already has grid styling and should be used instead
     let el = parent;
     if (!parent.classList.contains('grid-stack')) {
-      let doc = document.implementation.createHTMLDocument("");
+      let doc = document.implementation.createHTMLDocument(''); // IE needs a param
       doc.body.innerHTML = `<div class="grid-stack ${opt.class || ''}"></div>`;
       el = doc.body.children[0] as HTMLElement;
       parent.appendChild(el);
@@ -399,13 +399,13 @@ export class GridStack {
 
     let el: HTMLElement;
     if (typeof els === 'string') {
-      let doc = document.implementation.createHTMLDocument("");
+      let doc = document.implementation.createHTMLDocument(''); // IE needs a param
       doc.body.innerHTML = els;
       el = doc.body.children[0] as HTMLElement;
     } else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
       let content = els ? (els as GridStackWidget).content || '' : '';
       options = els;
-      let doc = document.implementation.createHTMLDocument("");
+      let doc = document.implementation.createHTMLDocument(''); // IE needs a param
       doc.body.innerHTML = `<div class="grid-stack-item ${this.opts.itemClass || ''}"><div class="grid-stack-item-content">${content}</div></div>`;
       el = doc.body.children[0] as HTMLElement;
     } else {

src/utils.ts

@@ -295,7 +295,7 @@ export class Utils {
 
   /** @internal returns the passed element if scrollable, else the closest parent that will, up to the entire document scrolling element */
   static getScrollElement(el?: HTMLElement): HTMLElement {
-    if (!el) return document.scrollingElement as HTMLElement || document.documentElement;
+    if (!el) return document.scrollingElement as HTMLElement || document.documentElement; // IE support
     const style = getComputedStyle(el);
     const overflowRegex = /(auto|scroll)/;