From 2120d8b87f5e4c1a72a8244e6138ec452e4d0176 Mon Sep 17 00:00:00 2001 From: Matthew Merryfull Date: Sat, 13 Apr 2019 04:47:52 +1000 Subject: [PATCH] added updated type definitions for v1.6.1 and entry into package.json (#47) * added updated type definitions for v1.6.1 and entry into package.json * updated readme for type usage --- README.md | 5 +- package-lock.json | 30 +++++++--- package.json | 1 + vanilla-tilt.d.ts | 147 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 171 insertions(+), 12 deletions(-) create mode 100644 vanilla-tilt.d.ts diff --git a/README.md b/README.md index fed38b1..948d517 100644 --- a/README.md +++ b/README.md @@ -87,10 +87,7 @@ npm install vanilla-tilt #### Typings -Installing typings using npm -``` -npm install @types/vanilla-tilt -``` +Typings were out of date in the previous version, so I've rolled a copy directly into the application for you would be Typescript junkies! ### Credits diff --git a/package-lock.json b/package-lock.json index 6fc893b..88d56dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vanilla-tilt", - "version": "1.5.0", + "version": "1.6.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2342,12 +2342,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2362,17 +2364,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2489,7 +2494,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2501,6 +2507,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2515,6 +2522,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2522,12 +2530,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2546,6 +2556,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2626,7 +2637,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2638,6 +2650,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2759,6 +2772,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json index 6910df8..84ebf4b 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "module_es2015": "lib/vanilla-tilt.es2015.js", "jsnext:main": "lib/vanilla-tilt.es2015.js", "distrib": "dist/vanilla-tilt.js", + "types": "vanilla-tilt.d.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "npm run build:lib && cp ./README.md ./lib", diff --git a/vanilla-tilt.d.ts b/vanilla-tilt.d.ts new file mode 100644 index 0000000..4167d6a --- /dev/null +++ b/vanilla-tilt.d.ts @@ -0,0 +1,147 @@ +// Extended Type definitions for vanilla-tilt 1.6.1 +// Project: https://github.com/micku7zu/vanilla-tilt.js +// Definitions by: Livio Brunner +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * Options which configures the tilting + */ +export 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; + /** + * if it should have a "glare" effect + */ + glare?: boolean; + /** + * the maximum "glare" opacity + */ + "max-glare"?: number; + /** + * false = VanillaTilt creates the glare elements for you, otherwise + * you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself + */ + "glare-prerender"?: boolean; + + // Boolean to enable/disable device orientation detection, + gyroscope?: boolean; + + // css-selector or link to HTML-element what will be listen mouse events + "mouse-event-element"?: string; + + // This is the bottom limit of the device angle on X axis, + // meaning that a device rotated at this angle would tilt the element as if + // the mouse was on the left border of the element; + gyroscopeMinAngleX?: number + + // This is the top limit of the device angle on X axis, + // meaning that a device rotated at this angle would tilt the element as if + // the mouse was on the right border of the element; + gyroscopeMaxAngleX?: number + + // This is the bottom limit of the device angle on Y axis, + // meaning that a device rotated at this angle would tilt the element as if + // the mouse was on the top border of the element; + gyroscopeMinAngleY?: number + + // This is the top limit of the device angle on Y axis, + // meaning that a device rotated at this angle would tilt the element as if + // the mouse was on the bottom border of the element; + gyroscopeMaxAngleY?: number + +} + +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 default 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?: 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?: TiltOptions): void; + /** + * Resets the styling + */ + reset(): void; + /** + * Get values of instance + */ + getValues(): TiltValues; + /** + * Destroys the instance and removes the listeners. + */ + destroy(): void; + /** + * Start listening to events + */ + addEventListeners(): void; + /** + * Stop listening to events + */ + removeEventListener(): void; +}