Merge pull request #1582 from adumesny/develop

test demo cleanup, remove $('selection') JQ code
gridstack · Jan 21, 2021 · c2c066a · c2c066a
2 parents 1766531 + 9cb9781
commit c2c066a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 35 deletions.
diff --git a/demo/nested.html b/demo/nested.html
@@ -20,7 +20,7 @@
   <div class="container-fluid">
     <h1>Nested grids demo</h1>
     <p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
-    <p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now. If you don't need the nested2 behavior I suggest you use h5 version.</p>
+    <p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>
     <a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
     <a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
     <br><br>

diff --git a/demo/two.html b/demo/two.html
@@ -87,7 +87,7 @@ <h1>Two grids demo</h1>
       cellHeight: 70,
       disableOneColumnMode: true,
       float: false,
-      dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
+      dragIn: '.sidebar .grid-stack-item', // add draggable to class
       dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // drag-out delete class
       removeTimeout: 100,

diff --git a/spec/e2e/html/1102-button-between-grids.html b/spec/e2e/html/1102-button-between-grids.html
@@ -14,30 +14,20 @@ <h1>lose functionality when dragged</h1>
     <br/>
     <div class="grid-stack" id="right-grid">
       <div class="grid-stack-item">
-        <div class="grid-stack-item-content" id="button1">button1</div>
+        <div class="grid-stack-item-content" onclick="alert('1')">button1</div>
       </div>
     </div>
      <br/>
     <br/>
     <div class="grid-stack" id="left-grid">
       <div class="grid-stack-item">
-        <div class="grid-stack-item-content" id="button2">button2</div>
+        <div class="grid-stack-item-content" onclick="alert('2')">button2</div>
       </div>
     </div>
   </div>
 
   <script type="text/javascript">
     GridStack.initAll({acceptWidgets: true});
-
-    function pressed1(){
-      $('.container-fluid').append("button 1 pressed ");
-    }
-
-    function pressed2(){
-      $('.container-fluid').append("button 2 pressed ");
-    }
-    $('#button1').click(pressed1);
-    $('#button2').click(pressed2);
   </script>
 </body>
 </html>
diff --git a/spec/e2e/html/1142_change_event_missing.html b/spec/e2e/html/1142_change_event_missing.html
@@ -6,9 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>1142 demo</title>
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-  <script src="../../../dist/gridstack-h5.js"></script>
+  <script src="../../../dist/gridstack-jq.js"></script>
 </head>
 <body>
+  <h1>JQ test case with click to remove</h1>
   <div class="grid-stack">
     <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">1 click to delete</div></div>
     <div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="3" gs-h="1"><div class="grid-stack-item-content">2 missing change event</div></div>
@@ -27,7 +28,7 @@
 
   $('.grid-stack .grid-stack-item').click(function(e) {
     let item = $(e.currentTarget).closest('.grid-stack-item');
-    grid.removeWidget(item);
+    grid.removeWidget(item.get(0));
   });
 </script>
 </body>

diff --git a/spec/e2e/html/1143_nested_acceptWidget_types.html b/spec/e2e/html/1143_nested_acceptWidget_types.html
@@ -23,6 +23,7 @@
   </style>
 </head>
 <body>
+  <h3>show dragging into sub grid</h3>
   <div class="row">
     <div class="col-md-2 d-none d-md-block">
       <div class="newWidget grid-stack-item">
@@ -37,15 +38,7 @@
           <div class="grid-stack-item-content">
             This nested grid accepts new widget with class "newWidget"<br/>
             The parent grid also accepts new widget but with a different class 'otherWidgetType'<br/>&nbsp;
-          <div class="grid-stack nested">
-            <div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">1</div></div>
-            <div class="grid-stack-item sub" gs-x="3" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">2</div></div>
-            <div class="grid-stack-item sub" gs-x="6" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">3</div></div>
-            <div class="grid-stack-item sub" gs-x="9" gs-y="0" gs-w="3" gs-h="1"><div class="grid-stack-item-content">4</div></div>
-            <div class="grid-stack-item sub" gs-x="0" gs-y="1" gs-w="3" gs-h="1"><div class="grid-stack-item-content">5</div></div>
-            <div class="grid-stack-item sub" gs-x="3" gs-y="1" gs-w="3" gs-h="1"><div class="grid-stack-item-content">6</div></div>
-          </div>
-
+            <div class="grid-stack nested"></div>
           </div>
         </div>
       </div>
@@ -54,20 +47,26 @@
 
   <script type="text/javascript">
     let grid = GridStack.init({ acceptWidgets: '.otherWidgetType' }, '.grid-stack.outer');
-    let gridNest = GridStack.init({ acceptWidgets: '.newWidget' }, '.grid-stack.nested');
+    let gridNest = GridStack.init({
+      acceptWidgets: '.newWidget',
+      dragIn: '.newWidget', // class that can be dragged from outside
+      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
+      itemClass: 'sub',
+    }, '.grid-stack.nested');
+    gridNest.load([
+      {x:0, y:0, w:3, content:'1'},
+      {x:3, y:0, w:3, content:'2'},
+      {x:6, y:0, w:3, content:'2'},
+      {x:9, y:0, w:3, content:'3'},
+      {x:0, y:1, w:3, content:'4'},
+      {x:3, y:1, w:3, content:'5'},
+    ]);
 
     grid.on('added removed change', function(e, items) {
       let str = '';
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
       console.log(e.type + ' ' + items.length + ' items:' + str );
     });
-
-    $('.newWidget').draggable({
-      revert: 'invalid',
-      scroll: false,
-      appendTo: 'body',
-      helper: 'clone'
-    });
   </script>
 </body>
 </html>
diff --git a/src/types.ts b/src/types.ts
@@ -65,7 +65,8 @@ 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;
 
-  /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance */
+  /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.
+  Note: only used by addGrid(), else your element should have the needed class */
   class?: string;
 
   /** disallows dragging of widgets (default?: false) */
@@ -98,7 +99,7 @@ export interface GridStackOptions {
   /** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */
   handleClass?: string;
 
-  /** widget class (default?: 'grid-stack-item') */
+  /** additional widget class (default?: 'grid-stack-item') */
   itemClass?: string;
 
   /**