don't call movable()/resizable() on locked items

* fix for gridstack#1505
* make sure we don't call  movable()/resizable() on locked items to start with
* prevent staticGrid from having enable/disable state changes as well
* better doc

doc/CHANGES.md

@@ -48,6 +48,7 @@ Change log
 see [nested.html](https://github.com/gridstack/gridstack.js/blob/develop/demo/nested.html) demo.
 - `save()` will now work on nested grids, recursively saving info. added flag to also allow saving the current grid options + children
 (needed for nested grids) so you can now call new `adddGrid()` to re-create everything from JSON.
+- fix [1505](https://github.com/gridstack/gridstack.js/issues/1505) don't call `movable()`/`resizable()` on locked items error. thanks [@infime](https://github.com/infime)
 
 ## 3.3.0 (2020-11-29)
 

src/gridstack-dd.ts

@@ -502,10 +502,10 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
  * @param val if true widget will be draggable.
  */
 GridStack.prototype.movable = function(els: GridStackElement, val: boolean): GridStack {
-  if (val && this.opts.staticGrid) { return this; } // can't move a static grid!
+  if (this.opts.staticGrid) { return this; } // can't move a static grid!
   GridStack.getElements(els).forEach(el => {
     let node = el.gridstackNode;
-    if (!node) { return }
+    if (!node || node.locked) { return }
     node.noMove = !(val || false);
     if (node.noMove) {
       GridStackDD.get().draggable(el, 'disable');
@@ -525,10 +525,10 @@ GridStack.prototype.movable = function(els: GridStackElement, val: boolean): Gri
  * @param val  if true widget will be resizable.
  */
 GridStack.prototype.resizable = function(els: GridStackElement, val: boolean): GridStack {
-  if (val && this.opts.staticGrid) { return this; } // can't resize a static grid!
+  if (this.opts.staticGrid) { return this; } // can't resize a static grid!
   GridStack.getElements(els).forEach(el => {
     let node = el.gridstackNode;
-    if (!node) { return; }
+    if (!node || node.locked) { return; }
     node.noResize = !(val || false);
     if (node.noResize) {
       GridStackDD.get().resizable(el, 'disable');

src/gridstack.ts

@@ -678,40 +678,47 @@ export class GridStack {
   }
 
   /**
-   * Disables widgets moving/resizing. This is a shortcut for:
+   * Temporarily disables widgets moving/resizing.
+   * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
+   * Note: no-op for static grid
+   * This is a shortcut for:
    * @example
    *  grid.enableMove(false);
    *  grid.enableResize(false);
    */
   public disable(): GridStack {
+    if (this.opts.staticGrid) { return; }
     this.enableMove(false);
     this.enableResize(false);
     this._triggerEvent('disable');
     return this;
   }
 
   /**
-   * Enables widgets moving/resizing. This is a shortcut for:
+   * Re-enables widgets moving/resizing - see disable().
+   * Note: no-op for static grid.
+   * This is a shortcut for:
    * @example
    *  grid.enableMove(true);
    *  grid.enableResize(true);
    */
   public enable(): GridStack {
+    if (this.opts.staticGrid) { return; }
     this.enableMove(true);
     this.enableResize(true);
     this._triggerEvent('enable');
     return this;
   }
 
   /**
-   * Enables/disables widget moving.
+   * Enables/disables widget moving. No-op for static grids.
    *
    * @param doEnable
    * @param includeNewWidgets will force new widgets to be draggable as per
    * doEnable`s value by changing the disableDrag grid option (default: true).
    */
   public enableMove(doEnable: boolean, includeNewWidgets = true): GridStack {
-    if (doEnable && this.opts.staticGrid) { return this; } // can't move a static grid!
+    if (this.opts.staticGrid) { return this; } // can't move a static grid!
     this.getGridItems().forEach(el => this.movable(el, doEnable));
     if (includeNewWidgets) {
       this.opts.disableDrag = !doEnable;
@@ -720,13 +727,13 @@ export class GridStack {
   }
 
   /**
-   * Enables/disables widget resizing
+   * Enables/disables widget resizing. No-op for static grids.
    * @param doEnable
    * @param includeNewWidgets will force new widgets to be draggable as per
    * doEnable`s value by changing the disableResize grid option (default: true).
    */
   public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack {
-    if (doEnable && this.opts.staticGrid) { return this; } // can't size a static grid!
+    if (this.opts.staticGrid) { return this; } // can't size a static grid!
     this.getGridItems().forEach(el => this.resizable(el, doEnable));
     if (includeNewWidgets) {
       this.opts.disableResize = !doEnable;
@@ -1465,13 +1472,13 @@ export class GridStack {
   /* eslint-disable @typescript-eslint/no-unused-vars */
 
   /**
-   * Enables/Disables moving.
+   * Enables/Disables moving. No-op for static grids.
    * @param els widget or selector to modify.
    * @param val if true widget will be draggable.
    */
   public movable(els: GridStackElement, val: boolean): GridStack { return this; }
   /**
-   * Enables/Disables resizing.
+   * Enables/Disables resizing. No-op for static grids.
    * @param els  widget or selector to modify
    * @param val  if true widget will be resizable.
    */

src/h5/gridstack-dd-native.ts

@@ -24,11 +24,9 @@ export class GridStackDDNative extends GridStackDD {
   public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDDNative {
     this._getDDElements(el).forEach(dEl => {
       if (opts === 'disable' || opts === 'enable') {
-        dEl.ddResizable && dEl.ddResizable[opts]();
+        dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable()
       } else if (opts === 'destroy') {
-        if (dEl.ddResizable) {
-          dEl.cleanResizable();
-        }
+        dEl.ddResizable && dEl.cleanResizable();
       } else if (opts === 'option') {
         dEl.setupResizable({ [key]: value });
       } else {
@@ -51,11 +49,9 @@ export class GridStackDDNative extends GridStackDD {
   public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDDNative {
     this._getDDElements(el).forEach(dEl => {
       if (opts === 'disable' || opts === 'enable') {
-        dEl.ddDraggable && dEl.ddDraggable[opts]();
+        dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable()
       } else if (opts === 'destroy') {
-        if (dEl.ddDraggable) { // error to call destroy if not there
-          dEl.cleanDraggable();
-        }
+        dEl.ddDraggable && dEl.cleanDraggable();
       } else if (opts === 'option') {
         dEl.setupDraggable({ [key]: value });
       } else {