From 45c6670986715a624864da1e27d9219a096bf257 Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:07:55 -0700 Subject: [PATCH 1/8] add typings for jquery-jcrop --- types/jquery-jcrop/index.d.ts | 107 +++++++++++++++++++++++ types/jquery-jcrop/jquery-jcrop-tests.ts | 56 ++++++++++++ types/jquery-jcrop/tsconfig.json | 24 +++++ types/jquery-jcrop/tslint.json | 6 ++ 4 files changed, 193 insertions(+) create mode 100644 types/jquery-jcrop/index.d.ts create mode 100644 types/jquery-jcrop/jquery-jcrop-tests.ts create mode 100644 types/jquery-jcrop/tsconfig.json create mode 100644 types/jquery-jcrop/tslint.json diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts new file mode 100644 index 0000000000..3290435202 --- /dev/null +++ b/types/jquery-jcrop/index.d.ts @@ -0,0 +1,107 @@ +// Type definitions for jcrop +// Project: https://github.com/tapmodo/Jcrop/ +// Definitions by: Joe Skeen +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +/// + +declare namespace JQuery.Jcrop { + export interface IJcropOptions { + /** 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; + } + + export type CardinalDirection = 'n' | 's' | 'e' | 'w'; + export type IntermediateDirection = 'nw' | 'ne' | 'se' | 'sw'; + export type JCropEventHandler = (c: IJCropSelectionInfo) => void; + export interface IJCropSelectionInfo { + x: number; + y: number; + x2: number; + y2: number; + w: number; + h: number; + } + + export interface IJcropApi { + /** 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(): IJCropSelectionInfo; + /** Query current selection values (interface) */ + tellScaled(): IJCropSelectionInfo; + + /** Disables Jcrop interactivity */ + disable(): void; + /** Enables Jcrop interactivity */ + enable(): void; + /** Remove Jcrop entirely */ + remove(): void; + } +} + +declare interface JQuery { + Jcrop(options?: JQuery.Jcrop.IJcropOptions, callback?: (this: JQuery.Jcrop.IJcropApi) => 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..4ef064449d --- /dev/null +++ b/types/jquery-jcrop/jquery-jcrop-tests.ts @@ -0,0 +1,56 @@ +/// + +jQuery(function($) { + $('#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(function($) { + $('#target').Jcrop({ + onSelect: showCoords, + onChange: showCoords + }); +}); + +jQuery(function($) { + $('#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(function($) { + let jcrop_api: JQuery.Jcrop.IJcropApi; + + $('#target').Jcrop({ + bgColor: 'red' + }, function() { + jcrop_api = this; + }); + + $('#animbutton').click(function(e) { + jcrop_api.animateTo([120, 120, 80, 80]); + return false; + }); + + $('#delselect').click(function(e) { + jcrop_api.release(); + return false; + }); +}); + +(function() { + $('#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..3d59d6ab37 --- /dev/null +++ b/types/jquery-jcrop/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": false, + "strictNullChecks": false, + "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..6e2b8f34c7 --- /dev/null +++ b/types/jquery-jcrop/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "only-arrow-functions": false + } +} From 5d184dbd0610927c3c0892ac3620a4f72b3b7a24 Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:12:51 -0700 Subject: [PATCH 2/8] Fix linting issues --- types/jquery-jcrop/index.d.ts | 42 ++++++++++++------------ types/jquery-jcrop/jquery-jcrop-tests.ts | 2 +- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts index 3290435202..cd7bcf4305 100644 --- a/types/jquery-jcrop/index.d.ts +++ b/types/jquery-jcrop/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for jcrop +// Type definitions for jcrop 2.0 // Project: https://github.com/tapmodo/Jcrop/ // Definitions by: Joe Skeen // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -7,7 +7,7 @@ /// declare namespace JQuery.Jcrop { - export interface IJcropOptions { + export interface Options { /** Aspect ratio of w/h (e.g. 1 for square) */ aspectRatio?: number; /** Minimum width/height, use 0 for unbounded dimension; [width, height] */ @@ -17,7 +17,7 @@ declare namespace JQuery.Jcrop { 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 */ @@ -70,38 +70,38 @@ declare namespace JQuery.Jcrop { export type CardinalDirection = 'n' | 's' | 'e' | 'w'; export type IntermediateDirection = 'nw' | 'ne' | 'se' | 'sw'; - export type JCropEventHandler = (c: IJCropSelectionInfo) => void; - export interface IJCropSelectionInfo { - x: number; - y: number; - x2: number; - y2: number; - w: number; - h: number; + export type JCropEventHandler = (c: SelectionInfo) => void; + export interface SelectionInfo { + x: number; + y: number; + x2: number; + y2: number; + w: number; + h: number; } - export interface IJcropApi { + export interface Api { /** Set selection, format: [ x,y,x2,y2 ] */ - setSelect(selection: [number, number, number, number]): void; + setSelect: (selection: [number, number, number, number]) => void; /** Animate selection to new selection, format: [ x,y,x2,y2 ] */ - animateTo(selection: [number, number, number, number]): void; + animateTo: (selection: [number, number, number, number]) => void; /** Release current selection */ - release(): void; + release: () => void; /** Query current selection values (true size) */ - tellSelect(): IJCropSelectionInfo; + tellSelect: () => SelectionInfo; /** Query current selection values (interface) */ - tellScaled(): IJCropSelectionInfo; + tellScaled: () => SelectionInfo; /** Disables Jcrop interactivity */ - disable(): void; + disable: () => void; /** Enables Jcrop interactivity */ - enable(): void; + enable: () => void; /** Remove Jcrop entirely */ - remove(): void; + remove: () => void; } } declare interface JQuery { - Jcrop(options?: JQuery.Jcrop.IJcropOptions, callback?: (this: JQuery.Jcrop.IJcropApi) => void): 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 index 4ef064449d..cdec4c7a68 100644 --- a/types/jquery-jcrop/jquery-jcrop-tests.ts +++ b/types/jquery-jcrop/jquery-jcrop-tests.ts @@ -32,7 +32,7 @@ $('#target').Jcrop({}, function() { }); jQuery(function($) { - let jcrop_api: JQuery.Jcrop.IJcropApi; + let jcrop_api: JQuery.Jcrop.Api; $('#target').Jcrop({ bgColor: 'red' From 0985e7a72ce08d1cf432c1ae3efc4d4f54bb0e54 Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:22:21 -0700 Subject: [PATCH 3/8] pull request checklist changes --- types/jquery-jcrop/index.d.ts | 1 - types/jquery-jcrop/tsconfig.json | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts index cd7bcf4305..4faf818219 100644 --- a/types/jquery-jcrop/index.d.ts +++ b/types/jquery-jcrop/index.d.ts @@ -2,7 +2,6 @@ // Project: https://github.com/tapmodo/Jcrop/ // Definitions by: Joe Skeen // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.3 /// diff --git a/types/jquery-jcrop/tsconfig.json b/types/jquery-jcrop/tsconfig.json index 3d59d6ab37..add23691c0 100644 --- a/types/jquery-jcrop/tsconfig.json +++ b/types/jquery-jcrop/tsconfig.json @@ -6,8 +6,8 @@ "dom" ], "noImplicitAny": true, - "noImplicitThis": false, - "strictNullChecks": false, + "noImplicitThis": true, + "strictNullChecks": true, "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ From cdf89bef79a35f3eb4cd6350ccbadbd4b00e7e61 Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:26:15 -0700 Subject: [PATCH 4/8] Fix Travis build --- types/jquery-jcrop/jquery-jcrop-tests.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/types/jquery-jcrop/jquery-jcrop-tests.ts b/types/jquery-jcrop/jquery-jcrop-tests.ts index cdec4c7a68..4a1f5e5330 100644 --- a/types/jquery-jcrop/jquery-jcrop-tests.ts +++ b/types/jquery-jcrop/jquery-jcrop-tests.ts @@ -1,5 +1,3 @@ -/// - jQuery(function($) { $('#target').Jcrop(); }); From 59eca344e76068592b4a5bac115c776ef27fde41 Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:44:28 -0700 Subject: [PATCH 5/8] fix Travis build --- types/jquery-jcrop/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts index 4faf818219..8e9bc5cbcc 100644 --- a/types/jquery-jcrop/index.d.ts +++ b/types/jquery-jcrop/index.d.ts @@ -2,7 +2,7 @@ // Project: https://github.com/tapmodo/Jcrop/ // Definitions by: Joe Skeen // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped - +// TypeScript Version: 2.3 /// declare namespace JQuery.Jcrop { From 14c69bf31a558bcec936be9f63e0e810bbd3fc87 Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:48:49 -0700 Subject: [PATCH 6/8] fix travis build --- types/jquery-jcrop/index.d.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts index 8e9bc5cbcc..030236693a 100644 --- a/types/jquery-jcrop/index.d.ts +++ b/types/jquery-jcrop/index.d.ts @@ -6,7 +6,7 @@ /// declare namespace JQuery.Jcrop { - export interface Options { + interface Options { /** Aspect ratio of w/h (e.g. 1 for square) */ aspectRatio?: number; /** Minimum width/height, use 0 for unbounded dimension; [width, height] */ @@ -67,10 +67,10 @@ declare namespace JQuery.Jcrop { shade?: boolean | null; } - export type CardinalDirection = 'n' | 's' | 'e' | 'w'; - export type IntermediateDirection = 'nw' | 'ne' | 'se' | 'sw'; - export type JCropEventHandler = (c: SelectionInfo) => void; - export interface SelectionInfo { + 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; @@ -79,7 +79,7 @@ declare namespace JQuery.Jcrop { h: number; } - export interface Api { + 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 ] */ From 19edf98c1930e5d61f15682933614873fe4e088f Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Mon, 4 Dec 2017 18:52:29 -0700 Subject: [PATCH 7/8] fix Travis build? --- types/jquery-jcrop/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/jquery-jcrop/index.d.ts b/types/jquery-jcrop/index.d.ts index 030236693a..af2afaf9d7 100644 --- a/types/jquery-jcrop/index.d.ts +++ b/types/jquery-jcrop/index.d.ts @@ -101,6 +101,6 @@ declare namespace JQuery.Jcrop { } } -declare interface JQuery { +interface JQuery { Jcrop(options?: JQuery.Jcrop.Options, callback?: (this: JQuery.Jcrop.Api) => void): JQuery; } From 437ed62ed42a4fcc6b6f51833f205e9786b6013b Mon Sep 17 00:00:00 2001 From: Joe Skeen Date: Tue, 5 Dec 2017 08:53:30 -0700 Subject: [PATCH 8/8] Address code review comment --- types/jquery-jcrop/jquery-jcrop-tests.ts | 14 +++++++------- types/jquery-jcrop/tslint.json | 5 +---- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/types/jquery-jcrop/jquery-jcrop-tests.ts b/types/jquery-jcrop/jquery-jcrop-tests.ts index 4a1f5e5330..f5fb25f39c 100644 --- a/types/jquery-jcrop/jquery-jcrop-tests.ts +++ b/types/jquery-jcrop/jquery-jcrop-tests.ts @@ -1,4 +1,4 @@ -jQuery(function($) { +jQuery(($) => { $('#target').Jcrop(); }); @@ -7,14 +7,14 @@ function showCoords(c: { x: number, y: number, x2: number; y2: number; w: number // c.x, c.y, c.x2, c.y2, c.w, c.h } -jQuery(function($) { +jQuery(($) => { $('#target').Jcrop({ onSelect: showCoords, onChange: showCoords }); }); -jQuery(function($) { +jQuery(($) => { $('#target').Jcrop({ onSelect: showCoords, bgColor: 'black', @@ -29,7 +29,7 @@ $('#target').Jcrop({}, function() { jcrop_api = this; }); -jQuery(function($) { +jQuery(($) => { let jcrop_api: JQuery.Jcrop.Api; $('#target').Jcrop({ @@ -38,17 +38,17 @@ jQuery(function($) { jcrop_api = this; }); - $('#animbutton').click(function(e) { + $('#animbutton').click((e) => { jcrop_api.animateTo([120, 120, 80, 80]); return false; }); - $('#delselect').click(function(e) { + $('#delselect').click((e) => { jcrop_api.release(); return false; }); }); -(function() { +(() => { $('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 }); }); diff --git a/types/jquery-jcrop/tslint.json b/types/jquery-jcrop/tslint.json index 6e2b8f34c7..d88586e5bd 100644 --- a/types/jquery-jcrop/tslint.json +++ b/types/jquery-jcrop/tslint.json @@ -1,6 +1,3 @@ { - "extends": "dtslint/dt.json", - "rules": { - "only-arrow-functions": false - } + "extends": "dtslint/dt.json" }