From bdfc23b2ca40ffb4f82410205b76ba854deaab2e Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 13:41:09 +0100 Subject: [PATCH 01/11] fix: test README cleanup --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 3afe682..8b6b45a 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,13 @@ While this project is still in its infancy, it'll be documented here. It will ev npm install svelte-interactions ``` +## Table of Contents + +- [Press Interaction](#press-interaction) +- [Press Interaction](#press-interaction) +- [Press Interaction](#press-interaction) +- [Press Interaction](#press-interaction) + ## Press Interaction The `press` interaction is used to implement buttons, links, and other pressable elements. It handles mouse, touch, and keyboard interactions, and ensures that the element is accessible to screen readers and keyboard users. @@ -39,7 +46,10 @@ No more having to wrangle all those event handlers yourself! Just and use the `p ``` +
+ ### createPress + Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -55,6 +65,8 @@ Creates a new `press` interaction instance. Each element should have its own ins ``` +
+ #### PressConfig `createPress` takes in an optional `PressConfig` object, which can be used to customize the interaction. From 717e69eb1a19c374732491dbe821f78346549c2c Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 13:41:57 +0100 Subject: [PATCH 02/11] fix: test headers --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b6b45a..baec40a 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ No more having to wrangle all those event handlers yourself! Just and use the `p
-### createPress +

createPress

 Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: From 7b79d776a2ab35818e1cf44fccc6575c80362da5 Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 13:48:53 +0100 Subject: [PATCH 03/11] fix: more detail/summary sections --- README.md | 106 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 86 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index baec40a..aee1585 100644 --- a/README.md +++ b/README.md @@ -46,10 +46,8 @@ No more having to wrangle all those event handlers yourself! Just and use the `p ``` -
- -

createPress

- + +### createPress Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -65,9 +63,10 @@ Creates a new `press` interaction instance. Each element should have its own ins ``` -
- -#### PressConfig +
+ +

PressConfig

+ `createPress` takes in an optional `PressConfig` object, which can be used to customize the interaction. @@ -157,7 +156,12 @@ type PressHandlers = { }; ``` -### PressResult +
+ +
+ +

PressResult

+ The `createPress` function returns a `PressResult` object, which contains the `pressAction` action, and the `isPressed` state. More returned properties may be added in the future if needed. @@ -170,7 +174,12 @@ type PressResult = { }; ``` -### Custom Events +
+ +
+ +

CustomEvent

+ When you apply the `pressAction` to an element, it will dispatch custom `on:press*` events. You can use these or the `PressHandlers` to handle the various press events. @@ -203,7 +212,12 @@ type PressActionReturn = ActionReturn< >; ``` -#### PressEvent +
+ +
+ +

PressEvent

+ This is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them. @@ -241,6 +255,8 @@ interface PressEvent { } ``` +
+ ## Long Press Interaction The `hover` interaction provides an API for consistent long press behavior across all browsers and devices, with support for a custom time threshold and accessible description. @@ -264,7 +280,10 @@ The `hover` interaction provides an API for consistent long press behavior acros ``` -### createLongPress +
+ +

createLongPress

+ Creates a new `longpress` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -280,7 +299,12 @@ Creates a new `longpress` interaction instance. Each element should have its own ``` -#### LongPressConfig +
+ +
+ +

LongPressConfig

+ `createLongPress` takes in an optional `LongPressConfig` object, which can be used to customize the interaction. @@ -336,7 +360,12 @@ export type LongPressHandlers = { }; ``` -### LongPressResult +
+ +
+ +

LongPressResult

+ The `createLongPress` function returns a `LongPressResult` object, which contains the `longPressAction` action, and the `description` state. More returned properties may be added in the future if needed. @@ -359,7 +388,12 @@ type LongPressResult = { }; ``` -### Custom Events +
+ +
+ +

Custom Events

+ When you apply the `longPressAction` to an element, it will dispatch custom `on:longpress*` events for events you aren't handling via the `LongPressConfig` props. You can use these or the `LongPressHandlers` to handle the various `longpress` events. @@ -387,7 +421,12 @@ type LongPressActionReturn = ActionReturn< >; ``` -#### PressEvent +
+ +
+ +

