@webhandle/component-swipe-listener

Packages the fantastic swipe-listener module as a webhandle-component. By default, this component will provide a resource via the external resource manager.

Install

npm i @webhandle/component-swipe-listener

Server Side Usage

import swipeSetup from "@webhandle/component-swipe-listener/initialize-webhandle-component.mjs"
let swipeManager = await swipeSetup(webhandle)

Client Side Usage

SwipeListener adds itself to the window scope. If directions.left is true, it indicates the user is swiping towards the left. Creating a new SwipeListener around an element causes it to emit swipe events.

import 'swipe-listener'

let testBox = document.getElementById('test-box')
let messages = document.getElementById('messages')

function addText(txt) {
	messages.innerHTML += `<p>${txt}</p>`
}

let listener = new SwipeListener(testBox)

testBox.addEventListener('swipe', (evt) => {
	let directions = evt.detail.directions
	if(directions.left) {
		addText('left')
	}
	if(directions.right) {
		addText('right')
	}
	if(directions.top) {
		addText('top')
	}
	if(directions.bottom) {
		addText('bottom')
	}
})