diff --git a/types/gridstack/gridstack-tests.ts b/types/gridstack/gridstack-tests.ts index 0ef4a7691b..2cf6079b53 100644 --- a/types/gridstack/gridstack-tests.ts +++ b/types/gridstack/gridstack-tests.ts @@ -19,8 +19,10 @@ if (gridstack !== gsFromElement) throw Error('These should match!'); gridstack.addWidget("test", 1, 2, 3, 4, true); gridstack.addWidget(document.createElement('div'), 1, 2, 3, 4, true); gridstack.addWidget($(document.createElement('div')), 1, 2, 3, 4, true); +gridstack.makeWidget($(document.createElement('div'))); gridstack.batchUpdate(); gridstack.cellHeight();; gridstack.cellHeight(2); gridstack.cellWidth(); gridstack.getCellFromPixel({ left:20, top: 20 }); +gridstack.removeAll(false); \ No newline at end of file diff --git a/types/gridstack/index.d.ts b/types/gridstack/index.d.ts index 2406f5e08b..fa0c99463c 100644 --- a/types/gridstack/index.d.ts +++ b/types/gridstack/index.d.ts @@ -1,11 +1,11 @@ // Type definitions for Gridstack // Project: http://troolee.github.io/gridstack.js/ -// Definitions by: Pascal Senn , Ricky Blankenaufulland +// Definitions by: Pascal Senn , Ricky Blankenaufulland , Sl1MBoy // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 interface JQuery { - gridstack (options: IGridstackOptions): JQuery; + gridstack(options: IGridstackOptions): JQuery; data(key: "gridstack"): GridStack; } @@ -26,28 +26,29 @@ interface GridStack { /** * Initializes batch updates. You will see no changes until commit method is called. */ - batchUpdate():void + batchUpdate(): void /** * Gets current cell height. */ - cellHeight():number + cellHeight(): number /** * Update current cell height. This method rebuilds an internal CSS style sheet. Note: You can expect performance issues if call this method too often. * @param {number} val the cell height */ - cellHeight(val:number):void + cellHeight(val: number): void /** * Gets current cell width. */ - cellWidth():number + cellWidth(): number /** * Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate. */ - commit():void + commit(): void /** * Destroys a grid instance. + * @param {boolean} detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true). */ - destroy(): void + destroy(detachGrid?: boolean): void /* * Disables widgets moving/resizing. */ @@ -56,12 +57,27 @@ interface GridStack { * Enables widgets moving/resizing. */ enable(): void - /* + /** + * Enables/disables widget moving. + * This is a shortcut for: + * grid.movable(this.container.children('.' + this.opts.itemClass), doEnable); + * @param {boolean} doEnable + * @param {boolean} includeNewWidgets will force new widgets to be draggable + */ + enableMove(doEnable: boolean, includeNewWidgets: boolean): void + /** + * Enables/disables widget resizing. + * @param {boolean} doEnable + * @param {boolean} includeNewWidgets will force new widgets to be resizable + */ + enableResize(doEnable: boolean, includeNewWidgets: boolean): void + /** * Get the position of the cell under a pixel on screen. * @param {MousePosition} position the position of the pixel to resolve in absolute coordinates, as an object with top and leftproperties + * @param {boolean} useOffset if true, value will be based on offset vs position (Optional. Default false). Useful when grid is within position: relative element. */ - getCellFromPixel(position: MousePosition): CellPosition, - /* + getCellFromPixel(position: MousePosition, useOffset?: boolean): CellPosition, + /** * Checks if specified area is empty. * @param {number} x the position x. * @param {number} y the position y. @@ -69,29 +85,49 @@ interface GridStack { * @param {number} height the height of to check */ isAreaEmpty(x: number, y: number, width: number, height: number): void - /* + /** * Locks/unlocks widget. * @param {HTMLElement} el widget to modify. * @param {boolean} val if true widget will be locked. */ locked(el: HTMLElement, val: boolean): void - /* + /** + * If you add elements to your gridstack container by hand, you have to tell gridstack afterwards to make them widgets. + * + * If you want gridstack to add the elements for you, use addWidget instead. Makes the given element a widget and returns it. + * + * @param {string | HTMLElement | JQuery} el widget to add + */ + makeWidget(el: string | HTMLElement | JQuery): JQuery + /** + * Set the maxWidth for a widget. + * @param {HTMLElement} el widget to modify. + * @param {number} val A numeric value of the number of columns + */ + maxWidth(el: HTMLElement, val: number): void + /** * Set the minWidth for a widget. * @param {HTMLElement} el widget to modify. * @param {number} val A numeric value of the number of columns */ minWidth(el: HTMLElement, val: number): void - /* + /** + * Set the maxHeight for a widget. + * @param {HTMLElement} el widget to modify. + * @param {number} val A numeric value of the number of rows + */ + maxHeight(el: HTMLElement, val: number): void + /** * Set the minHeight for a widget. * @param {HTMLElement} el widget to modify. * @param {number} val A numeric value of the number of rows */ minHeight(el: HTMLElement, val: number): void - /* - * Enables/Disables moving. - * @param {HTMLElement} el widget to modify. - * @param {number} val if true widget will be draggable. - */ + /** + * Enables/Disables moving. + * @param {HTMLElement} el widget to modify. + * @param {number} val if true widget will be draggable. + */ movable(el: HTMLElement, val: boolean): void /** * Changes widget position @@ -109,8 +145,9 @@ interface GridStack { removeWidget(el: HTMLElement, detachNode?: boolean): void /** * Removes all widgets from the grid. + * @param {boolean} detachNode if false DOM node won't be removed from the tree (Optional. Default true). */ - removeAll(): void + removeAll(detachNode?: boolean): void /** * Changes widget size * @param {HTMLElement} el widget to modify @@ -124,6 +161,19 @@ interface GridStack { * @param {boolean} val if true widget will be resizable. */ resizable(el: HTMLElement, val: boolean): void + /** + * Toggle the grid animation state. Toggles the grid-stack-animate class. + * @param {boolean} doAnimate if true the grid will animate. + */ + setAnimation(doAnimate: boolean): void + /** + * (Experimental) Modify number of columns in the grid. + * Will attempt to update existing widgets to conform to new number of columns. + * Requires gridstack-extra.css or gridstack-extra.min.css. + * @param {number} gridWidth Integer between 1 and 12. + * @param {boolean} doNotPropagate if true existing widgets will not be updated. + */ + setGridWidth(gridWidth: number, doNotPropagate: boolean): void /** * Toggle the grid static state. Also toggle the grid-stack-static class. * @param {boolean} staticValue if true the grid become static. @@ -138,6 +188,12 @@ interface GridStack { * @param {number} height new dimensions height. If value is null or undefined it will be ignored. */ update(el: HTMLElement, x: number, y: number, width: number, height: number): void + /** + * Sets the vertial margin + * @param {number} value new vertical margin value. + * @param {boolean} noUpdate if true, styles will not be updated. + */ + verticalMargin(value: number, noUpdate: boolean): void /** * Returns true if the height of the grid will be less the vertical constraint. Always returns true if grid doesn't have height constraint. * @param {number} x new position x. If value is null or undefined it will be ignored. @@ -146,8 +202,9 @@ interface GridStack { * @param {number} height new dimensions height. If value is null or undefined it will be ignored. * @param {boolean} autoPosition if true then x, y parameters will be ignored and widget will be places on the first available position */ - willItFit(x: number, y: number, width: number, height: number, autoPosition:boolean):boolean + willItFit(x: number, y: number, width: number, height: number, autoPosition: boolean): boolean + } /** @@ -155,14 +212,14 @@ interface GridStack { */ interface MousePosition { top: number, - left:number, + left: number, } /** * Defines the position of a cell inside the grid */ interface CellPosition { x: number, - y:number + y: number } declare namespace GridStackUI { interface Utils { @@ -172,7 +229,7 @@ declare namespace GridStackUI { *@param dir 1 for asc, -1 for desc (optional) *@param width width of the grid. If undefined the width will be calculated automatically (optional). **/ - sort(nodes: HTMLElement[], dir: number, width: number): void + sort(nodes: HTMLElement[], dir?: number, width?: number): void } } /** @@ -180,6 +237,10 @@ declare namespace GridStackUI { * Defines the options for a Gridstack */ interface IGridstackOptions { + /** + * if true of jquery selector the grid will accept widgets dragged from other grids or from outside (default: false) + */ + acceptWidgets?: boolean; /** * if true the resizing handles are shown even if the user is not hovering over the widget (default: false) */ @@ -196,6 +257,19 @@ interface IGridstackOptions { * one cell height (default: 60) */ cellHeight?: number; + /** + * class that implement drag'n'drop functionallity for gridstack. + * If false grid will be static. (default: null - first available plugin will be used) + */ + ddPlugin?: any; + /** + * disallows dragging of widgets (default: false). + */ + disableDrag?: boolean; + /** + * disallows resizing of widgets (default: false). + */ + disableResize?: boolean; /** * allows to override jQuery UI draggable options. (default: { handle: '.grid-stack-item-content', scroll: true, appendTo: 'body' }) */ @@ -204,6 +278,10 @@ interface IGridstackOptions { * draggable handle selector (default: '.grid-stack-item-content') */ handle?: string; + /** + * draggable handle class (e.g. 'grid-stack-item-content'). If set handle is ignored (default: null) + */ + handleClass?: string; /** * maximum rows amount.Default is 0 which means no maximum rows */ @@ -220,14 +298,38 @@ interface IGridstackOptions { * minimal width.If window width is less, grid will be shown in one - column mode (default: 768) */ minWidth?: number; + /** + * disables the onColumnMode when the window width is less than minWidth (default: 'false') + */ + disableOneColumnMode?: boolean; + /** + * class set on grid when in one column mode (default: 'grid-stack-one-column-mode') + */ + oneColumnModeClass?: string; /** * class for placeholder (default: 'grid-stack-placeholder') */ placeholderClass?: string; + /** + * placeholder default content (default: '') + */ + placeholderText?: string; /** * allows to override jQuery UI resizable options. (default: { autoHide: true, handles: 'se' }) */ resizable?: {}; + /** + * if true widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, + */ + removable?: boolean; + /** + * time in milliseconds before widget is being removed while dragging outside of the grid. (default: 2000) + */ + removeTimeout?: number; + /** + * if true turns grid to RTL. Possible values are true, false, 'auto' (default: 'auto') + */ + rtl?: boolean | 'auto'; /** * makes grid static (default false).If true widgets are not movable/ resizable.You don't even need jQueryUI draggable/resizable. A CSS class grid-stack-static is also added to the container. */ @@ -240,4 +342,4 @@ interface IGridstackOptions { * amount of columns (default: 12) */ width?: number; -} +} \ No newline at end of file