From 5d4a5b426e4fc57bf357089c8154e00969edef64 Mon Sep 17 00:00:00 2001 From: Daniel Rosenwasser Date: Thu, 20 Oct 2016 01:27:57 -0700 Subject: [PATCH] Added type declarations for 'vivus'. --- vivus/index-tests.ts | 85 ++++++++++++++++++++++++++++ vivus/index.d.ts | 132 +++++++++++++++++++++++++++++++++++++++++++ vivus/tsconfig.json | 15 +++++ 3 files changed, 232 insertions(+) create mode 100644 vivus/index-tests.ts create mode 100644 vivus/index.d.ts create mode 100644 vivus/tsconfig.json diff --git a/vivus/index-tests.ts b/vivus/index-tests.ts new file mode 100644 index 0000000000..aefe0109ee --- /dev/null +++ b/vivus/index-tests.ts @@ -0,0 +1,85 @@ +import Vivus = require("vivus"); + +function assertNever(input: never) { + throw new Error("Should never get here!"); +} + +function onEndOfAnimation(v: Vivus) { + v = v.play(0.5).stop(); + + const status = v.getStatus(); + switch (status) { + case "start": + case "progress": + case "end": + break; + default: + assertNever(status); + } + + v.setFrameProgress(0.5).play().reset().finish().destroy(); +} + +// Documentation tests. + +new Vivus("my-svg", { duration: 200 }, onEndOfAnimation); + +new Vivus("my-div", { duration: 200, file: "link/to/my.svg" }, onEndOfAnimation); + +var myVivus = new Vivus("my-svg-element"); +myVivus.stop().reset().play(2); + +new Vivus("my-svg-element", { + type: "delayed", + duration: 200, + animTimingFunction: Vivus.EASE +}, onEndOfAnimation); + + + +// Empty options tests. + +new Vivus("svg-element", {}); + +const el = document.getElementById("my-element") !; + +// 'duration' & 'delay' options tests. + +new Vivus(el, { duration: 200, delay: 199 }) + +// 'type' option tests. + +new Vivus(el, { type: "delayed" }); +new Vivus(el, { type: "async" }); +new Vivus(el, { type: "oneByOne" }); +new Vivus(el, { type: "script" }); + +// 'start' option tests. + +new Vivus(el, { start: "inViewport" }); +new Vivus(el, { start: "manual" }); +new Vivus(el, { start: "autostart" }); + +// Custom & built-in easing functions in options. + +new Vivus("my-svg-element", { + animTimingFunction: Vivus.EASE_OUT_BOUNCE, + pathTimingFunction: x => x ** 0.5, +}); + +function testEasingFunctions() { + var n: number; + + n = Vivus.LINEAR(0); + n = Vivus.LINEAR(1); + n = Vivus.EASE(0); + n = Vivus.EASE(1); + n = Vivus.EASE_IN(0); + n = Vivus.EASE_IN(1); + n = Vivus.EASE_OUT(0); + n = Vivus.EASE_OUT(1); + n = Vivus.EASE_OUT_BOUNCE(0); + n = Vivus.EASE_OUT_BOUNCE(1); + + return n; +} \ No newline at end of file diff --git a/vivus/index.d.ts b/vivus/index.d.ts new file mode 100644 index 0000000000..0c2f8b0ca5 --- /dev/null +++ b/vivus/index.d.ts @@ -0,0 +1,132 @@ +// Type definitions for Vivus 0.3.2 +// Project: http://maxwellito.github.io/vivus/ +// Definitions by: Daniel Rosenwasser +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +export = Vivus; +export as namespace Vivus; + +declare class Vivus { + static LINEAR: Vivus.TimingFunction; + static EASE: Vivus.TimingFunction; + static EASE_OUT: Vivus.TimingFunction; + static EASE_IN: Vivus.TimingFunction; + static EASE_OUT_BOUNCE: Vivus.TimingFunction; + + /** + * @param element The DOM element, or the ID of a DOM element, to interact with. + * @param options + * @param callback Callback to call at the end of the animation + */ + constructor(element: string | HTMLElement, options?: Vivus.VivusOptions, callback?: (vivusInstance: Vivus) => void); + + /** + * Plays the animation with the speed given in parameter. + * A speed of `1` is the normal speed. + * This value can be negative to go reverse, between 0 and 1 to play slowly, or greater than 1 to go faster. + * + * (default: `1`) + */ + play(speed?: number): this; + + /** + * Stops the animation. + */ + stop(): this; + + /** + * Reinitialises the SVG to the original undrawn state. + */ + reset(): this; + + /** + * Completely draws the SVG at its final state. + */ + finish(): this; + + /** + * Set the progress of the animation. + * Progress must be a `number` between `0` and `1`. + */ + setFrameProgress(progress: number): this; + + /** + * Get the status of the animation between start, progress, end. + */ + getStatus(): 'start' | 'progress' | 'end'; + + /** + * Reset the SVG but make the instance out of order. + */ + destroy(): void; +} + +declare namespace Vivus { + export type TimingFunction = (input: number) => number; + + export interface VivusOptions { + /** + * Determines if the item must be drawn asynchronously or not. + * Can be `'delayed'`, `'async'`, `'oneByOne'`, or `'script'`. + * (default: `'delayed'`) + */ + type?: 'delayed' | 'async' | 'oneByOne' | 'script'; + /** + * Link to the SVG to animate. + * If set, Vivus will create an object tag and append it to the DOM element given to the constructor. + * Be careful, use the `onReady` callback before playing with the Vivus instance. + */ + file?: string; + /** + * Animation duration, in frames. + * (default: `200`) + */ + duration?: number; + /** + * Automatically starts the animation. + * Can be `'inViewport'`, `'manual'`, or `'autostart'` + * (default: `'inViewport'`) + */ + start?: 'inViewport' | 'manual' | 'autostart'; + /** + * Time between the drawing of first and last path, in frames (only for `delayed` animations). + */ + delay?: number; + /** + * Function called when the instance is ready to play. + */ + onReady?: (vivusInstance: Vivus) => void; + /** + * Timing animation function for each path element of the SVG. + * It must accept a `number` as a parameter (between 0 to 1), and return a `number` (also between 0 and 1) as a result. + * + * See the [timing function documentation](https://github.com/maxwellito/vivus#timing-function). + */ + pathTimingFunction?: Vivus.TimingFunction; + /** + * Timing animation function for the complete SVG. + * It must accept a `number` as a parameter (between 0 to 1), and return a `number` (also between 0 and 1) as a result. + * + * See the [timing function documentation](https://github.com/maxwellito/vivus#timing-function). + */ + animTimingFunction?: Vivus.TimingFunction; + /** + * Whitespace extra margin between dashes. + * Increase it in case of glitches at the initial state of the animation. + * + * (default: `2`) + */ + dashGap?: number; + /** + * Force the browser to re-render all updated path items. + * By default, the value is `true` on IE only. + * + * See [the troubleshooting documentation for more details](https://github.com/maxwellito/vivus#troubleshoot). + */ + forceRender?: boolean; + /** + * Removes all extra styling on the SVG, and leaves it as original. + */ + selfDestroy?: boolean; + } +} diff --git a/vivus/tsconfig.json b/vivus/tsconfig.json new file mode 100644 index 0000000000..9cb518c427 --- /dev/null +++ b/vivus/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + } +} \ No newline at end of file