From 3b975731921226e5c5d5cdfb07833c34ecedfa11 Mon Sep 17 00:00:00 2001 From: yitengjun Date: Tue, 23 May 2023 23:22:05 +0900 Subject: [PATCH] fix: update TypeScript to support optional settings --- dist/types/index.d.ts | 4 ++-- dist/types/parallax.d.ts | 2 +- src/index.ts | 4 ++-- src/parallax.ts | 16 ++++++++-------- types/index.d.ts | 10 +++++----- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts index dd378d0..9dd5e43 100644 --- a/dist/types/index.d.ts +++ b/dist/types/index.d.ts @@ -1,14 +1,14 @@ import type { UkiyoOptions, TElement } from '../types/index'; export default class Ukiyo { private elements; - private options; + private options?; private instances; private externalRAF; private requestId?; private timer?; private onResizeEvent; private isInit; - constructor(elements: TElement | null, options: UkiyoOptions); + constructor(elements: TElement | null, options?: UkiyoOptions); /** * Initializes */ diff --git a/dist/types/parallax.d.ts b/dist/types/parallax.d.ts index 873684f..6293a33 100644 --- a/dist/types/parallax.d.ts +++ b/dist/types/parallax.d.ts @@ -13,7 +13,7 @@ export declare class Parallax { private wrapperHeight?; private damp; private elementTagName; - constructor(element: HTMLElement, options: Partial); + constructor(element: HTMLElement, options?: UkiyoOptions); /** * Create Parallax */ diff --git a/src/index.ts b/src/index.ts index b51b361..e7aee86 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,7 @@ import type { UkiyoOptions, TElement } from '../types/index'; export default class Ukiyo { private elements: HTMLElement[] = []; - private options!: UkiyoOptions; + private options?: UkiyoOptions; private instances: Parallax[]; private externalRAF: boolean; private requestId?: number; @@ -12,7 +12,7 @@ export default class Ukiyo { private onResizeEvent: EventListenerOrEventListenerObject; private isInit: boolean; - constructor(elements: TElement | null, options: UkiyoOptions) { + constructor(elements: TElement | null, options?: UkiyoOptions) { if (!elements) { throw new Error(`Argument 'elements' is null.`); } diff --git a/src/parallax.ts b/src/parallax.ts index a6ded0c..51eeaef 100644 --- a/src/parallax.ts +++ b/src/parallax.ts @@ -17,7 +17,7 @@ export class Parallax { private damp: number; private elementTagName: string; - constructor(element: HTMLElement, options: Partial) { + constructor(element: HTMLElement, options?: UkiyoOptions) { this.element = element; this.wrapper = document.createElement('div'); @@ -83,7 +83,7 @@ export class Parallax { // Difference between the height of the element and the wrapper this.overflow = - Math.floor((elementHeight - elementHeight * this.options.scale) * 10) / + Math.floor((elementHeight - elementHeight * this.options.scale!) * 10) / 10; // When using both margin: auto and position: absolute @@ -189,7 +189,7 @@ export class Parallax { wrapperStyle.setProperty('height', elementHeight + 'px', 'important'); elementStyle.setProperty( 'height', - elementHeight * this.options.scale + 'px', + elementHeight * this.options.scale! + 'px', 'important', ); @@ -203,7 +203,7 @@ export class Parallax { const elementOptionWrapperClass: string | null | undefined = this.element.getAttribute('data-u-wrapper-class'); const customClass: string | null = - elementOptionWrapperClass || this.options.wrapperClass; + elementOptionWrapperClass || this.options.wrapperClass!; if (customClass) { this.wrapper.classList.add(customClass); @@ -303,9 +303,9 @@ export class Parallax { const percentage = Math.min(100, Math.max(0, percentageDistance)) / 100; const speedDiff = - (this.overflow! * this.options.speed - this.overflow!) / 2; + (this.overflow! * this.options.speed! - this.overflow!) / 2; const translateValue = - this.overflow! * (1 - percentage) * this.options.speed * this.damp - + this.overflow! * (1 - percentage) * this.options.speed! * this.damp - speedDiff; return Number(translateValue.toFixed(4)); @@ -317,8 +317,8 @@ export class Parallax { private calcDamp(screenSize: number): number { const max = 1; const min = 0.5; - let scale = this.options.scale; - let speed = this.options.speed; + let scale = this.options.scale!; + let speed = this.options.speed!; if ((speed >= 1.4 || scale >= 1.4) && screenSize <= 1000) { if (scale < 1) scale = 1; diff --git a/types/index.d.ts b/types/index.d.ts index af4a999..1acf178 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -13,29 +13,29 @@ export interface UkiyoOptions { * Parallax scale * @default 1.5 */ - scale: number; + scale?: number; /** * Parallax speed * @default 1.5 */ - speed: number; + speed?: number; /** * Wrapper element class * @default null */ - wrapperClass: string | null; + wrapperClass?: string | null; /** * Enabling the CSS will-change property during parallax animation * @default false */ - willChange: boolean; + willChange?: boolean; /** * Animate parallax using external requestAnimationFrame() * @default false */ - externalRAF: boolean; + externalRAF?: boolean; }