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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.37",
+  "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.37"
+    "shared-config": "1.0.0-next.39"
   },
   "files": [
     "src/**/*.js",

package/src/hierarchy.js

@@ -1,47 +1,4 @@
-/**
- * Check if the current item is a parent
- *
- * @param {*} item
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns {boolean}
- */
-export function hasChildren(item, fields) {
-	return (
-		typeof item === 'object' &&
-		fields.children in item &&
-		Array.isArray(item[fields.children])
-	)
-}
-
-/**
- * Check if the current item is a parent and is expanded
- *
- * @param {*} item
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns {boolean}
- */
-export function isExpanded(item, fields) {
-	if (item == null) return false
-	if (!hasChildren(item, fields)) return false
-	if (fields.isOpen in item) {
-		return item[fields.isOpen]
-	}
-	return false
-}
-
-/**
- * Verify if at least one item has children
- *
- * @param {Array<*>} items
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns {boolean}
- */
-export function isNested(items, fields) {
-	for (let i = 0; i < items.length; i++) {
-		if (hasChildren(items[i], fields)) return true
-	}
-	return false
-}
+import { isExpanded } from '@rokkit/core'
 
 /**
  * Navigate to last visible child in the hirarchy starting with the provided path

package/src/lib/index.js

@@ -0,0 +1 @@
+export * from './internal'

package/src/lib/internal.js

@@ -0,0 +1,89 @@
+import { compact } from '@rokkit/core'
+
+/**
+ * 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 {import('../types').ActionHandlers} handlers
+ * @param {import('../types').NavigationOptions} options
+ * @returns {import('../types').KeyboardActions}
+ */
+export function mapKeyboardEventsToActions(handlers, options) {
+	const { next, previous, select, escape } = handlers
+	const { horizontal, nested } = {
+		horizontal: false,
+		nested: false,
+		...options
+	}
+	let expand = nested ? handlers.expand : null
+	let collapse = nested ? handlers.collapse : null
+
+	return compact({
+		ArrowDown: horizontal ? expand : next,
+		ArrowUp: horizontal ? collapse : previous,
+		ArrowRight: horizontal ? next : expand,
+		ArrowLeft: horizontal ? previous : collapse,
+		Enter: select,
+		Escape: escape,
+		' ': select
+	})
+}
+
+/**
+ * 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/navigable.js

@@ -1,3 +1,6 @@
+import { handleAction, getKeyboardActions } from './utils'
+
+const defaultOptions = { horizontal: true, nested: false, enabled: true }
 /**
  * A svelte action function that captures keyboard evvents and emits event for corresponding movements.
  *
@@ -5,45 +8,40 @@
  * @param {import('./types').NavigableOptions} options
  * @returns {import('./types').SvelteActionReturn}
  */
-export function navigable(
-	node,
-	{ horizontal = true, nested = false, enabled = true } = {}
-) {
-	if (!enabled) return { destroy() {} }
-	const previous = () => node.dispatchEvent(new CustomEvent('previous'))
-	const next = () => node.dispatchEvent(new CustomEvent('next'))
-	const collapse = () => node.dispatchEvent(new CustomEvent('collapse'))
-	const expand = () => node.dispatchEvent(new CustomEvent('expand'))
-	const select = () => node.dispatchEvent(new CustomEvent('select'))
+export function navigable(node, options) {
+	options = { ...defaultOptions, ...options }
 
-	const movement = horizontal
-		? { ArrowLeft: previous, ArrowRight: next }
-		: { ArrowUp: previous, ArrowDown: next }
-	const change = nested
-		? horizontal
-			? { ArrowUp: collapse, ArrowDown: expand }
-			: { ArrowLeft: collapse, ArrowRight: expand }
-		: {}
-	const actions = {
-		Enter: select,
-		' ': select,
-		...movement,
-		...change
+	let listening = false
+	const handlers = {
+		previous: () => node.dispatchEvent(new CustomEvent('previous')),
+		next: () => node.dispatchEvent(new CustomEvent('next')),
+		collapse: () => node.dispatchEvent(new CustomEvent('collapse')),
+		expand: () => node.dispatchEvent(new CustomEvent('expand')),
+		select: () => node.dispatchEvent(new CustomEvent('select'))
 	}
 
-	function handleKeydown(event) {
-		if (actions[event.key]) {
-			event.preventDefault()
-			event.stopPropagation()
-			actions[event.key]()
-		}
+	let actions = {} //getKeyboardActions(node, { horizontal, nested })
+	const handleKeydown = (event) => handleAction(actions, event)
+
+	function updateListeners(options) {
+		if (options.enabled) actions = getKeyboardActions(node, options, handlers)
+
+		if (options.enabled && !listening)
+			node.addEventListener('keydown', handleKeydown)
+		else if (!options.enabled && listening)
+			node.removeEventListener('keydown', handleKeydown)
+		listening = options.enabled
 	}
 
-	node.addEventListener('keydown', handleKeydown)
+	updateListeners(options)
 
 	return {
-		destroy() {
-			node.removeEventListener('keydown', handleKeydown)
+		update: (config) => {
+			options = { ...options, ...config }
+			updateListeners(options)
+		},
+		destroy: () => {
+			updateListeners({ enabled: false })
 		}
 	}
 }

package/src/navigator.js

@@ -1,13 +1,11 @@
-// import { tick } from 'svelte'
+import { handleAction } from './utils'
+import { isNested, hasChildren, isExpanded } from '@rokkit/core'
 import {
 	moveNext,
 	movePrevious,
-	isNested,
-	hasChildren,
 	pathFromIndices,
 	indicesFromPath,
-	getCurrentNode,
-	isExpanded
+	getCurrentNode
 } from './hierarchy'
 
 /**
@@ -80,27 +78,14 @@ export function navigator(element, options) {
 			emit('expand', element, indicesFromPath(path), currentNode)
 		}
 	}
+	const handlers = { next, previous, select, collapse, expand }
 
 	update(options)
 
 	const nested = isNested(items, fields)
-	const movement = vertical
-		? { ArrowDown: next, ArrowUp: previous }
-		: { ArrowRight: next, ArrowLeft: previous }
-	const states = !nested
-		? {}
-		: vertical
-		? { ArrowRight: expand, ArrowLeft: collapse }
-		: { ArrowDown: expand, ArrowUp: collapse }
-	const actions = { ...movement, Enter: select, ...states }
-
-	const handleKeyDown = (event) => {
-		if (actions[event.key]) {
-			event.preventDefault()
-			event.stopPropagation()
-			actions[event.key]()
-		}
-	}
+	const actions = mapKeyboardEventsToActions(vertical, nested, handlers)
+
+	const handleKeyDown = (event) => handleAction(actions, event)
 
 	const handleClick = (event) => {
 		let target = findParentWithDataPath(event.target, element)
@@ -189,3 +174,27 @@ function emit(event, element, indices, node) {
 		})
 	)
 }
+
+function mapKeyboardEventsToActions(vertical, nested, handlers) {
+	let actions = { Enter: handlers.select }
+
+	if (vertical) {
+		actions = {
+			...actions,
+			...{ ArrowDown: handlers.next, ArrowUp: handlers.previous },
+			...(nested
+				? { ArrowRight: handlers.expand, ArrowLeft: handlers.collapse }
+				: {})
+		}
+	} else {
+		actions = {
+			...actions,
+			...{ ArrowRight: handlers.next, ArrowLeft: handlers.previous },
+			...(nested
+				? { ArrowDown: handlers.expand, ArrowUp: handlers.collapse }
+				: {})
+		}
+	}
+
+	return actions
+}

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,68 +6,82 @@
  * @returns {import('./types').SvelteActionReturn}
  */
 
-export function swipeable(
-	node,
-	{
-		horizontal = true,
-		vertical = false,
-		threshold = 100,
-		enabled = true,
-		minSpeed = 300
-	} = {}
-) {
-	if (!enabled) return { destroy() {} }
-
-	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
+	options = { ...defaultOptions, ...options }
+	updateListeners(options)
 
-		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'))
-				}
-			}
+	return {
+		update: (data) => {
+			options = { ...options, ...data }
+			updateListeners(options)
+		},
+		destroy() {
+			removeListeners(node, listeners)
 		}
+	}
+}
+
+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
+}
+
+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()
+}
+
+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
 
-		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'))
-				}
+	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'))
 			}
 		}
 	}
 
