gridstack - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

dist/gridstack-dd.d.ts

@@ -24,3 +24,3 @@ /**
     protected grid: GridStack;
-    static registeredPlugins: typeof GridStackDD[];
+    static registeredPlugins: typeof GridStackDD;
     /** call this method to register your plugin instead of the default no-op one */
@@ -31,2 +31,4 @@ static registerPlugin(pluginClass: typeof GridStackDD): void;
     constructor(grid: GridStack);
+    /** removes any drag&drop present (called during destroy) */
+    remove(el: GridItemHTMLElement): GridStackDD;
     resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD;
@@ -33,0 +35,0 @@ draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDD;

dist/gridstack-dd.js

 "use strict";
-// gridstack-dd.ts 2.0.2 @preserve
+// gridstack-dd.ts 2.1.0 @preserve
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -8,13 +8,21 @@ /**
 class GridStackDD {
-    constructor(grid) {
-        this.grid = grid;
-    }
     /** call this method to register your plugin instead of the default no-op one */
     static registerPlugin(pluginClass) {
-        GridStackDD.registeredPlugins.push(pluginClass);
+        GridStackDD.registeredPlugins = pluginClass;
     }
     /** get the current registered plugin to use */
     static get() {
-        return GridStackDD.registeredPlugins[0] || GridStackDD;
+        return GridStackDD.registeredPlugins || GridStackDD;
     }
+    constructor(grid) {
+        this.grid = grid;
+    }
+    /** removes any drag&drop present (called during destroy) */
+    remove(el) {
+        this.draggable(el, 'destroy').resizable(el, 'destroy');
+        if (el.gridstackNode) {
+            delete el.gridstackNode._initDD; // reset our DD init flag
+        }
+        return this;
+    }
     resizable(el, opts, key, value) {
@@ -45,4 +53,3 @@ return this;
 }
-GridStackDD.registeredPlugins = [];
 exports.GridStackDD = GridStackDD;
 //# sourceMappingURL=gridstack-dd.js.map

dist/gridstack-engine.d.ts

@@ -1,2 +0,2 @@
-import { GridStackNode, GridStackWidget } from './types';
+import { GridStackNode } from './types';
 export declare type onChangeCB = (nodes: GridStackNode[], removeDOM?: boolean) => void;
@@ -45,5 +45,5 @@ /**
     /** saves the current layout returning a list of widgets for serialization */
-    save(): GridStackWidget[];
+    save(saveElement?: boolean): GridStackNode[];
     /** called to remove all internal values */
     cleanupNode(node: GridStackNode): void;
 }

dist/gridstack-engine.js

 "use strict";
-// gridstack-engine.ts 2.0.2 @preserve
+// gridstack-engine.ts 2.1.0 @preserve
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -463,3 +463,3 @@ /**
     /** saves the current layout returning a list of widgets for serialization */
