Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

gridstack.d.ts 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. // Type definitions for Gridstack 0.6.4
  2. // Project: https://gridstackjs.com/
  3. // Definitions by: Pascal Senn <https://github.com/PascalSenn>
  4. // Ricky Blankenaufulland <https://github.com/ZoolWay>
  5. // Sl1MBoy <https://github.com/Sl1MBoy>
  6. // John Archer <https://github.com/JohnArcher>
  7. // Alain Dumesny <https://github.com/adumesny>
  8. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped initially, but now part of gridstack.js
  9. // TypeScript Version: 2.8
  10. interface JQuery {
  11. gridstack(options: GridstackOptions): JQuery;
  12. data(key: 'gridstack'): GridStack;
  13. }
  14. /* Other items in https://github.com/gridstack/gridstack.js/blob/develop/doc/README.md
  15. * Grid attributes
  16. * Item attributes
  17. * Events
  18. */
  19. type GridStackElement = string | HTMLElement | JQuery;
  20. interface GridStack {
  21. /**
  22. * Creates new widget and returns it.
  23. *
  24. * Widget will be always placed even if result height is more than actual grid height.
  25. * You need to use willItFit method before calling addWidget for additional check.
  26. * See also `makeWidget()`.
  27. *
  28. * @example
  29. * $('.grid-stack').gridstack();
  30. * var grid = $('.grid-stack').data('gridstack');
  31. * grid.addWidget(el, {width: 3, autoPosition: true});
  32. *
  33. * @param el widget to add
  34. * @param options widget position/size options (optional)
  35. */
  36. addWidget(el: GridStackElement, options ? : GridstackWidget): JQuery;
  37. /**
  38. * Creates new widget and returns it.
  39. * Legacy: Spelled out version of the widgets options, recommend use new version instead.
  40. *
  41. * @example
  42. * $('.grid-stack').gridstack();
  43. * var grid = $('.grid-stack').data('gridstack');
  44. * grid.addWidget(el, 0, 0, 3, 2, true);
  45. *
  46. * @param el widget to add
  47. * @param x widget position x (optional)
  48. * @param y widget position y (optional)
  49. * @param width widget dimension width (optional)
  50. * @param height widget dimension height (optional)
  51. * @param autoPosition if true then x, y parameters will be ignored and widget will be places on the first available position (optional)
  52. * @param minWidth minimum width allowed during resize/creation (optional)
  53. * @param maxWidth maximum width allowed during resize/creation (optional)
  54. * @param minHeight minimum height allowed during resize/creation (optional)
  55. * @param maxHeight maximum height allowed during resize/creation (optional)
  56. * @param id value for `data-gs-id` (optional)
  57. */
  58. addWidget(el: GridStackElement, x ? : number, y ? : number, width ? : number, height ? : number, autoPosition ? : boolean,
  59. minWidth ? : number, maxWidth ? : number, minHeight ? : number, maxHeight ? : number, id ? : number | string): JQuery;
  60. /**
  61. * Initializes batch updates. You will see no changes until commit method is called.
  62. */
  63. batchUpdate(): void;
  64. /**
  65. * Gets current cell height.
  66. */
  67. cellHeight(): number;
  68. /**
  69. * Update current cell height - see `GridstackOptions.cellHeight` for format.
  70. * This method rebuilds an internal CSS style sheet.
  71. * Note: You can expect performance issues if call this method too often.
  72. *
  73. * @param val the cell height
  74. * @param noUpdate (Optional) if true, styles will not be updated
  75. *
  76. * @example
  77. * grid.cellHeight(grid.cellWidth() * 1.2);
  78. */
  79. cellHeight(val: number | string, noUpdate ? : boolean): void;
  80. /**
  81. * Gets current cell width.
  82. */
  83. cellWidth(): number;
  84. /**
  85. * Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
  86. */
  87. commit(): void;
  88. /**
  89. * relayout grid items to reclaim any empty space
  90. */
  91. compact(): void;
  92. /**
  93. * Destroys a grid instance.
  94. * @param detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true).
  95. */
  96. destroy(detachGrid ? : boolean): void;
  97. /**
  98. * Disables widgets moving/resizing. This is a shortcut for:
  99. * @example
  100. * grid.movable('.grid-stack-item', false);
  101. * grid.resizable('.grid-stack-item', false);
  102. */
  103. disable(): void;
  104. /**
  105. * Enables widgets moving/resizing. This is a shortcut for:
  106. * @example
  107. * grid.movable('.grid-stack-item', true);
  108. * grid.resizable('.grid-stack-item', true);
  109. */
  110. enable(): void;
  111. /**
  112. * Enables/disables widget moving.
  113. * This is a shortcut for:
  114. * @example
  115. * grid.movable(this.container.children('.' + this.opts.itemClass), doEnable);
  116. *
  117. * @param doEnable
  118. * @param includeNewWidgets will force new widgets to be draggable as per
  119. * doEnable`s value by changing the disableDrag grid option.
  120. */
  121. enableMove(doEnable: boolean, includeNewWidgets: boolean): void;
  122. /**
  123. * Enables/disables widget resizing
  124. * @param doEnable
  125. * @param includeNewWidgets will force new widgets to be draggable as per
  126. * doEnable`s value by changing the disableResize grid option.
  127. *
  128. * This is a shortcut for:
  129. * @example
  130. * grid.resizable(this.container.children('.' + this.opts.itemClass), doEnable);
  131. */
  132. enableResize(doEnable: boolean, includeNewWidgets: boolean): void;
  133. /**
  134. * enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
  135. * @param mode
  136. */
  137. float(mode: boolean): void;
  138. /**
  139. * get the current float mode
  140. */
  141. float(): boolean;
  142. /**
  143. * Get the position of the cell under a pixel on screen.
  144. * @param position the position of the pixel to resolve in
  145. * absolute coordinates, as an object with top and left properties
  146. * @param useOffset if true, value will be based on offset vs position (Optional. Default false).
  147. * Useful when grid is within `position: relative` element
  148. *
  149. * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
  150. */
  151. getCellFromPixel(position: MousePosition, useOffset ? : boolean): CellPosition;
  152. /**
  153. * Checks if specified area is empty.
  154. * @param x the position x.
  155. * @param y the position y.
  156. * @param width the width of to check
  157. * @param height the height of to check
  158. */
  159. isAreaEmpty(x: number, y: number, width: number, height: number): void;
  160. /**
  161. * Locks/unlocks widget.
  162. * @param el widget to modify.
  163. * @param val if true widget will be locked.
  164. */
  165. locked(el: GridStackElement, val: boolean): void;
  166. /**
  167. * If you add elements to your gridstack container by hand, you have to tell gridstack afterwards to make them widgets.
  168. * If you want gridstack to add the elements for you, use addWidget instead.
  169. * Makes the given element a widget and returns it.
  170. * @param el widget to convert.
  171. *
  172. * @example
  173. * $('.grid-stack').gridstack();
  174. * $('.grid-stack').append('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2"
  175. * data-gs-auto-position="true"></div>')
  176. * var grid = $('.grid-stack').data('gridstack');
  177. * grid.makeWidget('gsi-1');
  178. */
  179. makeWidget(el: GridStackElement): JQuery;
  180. /**
  181. * Set the maxWidth for a widget.
  182. * @param el widget to modify.
  183. * @param val A numeric value of the number of columns
  184. */
  185. maxWidth(el: GridStackElement, val: number): void;
  186. /**
  187. * Set the minWidth for a widget.
  188. * @param el widget to modify.
  189. * @param val A numeric value of the number of columns
  190. */
  191. minWidth(el: GridStackElement, val: number): void;
  192. /**
  193. * Set the maxHeight for a widget.
  194. * @param el widget to modify.
  195. * @param val A numeric value of the number of rows
  196. */
  197. maxHeight(el: GridStackElement, val: number): void;
  198. /**
  199. * Set the minHeight for a widget.
  200. * @param el widget to modify.
  201. * @param val A numeric value of the number of rows
  202. */
  203. minHeight(el: GridStackElement, val: number): void;
  204. /**
  205. * Enables/Disables moving.
  206. * @param el widget to modify.
  207. * @param val if true widget will be draggable.
  208. */
  209. movable(el: GridStackElement, val: boolean): void;
  210. /**
  211. * Changes widget position
  212. * @param el widget to modify
  213. * @param x new position x. If value is null or undefined it will be ignored.
  214. * @param y new position y. If value is null or undefined it will be ignored.
  215. */
  216. move(el: GridStackElement, x: number, y: number): void;
  217. /**
  218. * Removes widget from the grid.
  219. * @param el widget to modify
  220. * @param detachNode if false DOM node won't be removed from the tree (Default? true).
  221. */
  222. removeWidget(el: GridStackElement, detachNode ? : boolean): void;
  223. /**
  224. * Removes all widgets from the grid.
  225. * @param detachNode if false DOM nodes won't be removed from the tree (Default? true).
  226. */
  227. removeAll(detachNode ? : boolean): void;
  228. /**
  229. * Changes widget size
  230. * @param el widget to modify
  231. * @param width new dimensions width. If value is null or undefined it will be ignored.
  232. * @param height new dimensions height. If value is null or undefined it will be ignored.
  233. */
  234. resize(el: GridStackElement, width: number, height: number): void;
  235. /**
  236. * Enables/Disables resizing.
  237. * @param el widget to modify
  238. * @param val if true widget will be resizable.
  239. */
  240. resizable(el: GridStackElement, val: boolean): void;
  241. /**
  242. * Toggle the grid animation state. Toggles the `grid-stack-animate` class.
  243. * @param doAnimate if true the grid will animate.
  244. */
  245. setAnimation(doAnimate: boolean): void;
  246. /**
  247. * Modify number of columns in the grid. Will update existing widgets to conform to new number of columns,
  248. * as well as cache the original layout so you can revert back to previous positions without loss.
  249. * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
  250. * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
  251. * @param column - Integer > 0 (default 12).
  252. * @param doNotPropagate if true existing widgets will not be updated (optional)
  253. */
  254. setColumn(column: number, doNotPropagate ? : boolean): void;
  255. /**
  256. * Toggle the grid static state. Also toggle the grid-stack-static class.
  257. * @param staticValue if true the grid become static.
  258. */
  259. setStatic(staticValue: boolean): void;
  260. /**
  261. * Updates widget position/size.
  262. * @param el widget to modify
  263. * @param x new position x. If value is null or undefined it will be ignored.
  264. * @param y new position y. If value is null or undefined it will be ignored.
  265. * @param width new dimensions width. If value is null or undefined it will be ignored.
  266. * @param height new dimensions height. If value is null or undefined it will be ignored.
  267. */
  268. update(el: GridStackElement, x: number, y: number, width: number, height: number): void;
  269. /**
  270. * returns current vertical margin value
  271. */
  272. verticalMargin(): number;
  273. /**
  274. * Updates the vertical margin - see `GridstackOptions.verticalMargin` for format options.
  275. *
  276. * @param value new vertical margin value
  277. * @param noUpdate (optional) if true, styles will not be updated
  278. */
  279. verticalMargin(value: number | string, noUpdate ? : boolean): void;
  280. /**
  281. * Returns true if the height of the grid will be less the vertical
  282. * constraint. Always returns true if grid doesn't have height constraint.
  283. * @param x new position x. If value is null or undefined it will be ignored.
  284. * @param y new position y. If value is null or undefined it will be ignored.
  285. * @param width new dimensions width. If value is null or undefined it will be ignored.
  286. * @param height new dimensions height. If value is null or undefined it will be ignored.
  287. * @param autoPosition if true then x, y parameters will be ignored and widget
  288. * will be places on the first available position
  289. *
  290. * @example
  291. * if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, true)) {
  292. * grid.addWidget(newNode.el, newNode.x, newNode.y, newNode.width, newNode.height, true);
  293. * } else {
  294. * alert('Not enough free space to place the widget');
  295. * }
  296. */
  297. willItFit(x: number, y: number, width: number, height: number, autoPosition: boolean): boolean;
  298. }
  299. /**
  300. * Defines the coordinates of an object
  301. */
  302. interface MousePosition {
  303. top: number;
  304. left: number;
  305. }
  306. /**
  307. * Defines the position of a cell inside the grid
  308. */
  309. interface CellPosition {
  310. x: number;
  311. y: number;
  312. }
  313. /**
  314. * Gridstack Widget creation options
  315. * @param x widget position x (default?: 0)
  316. * @param y widget position y (default?: 0)
  317. * @param width widget dimension width (default?: 1)
  318. * @param height widget dimension height (default?: 1)
  319. * @param autoPosition if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false)
  320. * @param minWidth minimum width allowed during resize/creation (default?: undefined = un-constrained)
  321. * @param maxWidth maximum width allowed during resize/creation (default?: undefined = un-constrained)
  322. * @param minHeight minimum height allowed during resize/creation (default?: undefined = un-constrained)
  323. * @param maxHeight maximum height allowed during resize/creation (default?: undefined = un-constrained)
  324. * @param id value for `data-gs-id` stored on the widget (default?: undefined)
  325. */
  326. interface GridstackWidget {
  327. x ? : number;
  328. y ? : number;
  329. width ? : number;
  330. height ? : number;
  331. autoPosition ? : boolean;
  332. minWidth ? : number;
  333. maxWidth ? : number;
  334. minHeight ? : number;
  335. maxHeight ? : number;
  336. id ? : number | string;
  337. }
  338. declare namespace GridStackUI {
  339. interface Utils {
  340. /**
  341. * Sorts array of nodes
  342. * @param nodes array to sort
  343. * @param dir 1 for asc, -1 for desc (optional)
  344. * @param width width of the grid. If undefined the width will be calculated automatically (optional).
  345. **/
  346. sort(nodes: HTMLElement[], dir ? : number, width ? : number): void;
  347. }
  348. }
  349. /**
  350. * Gridstack Options
  351. * Defines the options for a Gridstack
  352. */
  353. interface GridstackOptions {
  354. /**
  355. * accept widgets dragged from other grids or from outside (default: `false`). Can be:
  356. * `true` (uses `'.grid-stack-item'` class filter) or `false`,
  357. * string for explicit class name,
  358. * function returning a boolean. See [example](http://gridstack.github.io/gridstack.js/demo/two.html)
  359. */
  360. acceptWidgets ? : boolean | string | ((i: number, element: Element) => boolean);
  361. /**
  362. * if true the resizing handles are shown even if the user is not hovering over the widget (default?: false)
  363. */
  364. alwaysShowResizeHandle ? : boolean;
  365. /**
  366. * turns animation on (default?: true)
  367. */
  368. animate ? : boolean;
  369. /**
  370. * if false gridstack will not initialize existing items (default?: true)
  371. */
  372. auto ? : boolean;
  373. /**
  374. * one cell height (default?: 60). Can be:
  375. * an integer (px)
  376. * a string (ex: '100px', '10em', '10rem', '10%')
  377. * 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
  378. * 'auto' - height will be calculated to match cell width (initial square grid).
  379. */
  380. cellHeight ? : number | string;
  381. /**
  382. * (internal?) unit for cellHeight (default? 'px')
  383. */
  384. cellHeightUnit ? : string;
  385. /** class that implement drag'n'drop functionality for gridstack. If false grid will be static.
  386. * (default?: null - first available plugin will be used)
  387. */
  388. ddPlugin ? : boolean | null | any;
  389. /** disallows dragging of widgets (default?: false) */
  390. disableDrag ? : boolean;
  391. /** disallows resizing of widgets (default?: false). */
  392. disableResize ? : boolean;
  393. /**
  394. * allows to override jQuery UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null })
  395. */
  396. draggable ? : {};
  397. /**
  398. * let user drag nested grid items out of a parent or not (default false)
  399. */
  400. dragOut ? : boolean;
  401. /**
  402. * draggable handle selector (default?: '.grid-stack-item-content')
  403. */
  404. handle ? : string;
  405. /** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */
  406. handleClass ? : string;
  407. /**
  408. * number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns
  409. */
  410. column ? : number;
  411. /**
  412. * maximum rows amount. Default? is 0 which means no maximum rows
  413. */
  414. maxRow ? : number;
  415. /**
  416. * enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html)
  417. */
  418. float ? : boolean;
  419. /**
  420. * widget class (default?: 'grid-stack-item')
  421. */
  422. itemClass ? : string;
  423. /**
  424. * minimal width. If window width is less, grid will be shown in one column mode (default?: 768)
  425. */
  426. minWidth ? : number;
  427. /** disables the onColumnMode when the window width is less than minWidth (default?: false) */
  428. disableOneColumnMode ? : boolean;
  429. /**
  430. * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column
  431. * layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false)
  432. */
  433. oneColumnModeDomSort?: boolean;
  434. /**
  435. * class for placeholder (default?: 'grid-stack-placeholder')
  436. */
  437. placeholderClass ? : string;
  438. /** placeholder default content (default?: '') */
  439. placeholderText ? : string;
  440. /**
  441. * allows to override jQuery UI resizable options. (default?: { autoHide?: true, handles?: 'se' })
  442. */
  443. resizable ? : {};
  444. /**
  445. * if true widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string,
  446. * in this case widgets will be removed by dropping them there (default?: false)
  447. * See example (http://gridstack.github.io/gridstack.js/demo/two.html)
  448. */
  449. removable ? : boolean | string;
  450. /**
  451. * time in milliseconds before widget is being removed while dragging outside of the grid. (default?: 2000)
  452. */
  453. removeTimeout ? : number;
  454. /**
  455. * if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto')
  456. * See [example](http://gridstack.github.io/gridstack.js/demo/rtl.html)
  457. */
  458. rtl ? : boolean | 'auto';
  459. /**
  460. * makes grid static (default?: false).If true widgets are not movable/resizable.
  461. * You don't even need jQueryUI draggable/resizable. A CSS class
  462. * 'grid-stack-static' is also added to the container.
  463. */
  464. staticGrid ? : boolean;
  465. /**
  466. * vertical gap size (default?: 20). Can be:
  467. * an integer (px)
  468. * a string (ex: '2em', '20px', '2rem')
  469. */
  470. verticalMargin ? : number | string;
  471. /**
  472. * (internal?) unit for verticalMargin (default? 'px')
  473. */
  474. verticalMarginUnit ? : string;
  475. }