From fb6feabddfcaef98e5474ded4642770a71d46ba4 Mon Sep 17 00:00:00 2001 From: Valexr Date: Mon, 5 Sep 2022 12:08:23 +0300 Subject: [PATCH] @slidy/core - add scrollable to options --- package.json | 2 +- packages/core/README.MD | 15 ++++++------- packages/core/public/dev.css | 13 ++++++------ packages/core/public/index.html | 4 ++-- packages/core/src/lib/dom.ts | 37 +++++++++++++-------------------- packages/core/src/lib/utils.ts | 20 +++++++++++------- packages/core/src/slidy.ts | 2 +- packages/core/src/types.ts | 5 +++++ 8 files changed, 47 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index fd8dee9d..4f6429f6 100644 --- a/package.json +++ b/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", diff --git a/packages/core/README.MD b/packages/core/README.MD index 258e53ed..dcfed6f6 100644 --- a/packages/core/README.MD +++ b/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 diff --git a/packages/core/public/dev.css b/packages/core/public/dev.css index 88c54b93..122d3ba1 100644 --- a/packages/core/public/dev.css +++ b/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; } diff --git a/packages/core/public/index.html b/packages/core/public/index.html index adc93f62..dd867ba1 100644 --- a/packages/core/public/index.html +++ b/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 ${version}nativeJS`; 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); }); }); diff --git a/packages/core/src/lib/dom.ts b/packages/core/src/lib/dom.ts index 892c529e..747f59cc 100644 --- a/packages/core/src/lib/dom.ts +++ b/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: '' }); }); }, }; diff --git a/packages/core/src/lib/utils.ts b/packages/core/src/lib/utils.ts index ab671a8a..2bcedbcd 100644 --- a/packages/core/src/lib/utils.ts +++ b/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 }; diff --git a/packages/core/src/slidy.ts b/packages/core/src/slidy.ts index ace2201e..87ff28ef 100644 --- a/packages/core/src/slidy.ts +++ b/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): SlidyInstance { - const options: Options = { + const options = { index: 0, position: 0, clamp: 0, diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 49e7e91d..d67d61be 100644 --- a/packages/core/src/types.ts +++ b/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';