diff --git a/doc/CHANGES.md b/doc/CHANGES.md index fc2f7d7da..6e9209fc3 100644 --- a/doc/CHANGES.md +++ b/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) diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 00bfc4e0e..d6c32ab0d 100644 --- a/src/gridstack-dd.ts +++ b/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'); diff --git a/src/gridstack.ts b/src/gridstack.ts index 82e855ec0..5f260c436 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -678,12 +678,16 @@ 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'); @@ -691,12 +695,15 @@ export class GridStack { } /** - * 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'); @@ -704,14 +711,14 @@ export class GridStack { } /** - * 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. */ diff --git a/src/h5/gridstack-dd-native.ts b/src/h5/gridstack-dd-native.ts index 67f295d61..b4626fab8 100644 --- a/src/h5/gridstack-dd-native.ts +++ b/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 {