PressEvent

+ This is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them. @@ -418,6 +457,8 @@ interface PressEvent { } ``` +
+ ## Hover Interaction The `hover` interaction provides an API for consistent hover behavior across all browsers and devices, ignoring emulated mouse events on touch devices. @@ -444,7 +485,10 @@ The `hover` interaction provides an API for consistent hover behavior across all ``` -### createHover +
+ +

createHover

+ Creates a new `hover` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple elements you wanted to apply hover state to on a page: @@ -460,7 +504,12 @@ Creates a new `hover` interaction instance. Each element should have its own ins
Hoverable element two
``` -#### HoverConfig +
+ +
+ +

HoverConfig

+ The `createHover` function takes in an optional `HoverConfig` object, which can be used to customize the interaction. @@ -502,7 +551,12 @@ type HoverHandlers = { }; ``` -### HoverResult +
+ +
+ +

HoverResult

+ The `createHover` function returns a `HoverResult` object, which contains the `hoverAction` action, and the `isHovering` state. More returned properties may be added in the future if needed. @@ -521,7 +575,12 @@ export type HoverResult = { }; ``` -### Custom Events +
+ +
+ +

Custom Events

+ When you apply the `hoverAction` to an element, it will dispatch custom `on:hover*` events. You can use these or the `HoverHandlers` to handle the various hover events. @@ -542,7 +601,12 @@ type HoverActionReturn = ActionReturn< >; ``` -#### HoverEvent +
+ +
+ +

HoverEvent

+ This is the event object dispatched by the custom `on:hover*` events, and is also passed to the `HoverHandlers` should you choose to use them. @@ -556,3 +620,5 @@ interface HoverEvent { target: Element; } ``` + +
From 834f74777017cb319f128f12a67541d378d51def Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 13:49:53 +0100 Subject: [PATCH 04/11] fix: table of contents --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index aee1585..4eb485d 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ npm install svelte-interactions ## Table of Contents - [Press Interaction](#press-interaction) -- [Press Interaction](#press-interaction) -- [Press Interaction](#press-interaction) -- [Press Interaction](#press-interaction) +- [Long Press Interaction](#long-press-interaction) +- [Hover Interaction](#hover-interaction) +- [Move Interaction](#move-interaction) ## Press Interaction From 8c65ec578fcc075f7a2a449b7f39b6d1064a5f32 Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 13:54:01 +0100 Subject: [PATCH 05/11] feat: initial 'Move' section --- README.md | 40 ++++++++++++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4eb485d..49b6891 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,10 @@ No more having to wrangle all those event handlers yourself! Just and use the `p ``` -### createPress +
+ +

`createPress`

+ Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -63,6 +66,7 @@ Creates a new `press` interaction instance. Each element should have its own ins ``` +

PressConfig

