gridstack · adumesny · Mar 14, 2020 · Mar 14, 2020
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
   rules: {
     'indent': ['error', 2],
     'max-len': ['error', 180],
-    'no-trailing-spaces': 'error'
+    'no-trailing-spaces': 'error',
+    'prefer-const': 0
   }
 };
diff --git a/README.md b/README.md
@@ -162,7 +162,7 @@ GridStack.init( {column: N} );
 
 2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.6.4/dist/gridstack-extra.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack-extra.css"/>
 
 <div class="grid-stack grid-stack-N">...</div>
 ```

diff --git a/demo/advance.html b/demo/advance.html
@@ -13,10 +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="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 
   <style type="text/css">
     .grid-stack-item-removing {

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

diff --git a/demo/column.html b/demo/column.html
@@ -8,11 +8,7 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">

diff --git a/demo/float.html b/demo/float.html
@@ -8,13 +8,6 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack.all.js"></script>
-  <!--
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
-  -->
-  </style>
 </head>
 <body>
   <div class="container-fluid">
@@ -30,6 +23,12 @@ <h1>Float grid demo</h1>
 
   <script type="text/javascript">
     var grid = GridStack.init({float: true});
+
+    grid.on('added removed change', function(e, items) {
+      var str = '';
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     var items = [
       {x: 2, y: 1, width: 1, height: 2},

diff --git a/demo/knockout.html b/demo/knockout.html
@@ -9,11 +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="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">

diff --git a/demo/nested.html b/demo/nested.html
@@ -7,12 +7,7 @@
   <title>Nested grids demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
-
+  <script src="../dist/gridstack.all.js"></script>
   <style type="text/css">
     .grid-stack .grid-stack {
       /*margin: 0 -10px;*/

diff --git a/demo/responsive.html b/demo/responsive.html
@@ -5,11 +5,7 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div>

diff --git a/demo/right-to-left(rtl).html b/demo/right-to-left(rtl).html
@@ -14,11 +14,7 @@
   </style>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">

diff --git a/demo/serialization.html b/demo/serialization.html
@@ -7,11 +7,7 @@
   <title>Serialization demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">

diff --git a/demo/two.html b/demo/two.html
@@ -9,11 +9,7 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 
   <style type="text/css">
     .grid-stack {

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -35,7 +35,8 @@ Change log
 ## 1.1.0-dev (upcoming)
 
 - fix [1187](https://github.com/gridstack/gridstack.js/issues/1187) IE support for `CustomEvent` polyfill - thanks [@phil-blais](https://github.com/phil-blais)
-- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)
+- fix [1204](https://github.com/gridstack/gridstack.js/issues/1204) destroy drag&drop when removing node(s) instead of just disabling it.
+- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)	- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)
 
 ## 1.1.0 (2020-02-29)
 

diff --git a/doc/README.md b/doc/README.md
@@ -373,7 +373,7 @@ Checks if specified area is empty.
 
 Locks/unlocks widget.
 
-- `el` - widget to modify.
+- `el` - widget or selector to modify.
 - `val` - if `true` widget will be locked.
 
 ### makeWidget(el)

diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js
@@ -1270,23 +1270,21 @@ describe('gridstack', function() {
         verticalMargin: 10
       };
       var grid = GridStack.init(options);
-      var items = $('.grid-stack-item');
-      for (var i = 0; i < items.length; i++) {
-        grid.locked(items[i], true);
-        expect($(items[i]).attr('data-gs-locked')).toBe('yes');
-      }
+      grid.locked('.grid-stack-item', true);
+      $('.grid-stack-item').each(function (i,item) {
+        expect($(item).attr('data-gs-locked')).toBe('yes');
+      })
     });
     it('should unlock widgets', function() {
       var options = {
         cellHeight: 80,
         verticalMargin: 10
       };
       var grid = GridStack.init(options);
-      var items = $('.grid-stack-item');
-      for (var i = 0; i < items.length; i++) {
-        grid.locked(items[i], false);
-        expect($(items[i]).attr('data-gs-locked')).toBe(undefined);
-      }
+      grid.locked('.grid-stack-item', false);
+      $('.grid-stack-item').each(function (i,item) {
+        expect($(item).attr('data-gs-locked')).toBe(undefined);
+      })
     });
   });
 

diff --git a/src/gridstack-dragdrop-plugin.ts b/src/gridstack-dragdrop-plugin.ts
@@ -7,10 +7,10 @@
 */
 
 import { GridStack } from './gridstack';
-import { GridStackElement } from './types';
+import { GridItemHTMLElement } from './types';
 
 /** drag&drop options currently called from the main code, but others can be passed in grid options */
-export type DDOpts = 'enable' | 'disable' | 'option' | {} | any;
+export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | {} | any;
 export type DDKey = 'minWidth' | 'minHeight' | string;
 
 /**
@@ -28,23 +28,23 @@ export class GridStackDragDropPlugin {
     this.grid = grid;
   }
 
-  public resizable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public droppable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
     return this;
   }
 
-  public isDroppable(el: GridStackElement): boolean {
+  public isDroppable(el: GridItemHTMLElement): boolean {
     return false;
   }
 
-  public on(el: GridStackElement, eventName: string, callback): GridStackDragDropPlugin {
+  public on(el: GridItemHTMLElement, eventName: string, callback): GridStackDragDropPlugin {
     return this;
   }
 }