diff --git a/types/colresizable/colresizable-tests.ts b/types/colresizable/colresizable-tests.ts new file mode 100644 index 0000000000..1218ca113d --- /dev/null +++ b/types/colresizable/colresizable-tests.ts @@ -0,0 +1,63 @@ +/// + +$("#table").colResizable(); // $ExpectType JQuery + +$("#table").colResizable({ + resizeMode: "fit", + disable: false, + disabledColumns: [1, 2, 3], + liveDrag: true, + postbackSafe: false, + partialRefresh: true, + headerOnly: false, + gripInnerHtml: "", + draggingClass: ".myClass", + minWidth: 100, + hoverCursor: 'pointer', + dragCursor: 'e-resize', + flush: false, + marginLeft: "14px", + marginRight: "auto", + fixed: false, + + onResize(evt) { + evt.currentTarget; // $ExpectType Element + }, + onDrag(evt) { + evt.currentTarget; // $ExpectType Element + } +}); + +// Samples at http://www.bacubacu.com/colresizable +function onSampleResized(e: JQueryMouseEventObject) { + const table = $(e.currentTarget); // reference to the resized table +} + +$("#sample").colResizable({ + liveDrag: true, + gripInnerHtml: "
", + draggingClass: "dragging", + onResize: onSampleResized +}); + +function postbackSample() { + $("#updatePanelSample").colResizable({ + liveDrag: true, + postbackSafe: true, + partialRefresh: true + }); +} + +$("#flexSample").colResizable({resizeMode: 'flex'}); + +$("#overflowSample").colResizable({resizeMode: 'overflow'}); + +function onSlide() {} + +$("#sample5").colResizable({ + liveDrag: true, + draggingClass: "rangeDrag", + gripInnerHtml: "
", + onResize: onSlide, + minWidth: 8 +}); diff --git a/types/colresizable/index.d.ts b/types/colresizable/index.d.ts new file mode 100644 index 0000000000..693c40923c --- /dev/null +++ b/types/colresizable/index.d.ts @@ -0,0 +1,149 @@ +// Type definitions for colresizable 1.6 +// Project: http://bacubacu.com/colresizable/ +// Definitions by: Gilles Waeber +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +/// + +interface JQuery { + colResizable(param?: colResizable.Settings): JQuery; +} + +declare namespace colResizable { + interface Settings { + /** + * [default: 'fit'] It is used to set how the resize method works. Those are the possible values: + * - 'fit': this is default resizing model, in which resizing a column does not alter table width, which means that when a column is expanded the next one shrinks. + * - 'flex': in this mode tables can change its width and each column can shrink or expand independently if there is enough space in the parent container. + * If there is not enough space, columns will share its width as they are resized. Table will never get bigger than its parent. + * - 'overflow': allows to resize columns with overflow of parent container. + * [version: 1.6] + */ + resizeMode?: 'fit' | 'flex' | 'overflow'; + + /** + * [default: false] When set to true the table layout is updated while dragging column anchors. + * liveDrag enabled is more CPU consuming so it is not recommended for slow computers, specially when dealing with huge or extremely complicated tables. + * [version: 1.0] + */ + liveDrag?: boolean; + + /** + * @deprecated use resizeMode instead + * [default: true] It is used to set how the resize method works. + * In fixed mode resizing a column does not alter total table width, which means that when a column is expanded the next one shrinks. + * If fixed is set to false then table can change its width and each column can shrink or expand independently. + * [version: 1.5] + */ + fixed?: boolean; + + /** + * [default: false] This attribute can be used to specify that the manually selected column widths must remain unaltered after a postback or browser refresh. + * This feature is mainly oriented to those pages created with server-side logic (codebehind), such as PHP or .NET, and it is only compatible with browsers + * with sessionStorage support (all modern browsers). + * However, if you are targeting older browsers (such as IE7 and IE8) you can still emulate sessionStorage using sessionStorage.js. + * It is important to note that some browsers (IE and FF) doesn’t enable the sessionStorage object while running the website directly from the local file system, + * so if you want to test this feature it is recommended to view the website through a web server or use browsers such as Chrome or Opera which doesn’t have this limitation. + * Don't worry about compatibility issues, once your site is up on the internet, all browsers will act in exactly the same way. + * [version: 1.3] + */ + postbackSafe?: boolean; + + /** + * [default: false] This attribute should be set to true if the table is inside of an updatePanel or any other kind of partial page refresh using ajax. + * Table's ID should be same before and after the partial partial refresh. + * [version: 1.5] + */ + partialRefresh?: boolean; + + /** + * [default: false] This attribute can be used to prevent vertical expansion of the column anchors to fit the table height. + * If it is set to true, column handler's size will be bounded to the first row's vertical size. + * [version: 1.2] + */ + headerOnly?: boolean; + + /** + * [default: ""] Its purpose is to allow column anchor customization by defining the HTML to be used in the column grips to provide some visual feedback. + * It can be used in a wide range of ways to obtain very different outputs, and its flexibility can be increased by combining it with the draggingClass attribute. + * [version: 1.0] + */ + gripInnerHtml?: string; + + /** + * [default: (internal class)] This attribute is used as the css class assigned to column anchors while being dragged. It can be used for visual feedback purposes. + * [version: 1.0] + */ + draggingClass?: string; + + /** + * [default: false] When set to true it aims to remove all previously added enhancements such as events and additional DOM elements assigned by this plugin to + * a single or collection of tables. It is required to disable a previously colResized table prior its removal from the document object tree. + * [version: 1.0] + */ + disable?: boolean; + + /** + * [default: [ ] ] An array of column indexes to be excluded, so it will not be possible to drag them manually. + * [version: 1.6] + */ + disabledColumns?: number[]; + + /** + * [default: 15] This value specifies the minimum width (measured in pixels) that is allowed for the columns. + * [version: 1.1] + */ + minWidth?: number; + + /** + * [default: "e-resize"] This attribute can be used to customize the cursor that will be displayed when the user is positioned on the column anchors. + * [version: 1.3] + */ + hoverCursor?: string; + + /** + * [default: "e-resize"] Defines the cursor that will be used while the user is resizing a column. + * [version: 1.3] + */ + dragCursor?: string; + + /** + * [default: false] Flush is only effective when postbackSafe is enabled. + * Its purpose is to remove all previously stored data related to the current table layout to get it back to its original layout preventing width restoration after postback. + * [version: ] + */ + flush?: boolean; + + /** + * [default: null] If the target table contains an explicit margin-left CSS rule, the same value must be used in this attribute (for example: "auto", "20%", "10px"). + * The reason why it is needed it is because most browsers (all except of IE) don’t allow direct access to the current CSS rule applied to an element in + * its original units (such as "%", "em" or "auto" values). + * If you know any workaround which doesn’t involve iteration through all the styles defined in the site and any other external dependencies, please let me know! + * [version: 1.3] + */ + marginLeft?: string; + + /** + * [default: null] It behaves in exactly the same way than the marginLeft attribute but applied to the right margin. + * [version: 1.3] + */ + marginRight?: string; + + /** + * If a callback function is supplied it will be fired when the user has ended dragging a column anchor altering the previous table layout. + * The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters + * [version: 1.0] + */ + onResize?: FunctionCallback; + + /** + * This event is fired while dragging a column anchor if liveDrag is enabled. It can be useful if the table is being used as a multiple range slider. + * The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters + * [version: 1.1] + */ + onDrag?: FunctionCallback; + } + + type FunctionCallback = (e: JQueryMouseEventObject) => void; +} diff --git a/types/colresizable/tsconfig.json b/types/colresizable/tsconfig.json new file mode 100644 index 0000000000..35bf902824 --- /dev/null +++ b/types/colresizable/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "colresizable-tests.ts" + ] +} diff --git a/types/colresizable/tslint.json b/types/colresizable/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/colresizable/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }