@rokkit/actions 1.0.0-next.38 → 1.0.0-next.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.38",
+  "version": "1.0.0-next.39",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "validators": "latest",
     "vite": "^4.4.7",
     "vitest": "~0.33.0",
-    "shared-config": "1.0.0-next.38"
+    "shared-config": "1.0.0-next.39"
   },
   "files": [
     "src/**/*.js",

package/src/lib/internal.js

@@ -1,39 +1,23 @@
 import { compact } from '@rokkit/core'
 
 /**
- * @typedef {Object} ActionHandlers
- * @property {Function} [next]
- * @property {Function} [previous]
- * @property {Function} [select]
- * @property {Function} [escape]
- * @property {Function} [collapse]
- * @property {Function} [expand]
- */
-
-/**
- * @typedef {Object} NavigationOptions
- * @property {Boolean} [horizontal]
- * @property {Boolean} [nested]
- * @property {Boolean} [enabled]
- */
-
-/**
- * @typedef {Object} KeyboardActions
- * @property {Function} [ArrowDown]
- * @property {Function} [ArrowUp]
- * @property {Function} [ArrowRight]
- * @property {Function} [ArrowLeft]
- * @property {Function} [Enter]
- * @property {Function} [Escape]
- * @property {Function} [" "]
+ * Emits a custom event with the given data.
+ *
+ * @param {HTMLElement} element
+ * @param {string} event
+ * @param {*} data
+ * @returns {void}
  */
+export function emit(element, event, data) {
+	element.dispatchEvent(new CustomEvent(event, { detail: data }))
+}
 
 /**
  * Maps keyboard events to actions based on the given handlers and options.
  *
- * @param {ActionHandlers} handlers
- * @param {NavigationOptions} options
- * @returns {KeyboardActions}
+ * @param {import('../types').ActionHandlers} handlers
+ * @param {import('../types').NavigationOptions} options
+ * @returns {import('../types').KeyboardActions}
  */
 export function mapKeyboardEventsToActions(handlers, options) {
 	const { next, previous, select, escape } = handlers
@@ -56,8 +40,50 @@ export function mapKeyboardEventsToActions(handlers, options) {
 	})
 }
 
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
 export function getClosestAncestorWithAttribute(element, attribute) {
 	if (!element) return null
 	if (element.getAttribute(attribute)) return element
 	return getClosestAncestorWithAttribute(element.parentElement, attribute)
 }
+
+/**
+ * Sets up event handlers based on the given options.
+ * Returns whether or not the event handlers are listening.
+ *
+ * @param {HTMLElement} element
+ * @param {import('../types').EventHandlers} listeners
+ * @param {import('../types').TraversableOptions} options
+ * @returns {void}
+ */
+export function setupListeners(element, listeners, options) {
+	const { enabled } = { enabled: true, ...options }
+
+	if (enabled) {
+		Object.entries(listeners).forEach(([event, listener]) =>
+			element.addEventListener(event, listener)
+		)
+	}
+}
+
+/**
+ * Removes event handlers based on the given options.
+ * Returns whether or not the event handlers are listening.
+ *
+ * @param {HTMLElement} element
+ * @param {import('../types').EventHandlers} listeners
+ * @returns {void}
+ */
+export function removeListeners(element, listeners) {
+	if (listeners) {
+		Object.entries(listeners).forEach(([event, listener]) => {
+			element.removeEventListener(event, listener)
+		})
+	}
+}

package/src/pannable.js

