Merge pull request #21966 from joeskeen/jcrop

Add typings for Jcrop

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 <https://github.com/joeskeen>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+/// <reference types="jquery" />
+
+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<CardinalDirection | IntermediateDirection>;
+    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;
+}

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 });
+});

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"
+  ]
+}

types/jquery-jcrop/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "dtslint/dt.json"
+}