enableMove() fix

* fix gridstack#1658 * we now set the grid options BEFORE we update each item as that override * enableMove() and enableResize() no longer take a second optional param as we must set grid options for things to work (if you want to enable current items but not change the grid itself, there is already the `movable('.grid-stack-item')` method that doesn't change the grid (no need for 2 ways) * did some more cleanup and added test case.
adumesny · Mar 22, 2021 · 39aff94 · 39aff94
1 parent 0ea5bc8
commit 39aff94
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 147 deletions.
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +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/)*
 
+- [4.0.1-dev](#401-dev)
 - [4.0.1 (2021-3-20)](#401-2021-3-20)
 - [4.0.0 (2021-3-19)](#400-2021-3-19)
 - [3.3.0 (2021-2-2)](#330-2021-2-2)
@@ -49,6 +50,9 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 4.0.1-dev
+
+- fix [#1658](https://github.com/gridstack/gridstack.js/issues/1658) `enableMove(T/F)` not working correctly
 ## 4.0.1 (2021-3-20)
 
 - fix [#1669](https://github.com/gridstack/gridstack.js/issues/1669) JQ resize broken

diff --git a/doc/README.md b/doc/README.md
@@ -38,8 +38,8 @@ gridstack.js API
   - [`destroy([removeDOM])`](#destroyremovedom)
   - [`disable()`](#disable)
   - [`enable()`](#enable)
-  - [`enableMove(doEnable, includeNewWidgets)`](#enablemovedoenable-includenewwidgets)
-  - [`enableResize(doEnable, includeNewWidgets)`](#enableresizedoenable-includenewwidgets)
+  - [`enableMove(doEnable)`](#enablemovedoenable)
+  - [`enableResize(doEnable)`](#enableresizedoenable)
   - [`float(val?)`](#floatval)
   - [`getCellHeight()`](#getcellheight)
   - [`getCellFromPixel(position[, useOffset])`](#getcellfrompixelposition-useoffset)
@@ -403,22 +403,22 @@ grid.enableMove(true);
 grid.enableResize(true);
 ```
 
-### `enableMove(doEnable, includeNewWidgets)`
+### `enableMove(doEnable)`
 
-Enables/disables widget moving. `includeNewWidgets` will force new widgets to be draggable as per `doEnable`'s value by changing the `disableDrag` grid option (default: true). This is a shortcut for:
+Enables/disables widget moving (default: true), and setting the `disableDrag` grid option. This is a shortcut for:
 
 ```js
-grid.movable('.grid-stack-item', doEnable);
 grid.opts.disableDrag = !doEnable;
+grid.movable('.grid-stack-item', doEnable);
 ```
 
-### `enableResize(doEnable, includeNewWidgets)`
+### `enableResize(doEnable)`
 
-Enables/disables widget resizing. `includeNewWidgets` will force new widgets to be resizable as per `doEnable`'s value by changing the `disableResize` grid option  (default: true). This is a shortcut for:
+Enables/disables widget sizing (default: true), and setting the `disableResize` grid option. This is a shortcut for:
 
 ```js
-grid.resizable('.grid-stack-item', doEnable);
 grid.opts.disableResize = !doEnable;
+grid.resizable('.grid-stack-item', doEnable);
 ```
 
 ### `float(val?)`
@@ -445,7 +445,7 @@ Returns an object with properties `x` and `y` i.e. the column and row in the gri
 
 ### `getGridItems(): GridItemHTMLElement[]`
 
-Return list of GridItem HTML dom elements (excluding temporary placeholder)
+Return list of GridItem HTML elements (excluding temporary placeholder) in DOM order, wether they are node items yet or not (looks by class)
 
 ### `getMargin()`
 

diff --git a/spec/e2e/html/1658_enableMove.html b/spec/e2e/html/1658_enableMove.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Float grid demo</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Float grid demo</h1>
+    <div>
+      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
+      <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
+      <a class="btn btn-primary" onclick="grid.enableMove(true)" href="#">enable</a>
+      <a class="btn btn-primary" onclick="grid.disable()" href="#">disable</a>
+    </div>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+  <script src="../../../demo/events.js"></script>
+  <script type="text/javascript">
+    let grid = GridStack.init({disableResize: true, disableDrag: true});
+    addEvents(grid);
+
+    let items = [
+      {x: 1, y: 1},
+      {x: 2, y: 2, w: 3},
+      {x: 4, y: 2},
+      {x: 3, y: 1, h: 2},
+      {x: 0, y: 6, w: 2, h: 2}
+    ];
+    let count = 0;
+
+    addNewWidget = function() {
+      let n = items[count] || {
+        x: Math.round(12 * Math.random()),
+        y: Math.round(5 * Math.random()),
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
+      };
+      n.content = String(count++);
+      grid.addWidget(n);
+    };
+
+    toggleFloat = function() {
+      grid.float(! grid.getFloat());
+      document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
+    };
+    addNewWidget();
+  </script>
+</body>
+</html>
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
@@ -1420,7 +1420,7 @@ describe('gridstack', function() {
       }
       expect(grid.opts.disableDrag).toBe(true);
 
-      grid.enableMove(true, true);
+      grid.enableMove(true);
       for (let i = 0; i < items.length; i++) {
         expect(items[i].classList.contains('ui-draggable-disabled')).toBe(false);
       }
@@ -1438,11 +1438,11 @@ describe('gridstack', function() {
       }
       expect(grid.opts.disableDrag).toBe(false);
 
-      grid.enableMove(false, false);
+      grid.enableMove(false);
       for (let i = 0; i < items.length; i++) {
         expect(items[i].classList.contains('ui-draggable-disabled')).toBe(true);
       }
-      expect(grid.opts.disableDrag).toBe(false);
+      expect(grid.opts.disableDrag).toBe(true);
     });
   });