mirror of
https://github.com/micku7zu/vanilla-tilt.js
synced 2024-06-10 09:42:11 +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
|
||||
|
||||
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
|
||||
|
||||
|
|
30
package-lock.json
generated
30
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
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