-	node.addEventListener('touchstart', touchStart)
-	node.addEventListener('touchend', touchEnd)
-	node.addEventListener('mousedown', touchStart)
-	node.addEventListener('mouseup', touchEnd)
-
-	return {
-		destroy() {
-			node.removeEventListener('touchstart', touchStart)
-			node.removeEventListener('touchend', touchEnd)
-			node.removeEventListener('mousedown', touchStart)
-			node.removeEventListener('mouseup', touchEnd)
+	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

@@ -0,0 +1,90 @@
+import {
+	getClosestAncestorWithAttribute,
+	mapKeyboardEventsToActions,
+	setupListeners,
+	removeListeners,
+	emit
+} from './lib'
+
+const defaultOptions = {
+	horizontal: false,
+	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 options = {}
+	let tracker = {}
+	let handlers
+	let actions
+	let listeners
+
+	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)
+	}
+}
+
+/**
+ * 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)
+		},
+		click: (event) => {
+			const target = getClosestAncestorWithAttribute(event.target, 'data-index')
+
+			if (target) {
+				const index = parseInt(target.getAttribute('data-index'))
+				tracker.index = index
+				actions.select()
+			}
+		}
+	}
+}
+
+/**
+ *
+ * @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 actions
+}
+
+// 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} [" "]
+ */

package/src/utils.js

@@ -0,0 +1,24 @@
+export function handleAction(actions, event) {
+	if (event.key in actions) {
+		event.preventDefault()
+		event.stopPropagation()
+		actions[event.key]()
+	}
+}
+
+export function getKeyboardActions(node, options, handlers) {
+	const movement = options.horizontal
+		? { ArrowLeft: handlers.previous, ArrowRight: handlers.next }
+		: { ArrowUp: handlers.previous, ArrowDown: handlers.next }
+	const change = options.nested
+		? options.horizontal
+			? { ArrowUp: handlers.collapse, ArrowDown: handlers.expand }
+			: { ArrowLeft: handlers.collapse, ArrowRight: handlers.expand }
+		: {}
+	return {
+		Enter: handlers.select,
+		' ': handlers.select,
+		...movement,
+		...change
+	}
+}