diff --git a/packages/core/src/lib/dom.ts b/packages/core/src/lib/dom.ts index 819a82cc..ea046da2 100644 --- a/packages/core/src/lib/dom.ts +++ b/packages/core/src/lib/dom.ts @@ -11,12 +11,11 @@ export function dom(node: HTMLElement, options: Options) { const size = options.vertical ? 'offsetHeight' : 'offsetWidth'; const vertical = nodes[1].offsetTop - nodes[0].offsetTop >= nodes[0].offsetHeight; const reverse = Math.sign(nodes[last][coord]); - const gap = - length > 1 - ? nodes[last][coord] * reverse - - nodes[last - 1][coord] * reverse - - nodes[last - Math.max(reverse, 0)][size] - : 0; + const gap = length > 1 + ? nodes[last][coord] * reverse - + nodes[last - 1][coord] * reverse - + nodes[last - Math.max(reverse, 0)][size] + : 0; const start = distance(reverse < 0 ? last : 0, 'start'); const end = distance(reverse < 0 ? 0 : last, 'end'); const full = nodes.reduce((acc, cur) => acc += (cur[size] + gap), 0) @@ -51,8 +50,6 @@ export function dom(node: HTMLElement, options: Options) { } return { - end, - start, edges, distance, index(target: number): number { diff --git a/packages/core/src/slidy.ts b/packages/core/src/slidy.ts index 3ed40686..0a5693a9 100644 --- a/packages/core/src/slidy.ts +++ b/packages/core/src/slidy.ts @@ -1,7 +1,7 @@ import { coordinate, dispatch, indexing, listen, mount } from './lib/env'; import { clamp, loop, throttle } from './lib/utils'; import { dom } from './lib/dom'; -import type { Options, UniqEvent, EventMap, SlidyInstance } from './types'; +import type { Dom, Options, UniqEvent, EventMap, SlidyInstance } from './types'; /** * Simple, configurable, nested & reusable sliding action script @@ -24,7 +24,8 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance ...opts, }; - let hix = 0, + let $: () => Dom, + hix = 0, hip = 0, raf = 0, ets = 0, @@ -71,8 +72,6 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance dispatch(node, 'mutate', { ML }); }); - const $ = () => dom(node, options); - const css = 'outline:0;overflow:hidden;user-select:none;-webkit-user-select:none;'; init(); @@ -80,6 +79,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance function init() { mount(node) .then(() => { + $ = () => dom(node, options) node.style.cssText += css; node.onwheel = throttle(onWheel, DURATION, CLAMP); @@ -120,9 +120,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance function scroll(index: number, amplitude: number): void { const time = performance.now(); const snaped = options.snap || options.loop || $().edges; - const target = snaped - ? $().distance(index) - : clamp($().start, POSITION + amplitude, $().end); + const target = snaped ? $().distance(index) : POSITION + amplitude; const duration = DURATION * clamp(1, Math.abs(index - hix), 2); amplitude = target - POSITION; diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index d67d61be..8cdc9c6a 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -123,6 +123,16 @@ export type AnimationArgs = { */ export type AnimationFunc = (args: AnimationArgs) => Partial<CSSStyleDeclaration>; +export interface Dom { + edges: boolean; + distance: (index: number, snap?: ("center" | "end" | "start" | "deck") | undefined) => number; + index(target: number): number; + position(replace?: boolean | undefined): number; + swap(dir: number): number; + sense(e: UniqEvent, pos: number, sensity?: number): boolean; + animate(): void; +} + export interface SlidyInstance { /** * Init slidy() instance