@slidy/core - fix snap behaviour

Valexr · Sep 5, 2022 · 110d6cd · 110d6cd
1 parent 6091aac
commit 110d6cd
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 
 ## 3.6.0 - `on:mutate` event, auto reinit & other improvments
+- [fix `snap` behaviour]()
 - [add `scrollable` option](https://github.com/Valexr/Slidy/commit/fb6feabddfcaef98e5474ded4642770a71d46ba4)
 - [add reactive `position`](https://github.com/Valexr/Slidy/commit/ede73065fdd13bffc3281a5905735b30c810784f)
-- [fix `axis: 'y'` behavior](https://github.com/Valexr/Slidy/commit/e042f8feb152c57dba024c5a11c50c6df267f9eb)
+- [fix `axis: 'y'` behaviour](https://github.com/Valexr/Slidy/commit/e042f8feb152c57dba024c5a11c50c6df267f9eb)
 - [add `on:mutate` event & auto reinit](https://github.com/Valexr/Slidy/commit/ec03d72ca6303de89019adc7f37761605ccffd80)
 - [add `-webkit-user-select:none` css rule](https://github.com/Valexr/Slidy/commit/ad84096c7ecf8cf88d1a678d7b2d94c1550817f9)
 

diff --git a/packages/core/public/index.html b/packages/core/public/index.html
@@ -121,7 +121,7 @@
                     header.innerHTML = `Slidy <span>${version}</span><sub>nativeJS</sub><sub id="stats" />`;
                     getPhotos(node, utils.randomQ(1, 99), options.length).then(() => {
                         slidy = slidyCore(node, options);
-                        slidyT = slidyCore(thumbs, { index: options.index, snap: 'center' });
+                        slidyT = slidyCore(thumbs);
                         setTimeout(setEvents);
                     });
                 });

diff --git a/packages/core/src/lib/dom.ts b/packages/core/src/lib/dom.ts
@@ -23,11 +23,9 @@ export function dom(node: HTMLElement, options: Options) {
     const scrollable = full > node.offsetWidth;
     const edges = options.loop
         ? false
-        : ((reverse < 0 ? options.index === last : !options.index) &&
-            (options.direction as number) <= 0 &&
+        : ((options.direction as number) <= 0 &&
             Math.round(options.position as number) <= start) ||
-        ((reverse < 0 ? !options.index : options.index === last) &&
-            (options.direction as number) >= 0 &&
+        ((options.direction as number) >= 0 &&
             Math.round(options.position as number) >= end);
 
     Object.assign(options, { reverse, scrollable, vertical })
@@ -37,13 +35,13 @@ export function dom(node: HTMLElement, options: Options) {
             nodes.find((child: Child) => child.index === index) || nodes[0];
         const offset = (index: number) => node[size] - child(index)[size];
 
-        const start = pos(index, snap) <= pos((options.reverse as number) < 0 ? last : 0, 'start');
-        const end = pos(index, snap) >= pos((options.reverse as number) < 0 ? 0 : last, 'end');
-        const SNAP = start ? 'start' : end ? 'end' : options.snap;
+        const start = pos((reverse as number) < 0 ? last : 0, 'start')
+        const end = pos((reverse as number) < 0 ? 0 : last, 'end');
+        const current = pos(index, snap)
 
-        return pos(index, options.snap && options.snap !== 'deck' && !options.loop ? SNAP : snap);
+        return options.loop ? current : clamp(start, current, end);
 
-        function pos(index: number, snap: Options['snap']) {
+        function pos(index: number, snap: Options['snap']): number {
             const indented = child(index)[size] + gap * 2 < node[size];
             const indent = indented ? (options.indent as number) : offset(index) / 2 / gap || 0;
             const part = snap === 'start' ? 0 : snap === 'end' ? 1 : 0.5;

diff --git a/packages/core/src/slidy.ts b/packages/core/src/slidy.ts
@@ -117,8 +117,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
         }
 
         function edging(position: number): number {
-            const clamped = clamp($().start, position, $().end);
-            return !options.snap && !options.loop ? clamped : position;
+            return position;
         }
     }
 
@@ -213,14 +212,15 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
 
         const coord = coordinate(e, options) * (2 - GRAVITY);
         const index = INDEX + Math.sign(coord) * (CLAMP || 1);
-        const clamped = CLAMP || e.shiftKey || options.axis === 'y';
+        const clamped = CLAMP || e.shiftKey || options.axis === 'y'
         const sensed = $().sense(e, coord, SENSITY);
+        const snaped = options.snap || $().edges || clamped
         const pos = $().edges ? coord / 5 : coord;
         const ix = clamped ? index : INDEX;
         const tm = clamped ? 0 : DURATION / 2;
 
         !clamped && sensed && move(pos, INDEX);
-        wst = (options.snap || clamped) && sensed ? setTimeout(() => to(ix), tm) : undefined;
+        wst = snaped && sensed ? setTimeout(() => to(ix), tm) : undefined;
 
         !$().edges && e.stopPropagation();
     }