From e24b3227132ba441741d16a9c03b2efab78704e4 Mon Sep 17 00:00:00 2001 From: "Pascal Senn (GIAPSE)" Date: Tue, 15 Sep 2015 14:57:21 +0200 Subject: [PATCH 1/3] Added Gridstack definition file and test --- gridstack/gridstack-tests.ts | 16 +++ gridstack/gridstack.d.ts | 241 +++++++++++++++++++++++++++++++++++ 2 files changed, 257 insertions(+) create mode 100644 gridstack/gridstack-tests.ts create mode 100644 gridstack/gridstack.d.ts diff --git a/gridstack/gridstack-tests.ts b/gridstack/gridstack-tests.ts new file mode 100644 index 000000000..473d3306e --- /dev/null +++ b/gridstack/gridstack-tests.ts @@ -0,0 +1,16 @@ +// Type definitions for Gridstack +// Project: http://troolee.github.io/gridstack.js/ +// Definitions by: Pascal Senn +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +var options = { + float: true; +}; +var gridstack:GridStack = $(document).gridstack(options); + +gridstack.add_widget("test", 1, 2, 3, 4, true); +gridstack.batch_update(); +gridstack.cell_height();; +gridstack.cell_height(2); +gridstack.cell_width(); +gridstack.get_cell_from_pixel({ left:20, top: 20 }); diff --git a/gridstack/gridstack.d.ts b/gridstack/gridstack.d.ts new file mode 100644 index 000000000..58ee79fbd --- /dev/null +++ b/gridstack/gridstack.d.ts @@ -0,0 +1,241 @@ +// Type definitions for Gridstack +// Project: http://troolee.github.io/gridstack.js/ +// Definitions by: Pascal Senn +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +interface JQuery { + gridstack (options: IGridstackOptions):GridStack +} + +interface GridStack { + /** + * Creates new widget and returns it. + * + * Widget will be always placed even if result height is more than actual grid height. You need to use will_it_fit method before calling add_widget for additional check. + * + * @param {string} el widget to add + * @param {number} x widget position x + * @param {number} y widget position y + * @param {number} width widget dimension width + * @param {number} height widget dimension height + * @param {boolean} auto_position if true then x, y parameters will be ignored and widget will be places on the first available position + */ + add_widget(el: string, x: number, y: number, width: number, height: number, auto_position: boolean): JQuery + /** + * Initailizes batch updates. You will see no changes until commit method is called. + */ + batch_update() + /** + * Gets current cell height. + */ + cell_height():number + /** + * Update current cell height. This method rebuilds an internal CSS stylesheet. Note: You can expect performance issues if call this method too often. + * @param {number} val the cell height + */ + cell_height(val:number) + /** + * Gets current cell width. + */ + cell_width():number + /** + * Finishes batch updates. Updates DOM nodes. You must call it after batch_update. + */ + commit() + /** + * Destroys a grid instance. + */ + destroy() + /* + * Disables widgets moving/resizing. + */ + disable() + /* + * Enables widgets moving/resizing. + */ + enable() + /* + * 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 + */ + get_cell_from_pixel(position: MousePosition): CellPosition, + /* + * Checks if specified area is empty. + * @param {number} x the position x. + * @param {number} y the position y. + * @param {number} width the width of to check + * @param {number} height the height of to check + */ + is_area_empty(x: number, y: number, width: number, height: number) + /* + * Locks/unlocks widget. + * @param {HTMLElement} el widget to modify. + * @param {boolean} val if true widget will be locked. + */ + locked(el: HTMLElement, val: boolean) + /* + * Set the minWidth for a widget. + * @param {HTMLElement} el widget to modify. + * @param {number} val A numeric value of the number of columns + */ + min_width(el: HTMLElement, val: number) + /* + * Set the minHeight for a widget. + * @param {HTMLElement} el widget to modify. + * @param {number} val A numeric value of the number of rows + */ + min_height(el: HTMLElement, val: number) + /* + * Enables/Disables moving. + * @param {HTMLElement} el widget to modify. + * @param {number} val if true widget will be draggable. + */ + movable(el: HTMLElement, val: boolean) + /** + * Changes widget position + * @param {HTMLElement} el widget to modify + * @param {number} x new position x. If value is null or undefined it will be ignored. + * @param {number} y new position y. If value is null or undefined it will be ignored. + * + */ + move(el: HTMLElement, x: number, y: number) + /** + * Removes widget from the grid. + * @param {HTMLElement} el widget to modify + * @param {boolean} detach_node if false DOM node won't be removed from the tree (Optional. Default true). + */ + remove_widget(el: HTMLElement, detach_node?:boolean) + /** + * Removes all widgets from the grid. + */ + remove_all() + /** + * Changes widget size + * @param {HTMLElement} el widget to modify + * @param {number} width new dimensions width. If value is null or undefined it will be ignored. + * @param {number} height new dimensions height. If value is null or undefined it will be ignored. + */ + resize(el: HTMLElement, width: number, height: number) + /** + * Enables/Disables resizing. + * @param {HTMLElement} el widget to modify + * @param {boolean} val if true widget will be resizable. + */ + resizable(el: HTMLElement, val:boolean) + /** + * Toggle the grid static state. Also toggle the grid-stack-static class. + * @param {boolean} static_value if true the grid become static. + */ + set_static(static_value:boolean) + /** + * Updates widget position/size. + * @param {HTMLElement} el widget to modify + * @param {number} x new position x. If value is null or undefined it will be ignored. + * @param {number} y new position y. If value is null or undefined it will be ignored. + * @param {number} width new dimensions width. If value is null or undefined it will be ignored. + * @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) + /** + * 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. + * @param {number} y new position y. If value is null or undefined it will be ignored. + * @param {number} width new dimensions width. If value is null or undefined it will be ignored. + * @param {number} height new dimensions height. If value is null or undefined it will be ignored. + * @param {boolean} auto_position if true then x, y parameters will be ignored and widget will be places on the first available position + */ + will_it_fit(x: number, y: number, width: number, height: number, auto_position:boolean):boolean + + +} +/** +* Defines the coordiantes of a object +*/ +interface MousePosition { + top: number, + left:number, +} +/** +* Defines the position of a cell inside the grid +*/ +interface CellPosition { + x: number, + y:number +} +declare module GridStackUI { + interface Utils { + /** + * Sorts array of nodes + *@param nodes array to sort + *@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) + } +} +/** +* Gridstack Options +* Defines the options for a Gridstack +*/ +interface IGridstackOptions { + /** + * if true the resizing handles are shown even if the user is not hovering over the widget (default: false) + */ + always_show_resize_handle: boolean; + /** + * turns animation on (default: true) + */ + animate: boolean; + /** + * if false gridstack will not initialize existing items (default: true) + */ + auto: boolean; + /** + * one cell height (default: 60) + */ + cell_height: number; + /** + * allows to override jQuery UI draggable options. (default: { handle: '.grid-stack-item-content', scroll: true, appendTo: 'body' }) + */ + draggable: {}; + /** + * draggable handle selector (default: '.grid-stack-item-content') + */ + handle: string; + /** + * maximum rows amount.Default is 0 which means no maximum rows + */ + height: number; + /** + * enable floating widgets (default: false) See example + */ + float: boolean; + /** + * widget class (default: 'grid-stack-item') + */ + item_class: string; + /** + * minimal width.If window width is less, grid will be shown in one - column mode (default: 768) + */ + min_width: number; + /** + * class for placeholder (default: 'grid-stack-placeholder') + */ + placeholder_class: string; + /** + * allows to override jQuery UI resizable options. (default: { autoHide: true, handles: 'se' }) + */ + resizable: {}; + /** + * 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. + */ + static_grid: boolean; + /** + * vertical gap size (default: 20) + */ + vertical_margin: number; + /** + * amount of columns (default: 12) + */ + width: number; +} From 42cc0324d7356e09446b50bc9aae985cdcfd903a Mon Sep 17 00:00:00 2001 From: "Pascal Senn (GIAPSE)" Date: Fri, 18 Sep 2015 10:47:59 +0200 Subject: [PATCH 2/3] corrected the errors in the file --- gridstack/gridstack-tests.ts | 4 ++-- gridstack/gridstack.d.ts | 44 ++++++++++++++++++------------------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/gridstack/gridstack-tests.ts b/gridstack/gridstack-tests.ts index 473d3306e..9d36f48a5 100644 --- a/gridstack/gridstack-tests.ts +++ b/gridstack/gridstack-tests.ts @@ -1,10 +1,10 @@ // Type definitions for Gridstack // Project: http://troolee.github.io/gridstack.js/ -// Definitions by: Pascal Senn +// Definitions by: Pascal Senn // Definitions: https://github.com/borisyankov/DefinitelyTyped var options = { - float: true; + float: true }; var gridstack:GridStack = $(document).gridstack(options); diff --git a/gridstack/gridstack.d.ts b/gridstack/gridstack.d.ts index 58ee79fbd..4bb379483 100644 --- a/gridstack/gridstack.d.ts +++ b/gridstack/gridstack.d.ts @@ -1,6 +1,6 @@ // Type definitions for Gridstack // Project: http://troolee.github.io/gridstack.js/ -// Definitions by: Pascal Senn +// Definitions by: Pascal Senn // Definitions: https://github.com/borisyankov/DefinitelyTyped interface JQuery { @@ -22,18 +22,18 @@ interface GridStack { */ add_widget(el: string, x: number, y: number, width: number, height: number, auto_position: boolean): JQuery /** - * Initailizes batch updates. You will see no changes until commit method is called. + * Initializes batch updates. You will see no changes until commit method is called. */ - batch_update() + batch_update():void /** * Gets current cell height. */ cell_height():number /** - * Update current cell height. This method rebuilds an internal CSS stylesheet. Note: You can expect performance issues if call this method too often. + * 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 */ - cell_height(val:number) + cell_height(val:number):void /** * Gets current cell width. */ @@ -41,19 +41,19 @@ interface GridStack { /** * Finishes batch updates. Updates DOM nodes. You must call it after batch_update. */ - commit() + commit():void /** * Destroys a grid instance. */ - destroy() + destroy(): void /* * Disables widgets moving/resizing. */ - disable() + disable(): void /* * Enables widgets moving/resizing. */ - enable() + enable(): 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 @@ -66,31 +66,31 @@ interface GridStack { * @param {number} width the width of to check * @param {number} height the height of to check */ - is_area_empty(x: number, y: number, width: number, height: number) + is_area_empty(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) + locked(el: HTMLElement, val: boolean): void /* * Set the minWidth for a widget. * @param {HTMLElement} el widget to modify. * @param {number} val A numeric value of the number of columns */ - min_width(el: HTMLElement, val: number) + min_width(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 */ - min_height(el: HTMLElement, val: number) + min_height(el: HTMLElement, val: number): void /* * Enables/Disables moving. * @param {HTMLElement} el widget to modify. * @param {number} val if true widget will be draggable. */ - movable(el: HTMLElement, val: boolean) + movable(el: HTMLElement, val: boolean): void /** * Changes widget position * @param {HTMLElement} el widget to modify @@ -98,35 +98,35 @@ interface GridStack { * @param {number} y new position y. If value is null or undefined it will be ignored. * */ - move(el: HTMLElement, x: number, y: number) + move(el: HTMLElement, x: number, y: number): void /** * Removes widget from the grid. * @param {HTMLElement} el widget to modify * @param {boolean} detach_node if false DOM node won't be removed from the tree (Optional. Default true). */ - remove_widget(el: HTMLElement, detach_node?:boolean) + remove_widget(el: HTMLElement, detach_node?: boolean): void /** * Removes all widgets from the grid. */ - remove_all() + remove_all(): void /** * Changes widget size * @param {HTMLElement} el widget to modify * @param {number} width new dimensions width. If value is null or undefined it will be ignored. * @param {number} height new dimensions height. If value is null or undefined it will be ignored. */ - resize(el: HTMLElement, width: number, height: number) + resize(el: HTMLElement, width: number, height: number): void /** * Enables/Disables resizing. * @param {HTMLElement} el widget to modify * @param {boolean} val if true widget will be resizable. */ - resizable(el: HTMLElement, val:boolean) + resizable(el: HTMLElement, val: boolean): void /** * Toggle the grid static state. Also toggle the grid-stack-static class. * @param {boolean} static_value if true the grid become static. */ - set_static(static_value:boolean) + set_static(static_value: boolean): void /** * Updates widget position/size. * @param {HTMLElement} el widget to modify @@ -135,7 +135,7 @@ interface GridStack { * @param {number} width new dimensions width. If value is null or undefined it will be ignored. * @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) + update(el: HTMLElement, x: number, y: number, width: number, height: number): 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. @@ -170,7 +170,7 @@ declare module 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) + sort(nodes: HTMLElement[], dir: number, width: number): void } } /** From 333dd6813b49b5f7ebd0fa21261a9cf6e4f0caf3 Mon Sep 17 00:00:00 2001 From: "Pascal Senn (GIAPSE)" Date: Fri, 18 Sep 2015 10:53:13 +0200 Subject: [PATCH 3/3] added dependencies --- gridstack/gridstack-tests.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/gridstack/gridstack-tests.ts b/gridstack/gridstack-tests.ts index 9d36f48a5..b3167ea5d 100644 --- a/gridstack/gridstack-tests.ts +++ b/gridstack/gridstack-tests.ts @@ -1,4 +1,8 @@ -// Type definitions for Gridstack +/// +/// + + +// Type definitions for Gridstack // Project: http://troolee.github.io/gridstack.js/ // Definitions by: Pascal Senn // Definitions: https://github.com/borisyankov/DefinitelyTyped