Skip to content

Enable swiping to navigate in lightbox #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 22, 2024
Merged

Enable swiping to navigate in lightbox #88

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6197a8e
Enable swiping to navigate in lightbox
abhishekxix Nov 21, 2024
af10e8c
Put threshold in handleTouchEnd
abhishekxix Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@travelopia/web-components",
"version": "0.7.2",
"version": "0.7.3",
"description": "Accessible web components for the modern web",
"files": [
"dist"
Expand Down
4 changes: 3 additions & 1 deletion src/lightbox/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Example:
First, create the lightbox and give it an ID. Style as needed:

```html
<tp-lightbox id="my-lightbox" close-on-overlay-click="yes">
<tp-lightbox id="my-lightbox" close-on-overlay-click="yes" swipe="yes" swipe-threshold="300">
<dialog>
<tp-lightbox-close>
<button>Close</button> <-- There must be a button inside this component.
Expand Down Expand Up @@ -53,6 +53,8 @@ Next, we need to trigger the lightbox with and give it some content. Any content
| Attribute | Required | Values | Notes |
|------------------------|-----------|----------|----------------------------------------------|
| close-on-overlay-click | No | `yes` | Closes the modal when the overlay is clicked |
| swipe | No | `yes` | Enables swiping |
| swipe-threshold | No | `200` | Prevent swiping if more than this is swiped |

## Events

Expand Down
2 changes: 1 addition & 1 deletion src/lightbox/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</head>
<body>
<main>
<tp-lightbox id="my-lightbox" close-on-overlay-click="yes">
<tp-lightbox id="my-lightbox" close-on-overlay-click="yes" swipe="yes" swipe-threshold="200">
<dialog>
<tp-lightbox-close>
<button>Close</button>
Expand Down
72 changes: 71 additions & 1 deletion src/lightbox/tp-lightbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export class TPLightboxElement extends HTMLElement {
protected currentTemplate: HTMLTemplateElement | null = null;
protected currentGroup: string = '';
protected allGroups: NodeListOf<TPLightboxTriggerElement> | null = null;
protected touchStartX: number = 0;
protected touchStartY: number = 0;
protected swipeThreshold: number = 200;
protected dialogElement: HTMLDialogElement | null;

/**
* Constructor.
Expand All @@ -25,8 +29,16 @@ export class TPLightboxElement extends HTMLElement {
// Initialize parent.
super();

// Initialize
this.dialogElement = this.querySelector( 'dialog' );

// Swipe settings
this.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' );

// Event listeners.
this.querySelector( 'dialog' )?.addEventListener( 'click', this.handleDialogClick.bind( this ) );
this.dialogElement?.addEventListener( 'click', this.handleDialogClick.bind( this ) );
this.dialogElement?.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );
this.dialogElement?.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );
}

/**
Expand Down Expand Up @@ -412,4 +424,62 @@ export class TPLightboxElement extends HTMLElement {
this.close();
}
}

/**
* Handles the touch start event.
*
* @param { TouchEvent } evt The touch event.
*/
handleTouchStart( evt: TouchEvent ): void {
// Check if we should allow swiping?
if ( 'yes' !== this.getAttribute( 'swipe' ) ) {
// Nope.
return;
}

// Set the start points.
this.touchStartX = evt.touches[ 0 ].clientX;
this.touchStartY = evt.touches[ 0 ].clientY;
}

/**
* Handles the touch end event.
*
* @param { TouchEvent } evt The touch event.
*/
handleTouchEnd( evt: TouchEvent ): void {
// Check if we should allow swiping?
if ( 'yes' !== this.getAttribute( 'swipe' ) ) {
// Nope.
return;
}

// Calculate the distances.
const touchEndX: number = evt.changedTouches[ 0 ].clientX;
const touchEndY: number = evt.changedTouches[ 0 ].clientY;
const swipeDistanceX: number = touchEndX - this.touchStartX;
const swipeDistanceY: number = touchEndY - this.touchStartY;

// Is this horizontal swipe?
const isHorizontalSwipe = Math.abs( swipeDistanceX ) > Math.abs( swipeDistanceY );

// Check if this was a horizontal swipe?
if ( ! isHorizontalSwipe ) {
// Bail.
return;
}

// Check if it's a right or left swipe.
if ( swipeDistanceX > 0 ) {
// Right-Swipe: Check if horizontal swipe distance is less than the threshold.
if ( swipeDistanceX < this.swipeThreshold ) {
this.previous();
}
} else if ( swipeDistanceX < 0 ) {
// Left-Swipe: Check if horizontal swipe distance is less than the threshold.
if ( swipeDistanceX > -this.swipeThreshold ) {
this.next();
}
}
}
}
Loading