From 1c1d000362c240f6a6f9318e6325de9fbfce052c Mon Sep 17 00:00:00 2001 From: Per Kastman Date: Sun, 4 Oct 2015 15:20:31 +0200 Subject: [PATCH 1/6] Added typings for jquery cropbox plugin --- jquery.cropbox/jquery.cropbox.d.ts | 115 +++++++++++++++++++++++++ jquery.cropbox/jquery.cropbox.tests.ts | 39 +++++++++ 2 files changed, 154 insertions(+) create mode 100644 jquery.cropbox/jquery.cropbox.d.ts create mode 100644 jquery.cropbox/jquery.cropbox.tests.ts diff --git a/jquery.cropbox/jquery.cropbox.d.ts b/jquery.cropbox/jquery.cropbox.d.ts new file mode 100644 index 000000000..70e09a46a --- /dev/null +++ b/jquery.cropbox/jquery.cropbox.d.ts @@ -0,0 +1,115 @@ +// Type definitions for jQuery cropbox +// Project: https://github.com/acornejo/jquery-cropbox +// Definitions by: Per Kastman +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module jQueryCropBox { + + enum ShowControls { + never, + always, + hover, + auto + } + + interface CropboxArea { + cropX: number; + cropY: number; + cropW: number; + cropH: number; + } + + interface CropboxOptions { + /** + * Width in pixels of the cropping window + */ + width?: number; + /** + * Height in pixels of the cropping window + */ + height?: number; + /** + * Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%. + */ + zoom?: number; + /** + * Maximum zoom value. With the default of 1.0 users can't zoom beyond the maximum image resolution. + */ + maxZoom?: number; + /** + * If not null, this is the entire html block that should appear on hover over the image for instructions and/or buttons (could include the zoom in/out buttons for example). If null, the default html block is used which has the text "Click to drag" and the zoom in/out buttons. Use false to disable controls. + */ + controls?: any; + /** + * Set the initial cropping area + */ + result?: CropboxArea; + /** + * This flag is used to determine when to display the controls. Never, always and hover do exactly what you would expect (never show them, always show them, show them on hover). The auto flag is the same as the hover flag, except that on mobile devices it always shows the controls (since there is no hover event). + */ + showControls?: ShowControls + } + + interface CropboxDragOptions { + startX: number, + startY: number, + dx: number, + dy: number + } + + interface CropboxSetCropOptions { + cropX: number, + cropY: number, + cropW: number, + cropH: number + } + + interface Cropbox { + /** + * Increase image zoom level by one step + */ + zoomIn(): void; + /** + * Decrease image zoom level by one step + */ + zoomOut(): void; + /** + * Set zoom leevl to a value between 0 and 1. Need to call update to reflect the changes. + */ + zoom(percent: number): void; + /** + * Simulate image dragging, starting from (startX,startY) and moving a delta of (dx,dy). Need to call update to reflect the changes. + */ + drag(options: CropboxDragOptions): void; + /** + * Set crop window. + */ + setCrop(options: CropboxSetCropOptions): void; + /** + * Update the cropped result (must call after zoom and drag). + */ + update(): void; + /** + * Generate a URL for the cropped image on the client (requires HTML5 compliant browser). + */ + getDataURL(): string; + /** + * Generate a Blob with the cropped image (requires HTML5 compliant browser). + */ + getBlob(): any; + /** + * Remove the cropbox functionality from the image. + */ + remove(): void; + } + +} +interface JQuery { + cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox +} + +interface JQueryStatic { + cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox +} diff --git a/jquery.cropbox/jquery.cropbox.tests.ts b/jquery.cropbox/jquery.cropbox.tests.ts new file mode 100644 index 000000000..cb8f0be5a --- /dev/null +++ b/jquery.cropbox/jquery.cropbox.tests.ts @@ -0,0 +1,39 @@ +/// +/// + +var cropboxWithDefaultSettings = $("#element").cropbox(); + +var cropboxOptions: jQueryCropBox.CropboxOptions = { + height: 500, + zoom: 5, + width: 0.5, +}; + +var cropboxWithOptions = $("#element").cropbox(cropboxOptions); + +cropboxWithOptions.zoomIn(); +cropboxWithOptions.zoomOut(); +cropboxWithOptions.zoom(50); + +var cropDragOption: jQueryCropBox.CropboxDragOptions = { + startX: 10, + startY: 0, + dx: 100, + dy: 100 +}; + +cropboxWithOptions.drag(cropDragOption); + +var cropboxSetCropOption: jQueryCropBox.CropboxSetCropOptions = { + cropX: 10, + cropY: 10, + cropW: 50, + cropH: 50 +}; + +cropboxWithOptions.setCrop(cropboxSetCropOption); + +cropboxWithOptions.update(); +cropboxWithOptions.getDataURL(); +cropboxWithOptions.getBlob(); +cropboxWithOptions.remove(); From 10c7ec397f4617dfb0fc7274fa9a8c054ff362b2 Mon Sep 17 00:00:00 2001 From: Per Kastman Date: Sun, 4 Oct 2015 15:25:44 +0200 Subject: [PATCH 2/6] Cleanup --- jquery.cropbox/jquery.cropbox.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.cropbox/jquery.cropbox.d.ts b/jquery.cropbox/jquery.cropbox.d.ts index 70e09a46a..82b550bf3 100644 --- a/jquery.cropbox/jquery.cropbox.d.ts +++ b/jquery.cropbox/jquery.cropbox.d.ts @@ -104,8 +104,8 @@ declare module jQueryCropBox { */ remove(): void; } - } + interface JQuery { cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox } From b9a7194092297ca857f96d971e290612bc2618d7 Mon Sep 17 00:00:00 2001 From: Per Kastman Date: Tue, 6 Oct 2015 18:56:29 +0200 Subject: [PATCH 3/6] Renamed according to naming convention --- .../jquery.cropbox.d.ts => jquery-cropbox/jquery-cropbox.d.ts | 4 ++-- .../jquery-cropbox.tests.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename jquery.cropbox/jquery.cropbox.d.ts => jquery-cropbox/jquery-cropbox.d.ts (96%) rename jquery.cropbox/jquery.cropbox.tests.ts => jquery-cropbox/jquery-cropbox.tests.ts (94%) diff --git a/jquery.cropbox/jquery.cropbox.d.ts b/jquery-cropbox/jquery-cropbox.d.ts similarity index 96% rename from jquery.cropbox/jquery.cropbox.d.ts rename to jquery-cropbox/jquery-cropbox.d.ts index 82b550bf3..fba9846bb 100644 --- a/jquery.cropbox/jquery.cropbox.d.ts +++ b/jquery-cropbox/jquery-cropbox.d.ts @@ -107,9 +107,9 @@ declare module jQueryCropBox { } interface JQuery { - cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox + cropbox(params?: jQueryCropBox.CropboxOptions): JQuery } interface JQueryStatic { - cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox + cropbox(params?: jQueryCropBox.CropboxOptions): JQueryStatic } diff --git a/jquery.cropbox/jquery.cropbox.tests.ts b/jquery-cropbox/jquery-cropbox.tests.ts similarity index 94% rename from jquery.cropbox/jquery.cropbox.tests.ts rename to jquery-cropbox/jquery-cropbox.tests.ts index cb8f0be5a..e8db3847c 100644 --- a/jquery.cropbox/jquery.cropbox.tests.ts +++ b/jquery-cropbox/jquery-cropbox.tests.ts @@ -1,5 +1,5 @@ /// -/// +/// var cropboxWithDefaultSettings = $("#element").cropbox(); From 68d3c81d8d635bd03136a19fd2d40d3dc500c7b9 Mon Sep 17 00:00:00 2001 From: Per Kastman Date: Tue, 6 Oct 2015 19:16:44 +0200 Subject: [PATCH 4/6] Fixed incorrect return type --- jquery-cropbox/jquery-cropbox.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery-cropbox/jquery-cropbox.d.ts b/jquery-cropbox/jquery-cropbox.d.ts index fba9846bb..82b550bf3 100644 --- a/jquery-cropbox/jquery-cropbox.d.ts +++ b/jquery-cropbox/jquery-cropbox.d.ts @@ -107,9 +107,9 @@ declare module jQueryCropBox { } interface JQuery { - cropbox(params?: jQueryCropBox.CropboxOptions): JQuery + cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox } interface JQueryStatic { - cropbox(params?: jQueryCropBox.CropboxOptions): JQueryStatic + cropbox(params?: jQueryCropBox.CropboxOptions): jQueryCropBox.Cropbox } From 1e9273d62eb6e2c2de01116c6446f006b47916b7 Mon Sep 17 00:00:00 2001 From: Per Kastman Date: Tue, 6 Oct 2015 19:29:47 +0200 Subject: [PATCH 5/6] Updated according to naming convention --- .../{jquery-cropbox.tests.ts => jquery-cropbox-tests.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename jquery-cropbox/{jquery-cropbox.tests.ts => jquery-cropbox-tests.ts} (100%) diff --git a/jquery-cropbox/jquery-cropbox.tests.ts b/jquery-cropbox/jquery-cropbox-tests.ts similarity index 100% rename from jquery-cropbox/jquery-cropbox.tests.ts rename to jquery-cropbox/jquery-cropbox-tests.ts From 3ff68ab822646d166995d02c40dd9ba97586d93f Mon Sep 17 00:00:00 2001 From: Per Kastman Date: Thu, 3 Dec 2015 14:26:25 +0100 Subject: [PATCH 6/6] Added possibility to register for events --- jquery-cropbox/jquery-cropbox-tests.ts | 6 ++++++ jquery-cropbox/jquery-cropbox.d.ts | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/jquery-cropbox/jquery-cropbox-tests.ts b/jquery-cropbox/jquery-cropbox-tests.ts index e8db3847c..270802cd9 100644 --- a/jquery-cropbox/jquery-cropbox-tests.ts +++ b/jquery-cropbox/jquery-cropbox-tests.ts @@ -37,3 +37,9 @@ cropboxWithOptions.update(); cropboxWithOptions.getDataURL(); cropboxWithOptions.getBlob(); cropboxWithOptions.remove(); + +cropboxWithOptions.on("cropbox",(e: Event, data: any, img: jQueryCropBox.Cropbox) => { + + //DoStuff + +}); \ No newline at end of file diff --git a/jquery-cropbox/jquery-cropbox.d.ts b/jquery-cropbox/jquery-cropbox.d.ts index 82b550bf3..9f91e06a2 100644 --- a/jquery-cropbox/jquery-cropbox.d.ts +++ b/jquery-cropbox/jquery-cropbox.d.ts @@ -103,7 +103,13 @@ declare module jQueryCropBox { * Remove the cropbox functionality from the image. */ remove(): void; + /** + * Attach an event handler function for one event on the Crop Box + */ + on(event: string, callback: jQueryCropBox.EventCallback): void; } + + type EventCallback = (e: Event, data: any, img: jQueryCropBox.Cropbox) => void; } interface JQuery {