Fix VanillaTilt typings

Use export default instead of just export
This commit is contained in:
Livio Brunner 2018-08-29 14:41:56 +02:00
parent 76979d06a0
commit a6b3df396b
No known key found for this signature in database
GPG Key ID: 6F5724914D0463F1
2 changed files with 76 additions and 81 deletions

View File

@ -4,104 +4,99 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
/**
* A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
* Options which configures the tilting
*/
export namespace VanillaTilt {
export interface TiltOptions {
/**
* Options which configures the tilting
* Reverse the tilt direction
*/
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;
}
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;
}
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 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;
}
interface HTMLVanillaTiltElement extends HTMLElement {
vanillaTilt: VanillaTilt;
}
export interface HTMLVanillaTiltElement extends HTMLElement {
vanillaTilt: VanillaTilt;
}
/**
* A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
*/
export class VanillaTilt {
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?: VanillaTilt.TiltOptions);
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?: VanillaTilt.TiltOptions): void;
static init(elements: HTMLElement | HTMLElement[], settings?: TiltOptions): void;
/**
* Resets the styling
*/
@ -109,7 +104,7 @@ export class VanillaTilt {
/**
* Get values of instance
*/
getValues(): VanillaTilt.TiltValues;
getValues(): TiltValues;
/**
* Destroys the instance and removes the listeners.
*/

View File

@ -1,4 +1,4 @@
import { VanillaTilt } from 'vanilla-tilt';
import VanillaTilt, { TiltValues } from 'vanilla-tilt';
const element: VanillaTilt = new VanillaTilt(document.createElement('a'), {
axis: 'y',
@ -24,7 +24,7 @@ VanillaTilt.init([document.createElement('a')], {
axis: null
});
const values: VanillaTilt.TiltValues = element.getValues();
const values: TiltValues = element.getValues();
values.percentageX;
values.percentageY;
values.tiltX;