diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 723bb1d2b..b62f47fd1 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -123,6 +123,7 @@ All definitions files include a header with the author and editors, so at some p * [iCheck](http://damirfoy.com/iCheck/) (by [Dániel Tar](https://github.com/qcz)) * [Impress.js](https://github.com/bartaz/impress.js) (by [Boris Yankov](https://github.com/borisyankov)) * [Imagemagick](http://github.com/rsms/node-imagemagick) (by [Carlos Ballesteros Velasco](https://github.com/soywiz)) +* [interact.js](http://github.com/taye/interact.js) (by [Douglas Eichelberger](https://github.com/dduugg)) * [Ionic-Cordova](https://github.com/driftyco/) (by [Hendrik Maus](https://github.com/hendrikmaus)) * [iScroll](http://cubiq.org/iscroll-4) (by [Boris Yankov](https://github.com/borisyankov) and [Christiaan Rakowski](https://github.com/csrakowski)) * [IxJS (Interactive extensions)](https://github.com/Reactive-Extensions/IxJS) (by [Igor Oleinikov](https://github.com/Igorbek)) diff --git a/interactjs/interact-tests.ts b/interactjs/interact-tests.ts new file mode 100644 index 000000000..e658f1275 --- /dev/null +++ b/interactjs/interact-tests.ts @@ -0,0 +1,107 @@ +/// + +import interact = require("interact"); + +var button: HTMLElement = document.createElement("BUTTON"); +var rectangle: ClientRect = { + left: 100, + width: 100, + right: 100, + top: 100, + bottom: 100, + height: 100 +}; +var interactable = interact(button); + +interactable.draggable(); +interactable.draggable(true); +interactable.draggable({ + onstart: (event: InteractEvent) => {}, + onmove : (event: InteractEvent) => {}, + onend : (event: InteractEvent) => {} +}); +interactable.dropzone(); +interactable.dropzone(true); +interactable.dropChecker(() => {}); +interactable.accept(); +interactable.accept("button"); +interactable.accept(button); +interactable.resizable(); +interactable.resizable(true); +interactable.squareResize(); +interactable.squareResize(true); +interactable.gesturable(); +interactable.gesturable(true); +interactable.gesturable({ + onmove: () => {} +}); +interactable.autoScroll(); +interactable.autoScroll(true); +interactable.snap(); +interactable.snap(true); +interactable.inertia(); +interactable.inertia({ + resistance: 1 +}); +interactable.inertia(true); +interactable.actionChecker(); +interactable.actionChecker((event: MouseEvent, defaultAction: string, interactable2: Interactable) => defaultAction); +var rect: ClientRect = interactable.getRect(); +interactable.rectChecker(); +interactable.styleCursor(); +interactable.origin(); +interactable.origin({x: 0, y: 0}); +interactable.origin(button); +interactable.deltaSource(); +interactable.deltaSource("client"); +interactable.restrict(); +interactable.restrict({ + "drag": button, + "resize": button, + "gesture": button +}); +interactable.context(); +interactable.ignoreFrom(); +interactable.ignoreFrom("button"); +interactable.ignoreFrom(button); +interactable.validateSetting("restrict", "drag", button); +interactable.element(); +interactable.on("click", () => {}, true); +interactable.off("click", () => {}, true); +interactable.unset(); + +interact.isSet(button); +interact.on("click", () => {}, true); +interact.off("click", () => {}, true); +interact.enableDragging(); +interact.enableDragging(true); +interact.enableResizing(); +interact.enableResizing(true); +interact.enableGesturing(); +interact.enableGesturing(true); +interact.debug(); +interact.margin(); +interact.margin(10); +interact.styleCursor(); +interact.styleCursor(true); +interact.autoScroll(true); +interact.autoScroll(); +interact.snap(); +interact.snap(true); +interact.snap({ + mode: "grid" +}); +interact.inertia(); +interact.inertia(true); +interact.supportsTouch(); +interact.currentAction(); +interact.dynamicDrop(); +interact.dynamicDrop(true); +interact.deltaSource(); +interact.deltaSource("page"); + +interact.restrict({ + "drag": rectangle, + "resize": rectangle, + "gesture": rectangle +}); diff --git a/interactjs/interact.d.ts b/interactjs/interact.d.ts new file mode 100644 index 000000000..8189d6415 --- /dev/null +++ b/interactjs/interact.d.ts @@ -0,0 +1,245 @@ +// Type definitions for Interacting for interact.js v1.0.17 +// Project: https://github.com/taye/interact.js +// Definitions by: Douglas Eichelberger +// Definitions: https://github.com/borisyankov/DefinitelyType + +// API documentation: http://interactjs.io/docs + +interface Interactable { + // returns Element or string + accept(): any; + accept(newValue: Element): Interactable; + accept(newValue: string): Interactable; + actionChecker(): Function; + actionChecker(checker: Function): Interactable; + // returns boolean or {[key: string]: any} + autoScroll(): any; + autoScroll(options: boolean): Interactable; + autoScroll(options: {[key: string]: any}): Interactable; + context(): Node; + defaultActionChecker(event: any): string; + deltaSource(): string; + // returns Interactable if newValue is "page" or "client", otherwise returns string + deltaSource(newValue: String): Interactable; + draggable(): boolean; + draggable(options: boolean): Interactable; + draggable(options: {[key: string]: any}): Interactable; + dropCheck(event: MouseEvent): boolean; + dropCheck(event: TouchEvent): boolean; + dropChecker(): Function; + dropChecker(checker: Function): Interactable; + // returns boolean or {[key: string]: any} + dropzone(): any; + dropzone(options: boolean): Interactable; + dropzone(options: {[key: string]: any}): Interactable; + // return HTMLElement or SVGElement + element(): Element; + fire(iEvent: InteractEvent): Interactable; + // returns boolean or {[key: string]: any} + gesturable(): any; + gesturable(options: boolean): Interactable; + gesturable(options: {[key: string]: any}): Interactable; + getRect(): ClientRect; + // returns Element or string + ignoreFrom(): any; + ignoreFrom(newValue: string): Interactable; + ignoreFrom(newValue: Element): Interactable; + // returns boolean or {[key: string]: any} + inertia(): any; + inertia(options: boolean): Interactable; + inertia(options: {[key: string]: any}): Interactable; + off(eventType: string, listener: Function, useCapture?: boolean): Interactable; + on(eventType: string, listener: Function, useCapture?: boolean): Interactable; + origin(): Point; + origin(newValue: HTMLElement): Interactable; + origin(newValue: SVGElement): Interactable; + origin(newValue: Point): Interactable; + rectChecker(): Function; + rectChecker(newValue: Function): Interactable; + resizable(): Interactable; + resizable(options: boolean): Interactable; + resizable(options: {[key: string]: any}): Interactable; + restrict(): Restrict; + restrict(newValue: Restrict): Interactable; + set(options: {[key: string]: any}): Interactable; + // returns boolean or {[key: string]: any} + snap(): any; + snap(options: boolean): Interactable; + snap(options: {[key: string]: any}): Interactable; + squareResize(): boolean; + squareResize(newValue: boolean): Interactable; + styleCursor(): boolean; + styleCursor(newValue: boolean): Interactable; + unset(): InteractStatic; + validateSetting(context: string, option: string, value: any): any; +} + +interface Coordinates { + clientX: number; + clientY: number; + pageX: number; + pageY: number; + timeStamp: number; +} + +interface Debug { + target: any; + dragging: any; + resizing: any; + gesturing: any; + prepared: any; + + prevCoords: Coordinates; + downCoords: Coordinates; + + pointerIds: any[]; + pointerMoves: any[]; + addPointer: any; + removePointer: any; + recordPointers: any; + + inertia: InertiaStatus; + + downTime: any; + downEvent: any; + prevEvent: any; + + Interactable: any; + IOptions: any; + interactables: any; + dropzones: any; + pointerIsDown: any; + defaultOptions: any; + defaultActionChecker: any; + + actions: any; + dragMove: any; + resizeMove: any; + gestureMove: any; + pointerUp: any; + pointerDown: any; + pointerMove: any; + pointerHover: any; + + events: any; + globalEvents: any; + delegatedEvents: any; +} + +interface InertiaStatus { + active: boolean; + target: any; + targetElement: any; + + startEvent: any; + pointerUp: any + + xe: number; + ye: number; + duration: number; + + t0: number; + vx0: number; + vys: number; + + lambda_v0: number; + one_ve_v0: number; + i: any; +} + +interface Point { + x: number; + y: number; +} + +// value types are either ClientRect or Element +interface Restrict { + drag?: any; + gesture?: any; + resize?: any; +} + +interface InteractEvent { + altKey: boolean; + axes: string; + button: number + clientX0: number; + clientX: number + clientY0: number; + clientY: number + ctrlKey: boolean + dt: number; + duration: number; + dx: number; + dy: number; + metaKey: boolean; + pageX: number; + pageY: number; + shiftKey: boolean; + speed: number; + t0: number; + target: any; + timeStamp: number; + type: string; + velocityX: number; + velocityY: number; + x0: number; + y0: number; +} + +interface TouchEvent { + changedTouches: any[]; + pageX: number; + pageY: number; + touches: any[]; + type: string; +} + +interface InteractStatic { + (element: HTMLElement): Interactable; + (element: SVGElement): Interactable; + (element: string): Interactable; + // returns boolean or {[key: string]: any} + autoScroll(): any; + autoScroll(options: boolean): InteractStatic; + autoScroll(options: {[key: string]: any}): InteractStatic; + currentAction(): string + debug(): Debug; + deltaSource(): string; + // "page" and "client" are the valid parameters + deltaSource(newValue: string): InteractStatic; + dynamicDrop(): boolean; + dynamicDrop(newValue: boolean): InteractStatic; + enableDragging(): boolean; + enableDragging(newValue: boolean): InteractStatic; + enableGesturing(): boolean; + enableGesturing(newValue: boolean): InteractStatic; + enableResizing(): boolean; + enableResizing(newValue: boolean): InteractStatic; + // returns boolean or {[key: string]: any} + inertia(): any; + inertia(options: boolean): InteractStatic; + inertia(options: {[key: string]: any}): InteractStatic; + isSet(element: Element): boolean; + margin(): number; + margin(newvalue: number): InteractStatic; + off(type: string, listener: Function, useCapture?: boolean): InteractStatic; + on(type: string, listener: Function, useCapture?: boolean): InteractStatic; + restrict(): Restrict; + restrict(newValue: Restrict): InteractStatic; + simulate(action: string, element: Element, pointerEvent?: any): InteractStatic; + // returns boolean or {[key: string]: any} + snap(): any; + snap(options: boolean): InteractStatic; + snap(options: {[key: string]: any}): InteractStatic; + stop(event: Event): InteractStatic; + styleCursor(): boolean; + styleCursor(newValue: boolean): InteractStatic; + supportsTouch(): boolean +} + +declare var interact: InteractStatic; + +declare module "interact" { + export = interact; +}