@slidy/core - add scrollable to options

package.json

@@ -101,7 +101,7 @@
     },
     "devDependencies": {
         "@types/eslint": "^8.4.6",
-        "@types/node": "^18.7.14",
+        "@types/node": "^18.7.15",
         "@typescript-eslint/eslint-plugin": "^5.36.1",
         "@typescript-eslint/parser": "^5.36.1",
         "derver": "^0.5.3",

packages/core/README.MD

@@ -146,15 +146,12 @@ If you need keyboard navigation just set `tabindex=0` on target node.
 
 ### Internal calculated - readonly
 
-| Key         | Type     | Description |
-| :---------- | :------- | :---------- |
-| `direction` | `number` | Children move direction |
-
-#### Avialable only in Animation Function
-| Key         | Type     | Description |
-| :---------- | :------- | :---------- |
-| `vertical`  | `number` | Children vertical flow |
-| `reverse`   | `number` | Children reverse flow: `-1` or `1` |
+| Key          | Type     | Description |
+| :----------- | :------- | :---------- |
+| `direction`  | `number` | Children move direction |
+| `reverse`    | `number` | Children reverse flow: `-1` or `1` |
+| `vertical`   | `number` | Children vertical flow |
+| `scrollable` | `number` | Children full size with gaps > target node size |
 
 ### Usage
 

packages/core/public/dev.css

@@ -251,7 +251,7 @@ section {
 }
 
 #node,
-nav#thumbs {
+#thumbs {
     display: flex;
     flex-flow: var(--flow);
     gap: var(--gap);
@@ -260,14 +260,12 @@ nav#thumbs {
     height: var(--height, 375px);
     padding: var(--gap) 0;
     list-style: none;
-    -webkit-tap-highlight-color: transparent;
 }
 
 #node li,
-nav#thumbs button {
+#thumbs button {
     flex: 0 0 var(--width, auto);
     width: var(--width, auto);
-    min-height: 100%;
     max-width: 85%;
     max-height: 100%;
     box-sizing: border-box;
@@ -278,15 +276,16 @@ nav#thumbs button {
     border-radius: var(--radius-3);
 }
 
-nav#thumbs button {
+#thumbs button {
+    min-height: 100%;
     box-shadow: none;
     background-size: cover;
     background-blend-mode: luminosity;
     opacity: 0.25;
 }
 
-nav#thumbs button:hover,
-nav#thumbs button.active {
+#thumbs button:hover,
+#thumbs button.active {
     opacity: 1;
     background-blend-mode: normal;
 }

packages/core/public/index.html

@@ -96,7 +96,7 @@
                 clamp: 0,
                 indent: 1,
                 length: 9,
-                sensity: 5,
+                sensity: 2.5,
                 gravity: 1.2,
                 duration: 375,
                 loop: false,
@@ -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 });
+                        slidyT = slidyCore(thumbs, { index: options.index, snap: 'center' });
                         setTimeout(setEvents);
                     });
                 });

packages/core/src/lib/dom.ts