@@ -1,3 +1,5 @@
+import { removeListeners, setupListeners } from './lib'
+
 /**
  * Handle drag and move events
  *
@@ -7,6 +9,18 @@
 export function pannable(node) {
 	let x
 	let y
+	let listeners = {
+		primary: {
+			mousedown: start,
+			touchstart: start
+		},
+		secondary: {
+			mousemove: move,
+			mouseup: stop,
+			touchmove: move,
+			touchend: stop
+		}
+	}
 
 	function track(event, name, delta = {}) {
 		x = event.clientX || event.touches[0].clientX
@@ -20,37 +34,26 @@ export function pannable(node) {
 		)
 	}
 
-	function handleMousedown(event) {
+	function start(event) {
 		track(event, 'panstart')
-		window.addEventListener('mousemove', handleMousemove)
-		window.addEventListener('mouseup', handleMouseup)
-		window.addEventListener('touchmove', handleMousemove, { passive: false })
-		window.addEventListener('touchend', handleMouseup)
+		setupListeners(window, listeners.secondary)
 	}
 
-	function handleMousemove(event) {
+	function move(event) {
 		const dx = (event.clientX || event.touches[0].clientX) - x
 		const dy = (event.clientY || event.touches[0].clientY) - y
 
 		track(event, 'panmove', { dx, dy })
 	}
 
-	function handleMouseup(event) {
+	function stop(event) {
 		track(event, 'panend')
-
-		window.removeEventListener('mousemove', handleMousemove)
-		window.removeEventListener('mouseup', handleMouseup)
-		window.removeEventListener('touchmove', handleMousemove)
-		window.removeEventListener('touchend', handleMouseup)
+		removeListeners(window, listeners.secondary)
 	}
 
-	node.addEventListener('mousedown', handleMousedown)
-	node.addEventListener('touchstart', handleMousedown, { passive: false })
+	setupListeners(node, listeners.primary)
 
 	return {
-		destroy() {
-			node.removeEventListener('mousedown', handleMousedown)
-			node.removeEventListener('touchstart', handleMousedown)
-		}
+		destroy: () => removeListeners(node, listeners.primary)
 	}
 }

package/src/swipeable.js

@@ -6,87 +6,82 @@
  * @returns {import('./types').SvelteActionReturn}
  */
 
