Skip to content

Commit

Permalink
@slidy/core - fix axis: 'y' & remove _prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
@Valexr
Valexr committed Sep 1, 2022
1 parent 4080927 commit e042f8f
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 50 deletions.
8 changes: 4 additions & 4 deletions packages/core/README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,14 +147,14 @@ If you need keyboard navigation just set `tabindex=0` on target node.

| Key | Type | Description |
| :---------- | :------- | :---------- |
| `_position` | `number` | Current position |
| `_direction` | `number` | Children move direction |
| `position` | `number` | Current position |
| `direction` | `number` | Children move direction |

#### Avialable only in Animation Function
| Key | Type | Description |
| :---------- | :------- | :---------- |
| `_vertical` | `number` | Children axis flow: `0` or any `Number` as `true` |
| `_reverse` | `number` | Children reverse flow: `-1` or `1` |
| `vertical` | `number` | Children axis flow: `0` or any `Number` as `true` |
| `reverse` | `number` | Children reverse flow: `-1` or `1` |

### Usage

Expand Down
50 changes: 25 additions & 25 deletions packages/core/src/lib/dom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@ 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;
const coord = _vertical ? 'offsetTop' : 'offsetLeft';
const size = _vertical ? 'offsetHeight' : 'offsetWidth';
const _reverse = Math.sign(nodes[last][coord]);
const vertical = nodes[1].offsetTop - nodes[0].offsetTop;
const coord = vertical ? 'offsetTop' : 'offsetLeft';
const size = vertical ? 'offsetHeight' : 'offsetWidth';
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]
? 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 start = distance(reverse < 0 ? last : 0, 'start');
const end = distance(reverse < 0 ? 0 : last, 'end');
const scrollable = Math.abs(end - start) > gap * 2;
const edges = options.loop
? false
: ((_reverse < 0 ? options.index === last : !options.index) &&
(options._direction as number) <= 0 &&
(options._position as number) < start) ||
((_reverse < 0 ? !options.index : options.index === last) &&
(options._direction as number) > 0 &&
(options._position as number) > end);
: ((reverse < 0 ? options.index === last : !options.index) &&
(options.direction as number) < 0 &&
Math.round(options.position as number) <= start) ||
((reverse < 0 ? !options.index : options.index === last) &&
(options.direction as number) > 0 &&
Math.round(options.position as number) >= end);