@@ -7,9 +7,9 @@ export function dom(node: HTMLElement, options: Options) {
     const indexes = [...Array(length).keys()];
     const last = length - 1;
     const cix = Math.floor(length / 2);
-    const vertical = nodes[1].offsetTop - nodes[0].offsetTop >= nodes[0].offsetHeight
-    const coord = vertical ? 'offsetTop' : 'offsetLeft';
-    const size = vertical ? 'offsetHeight' : 'offsetWidth';
+    const coord = options.vertical ? 'offsetTop' : 'offsetLeft';
+    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
@@ -30,20 +30,22 @@ export function dom(node: HTMLElement, options: Options) {
             (options.direction as number) >= 0 &&
             Math.round(options.position as number) >= end);
 
+    Object.assign(options, { reverse, scrollable, vertical })
+
     function distance(index: number, snap = options.snap) {
         const child = (index: number) =>
             nodes.find((child: Child) => child.index === index) || nodes[0];
         const offset = (index: number) => node[size] - child(index)[size];
 
-        const indented = child(index)[size] + gap * 2 < node[size];
-        const indent = indented ? (options.indent as number) : offset(index) / 2 / gap || 0;
-        const start = pos(index, snap) <= pos(reverse < 0 ? last : 0, 'start');
-        const end = pos(index, snap) >= pos(reverse < 0 ? 0 : last, 'end');
+        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;
 
         return pos(index, options.snap && options.snap !== 'deck' && !options.loop ? SNAP : snap);
 
         function pos(index: number, snap: Options['snap']) {
+            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;
             const edge = snap === 'start' ? -indent : snap === 'end' ? indent : 0;
             return child(index)[coord] - offset(index) * part + gap * edge;
@@ -55,7 +57,6 @@ export function dom(node: HTMLElement, options: Options) {
         start,
         edges,
         distance,
-        scrollable,
         index(target: number): number {
             const dist = (index: number) => Math.abs(distance(index) - target);
             return indexes.reduce((prev, curr) => (dist(curr) < dist(prev) ? curr : prev), 0);
@@ -75,7 +76,7 @@ export function dom(node: HTMLElement, options: Options) {
             if (edge) node.prepend(nodes[edge]);
             else node.append(nodes[edge]);
 
-            return (nodes[edge][size] + gap) * (direction * reverse);
+            return (nodes[edge][size] + gap) * (direction * (options.reverse as number));
         },
         sense(e: UniqEvent, pos: number, SENSITY = options.sensity as number): boolean {
             return e.shiftKey || options.clamp || options.axis === 'y'
@@ -95,21 +96,11 @@ export function dom(node: HTMLElement, options: Options) {
                 child.exp = clamp(0, (child.size - Math.abs(child.track)) / child.size, 1);
 
                 const pos = options.snap === 'deck' ? child.dist : (options.position as number);
-                const translate = vertical ? `translateY(${-pos}px)` : `translateX(${-pos}px)`;
-                const style = scrollable ?
-                    options.animation
-                        ? options.animation({
-                            node,
-                            child,
-                            options: Object.assign(options, {
-                                vertical,
-                                reverse,
-                            }),
-                            translate,
-                        })
-                        : { transform: translate } : { transform: '' };
+                const translate = options.vertical ? `translateY(${-pos}px)` : `translateX(${-pos}px)`;
+                const args = { node, child, options, translate }
+                const style = options.animation ? options.animation(args) : { transform: translate };
 
-                Object.assign(child.style, style);
+                Object.assign(child.style, scrollable ? style : { transform: '' });
             });
         },
     };

packages/core/src/lib/utils.ts

@@ -13,13 +13,13 @@ function throttle(
 ): (args: any) => void {
     return th
         ? (args) => {
-              if (!wait) {
-                  fn(args);
-                  wait = true;
-                  clearTimeout(tm);
-                  tm = setTimeout(() => (wait = false), ms);
-              }
-          }
+            if (!wait) {
+                fn(args);
+                wait = true;
+                clearTimeout(tm);
+                tm = setTimeout(() => (wait = false), ms);
+            }
+        }
         : (args) => fn(args);
 }
 
@@ -33,4 +33,8 @@ function loop(
     return array;
 }
 
-export { clamp, throttle, loop };
+function int(number: any) {
+    return number as number
+}
+
+export { clamp, throttle, loop, int };

packages/core/src/slidy.ts

@@ -8,7 +8,7 @@ import type { Options, UniqEvent, EventMap, SlidyInstance } from './types';
  * @see https://github.com/Valexr/slidy/tree/master/packages/core
  */
 export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance {
-    const options: Options = {
+    const options = {
         index: 0,
         position: 0,
         clamp: 0,

packages/core/src/types.ts

@@ -68,6 +68,11 @@ export interface Options {
      * @readonly
      */
     reverse?: number;
+    /**
+     * Children full width size gaps > target node size
+     * @readonly
+     */
+    scrollable?: boolean;
 }
 
 type Axis = 'x' | 'y' | 'both';