diff --git a/vanilla-tilt/index.d.ts b/vanilla-tilt/index.d.ts new file mode 100644 index 0000000000..828ca47513 --- /dev/null +++ b/vanilla-tilt/index.d.ts @@ -0,0 +1,112 @@ +// Type definitions for vanilla-tilt 1.3 +// Project: https://github.com/micku7zu/vanilla-tilt.js +// Definitions by: Livio Brunner +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * A smooth 3D tilt javascript library forked from Tilt.js (jQuery version). + */ +export declare namespace VanillaTilt { + /** + * Options which configures the tilting + */ + interface TiltOptions { + /** + * Reverse the tilt direction + */ + reverse?: boolean; + /** + * Max tilt rotation (degrees) + */ + max?: number; + /** + * Transform perspective, the lower the more extreme the tilt gets. + */ + perspective?: number; + /** + * 2 = 200%, 1.5 = 150%, etc.. + */ + scale?: number; + /** + * Speed of the enter/exit transition + */ + speed?: number; + /** + * Set a transition on enter/exit. + */ + transition?: boolean; + /** + * What axis should be disabled. Can be X or Y. + */ + axis?: null | "x" | "y"; + /** + * If the tilt effect has to be reset on exit. + */ + reset?: boolean; + /** + * Easing on enter/exit. + */ + easing?: string; + } + + export interface TiltValues { + /** + * The current tilt on the X axis + */ + tiltX: number; + /** + * The current tilt on the Y axis + */ + tiltY: number; + /** + * The current percentage on the X axis + */ + percentageX: number; + /** + * The current percentage on the Y axis + */ + percentageY: number; + } + + export interface HTMLVanillaTiltElement extends HTMLElement { + vanillaTilt: VanillaTilt + } +} + +/** + * A smooth 3D tilt javascript library forked from Tilt.js (jQuery version). + */ +export declare class VanillaTilt { + /** + * Creates a new instance of a VanillaTilt element. + * @param element The element, which should be a VanillaTilt element + * @param settings Settings which configures the element + */ + constructor(element: HTMLElement, settings?: VanillaTilt.TiltOptions); + /** + * Initializes one or multiple elements + * @param elements The element, which should tilt + * @param settings Settings, which configures the elements + */ + static init(elements: HTMLElement | HTMLElement[], settings?: VanillaTilt.TiltOptions): void; + /** + * Resets the styling + */ + reset(): void; + /** + * Get values of instance + */ + getValues(): VanillaTilt.TiltValues; + /** + * Destroys the instance and removes the listeners. + */ + destroy(): void; + /** + * Start listening to events + */ + addEventListeners(): void; + /** + * Stop listening to events + */ + removeEventListener(): void; +} diff --git a/vanilla-tilt/tsconfig.json b/vanilla-tilt/tsconfig.json new file mode 100644 index 0000000000..f95783a19d --- /dev/null +++ b/vanilla-tilt/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "vanilla-tilt-tests.ts" + ] +} diff --git a/vanilla-tilt/tslint.json b/vanilla-tilt/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/vanilla-tilt/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" } diff --git a/vanilla-tilt/vanilla-tilt-tests.ts b/vanilla-tilt/vanilla-tilt-tests.ts new file mode 100644 index 0000000000..80691885c4 --- /dev/null +++ b/vanilla-tilt/vanilla-tilt-tests.ts @@ -0,0 +1,29 @@ +import { VanillaTilt } from './index.d'; + +let element: VanillaTilt = new VanillaTilt(document.createElement('a'), { + axis: 'y', + easing: 'cubic-besizer(0.9, 0.9, 0.9)', + max: 2, + perspective: 100, + reset: true, + reverse: true, + scale: 2, + speed: 200 +}); + +VanillaTilt.init(document.createElement('a'), { + axis: 'x' +}); + +element.removeEventListener(); + +VanillaTilt.init([document.createElement('a')], { + axis: null +}); + + +let values: VanillaTilt.TiltValues = element.getValues(); +values.percentageX; +values.percentageY; +values.tiltX; +values.tiltY;