@@ -157,7 +161,6 @@ type PressHandlers = { ```
-

PressResult

@@ -175,7 +178,6 @@ type PressResult = { ```
-

CustomEvent

@@ -213,7 +215,6 @@ type PressActionReturn = ActionReturn< ```
-

PressEvent

@@ -282,7 +283,7 @@ The `hover` interaction provides an API for consistent long press behavior acros
-

createLongPress

+

`createLongPress`

 Creates a new `longpress` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -487,7 +488,7 @@ The `hover` interaction provides an API for consistent hover behavior across all
-

createHover

+

`createHover`

 Creates a new `hover` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple elements you wanted to apply hover state to on a page: @@ -622,3 +623,30 @@ interface HoverEvent { ```
+ +## Move Interaction + +The `move` interaction provides an API for consistent move behavior across all browsers and devices, ignoring emulated mouse events on touch devices. + +#### Basic Usage + +```svelte + + + +``` + From 6298cb3eed9b020fa9785865e8ff78d6db2d896f Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 13:58:37 +0100 Subject: [PATCH 06/11] fix: move cleanup --- README.md | 59 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 49b6891..7a6c5db 100644 --- a/README.md +++ b/README.md @@ -46,10 +46,11 @@ No more having to wrangle all those event handlers yourself! Just and use the `p ``` -
-

`createPress`

+
+ `createPress` +
Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -67,9 +68,10 @@ Creates a new `press` interaction instance. Each element should have its own ins ```
+
-

PressConfig

+
PressConfig
 `createPress` takes in an optional `PressConfig` object, which can be used to customize the interaction. @@ -161,9 +163,10 @@ type PressHandlers = { ```
+
-

PressResult

+
PressResult
 The `createPress` function returns a `PressResult` object, which contains the `pressAction` action, and the `isPressed` state. More returned properties may be added in the future if needed. @@ -178,9 +181,10 @@ type PressResult = { ```
+
-

CustomEvent

+
CustomEvent
 When you apply the `pressAction` to an element, it will dispatch custom `on:press*` events. You can use these or the `PressHandlers` to handle the various press events. @@ -215,9 +219,10 @@ type PressActionReturn = ActionReturn< ```
+
-

PressEvent

+
PressEvent
 This is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them. @@ -283,7 +288,7 @@ The `hover` interaction provides an API for consistent long press behavior acros
-

`createLongPress`

+
`createLongPress`
 Creates a new `longpress` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -304,7 +309,7 @@ Creates a new `longpress` interaction instance. Each element should have its own
-

LongPressConfig

+
LongPressConfig
 `createLongPress` takes in an optional `LongPressConfig` object, which can be used to customize the interaction. @@ -365,7 +370,7 @@ export type LongPressHandlers = {
-

LongPressResult

+
LongPressResult
 The `createLongPress` function returns a `LongPressResult` object, which contains the `longPressAction` action, and the `description` state. More returned properties may be added in the future if needed. @@ -393,7 +398,7 @@ type LongPressResult = {
-

Custom Events

+
Custom Events
 When you apply the `longPressAction` to an element, it will dispatch custom `on:longpress*` events for events you aren't handling via the `LongPressConfig` props. You can use these or the `LongPressHandlers` to handle the various `longpress` events. @@ -426,7 +431,7 @@ type LongPressActionReturn = ActionReturn<
-

PressEvent

+
PressEvent
 This is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them. @@ -488,7 +493,7 @@ The `hover` interaction provides an API for consistent hover behavior across all
-

`createHover`

+
`createHover`
 Creates a new `hover` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple elements you wanted to apply hover state to on a page: @@ -509,7 +514,7 @@ Creates a new `hover` interaction instance. Each element should have its own ins
-

HoverConfig

+
HoverConfig
 The `createHover` function takes in an optional `HoverConfig` object, which can be used to customize the interaction. @@ -556,7 +561,7 @@ type HoverHandlers = {
-

HoverResult

+
HoverResult
 The `createHover` function returns a `HoverResult` object, which contains the `hoverAction` action, and the `isHovering` state. More returned properties may be added in the future if needed. @@ -580,7 +585,7 @@ export type HoverResult = {
-

Custom Events

+
Custom Events
 When you apply the `hoverAction` to an element, it will dispatch custom `on:hover*` events. You can use these or the `HoverHandlers` to handle the various hover events. @@ -606,7 +611,7 @@ type HoverActionReturn = ActionReturn<
-

HoverEvent

+
HoverEvent
This is the event object dispatched by the custom `on:hover*` events, and is also passed to the `HoverHandlers` should you choose to use them. @@ -626,7 +631,7 @@ interface HoverEvent { ## Move Interaction -The `move` interaction provides an API for consistent move behavior across all browsers and devices, ignoring emulated mouse events on touch devices. +Handles `move` interactions across mouse, touch, and keyboard, including dragging with the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and platforms, and ignores emulated mouse events on touch devices. #### Basic Usage @@ -650,3 +655,23 @@ The `move` interaction provides an API for consistent move behavior across all b ``` +
+ +
+ `createMove` +
+ + +Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: + +```svelte + + +
Moveable Area
+``` + +
From d8f1231f713cd2dcfae077ddf81bd731f46537f9 Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 14:20:06 +0100 Subject: [PATCH 07/11] fix: add all move docs --- README.md | 168 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 144 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 7a6c5db..e8b2ccd 100644 --- a/README.md +++ b/README.md @@ -48,9 +48,7 @@ No more having to wrangle all those event handlers yourself! Just and use the `p
-
- `createPress` -
+ createPress Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -71,7 +69,7 @@ Creates a new `press` interaction instance. Each element should have its own ins
-
PressConfig
+ PressConfig `createPress` takes in an optional `PressConfig` object, which can be used to customize the interaction. @@ -83,7 +81,7 @@ const { pressAction } = createPress({ isDisabled: true }); ``` ```ts -type PressConfig = PressHandlers { +type PressConfig = PressHandlers & { /** * Whether the target is in a controlled press state * (e.g. an overlay it triggers is open). @@ -129,7 +127,7 @@ type PressConfig = PressHandlers { The `PressConfig` object also includes handlers for all the different `PressHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:press*` events dispatched by the element with the `pressAction`. -Be aware that event if you use these handlers, the custom `on:press*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `PressHandlers`. +Be aware that even if you use these handlers, the custom `on:press*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `PressHandlers`. ```ts type PressHandlers = { @@ -166,7 +164,7 @@ type PressHandlers = {
-
PressResult
+ PressResult The `createPress` function returns a `PressResult` object, which contains the `pressAction` action, and the `isPressed` state. More returned properties may be added in the future if needed. @@ -184,7 +182,7 @@ type PressResult = {
-
CustomEvent
+ CustomEvent When you apply the `pressAction` to an element, it will dispatch custom `on:press*` events. You can use these or the `PressHandlers` to handle the various press events. @@ -222,7 +220,7 @@ type PressActionReturn = ActionReturn<
-
PressEvent
+ PressEvent This is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them. @@ -288,7 +286,7 @@ The `hover` interaction provides an API for consistent long press behavior acros
-
`createLongPress`
+ createLongPress Creates a new `longpress` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -309,7 +307,7 @@ Creates a new `longpress` interaction instance. Each element should have its own
-
LongPressConfig
+ LongPressConfig `createLongPress` takes in an optional `LongPressConfig` object, which can be used to customize the interaction. @@ -343,7 +341,7 @@ type LongPressConfig = LongPressHandlers & { The `LongPressConfig` object also includes handlers for all the different `LongPressHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:longpress*` events dispatched by the element with the `longPressAction`. -Be aware that event if you use these handlers, the custom `on:longpress*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `LongPressHandlers`. +Be aware that even if you use these handlers, the custom `on:longpress*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `LongPressHandlers`. ```ts export type LongPressHandlers = { @@ -370,7 +368,7 @@ export type LongPressHandlers = {
-
LongPressResult
+ LongPressResult The `createLongPress` function returns a `LongPressResult` object, which contains the `longPressAction` action, and the `description` state. More returned properties may be added in the future if needed. @@ -398,7 +396,7 @@ type LongPressResult = {
-
Custom Events
+ Custom Events When you apply the `longPressAction` to an element, it will dispatch custom `on:longpress*` events for events you aren't handling via the `LongPressConfig` props. You can use these or the `LongPressHandlers` to handle the various `longpress` events. @@ -431,7 +429,7 @@ type LongPressActionReturn = ActionReturn<
-
PressEvent
+ PressEvent This is the event object dispatched by the custom `on:press*` events, and is also passed to the `PressHandlers` should you choose to use them. @@ -493,7 +491,7 @@ The `hover` interaction provides an API for consistent hover behavior across all
-
`createHover`
+ createHover Creates a new `hover` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple elements you wanted to apply hover state to on a page: @@ -514,7 +512,7 @@ Creates a new `hover` interaction instance. Each element should have its own ins
-
HoverConfig
+ HoverConfig The `createHover` function takes in an optional `HoverConfig` object, which can be used to customize the interaction. @@ -536,7 +534,7 @@ type HoverConfig = HoverHandlers & { The `HoverConfig` object also includes handlers for all the different `HoverHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:hover*` events dispatched by the element with the `hoverAction`. -Be aware that event if you use these handlers, the custom `on:hover*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `HoverHandlers`. +Be aware that even if you use these handlers, the custom `on:hover*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `HoverHandlers`. ```ts type HoverHandlers = { @@ -561,7 +559,7 @@ type HoverHandlers = {
-
HoverResult
+ HoverResult The `createHover` function returns a `HoverResult` object, which contains the `hoverAction` action, and the `isHovering` state. More returned properties may be added in the future if needed. @@ -585,7 +583,7 @@ export type HoverResult = {
-
Custom Events
+ Custom Events When you apply the `hoverAction` to an element, it will dispatch custom `on:hover*` events. You can use these or the `HoverHandlers` to handle the various hover events. @@ -611,7 +609,7 @@ type HoverActionReturn = ActionReturn<
-
HoverEvent + HoverEvent
This is the event object dispatched by the custom `on:hover*` events, and is also passed to the `HoverHandlers` should you choose to use them. @@ -657,9 +655,7 @@ Handles `move` interactions across mouse, touch, and keyboard, including draggin
-
- `createMove` -
+ createMove Creates a new `press` interaction instance. Each element should have its own instance, as it maintains state for a single element. For example, if you had multiple buttons on a page: @@ -675,3 +671,127 @@ Creates a new `press` interaction instance. Each element should have its own ins ```
+ +
+ + MoveConfig + + +```ts +export type MoveConfig = MoveHandlers & { } +``` + +The `MoveConfig` object also includes handlers for all the different `MoveHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:move*` events dispatched by the element with the `moveAction`. + +Be aware that even if you use these handlers, the custom `on:move*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `MoveHandlers`. + +```ts +export type MoveHandlers = { + /** + * Handler that is called when a move interaction starts. + */ + onMoveStart?: (e: MoveStartEvent) => void; + + /** + * Handler that is called when a move interaction ends. + */ + onMoveEnd?: (e: MoveEndEvent) => void; + + /** + * Handler that is called when the element is moved. + */ + onMove?: (e: MoveMoveEvent) => void; +} +``` + +
+ +
+ + MoveResult + + +The `createMove` function returns a `MoveResult` object, which contains the `moveAction` action. More returned properties may be added in the future if needed. + +```ts +export type MoveResult = { + /** + * A Svelte action which handles applying the event listeners + * and dispatching events to the element + */ + moveAction: (node: HTMLElement | SVGElement) => MoveActionReturn; +}; +``` + +
+ +
+ + Custom Events + + +When you apply the `moveAction` to an element, it will dispatch custom `on:move*` events. You can use these or the `MoveHandlers` to handle the various move events. + +```ts +type MoveActionReturn = ActionReturn< + undefined, + { + 'on:move'?: (e: CustomEvent) => void; + 'on:movestart'?: (e: CustomEvent) => void; + 'on:moveend'?: (e: CustomEvent) => void; + } +>; +``` + +
+ +
+ + MoveEvent + + +This is the event object dispatched by the custom `on:move*` events, and is also passed to the `MoveHandlers` should you choose to use them. + +```ts +export interface BaseMoveEvent { + /** The pointer type that triggered the move event. */ + pointerType: PointerType; + + /** Whether the shift keyboard modifier was held during the move event. */ + shiftKey: boolean; + + /** Whether the ctrl keyboard modifier was held during the move event. */ + ctrlKey: boolean; + + /** Whether the meta keyboard modifier was held during the move event. */ + metaKey: boolean; + + /** Whether the alt keyboard modifier was held during the move event. */ + altKey: boolean; +} + +export interface MoveStartEvent extends BaseMoveEvent { + /** The type of move event being fired. */ + type: 'movestart'; +} + +export interface MoveMoveEvent extends BaseMoveEvent { + /** The type of move event being fired. */ + type: 'move'; + + /** The amount moved in the X direction since the last event. */ + deltaX: number; + + /** The amount moved in the Y direction since the last event. */ + deltaY: number; +} + +export interface MoveEndEvent extends BaseMoveEvent { + /** The type of move event being fired. */ + type: 'moveend'; +} + +export type MoveEvent = MoveStartEvent | MoveMoveEvent | MoveEndEvent; +``` + +
From 71b7c8112a6ff920a33cbbddd3e3148dc6614941 Mon Sep 17 00:00:00 2001 From: ndom91 Date: Mon, 15 Jan 2024 14:22:05 +0100 Subject: [PATCH 08/11] chore: cleanup example code --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e8b2ccd..f954552 100644 --- a/README.md +++ b/README.md @@ -640,7 +640,7 @@ Handles `move` interactions across mouse, touch, and keyboard, including draggin const { moveAction } = createMove(); - + Moveable Area + ```
From 9b784f8e09497dd51285c9be0b33c9d41421365e Mon Sep 17 00:00:00 2001 From: Nico Domino Date: Tue, 16 Jan 2024 10:00:00 +0100 Subject: [PATCH 09/11] Update README.md Co-authored-by: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f954552..68f5d10 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,7 @@ type PressConfig = PressHandlers & { The `PressConfig` object also includes handlers for all the different `PressHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:press*` events dispatched by the element with the `pressAction`. -Be aware that even if you use these handlers, the custom `on:press*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `PressHandlers`. +Be aware that if you use these handlers, the custom `on:press*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `PressHandlers`. ```ts type PressHandlers = { From cfc29a6e48b20647b0cbe420df660bc9d55da23e Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Wed, 17 Jan 2024 18:10:23 -0800 Subject: [PATCH 10/11] fix: typo --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 68f5d10..a3852c6 100644 --- a/README.md +++ b/README.md @@ -341,7 +341,7 @@ type LongPressConfig = LongPressHandlers & { The `LongPressConfig` object also includes handlers for all the different `LongPressHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:longpress*` events dispatched by the element with the `longPressAction`. -Be aware that even if you use these handlers, the custom `on:longpress*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `LongPressHandlers`. +Be aware that if you use these handlers, the custom `on:longpress*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `LongPressHandlers`. ```ts export type LongPressHandlers = { @@ -534,7 +534,7 @@ type HoverConfig = HoverHandlers & { The `HoverConfig` object also includes handlers for all the different `HoverHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:hover*` events dispatched by the element with the `hoverAction`. -Be aware that even if you use these handlers, the custom `on:hover*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `HoverHandlers`. +Be aware that if you use these handlers, the custom `on:hover*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `HoverHandlers`. ```ts type HoverHandlers = { @@ -683,7 +683,7 @@ export type MoveConfig = MoveHandlers & { } The `MoveConfig` object also includes handlers for all the different `MoveHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:move*` events dispatched by the element with the `moveAction`. -Be aware that even if you use these handlers, the custom `on:move*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `MoveHandlers`. +Be aware that if you use these handlers, the custom `on:move*` events for whatever handlers you use will not be dispatched to the element. We only dispatch the events that aren't handled by the `MoveHandlers`. ```ts export type MoveHandlers = { From 3c2e8a6dc0eb4d089ebee8f6d3bc9d400f5be6fb Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Wed, 17 Jan 2024 18:10:58 -0800 Subject: [PATCH 11/11] formatting --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a3852c6..b90282a 100644 --- a/README.md +++ b/README.md @@ -667,7 +667,7 @@ Creates a new `press` interaction instance. Each element should have its own ins const { moveAction } = createMove(); -
Moveable Area
+
Moveable Area
```
@@ -678,7 +678,7 @@ Creates a new `press` interaction instance. Each element should have its own ins
```ts -export type MoveConfig = MoveHandlers & { } +export type MoveConfig = MoveHandlers & {}; ``` The `MoveConfig` object also includes handlers for all the different `MoveHandlers`. These are provided as a convenience, should you prefer to handle the events here rather than the custom `on:move*` events dispatched by the element with the `moveAction`. @@ -701,7 +701,7 @@ export type MoveHandlers = { * Handler that is called when the element is moved. */ onMove?: (e: MoveMoveEvent) => void; -} +}; ```