@slidy/core - fix dom() init

Valexr · Sep 5, 2022 · f5a0d0b · f5a0d0b
1 parent 84afaf8
commit f5a0d0b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git 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
@@ -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,15 +72,14 @@ 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();
 
     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
@@ -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