mirror of
https://github.com/micku7zu/vanilla-tilt.js
synced 2024-06-08 08:42:12 +02:00
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
This commit is contained in:
parent
fd0cc73b14
commit
2120d8b87f
|
@ -87,10 +87,7 @@ npm install vanilla-tilt
|
||||||
|
|
||||||
#### Typings
|
#### Typings
|
||||||
|
|
||||||
Installing typings using npm
|
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!
|
||||||
```
|
|
||||||
npm install @types/vanilla-tilt
|
|
||||||
```
|
|
||||||
|
|
||||||
### Credits
|
### Credits
|
||||||
|
|
||||||
|
|
30
package-lock.json
generated
30
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "vanilla-tilt",
|
"name": "vanilla-tilt",
|
||||||
"version": "1.5.0",
|
"version": "1.6.1",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -2342,12 +2342,14 @@
|
||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
|
@ -2362,17 +2364,20 @@
|
||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
|
@ -2489,7 +2494,8 @@
|
||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
|
@ -2501,6 +2507,7 @@
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
|
@ -2515,6 +2522,7 @@
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
|
@ -2522,12 +2530,14 @@
|
||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.2.4",
|
"version": "2.2.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.1",
|
"safe-buffer": "^5.1.1",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
|
@ -2546,6 +2556,7 @@
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
|
@ -2626,7 +2637,8 @@
|
||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
|
@ -2638,6 +2650,7 @@
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
|
@ -2759,6 +2772,7 @@
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
"module_es2015": "lib/vanilla-tilt.es2015.js",
|
"module_es2015": "lib/vanilla-tilt.es2015.js",
|
||||||
"jsnext:main": "lib/vanilla-tilt.es2015.js",
|
"jsnext:main": "lib/vanilla-tilt.es2015.js",
|
||||||
"distrib": "dist/vanilla-tilt.js",
|
"distrib": "dist/vanilla-tilt.js",
|
||||||
|
"types": "vanilla-tilt.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"build": "npm run build:lib && cp ./README.md ./lib",
|
"build": "npm run build:lib && cp ./README.md ./lib",
|
||||||
|
|
147
vanilla-tilt.d.ts
vendored
Normal file
147
vanilla-tilt.d.ts
vendored
Normal file
|
@ -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 <https://github.com/BrunnerLivio>
|
||||||
|
// 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;
|
||||||
|
}
|
Loading…
Reference in a new issue