diff --git a/README.md b/README.md index 0a9a09534..23ba8f2be 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example ## Requirements -Gridstack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.css` (layouts are done using CSS column based %). +GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.css` (layouts are done using CSS column based %). ## API Documentation @@ -365,7 +365,7 @@ make sure to read v1 migration first! v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x -1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have all set methods return `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridstackOptions` or `GridStackWidget`). +1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have all set methods return `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`). ``` `addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})` diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 28c404ab5..0727a3b43 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,7 +5,8 @@ Change log **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* -- [2.0.0-dev (2020-09-07)](#200-dev-2020-09-07) +- [2.0.0-dev](#200-dev) +- [2.0.0 (2020-09-07)](#200-2020-09-07) - [1.2.1 (2020-09-04)](#121-2020-09-04) - [1.2.0 (2020-08-01)](#120-2020-08-01) - [1.1.2 (2020-05-17)](#112-2020-05-17) @@ -36,7 +37,12 @@ Change log -## 2.0.0-dev (2020-09-07) +## 2.0.0-dev + +- fix `minWidth()`, `minHeight()`, `maxHeight()` to set node value as well [1359](https://github.com/gridstack/gridstack.js/issues/1359) +- fix `GridStackOptions` spelling [1359](https://github.com/gridstack/gridstack.js/issues/1359) + +## 2.0.0 (2020-09-07) - re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using jqueryui for now) - add `getGridItems()` to return list of HTML grid items diff --git a/package.json b/package.json index f44309a04..467711a46 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gridstack", - "version": "2.0.0", + "version": "2.0.0-dev", "description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)", "main": "./dist/gridstack.js", "types": "./dist/gridstack.d.ts", diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index c9670a2b2..b7b47e3f9 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -1,4 +1,4 @@ -// gridstack-dd.ts 2.0.0 @preserve +// gridstack-dd.ts 2.0.0-dev @preserve /** * https://gridstackjs.com/ @@ -12,7 +12,7 @@ import { GridItemHTMLElement, DDDragInOpt } from './types'; /** Drag&Drop drop options */ export type DDDropOpt = { - /** function or class type that this grid will accept as dropped items (see GridstackOptions.acceptWidgets) */ + /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */ accept?: (el: GridItemHTMLElement) => boolean; } diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index ce7c81141..5274c6b4f 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -1,4 +1,4 @@ -// gridstack-engine.ts 2.0.0 @preserve +// gridstack-engine.ts 2.0.0-dev @preserve /** * https://gridstackjs.com/ diff --git a/src/gridstack.ts b/src/gridstack.ts index 9038a1121..ed8e4b563 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1,4 +1,4 @@ -// gridstack.ts 2.0.0 @preserve +// gridstack.ts 2.0.0-dev @preserve /** * https://gridstackjs.com/ @@ -9,7 +9,7 @@ import './gridstack-poly.js'; import { GridStackEngine } from './gridstack-engine'; import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils } from './utils'; -import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types'; +import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridStackOptions, numberOrString } from './types'; import { GridStackDD } from './gridstack-dd'; // export all dependent file as well to make it easier for users to just import the main file @@ -71,7 +71,7 @@ export class GridStack { * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later * let grid = document.querySelector('.grid-stack').gridstack; */ - public static init(options: GridstackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack { + public static init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack { let el = GridStack.getGridElement(elOrString); if (!el) { if (typeof elOrString === 'string') { @@ -97,7 +97,7 @@ export class GridStack { * let grids = GridStack.initAll(); * grids.forEach(...) */ - public static initAll(options: GridstackOptions = {}, selector = '.grid-stack'): GridStack[] { + public static initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[] { let grids: GridStack[] = []; GridStack.getGridElements(selector).forEach(el => { if (!el.gridstack) { @@ -125,7 +125,7 @@ export class GridStack { public engine: GridStackEngine; /** grid options - public for classes to access, but use methods to modify! */ - public opts: GridstackOptions; + public opts: GridStackOptions; /** current drag&drop plugin being used */ public dd: GridStackDD; @@ -150,7 +150,7 @@ export class GridStack { * @param el * @param opts */ - public constructor(el: GridHTMLElement, opts: GridstackOptions = {}) { + public constructor(el: GridHTMLElement, opts: GridStackOptions = {}) { this.el = el; // exposed HTML element to the user opts = opts || {}; // handles null/undefined/0 @@ -172,7 +172,7 @@ export class GridStack { let rowAttr = Utils.toNumber(el.getAttribute('data-gs-row')); // elements attributes override any passed options (like CSS style) - merge the two together - let defaults: GridstackOptions = { + let defaults: GridStackOptions = { column: Utils.toNumber(el.getAttribute('data-gs-column')) || 12, minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('data-gs-min-row')) || 0, maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('data-gs-max-row')) || 0, @@ -429,7 +429,7 @@ export class GridStack { } /** - * Update current cell height - see `GridstackOptions.cellHeight` for format. + * Update current cell height - see `GridStackOptions.cellHeight` for format. * This method rebuilds an internal CSS style sheet. * Note: You can expect performance issues if call this method too often. * @@ -720,17 +720,7 @@ export class GridStack { * @param val A numeric value of the number of columns */ public maxWidth(els: GridStackElement, val: number): GridStack { - this.getElements(els).forEach(el => { - let node = el.gridstackNode; - if (!node) { return } - node.maxWidth = (val || undefined); - if (val) { - el.setAttribute('data-gs-max-width', String(val)); - } else { - el.removeAttribute('data-gs-max-width'); - } - }); - return this; + return this._updateAttr(els, val, 'data-gs-max-width', 'maxWidth'); } /** @@ -739,16 +729,7 @@ export class GridStack { * @param val A numeric value of the number of columns */ public minWidth(els: GridStackElement, val: number): GridStack { - this.getElements(els).forEach(el => { - let node = el.gridstackNode; - if (!node) { return } - if (val) { - el.setAttribute('data-gs-min-width', String(val)); - } else { - el.removeAttribute('data-gs-min-width'); - } - }); - return this; + return this._updateAttr(els, val, 'data-gs-min-width', 'minWidth'); } /** @@ -757,16 +738,7 @@ export class GridStack { * @param val A numeric value of the number of rows */ public maxHeight(els: GridStackElement, val: number): GridStack { - this.getElements(els).forEach(el => { - let node = el.gridstackNode; - if (!node) { return } - if (val) { - el.setAttribute('data-gs-max-height', String(val)); - } else { - el.removeAttribute('data-gs-max-height'); - } - }); - return this; + return this._updateAttr(els, val, 'data-gs-max-height', 'maxHeight'); } /** @@ -775,16 +747,7 @@ export class GridStack { * @param val A numeric value of the number of rows */ public minHeight(els: GridStackElement, val: number): GridStack { - this.getElements(els).forEach(el => { - let node = el.gridstackNode; - if (!node) { return } - if (val) { - el.setAttribute('data-gs-min-height', String(val)); - } else { - el.removeAttribute('data-gs-min-height'); - } - }); - return this; + return this._updateAttr(els, val, 'data-gs-min-height', 'minHeight'); } /** @@ -1020,9 +983,9 @@ export class GridStack { } /** - * Updates the margins which will set all 4 sides at once - see `GridstackOptions.margin` for format options. + * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options. * @param value new vertical margin value - * Note: you can instead use `marginTop | marginBottom | marginLeft | marginRight` GridstackOptions to set the sides separately. + * Note: you can instead use `marginTop | marginBottom | marginLeft | marginRight` GridStackOptions to set the sides separately. */ public margin(value: numberOrString): GridStack { let data = Utils.parseHeight(value); @@ -1797,6 +1760,21 @@ export class GridStack { return this; } + /** @internal called to update an element(s) attributes and node values */ + private _updateAttr(els: GridStackElement, val: number, attr: string, field: string): GridStack { + this.getElements(els).forEach(el => { + if (val) { + el.setAttribute(attr, String(val)); + } else { + el.removeAttribute(attr); + } + if (el.gridstackNode) { + el.gridstackNode[field] = (val || undefined); + } + }); + return this; + } + // legacy method renames /** @internal */ private setGridWidth = obsolete(this, GridStack.prototype.column, 'setGridWidth', 'column', 'v0.5.3'); diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts index 90e2d2ca9..6c1799046 100644 --- a/src/jq/gridstack-dd-jqueryui.ts +++ b/src/jq/gridstack-dd-jqueryui.ts @@ -1,4 +1,4 @@ -// gridstack-dd-jqueryui.ts 2.0.0 @preserve +// gridstack-dd-jqueryui.ts 2.0.0-dev @preserve /** JQuery UI Drag&Drop plugin * https://gridstackjs.com/ diff --git a/src/types.ts b/src/types.ts index a88ee42cc..b914f3feb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,4 @@ -// types.ts 2.0.0 @preserve +// types.ts 2.0.0-dev @preserve /** * https://gridstackjs.com/ @@ -20,7 +20,7 @@ export interface GridItemHTMLElement extends HTMLElement { /** * Defines the options for a Grid */ -export interface GridstackOptions { +export interface GridStackOptions { /** * accept widgets dragged from other grids or from outside (default: `false`). Can be: * `true` (uses `'.grid-stack-item'` class filter) or `false`, @@ -173,7 +173,7 @@ export interface GridstackOptions { /** - * Gridstack Widget creation options + * GridStack Widget creation options */ export interface GridStackWidget { /** widget position x (default?: 0) */ diff --git a/src/utils.ts b/src/utils.ts index 41e57c004..fe1a0e4fe 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,4 @@ -// utils.ts 2.0.0 @preserve +// utils.ts 2.0.0-dev @preserve /** * https://gridstackjs.com/ @@ -6,7 +6,7 @@ * gridstack.js may be freely distributed under the MIT license. */ -import { GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types'; +import { GridStackWidget, GridStackNode, GridStackOptions, numberOrString } from './types'; /** checks for obsolete method names */ export function obsolete(self, f, oldName: string, newName: string, rev: string) { @@ -20,7 +20,7 @@ export function obsolete(self, f, oldName: string, newName: string, rev: string) } /** checks for obsolete grid options (can be used for any fields, but msg is about options) */ -export function obsoleteOpts(opts: GridstackOptions, oldName: string, newName: string, rev: string) { +export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string) { if (opts[oldName] !== undefined) { opts[newName] = opts[oldName]; console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' + @@ -29,7 +29,7 @@ export function obsoleteOpts(opts: GridstackOptions, oldName: string, newName: s } /** checks for obsolete grid options which are gone */ -export function obsoleteOptsDel(opts: GridstackOptions, oldName: string, rev: string, info: string) { +export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string) { if (opts[oldName] !== undefined) { console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info); }