function distance(index: number, snap = options.snap) {
const child = (index: number) =>
Expand All @@ -36,8 +36,8 @@ export function dom(node: HTMLElement, options: Options) {

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(reverse < 0 ? last : 0, 'start');
const end = pos(index, snap) >= pos(reverse < 0 ? 0 : last, 'end');
const SNAP = start ? 'start' : end ? 'end' : options.snap;

return pos(index, options.snap && options.snap !== 'deck' && !options.loop ? SNAP : snap);
Expand Down Expand Up @@ -74,11 +74,11 @@ 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 * reverse);
},
sense(e: UniqEvent, pos: number, SENSITY = options.sensity as number): boolean {
return options.axis === 'y' && e.type === 'touchmove'
? !edges
return (e.shiftKey || options.clamp || options.axis === 'y')
? e.type === 'touchmove' ? !edges : true
: Math.abs(pos) >= SENSITY;
},
animate(): void {
Expand All @@ -87,19 +87,19 @@ export function dom(node: HTMLElement, options: Options) {
child.active = options.loop ? cix : (options.index as number);
child.size = child[size] + gap;
child.dist = distance(child.index);
child.track = (options._position as number) - child.dist;
child.track = (options.position as number) - child.dist;
child.turn = clamp(-1, child.track / child.size, 1);
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 pos = options.snap === 'deck' ? child.dist : (options.position as number);
const translate = vertical ? `translateY(${-pos}px)` : `translateX(${-pos}px)`;
const style = options.animation
? options.animation({
node,
child,
options: Object.assign(options, {
_vertical,
_reverse,
vertical,
reverse,
}),
translate,
})
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/lib/env.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function indexing(node: HTMLElement, options: Options, index: number): number {
function coordinate(e: UniqEvent, options: Options): number {
if (e.type === 'wheel') {
const X = Math.abs(e.deltaX) >= Math.abs(e.deltaY);
return X ? e.deltaX : e.shiftKey || options.axis === 'y' ? e.deltaY : 0;
return (e.shiftKey || options.axis === 'y') ? e.deltaY : X ? e.deltaX : 0;
} else {
const mix = (e: UniqEvent): Touch => (e.touches && e.touches[0]) || e;
return options.axis === 'y' ? mix(e).pageY : mix(e).pageX;
Expand Down
39 changes: 24 additions & 15 deletions packages/core/src/slidy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
shifted = false,
wst: NodeJS.Timeout | undefined,
INDEX = (hix = options.index as number),
POSITION = options._position as number,
POSITION = options.position as number,
DURATION = (options.duration as number) / 2,
SENSITY = options.sensity as number,
GRAVITY = options.gravity as number,
Expand Down Expand Up @@ -93,9 +93,9 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
}

function move(pos: number, index?: number): void {
options._direction = Math.sign(pos);
options.direction = Math.sign(pos);
POSITION += positioning(pos);
POSITION = options._position = edging(POSITION);
POSITION = options.position = edging(POSITION);
INDEX = options.index = $().index(POSITION);

GRAVITY = $().edges ? 1.8 : (options.gravity as number);
Expand All @@ -115,7 +115,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 !options.snap && !options.loop ? clamped : position
}
}

Expand Down Expand Up @@ -160,6 +160,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
function onDown(e: UniqEvent): void {
clear();

SENSITY = options.sensity as number;
hip = coordinate(e, options);
ets = e.timeStamp;
track = 0;
Expand Down Expand Up @@ -197,7 +198,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
scroll(clamping(index, options), amplitude);

function clamping(index: number, options: Options): number {
const range = CLAMP * (options._direction as number);
const range = CLAMP * (options.direction as number);
index = CLAMP && index - hix ? INDEX + range : index;

return indexing(node, options, index);
Expand All @@ -209,13 +210,14 @@ 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;
const clamped = CLAMP || e.shiftKey || options.axis === 'y'
const sensed = $().sense(e, coord, SENSITY)
const pos = $().edges ? coord / 5 : coord;
const ix = clamped ? index : INDEX;
const tm = clamped ? 0 : DURATION / 2;

!clamped && $().sense(e, pos, SENSITY) && move(pos, INDEX);
wst = (options.snap || clamped) && $().sense(e, pos, SENSITY) ? setTimeout(() => to(ix), tm) : undefined;
!clamped && sensed && move(pos, INDEX);
wst = (options.snap || clamped) && sensed ? setTimeout(() => to(ix), tm) : undefined;

!$().edges && e.stopPropagation();
}
Expand All @@ -224,13 +226,16 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
if (e.composedPath().includes(node)) {
if (
Math.abs(e.deltaX) >= Math.abs(e.deltaY) ||
e.shiftKey ||
(options.axis === 'y' && !$().edges)
(options.axis === 'y' && !$().edges) ||
e.shiftKey
)
e.preventDefault();
if (e.shiftKey !== shifted) {
node.onwheel = throttle(onWheel, DURATION, e.shiftKey);
shifted = e.shiftKey;

const throttled = CLAMP > 0 || options.axis === 'y' || e.shiftKey

if (shifted !== throttled) {
node.onwheel = throttle(onWheel, DURATION, throttled);
shifted = throttled
}
}
}
Expand Down Expand Up @@ -271,12 +276,16 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
break;
case 'clamp':
CLAMP = options[key] = value;
node.onwheel = throttle(onWheel, DURATION, value);
// node.onwheel = throttle(onWheel, DURATION, value);
break;
// case 'axis':
// options[key] = value;
// node.onwheel = throttle(onWheel, DURATION, value === 'y' ? true : false);
// break;

default:
options[key] = value as never;
POSITION = options._position = $().position(false);
POSITION = options.position = $().position(false);
to(INDEX);
break;
}
Expand Down
10 changes: 5 additions & 5 deletions packages/core/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,22 +53,22 @@ export interface Options {
* Current position
* @readonly
*/
_position?: number;
position?: number;
/**
* Children move direction
* @readonly
*/
_direction?: number;
direction?: number;
/**
* Children axis flow: `0` or any `Number` as `true`
* @readonly
*/
_vertical?: number;
vertical?: number;
/**
* Children reverse flow: `-1` or `1`
* @readonly
*/
_reverse?: number;
reverse?: number;
}

type Axis = 'x' | 'y' | 'both';
Expand Down Expand Up @@ -135,5 +135,5 @@ export interface SlidyInstance {
/**
* Remove event listners, observers & defaulted props on `slidy()` instance
*/
destroy: () => void;
destroy: () => Promise<void>;
}

0 comments on commit e042f8f

Please sign in to comment.