diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts new file mode 100644 index 0000000000..af2afaf9d7 --- /dev/null +++ b/types/jquery-jcrop/index.d.ts @@ -0,0 +1,106 @@ +// Type definitions for jcrop 2.0 +// Project: https://github.com/tapmodo/Jcrop/ +// Definitions by: Joe Skeen +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 +/// + +declare namespace JQuery.Jcrop { + interface Options { + /** Aspect ratio of w/h (e.g. 1 for square) */ + aspectRatio?: number; + /** Minimum width/height, use 0 for unbounded dimension; [width, height] */ + minSize?: [number, number]; + /** Maximum width/height, use 0 for unbounded dimension; [width, height] */ + maxSize?: [number, number]; + minSelect?: [number, number]; + /** Set an initial selection area; [x, y, x2, y2] */ + setSelect?: [number, number, number, number]; + + /** Set color of background container @default 'black' */ + bgColor?: string; + /** Opacity of outer image when cropping; between 0 and 1 @default .6 */ + bgOpacity?: number; + baseClass?: string; + addClass?: string; + bgFade?: boolean; + borderOpacity?: number; + handleOpacity?: number; + handleSize?: number | null; + + /** Called when selection is completed */ + onSelect?: JCropEventHandler; + /** Called when the selection is moving */ + onChange?: JCropEventHandler; + /** Called when double-clicked */ + onDblClick?: JCropEventHandler; + /** Called when the selection is released */ + onRelease?: JCropEventHandler; + + /** Maximum width of cropping area @default 0 (no limit) */ + boxWidth?: number; + /** Maximum height of cropping area @default 0 (no limit) */ + boxHeight?: number; + boundary?: number; + fadeTime?: number; + animationDelay?: number; + swingSpeed?: number; + + /** Specify the true size of the image */ + trueSize?: [number, number]; + + // Basic Settings + allowSelect?: boolean; + allowMove?: boolean; + allowResize?: boolean; + + trackDocument?: boolean; + + keySupport?: boolean; + createHandles?: Array; + createDragbars?: CardinalDirection[]; + createBorders?: CardinalDirection[]; + drawBorders?: boolean; + dragEdges?: boolean; + fixedSupport?: boolean; + touchSupport?: boolean | null; + shade?: boolean | null; + } + + type CardinalDirection = 'n' | 's' | 'e' | 'w'; + type IntermediateDirection = 'nw' | 'ne' | 'se' | 'sw'; + type JCropEventHandler = (c: SelectionInfo) => void; + interface SelectionInfo { + x: number; + y: number; + x2: number; + y2: number; + w: number; + h: number; + } + + interface Api { + /** Set selection, format: [ x,y,x2,y2 ] */ + setSelect: (selection: [number, number, number, number]) => void; + /** Animate selection to new selection, format: [ x,y,x2,y2 ] */ + animateTo: (selection: [number, number, number, number]) => void; + /** Release current selection */ + release: () => void; + + /** Query current selection values (true size) */ + tellSelect: () => SelectionInfo; + /** Query current selection values (interface) */ + tellScaled: () => SelectionInfo; + + /** Disables Jcrop interactivity */ + disable: () => void; + /** Enables Jcrop interactivity */ + enable: () => void; + /** Remove Jcrop entirely */ + remove: () => void; + } +} + +interface JQuery { + Jcrop(options?: JQuery.Jcrop.Options, callback?: (this: JQuery.Jcrop.Api) => void): JQuery; +} diff --git a/types/jquery-jcrop/jquery-jcrop-tests.ts b/types/jquery-jcrop/jquery-jcrop-tests.ts new file mode 100644 index 0000000000..f5fb25f39c --- /dev/null +++ b/types/jquery-jcrop/jquery-jcrop-tests.ts @@ -0,0 +1,54 @@ +jQuery(($) => { + $('#target').Jcrop(); +}); + +function showCoords(c: { x: number, y: number, x2: number; y2: number; w: number; h: number; }) { + // variables can be accessed here as + // c.x, c.y, c.x2, c.y2, c.w, c.h +} + +jQuery(($) => { + $('#target').Jcrop({ + onSelect: showCoords, + onChange: showCoords + }); +}); + +jQuery(($) => { + $('#target').Jcrop({ + onSelect: showCoords, + bgColor: 'black', + bgOpacity: .4, + setSelect: [100, 100, 50, 50], + aspectRatio: 16 / 9 + }); +}); + +let jcrop_api; +$('#target').Jcrop({}, function() { + jcrop_api = this; +}); + +jQuery(($) => { + let jcrop_api: JQuery.Jcrop.Api; + + $('#target').Jcrop({ + bgColor: 'red' + }, function() { + jcrop_api = this; + }); + + $('#animbutton').click((e) => { + jcrop_api.animateTo([120, 120, 80, 80]); + return false; + }); + + $('#delselect').click((e) => { + jcrop_api.release(); + return false; + }); +}); + +(() => { + $('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 }); +}); diff --git a/types/jquery-jcrop/tsconfig.json b/types/jquery-jcrop/tsconfig.json new file mode 100644 index 0000000000..add23691c0 --- /dev/null +++ b/types/jquery-jcrop/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", + "jquery-jcrop-tests.ts" + ] +} \ No newline at end of file diff --git a/types/jquery-jcrop/tslint.json b/types/jquery-jcrop/tslint.json new file mode 100644 index 0000000000..d88586e5bd --- /dev/null +++ b/types/jquery-jcrop/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}