-export function swipeable(
-	node,
-	{
-		horizontal = true,
-		vertical = false,
-		threshold = 100,
-		enabled = true,
-		minSpeed = 300
-	} = {}
-) {
-	let listening = false
-	let startX
-	let startY
-	let startTime
+import { removeListeners, setupListeners } from './lib'
+const defaultOptions = {
+	horizontal: true,
+	vertical: false,
+	threshold: 100,
+	enabled: true,
+	minSpeed: 300
+}
+export function swipeable(node, options = defaultOptions) {
+	let track = {}
+	let listeners = {}
 
-	function touchStart(event) {
-		const touch = event.touches ? event.touches[0] : event
-		startX = touch.clientX
-		startY = touch.clientY
-		startTime = new Date().getTime()
+	const updateListeners = (options) => {
+		removeListeners(node, listeners)
+		listeners = getListeners(node, options, track)
+		setupListeners(node, listeners, options)
 	}
 
-	function touchEnd(event) {
-		const touch = event.changedTouches ? event.changedTouches[0] : event
-		const distX = touch.clientX - startX
-		const distY = touch.clientY - startY
-		const duration = (new Date().getTime() - startTime) / 1000
-		const speed = Math.max(Math.abs(distX), Math.abs(distY)) / duration
-
-		if (horizontal && speed > minSpeed) {
-			if (Math.abs(distX) > Math.abs(distY) && Math.abs(distX) >= threshold) {
-				if (distX > 0 && distX / duration > minSpeed) {
-					node.dispatchEvent(new CustomEvent('swipeRight'))
-				} else {
-					node.dispatchEvent(new CustomEvent('swipeLeft'))
-				}
-			}
-		}
+	options = { ...defaultOptions, ...options }
+	updateListeners(options)
 
-		if (vertical && speed > minSpeed) {
-			if (Math.abs(distY) > Math.abs(distX) && Math.abs(distY) >= threshold) {
-				if (distY > 0) {
-					node.dispatchEvent(new CustomEvent('swipeDown'))
-				} else {
-					node.dispatchEvent(new CustomEvent('swipeUp'))
-				}
-			}
+	return {
+		update: (data) => {
+			options = { ...options, ...data }
+			updateListeners(options)
+		},
+		destroy() {
+			removeListeners(node, listeners)
 		}
 	}
+}
 
-	const updateListeners = (enabled) => {
-		if (enabled && !listening) {
-			node.addEventListener('touchstart', touchStart)
-			node.addEventListener('touchend', touchEnd)
-			node.addEventListener('mousedown', touchStart)
-			node.addEventListener('mouseup', touchEnd)
-			listening = true
-		}
-		if (!enabled && listening) {
-			node.removeEventListener('touchstart', touchStart)
-			node.removeEventListener('touchend', touchEnd)
-			node.removeEventListener('mousedown', touchStart)
-			node.removeEventListener('mouseup', touchEnd)
-			listening = false
-		}
+function getListeners(node, options, track) {
+	if (!options.enabled) return {}
+
+	let listeners = {
+		touchend: (e) => touchEnd(e, node, options, track),
+		touchstart: (e) => touchStart(e, track),
+		mousedown: (e) => touchStart(e, track),
+		mouseup: (e) => touchEnd(e, node, options, track)
 	}
+	return listeners
+}
 
-	updateListeners(enabled)
+function touchStart(event, track) {
+	const touch = event.touches ? event.touches[0] : event
+	track.startX = touch.clientX
+	track.startY = touch.clientY
+	track.startTime = new Date().getTime()
+}
 
-	return {
-		update: (options) => {
-			horizontal = options.horizontal
-			vertical = options.vertical
-			threshold = options.threshold
-			enabled = options.enabled
-			minSpeed = options.minSpeed
+function touchEnd(event, node, options, track) {
+	const { horizontal, vertical, threshold, minSpeed } = options
+	const touch = event.changedTouches ? event.changedTouches[0] : event
+	const distX = touch.clientX - track.startX
+	const distY = touch.clientY - track.startY
+	const duration = (new Date().getTime() - track.startTime) / 1000
+	const speed = Math.max(Math.abs(distX), Math.abs(distY)) / duration
 
-			updateListeners(enabled)
-		},
-		destroy() {
-			updateListeners(false)
+	if (horizontal && speed > minSpeed) {
+		if (Math.abs(distX) > Math.abs(distY) && Math.abs(distX) >= threshold) {
+			if (distX > 0 && distX / duration > minSpeed) {
+				node.dispatchEvent(new CustomEvent('swipeRight'))
+			} else {
+				node.dispatchEvent(new CustomEvent('swipeLeft'))
+			}
+		}
+	}
+
+	if (vertical && speed > minSpeed) {
+		if (Math.abs(distY) > Math.abs(distX) && Math.abs(distY) >= threshold) {
+			if (distY > 0) {
+				node.dispatchEvent(new CustomEvent('swipeDown'))
+			} else {
+				node.dispatchEvent(new CustomEvent('swipeUp'))
+			}
 		}
 	}
 }

package/src/traversable.js

@@ -1,6 +1,9 @@
 import {
 	getClosestAncestorWithAttribute,
-	mapKeyboardEventsToActions
+	mapKeyboardEventsToActions,
+	setupListeners,
+	removeListeners,
+	emit
 } from './lib'
 
 const defaultOptions = {
@@ -8,22 +11,48 @@ const defaultOptions = {
 	nested: false,
 	enabled: true
 }
+
+/**
+ * An action that can be used to traverse a nested list of items using keyboard and mouse.
+ *
+ * @param {HTMLElement} element
+ * @param {import('./types').TraversableOptions} data
+ * @returns
+ */
 export function traversable(element, data) {
-	let listening = false
 	let options = {}
 	let tracker = {}
-	let handlers = {}
+	let handlers
+	let actions
+	let listeners
 
-	let actions = {
-		next: () => emit(element, 'move', tracker),
-		previous: () => emit(element, 'move', tracker),
-		select: () => emit(element, 'select', tracker),
-		escape: () => emit(element, 'escape', tracker),
-		collapse: () => emit(element, 'collapse', tracker),
-		expand: () => emit(element, 'expand', tracker)
+	const configure = (data) => {
+		options = { ...options, ...data }
+
+		removeListeners(element, listeners)
+		actions = getActions(element, tracker)
+		handlers = mapKeyboardEventsToActions(actions, options)
+		listeners = getListeners(handlers, actions, tracker)
+		setupListeners(element, listeners, options)
+	}
+
+	configure({ ...defaultOptions, ...data })
+
+	return {
+		update: configure,
+		destroy: () => removeListeners(element, listeners)
 	}
+}
 
-	let listeners = {
+/**
+ * Returns the listeners for the given handlers and actions.
+ *
+ * @param {import('./types').KeyboardActions} handlers
+ * @param {import('./types').ActionHandlers} actions
+ * @param {import('./types').PositionTracker} tracker
+ */
+function getListeners(handlers, actions, tracker) {
+	return {
 		keydown: (event) => {
 			const action = handlers[event.key]
 			if (action) action(event)
@@ -38,40 +67,24 @@ export function traversable(element, data) {
 			}
 		}
 	}
-
-	const configure = (data) => {
-		// const valueChanged = options.value !== data.value
-		options = { ...options, ...data }
-
-		listening = setupEventHandlers(element, options, listening, listeners)
-		handlers = mapKeyboardEventsToActions(actions, options)
-		// if (valueChanged) handleValueChange(element, options)
-	}
-
-	configure({ ...defaultOptions, ...data })
-
-	return {
-		update: configure,
-		destroy: () => configure({ enabled: false })
-	}
 }
 
-function setupEventHandlers(element, options, listening, handlers) {
-	const { enabled } = options
-
-	if (enabled && !listening) {
-		Object.entries(handlers).forEach(([event, handler]) =>
-			element.addEventListener(event, handler)
-		)
-	} else if (!enabled && listening) {
-		Object.entries(handlers).forEach(([event, handler]) =>
-			element.removeEventListener(event, handler)
-		)
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {import('./types').PositionTracker} tracker
+ * @returns {import('./types').ActionHandlers}
+ */
+function getActions(element, tracker) {
+	const actions = {
+		next: () => emit(element, 'move', tracker),
+		previous: () => emit(element, 'move', tracker),
+		select: () => emit(element, 'select', tracker),
+		escape: () => emit(element, 'escape', tracker),
+		collapse: () => emit(element, 'collapse', tracker),
+		expand: () => emit(element, 'expand', tracker)
 	}
-	return enabled
+	return actions
 }
 
-function emit(element, event, tracker) {
-	element.dispatchEvent(new CustomEvent(event, { detail: tracker }))
-}
 // function handleValueChange(element, options) {}

package/src/types.js

@@ -51,3 +51,61 @@
  * @property {number}  threshold  - Threshold for swipe
  * @property {number}  minSpeed   - Minimum speed for swipe
  */
+
+/**
+ * @typedef TraversableOptions
+ * @property {boolean} horizontal - Traverse horizontally
+ * @property {boolean} nested     - Traverse nested items
+ * @property {boolean} enabled    - Enable traversal
+ * @property {string}  value      - Value to be used for traversal
+ * @property {Array<*>} items     - An array containing the data set to traverse
+ * @property {Array<integer} [indices] - Indices of the items to be traversed
+ */
+
+/**
+ * @typedef PositionTracker
+ * @property {integer} index
+ * @property {integer} previousIndex
+ */
+
+/**
+ * @typedef EventHandlers
+ * @property {function} [keydown]
+ * @property {function} [keyup]
+ * @property {function} [click]
+ * @property {function} [touchstart]
+ * @property {function} [touchmove]
+ * @property {function} [touchend]
+ * @property {function} [touchcancel]
+ * @property {function} [mousedown]
+ * @property {function} [mouseup]
+ * @property {function} [mousemove]
+ */
+
+/**
+ * @typedef {Object} ActionHandlers
+ * @property {Function} [next]
+ * @property {Function} [previous]
+ * @property {Function} [select]
+ * @property {Function} [escape]
+ * @property {Function} [collapse]
+ * @property {Function} [expand]
+ */
+
+/**
+ * @typedef {Object} NavigationOptions
+ * @property {Boolean} [horizontal]
+ * @property {Boolean} [nested]
+ * @property {Boolean} [enabled]
+ */
+
+/**
+ * @typedef {Object} KeyboardActions
+ * @property {Function} [ArrowDown]
+ * @property {Function} [ArrowUp]
+ * @property {Function} [ArrowRight]
+ * @property {Function} [ArrowLeft]
+ * @property {Function} [Enter]
+ * @property {Function} [Escape]
+ * @property {Function} [" "]
+ */