-    save() {
+    save(saveElement = true) {
         let widgets = [];
@@ -474,3 +474,4 @@ utils_1.Utils.sort(this.nodes);
             // delete other internals
-            delete w.el;
+            if (!saveElement)
+                delete w.el;
             delete w.grid;
@@ -536,4 +537,6 @@ // delete default values (will be re-created on read)
      * @param nodes different sorted list (ex: DOM order) instead of current list
+     * @param layout specify the type of re-layout that will happen (position, size, etc...).
+     * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
      */
-    updateNodeWidths(oldColumn, column, nodes) {
+    updateNodeWidths(oldColumn, column, nodes, layout = 'moveScale') {
         if (!this.nodes.length || oldColumn === column) {
@@ -584,3 +587,3 @@ return this;
         cacheNodes.forEach(cacheNode => {
-            let j = nodes.findIndex(n => n && n._id === cacheNode._id);
+            let j = nodes.findIndex(n => n._id === cacheNode._id);
             if (j !== -1) {
@@ -592,14 +595,23 @@ // still current, use cache info positions
                 newNodes.push(nodes[j]);
-                nodes[j] = null; // erase it so we know what's left
+                nodes.splice(j, 1);
             }
         });
         // ...and add any extra non-cached ones
-        let ratio = column / oldColumn;
-        nodes.forEach(node => {
-            if (!node)
-                return this;
-            node.x = (column === 1 ? 0 : Math.round(node.x * ratio));
-            node.width = ((column === 1 || oldColumn === 1) ? 1 : (Math.round(node.width * ratio) || 1));
-            newNodes.push(node);
-        });
+        if (nodes.length) {
+            if (typeof layout === 'function') {
+                layout(column, oldColumn, newNodes, nodes);
+            }
+            else {
+                let ratio = column / oldColumn;
+                let move = (layout === 'move' || layout === 'moveScale');
+                let scale = (layout === 'scale' || layout === 'moveScale');
+                nodes.forEach(node => {
+                    node.x = (column === 1 ? 0 : (move ? Math.round(node.x * ratio) : Math.min(node.x, column - 1)));
+                    node.width = ((column === 1 || oldColumn === 1) ? 1 :
+                        scale ? (Math.round(node.width * ratio) || 1) : (Math.min(node.width, column)));
+                    newNodes.push(node);
+                });
+                nodes = [];
+            }
+        }
         // finally re-layout them in reverse order (to get correct placement)
@@ -606,0 +618,0 @@ newNodes = utils_1.Utils.sort(newNodes, -1, column);

dist/gridstack.d.ts

@@ -8,3 +8,3 @@ /**
 import { Utils } from './utils';
-import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridStackOptions, numberOrString } from './types';
+import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridStackOptions, numberOrString, ColumnOptions } from './types';
 import { GridStackDD } from './gridstack-dd';
@@ -94,10 +94,11 @@ export * from './types';
      * let grid = GridStack.init();
-     * grid.addWidget('<div><div class="grid-stack-item-content">hello</div></div>', {width: 3});
+     * grid.addWidget({width: 3, content: 'hello'});
+     * grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">hello</div></div>', {width: 3});
      *
-     * @param el html element or string definition to add
-     * @param options widget position/size options (optional) - see GridStackWidget
+     * @param el html element, or string definition, or GridStackWidget (which can have content string as well) to add
+     * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
      */
-    addWidget(el: GridStackElement, options?: GridStackWidget): GridItemHTMLElement;
+    addWidget(els?: GridStackWidget | GridStackElement, options?: GridStackWidget): GridItemHTMLElement;
     /** saves the current layout returning a list of widgets for serialization */
-    save(): GridStackWidget[];
+    save(saveContent?: boolean): GridStackWidget[];
     /**
@@ -147,8 +148,9 @@ * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
      * as well as cache the original layout so you can revert back to previous positions without loss.
-     * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
+     * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
      * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
      * @param column - Integer > 0 (default 12).
-     * @param doNotPropagate if true existing widgets will not be updated (optional)
+     * @param layout specify the type of re-layout that will happen (position, size, etc...).
+     * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
      */
-    column(column: number, doNotPropagate?: boolean): GridStack;
+    column(column: number, layout?: ColumnOptions): GridStack;
     /**
@@ -330,6 +332,7 @@ * get the number of columns in the grid (default 12)
     /**
-     * Toggle the grid static state. Also toggle the grid-stack-static class.
-     * @param staticValue if true the grid become static.
+     * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
+     * Also toggle the grid-stack-static class.
+     * @param val if true the grid become static.
      */
-    setStatic(staticValue: boolean): GridStack;
+    setStatic(val: boolean): GridStack;
     /**
@@ -364,3 +367,3 @@ * Updates widget position/size.
      * if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, newNode.autoPosition)) {
-     *   grid.addWidget(newNode.el, newNode);
+     *   grid.addWidget(newNode);
      * } else {
@@ -367,0 +370,0 @@ *   alert('Not enough free space to place the widget');

dist/jq/gridstack-dd-jqueryui.d.ts

@@ -13,3 +13,3 @@ /** JQuery UI Drag&Drop plugin
 /**
- * Jquery-ui based drag'n'drop plugin.
+ * legacy Jquery-ui based drag'n'drop plugin.
  */
@@ -16,0 +16,0 @@ export declare class GridStackDDJQueryUI extends GridStackDD {

dist/jq/gridstack-dd-jqueryui.js

 "use strict";
-// gridstack-dd-jqueryui.ts 2.0.2 @preserve
+// gridstack-dd-jqueryui.ts 2.1.0 @preserve
 function __export(m) {
@@ -8,4 +8,4 @@ for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 const gridstack_dd_1 = require("../gridstack-dd");
-// TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
-// see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
+// export all jq symbols see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
+// TODO: let user bring their own jq or jq-ui version
 const $ = require("./jquery");
@@ -15,3 +15,3 @@ exports.$ = $;
 /**
- * Jquery-ui based drag'n'drop plugin.
+ * legacy Jquery-ui based drag'n'drop plugin.
  */
@@ -24,6 +24,6 @@ class GridStackDDJQueryUI extends gridstack_dd_1.GridStackDD {
         let $el = $(el);
-        if (opts === 'disable' || opts === 'enable') {
-            $el.resizable(opts);
+        if (opts === 'enable') {
+            $el.resizable().resizable(opts);
         }
-        else if (opts === 'destroy') {
+        else if (opts === 'disable' || opts === 'destroy') {
             if ($el.data('ui-resizable')) { // error to call destroy if not there
@@ -48,6 +48,6 @@ $el.resizable(opts);
         let $el = $(el);
-        if (opts === 'disable' || opts === 'enable') {
-            $el.draggable(opts);
+        if (opts === 'enable') {
+            $el.draggable().draggable('enable');
         }
-        else if (opts === 'destroy') {
+        else if (opts === 'disable' || opts === 'destroy') {
             if ($el.data('ui-draggable')) { // error to call destroy if not there
@@ -54,0 +54,0 @@ $el.draggable(opts);

dist/types.d.ts

@@ -8,2 +8,7 @@ /**
 import { GridStackDD } from './gridstack-dd';
+/** different layout options when changing # of columns,
+ * including a custom function that takes new/old column count, and array of new/old positions
+ * Note: new list may be partially already filled if we have a cache of the layout at that size and new items were added later.
+ */
+export declare type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
 export declare type numberOrString = number | string;
@@ -159,2 +164,4 @@ export interface GridItemHTMLElement extends HTMLElement {
     id?: numberOrString;
+    /** html to append inside as content */
+    content?: string;
 }
@@ -161,0 +168,0 @@ /** Drag&Drop resize options */

dist/types.js

 "use strict";
-// types.ts 2.0.2 @preserve
+// types.ts 2.1.0 @preserve
 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=types.js.map

dist/utils.js

 "use strict";
-// utils.ts 2.0.2 @preserve
+// utils.ts 2.1.0 @preserve
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -4,0 +4,0 @@ /** checks for obsolete method names */

doc/CHANGES.md

@@ -8,3 +8,3 @@ Change log
 
-- [2.0.2-dev](#202-dev)
+- [2.1.0 (2020-10-28)](#210-2020-10-28)
 - [2.0.2 (2020-10-05)](#202-2020-10-05)
@@ -43,5 +43,11 @@ - [2.0.1 (2020-09-26)](#201-2020-09-26)
 
-## 2.0.2-dev
+## 2.1.0 (2020-10-28)
 
-- TBD
+- fix grid `static: true` to no longer add any drag&drop (even disabled) which should speed things up, and `setStatic(T/F)` will now correctly add it back/delete for items that need it only. 
+Also fixed JQ draggable warning if not initialized first [858](https://github.com/gridstack/gridstack.js/issues/858)
+- add `addWidget(opt)` now handles just passing a `GridStackWidget` which creates the default divs, simplifying your code. Old API still supported.
+- add `save(saveContent = true)` now lets you optionally save the HTML content in the node property, with load() restoring it [1418](https://github.com/gridstack/gridstack.js/issues/1418)
+- add `GridStackWidget.content` now lets you add any HTML content when calling `load()/save()` or `addWidget()` [1418](https://github.com/gridstack/gridstack.js/issues/1418)
+- add `ColumnOptions` to `column(n, options)` for multiple re-layout options, including 'none' that will preserve the x and width, until out of bound/overlap [1338](https://github.com/gridstack/gridstack.js/issues/1338)
+including a custom function for you to create the new layout [1332](https://github.com/gridstack/gridstack.js/issues/1332)
 
@@ -48,0 +54,0 @@ ## 2.0.2 (2020-10-05)

doc/README.md

@@ -24,3 +24,3 @@ gridstack.js API
 - [API](#api)
-  - [addWidget(el, [options])](#addwidgetel-options)
+  - [addWidget(el?: GridStackWidget | GridStackElement, options?: GridStackWidget)](#addwidgetel-gridstackwidget--gridstackelement-options-gridstackwidget)
   - [batchUpdate()](#batchupdate)
@@ -31,3 +31,3 @@ - [compact()](#compact)
   - [commit()](#commit)
-  - [column(column, doNotPropagate)](#columncolumn-donotpropagate)
+  - [column(column: number, layout: ColumnOptions = 'moveScale')](#columncolumn-number-layout-columnoptions--movescale)
   - [destroy([removeDOM])](#destroyremovedom)
@@ -58,3 +58,3 @@ - [disable()](#disable)
   - [resizable(el, val)](#resizableel-val)
-  - [save(): GridStackWidget[]](#save-gridstackwidget)
+  - [save(saveContent = true): GridStackWidget[]](#savesavecontent--true-gridstackwidget)
   - [setAnimation(doAnimate)](#setanimationdoanimate)
@@ -143,2 +143,3 @@ - [setStatic(staticValue)](#setstaticstaticvalue)
 - `id`- (number | string) good for quick identification (for example in change event)
+- `content` - (string) html content to be added when calling `grid.load()/addWidget()` as content inside the item
 
@@ -260,3 +261,3 @@ ## Item attributes
 
-### addWidget(el, [options])
+### addWidget(el?: GridStackWidget | GridStackElement, options?: GridStackWidget)
 
@@ -267,4 +268,4 @@ Creates new widget and returns it. Options is an object containing the fields x,y,width,height,etc...
 
-- `el` - html element or string definition to add
-- `options` widget position/size options (optional) - see GridStackWidget
+- `el`: GridStackWidget | GridStackElement -  html element, or string definition, or GridStackWidget (which can have content string as well) to add
+- `options`: GridStackWidget - widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
 
@@ -276,3 +277,5 @@ Widget will be always placed even if result height is more than actual grid height. You need to use `willItFit` method
 let grid = GridStack.init();
-grid.addWidget('<div><div class="grid-stack-item-content">hello</div></div>', {width: 3});
+grid.addWidget({width: 3, content: 'hello'});
+// or
+grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">hello</div></div>', {width: 3});
 ```
@@ -305,3 +308,3 @@
 
-### column(column, doNotPropagate)
+### column(column: number, layout: ColumnOptions = 'moveScale')
 
@@ -314,3 +317,7 @@ set/get the number of columns in the grid. Will update existing widgets to conform to new number of columns,
 - `column` - Integer > 0 (default 12), if missing it will return the current count instead.
-- `doNotPropagate` - if true existing widgets will not be updated during a set.
+- `layout` - specify the type of re-layout that will happen (position, size, etc...).
+Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column.
+Possible values: 'moveScale' | 'move' | 'scale' | 'none' | (column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void.
+A custom function option takes new/old column count, and array of new/old positions.
+Note: new list may be partially already filled if we have a partial cache of the layout at that size (items were added later). If complete cache is present this won't get called at all.
 
@@ -510,5 +517,5 @@ ### destroy([removeDOM])
 
-### save(): GridStackWidget[]
+### save(saveContent = true): GridStackWidget[]
 
-- returns the layout of the grid that can be serialized (list of item non default attributes, not just w,y,x,y but also min/max and id). See `load()`
+- returns the layout of the grid (and optionally the html content as well) that can be serialized (list of item non default attributes, not just w,y,x,y but also min/max and id). See `load()`
 - see [example](http://gridstackjs.com/demo/serialization.html)
@@ -515,0 +522,0 @@

package.json

 {
   "name": "gridstack",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
@@ -5,0 +5,0 @@ "main": "./dist/gridstack.js",

README.md

@@ -99,4 +99,4 @@ gridstack.js
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.0.2/dist/gridstack.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/gridstack@2.0.2/dist/gridstack.all.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.1.0/dist/gridstack.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/gridstack@2.1.0/dist/gridstack.all.js"></script>
 ```
@@ -116,3 +116,3 @@
 var grid = GridStack.init();
-grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
+grid.addWidget({width: 2, content: 'item 1'});
 ```
@@ -126,4 +126,4 @@
   {x: 0, y: 0, width: 2, height: 2},
-  {x: 2, y: 3, width: 3, height: 1},
-  {x: 1, y: 3, width: 1, height: 1}
+  {x: 2, y: 3, width: 3, content: 'item 2'},
+  {x: 1, y: 3}
 ];
@@ -182,3 +182,3 @@
 
-- vue.js: see [demo](https://github.com/gridstack/gridstack.js/blob/develop/demo/vuejs.html) 
+- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html) 
 - ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
@@ -201,3 +201,3 @@ - AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.0.2/dist/gridstack-extra.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.1.0/dist/gridstack-extra.css"/>
 
@@ -352,8 +352,9 @@ <div class="grid-stack grid-stack-N">...</div>
 Other changes
-```
+
+```js
 `GridStackUI` --> `GridStack`
 `GridStackUI.GridStackEngine` --> `GridStack.Engine`
-`grid.container` (jquery grid wrapper) --> `grid.el` (grid DOM element)
+`grid.container` (jquery grid wrapper) --> `grid.el` // (grid DOM element)
 `grid.grid` (GridStackEngine) --> `grid.engine`
-`grid.setColumn(N)` --> `grid.column(N)` and new `grid.column()` to get value, old API still supported though
+`grid.setColumn(N)` --> `grid.column(N)` and `grid.column()` // to get value, old API still supported though
 ```
@@ -379,8 +380,9 @@
 
-```
+```js
 `addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
-`float()` to get value --> `getFloat()`
-'cellHeight()` to get value --> `getCellHeight()`
-'verticalMargin' is now 'margin' grid options and API that applies to all 4 sides.
-'verticalMargin()` to get value --> `getMargin()`
+// Note: in 2.1.x you can now just do addWidget({with: 2, content: "text"})
+`float()` --> `getFloat()` // to get value
+`cellHeight()` --> `getCellHeight()` // to get value
+`verticalMargin` --> `margin` // grid options and API that applies to all 4 sides.
+`verticalMargin()` --> `getMargin()` // to get value
 ```
@@ -387,0 +389,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1901555

increased by0.59%

Number of lines in readme file

399

increased by0.5%

Worsened metrics

Number of package files

36

decreased by-7.69%

Lines of code

5847

decreased by-0.22%

No dependency changes