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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.38",
+  "version": "1.0.0-next.42",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@testing-library/svelte": "^4.0.3",
+    "@types/ramda": "^0.29.3",
     "@vitest/coverage-v8": "^0.33.0",
     "@vitest/ui": "~0.33.0",
     "jsdom": "^22.1.0",
@@ -23,7 +24,7 @@
     "validators": "latest",
     "vite": "^4.4.7",
     "vitest": "~0.33.0",
-    "shared-config": "1.0.0-next.38"
+    "shared-config": "1.0.0-next.42"
   },
   "files": [
     "src/**/*.js",
@@ -41,7 +42,8 @@
   },
   "dependencies": {
     "@rokkit/core": "latest",
-    "@rokkit/stores": "latest"
+    "@rokkit/stores": "latest",
+    "ramda": "^0.29.0"
   },
   "scripts": {
     "format": "prettier --write .",
@@ -52,6 +54,6 @@
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "latest": "pnpm upgrade --latest && pnpm test:ci",
-    "release": "tsc && pnpm publish --access public"
+    "release": "pnpm publish --access public"
   }
 }

package/src/hierarchy.js

@@ -46,20 +46,29 @@ export function moveNext(path, items, fields) {
 	} else if (current.index < current.items.length - 1) {
 		current.index++
 	} else {
-		let level = path.length - 2
-		while (level >= 0) {
-			const parent = path[level]
-			if (parent.index < parent.items.length - 1) {
-				parent.index++
-				path = path.slice(0, level + 1)
-				break
-			}
-			level--
-		}
+		path = navigateToNextLevel(path)
 	}
 	return path
 }
 
+/**
+ * Navigate to the next level
+ * @param {Array<import('./types').PathFragment>} path
+ * @returns {Array<import('./types').PathFragment>}
+ */
+function navigateToNextLevel(path) {
+	let level = path.length - 2
+	while (level >= 0) {
+		const parent = path[level]
+		if (parent.index < parent.items.length - 1) {
+			parent.index++
+			path = path.slice(0, level + 1)
+			break
+		}
+		level--
+	}
+	return path
+}
 /**
  * Navigate to the previous item
  *

package/src/lib/event-manager.js

@@ -0,0 +1,32 @@
+/**
+ * EventManager class to manage event listeners on an element.
+ */
+export function EventManager(element, handlers = {}) {
+	let listening = false
+
+	function activate() {
+		if (!listening) {
+			for (const event in handlers) {
+				element.addEventListener(event, handlers[event])
+			}
+			listening = true
+		}
+	}
+	function destroy() {
+		if (listening) {
+			for (const event in handlers) {
+				element.removeEventListener(event, handlers[event])
+			}
+			listening = false
+		}
+	}
+	function update(enabled, newHandlers = handlers) {
+		if (listening !== enabled || handlers !== newHandlers) {
+			destroy()
+			handlers = newHandlers
+			if (enabled) activate()
+		}
+	}
+
+	return { activate, destroy, update }
+}

package/src/lib/index.js

@@ -1 +1,2 @@
 export * from './internal'
+export * from './event-manager'

package/src/lib/internal.js

@@ -1,39 +1,24 @@
 import { compact } from '@rokkit/core'
+import { hasChildren, isExpanded } 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 +41,73 @@ 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)
+		})
+	}
+}
+
+/**
+ * Handles the click event.
+ * @param {HTMLElement} element - The root element.
+ * @param {CurrentItem} current - A reference to the current Item
+ * @returns {CurrentItem} The updated current item.
+ */
+export function handleItemClick(element, current) {
+	const { item, fields, position } = current
+	const detail = { item, position }
+
+	if (hasChildren(item, fields)) {
+		if (isExpanded(item, fields)) {
+			item[fields.isOpen] = false
+			emit(element, 'collapse', detail)
+		} else {
+			item[fields.isOpen] = true
+			emit(element, 'expand', detail)
+		}
+	} else {
+		emit(element, 'select', detail)
+	}
+	return current
+}

package/src/navigator.js

@@ -7,7 +7,7 @@ import {
 	indicesFromPath,
 	getCurrentNode
 } from './hierarchy'
-
+import { mapKeyboardEventsToActions } from './lib'
 /**
  * Keyboard navigation for Lists and NestedLists. The data is either nested or not and is not
  * expected to switch from nested to simple list or vice-versa.
@@ -83,11 +83,15 @@ export function navigator(element, options) {
 	update(options)
 
 	const nested = isNested(items, fields)
-	const actions = mapKeyboardEventsToActions(vertical, nested, handlers)
+	const actions = mapKeyboardEventsToActions(handlers, {
+		horizontal: !vertical,
+		nested
+	})
 
 	const handleKeyDown = (event) => handleAction(actions, event)
 
 	const handleClick = (event) => {
+		event.stopPropagation()
 		let target = findParentWithDataPath(event.target, element)
 		let indices = !target
 			? []
@@ -106,7 +110,8 @@ export function navigator(element, options) {
 					? 'expand'
 					: 'collapse'
 				emit(event, element, indices, currentNode)
-			} else if (currentNode) emit('select', element, indices, currentNode)
+			} else if (currentNode !== null)
+				emit('select', element, indices, currentNode)
 		}
 	}
 
@@ -174,27 +179,3 @@ 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

@@ -1,3 +1,13 @@
+import { removeListeners, setupListeners } from './lib'
+
+const defaultOptions = {
+	horizontal: true,
+	vertical: false,
+	threshold: 100,
+	enabled: true,
+	minSpeed: 300
+}
+
 /**
  * A svelte action function that captures swipe actions and emits event for corresponding movements.
  *
@@ -5,88 +15,94 @@
  * @param {import(./types).SwipeableOptions} options
  * @returns {import('./types').SvelteActionReturn}
  */
+export function swipeable(node, options = defaultOptions) {
+	let track = {}
+	let listeners = {}
 
-export function swipeable(
-	node,
-	{
-		horizontal = true,
-		vertical = false,
-		threshold = 100,
-		enabled = true,
-		minSpeed = 300
-	} = {}
-) {
-	let listening = false
-	let startX
-	let startY
-	let startTime
-
-	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'))
-				}
-			}
-		}
-
-		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
-		}
+/**
+ * Returns the listeners for the swipeable action.
+ * @param {HTMLElement} node - The node where the event is dispatched.
+ * @param {import(./types).SwipeableOptions} options - The options for the swipe.
+ * @param {import(./types).TouchTracker} track - The tracking object.
+ * @returns {import(./types).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
+}
 
-	updateListeners(enabled)
+/**
+ * Handles the touch start event.
+ *
+ * @param {Event} event
+ * @param {import(./types).TouchTracker} track
+ */
+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
+/**
+ * Handles the touch end event.
+ *
+ * @param {Event} event - The touch event.
+ * @param {HTMLElement} node - The node where the event is dispatched.
+ * @param {import(./types).SwipeableOptions} options options - The options for the swipe.
+ * @param {import(./types).TouchTracker} track - The tracking object.
+ */
+function touchEnd(event, node, options, track) {
+	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 (speed <= options.minSpeed) return
+
+	const isHorizontalSwipe =
+		options.horizontal && Math.abs(distX) >= options.threshold
+	const isVerticalSwipe =
+		options.vertical && Math.abs(distY) >= options.threshold
+
+	if (!isHorizontalSwipe && !isVerticalSwipe) return
+
+	const swipeDirection = getSwipeDirection(distX, distY)
+	node.dispatchEvent(new CustomEvent(`swipe${swipeDirection}`))
+}
+
+function getSwipeDirection(distX, distY) {
+	if (Math.abs(distX) > Math.abs(distY)) {
+		return distX > 0 ? 'Right' : 'Left'
+	} else {
+		return distY > 0 ? 'Down' : 'Up'
 	}
 }

package/src/traversable.js

@@ -1,6 +1,11 @@
+import { mappedList, isNested } from '@rokkit/core'
+import { pick } from 'ramda'
 import {
 	getClosestAncestorWithAttribute,
-	mapKeyboardEventsToActions
+	mapKeyboardEventsToActions,
+	emit,
+	handleItemClick,
+	EventManager
 } from './lib'
 
 const defaultOptions = {
@@ -8,70 +13,89 @@ const defaultOptions = {
 	nested: false,
 	enabled: true
 }
-export function traversable(element, data) {
-	let listening = false
-	let options = {}
-	let tracker = {}
+
+/**
+ * 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, options) {
+	const content = mappedList(options.items, options.fields)
+	const manager = EventManager(element)
+
+	let current = { position: [], item: null }
 	let handlers = {}
 
-	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 moveCursor = (direction) => {
+		const result = content[direction](current.position)
+		if (result) {
+			current = result
 
-	let listeners = {
-		keydown: (event) => {
-			const action = handlers[event.key]
-			if (action) action(event)
-		},
-		click: (event) => {
-			const target = getClosestAncestorWithAttribute(event.target, 'data-index')
+			checkAndEmit('move')
+		}
+	}
 
-			if (target) {
-				const index = parseInt(target.getAttribute('data-index'))
-				tracker.index = index
-				actions.select()
-			}
+	const checkAndEmit = (event) => {
+		if (current && current.item) {
+			emit(element, event, pick(['item', 'position'], current))
 		}
 	}
 
-	const configure = (data) => {
-		// const valueChanged = options.value !== data.value
-		options = { ...options, ...data }
+	const actions = {
+		next: () => moveCursor('next'),
+		previous: () => moveCursor('previous'),
+		select: () => checkAndEmit('select'),
+		escape: () => checkAndEmit('escape'),
+		collapse: () => checkAndEmit('collapse'),
+		expand: () => checkAndEmit('expand')
+	}
 
-		listening = setupEventHandlers(element, options, listening, listeners)
+	const listeners = {
+		keydown: (event) => {
+			if (event.key in handlers) handlers[event.key](event)
+		}
+		// click: (event) => {
+		// 	const target = getClosestAncestorWithAttribute(event.target, 'data-path')
+		// 	if (target) {
+		// 		const position = target
+		// 			.getAttribute('data-path')
+		// 			.split(',')
+		// 			.map((i) => +i)
+		// 		current = content.findByPosition(position)
+		// 		current = handleItemClick(element, current)
+		// 	}
+		// }
+	}
+
+	const update = (data) => {
+		options = { ...defaultOptions, ...options, ...data }
+		options.nested = isNested(options.items, options.fields)
+		content.update(options.items, options.fields)
 		handlers = mapKeyboardEventsToActions(actions, options)
-		// if (valueChanged) handleValueChange(element, options)
+		manager.update(options.enabled, listeners)
+		// current = handleValueChange(element, data, content, current)
 	}
 
-	configure({ ...defaultOptions, ...data })
+	update(options)
 
 	return {
-		update: configure,
-		destroy: () => configure({ enabled: false })
+		update,
+		destroy: () => manager.destroy()
 	}
 }
 
-function setupEventHandlers(element, options, listening, handlers) {
-	const { enabled } = options
+// const handleValueChange = (element, data, content, current) => {
+// 	if (data.value !== null && data.value !== current?.value) {
+// 		current = content.findByValue(data.value)
+// 		if (current) scrollIntoView(element, current.position)
+// 	}
+// 	return current
+// }
 
-	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)
-		)
-	}
-	return enabled
-}
-
-function emit(element, event, tracker) {
-	element.dispatchEvent(new CustomEvent(event, { detail: tracker }))
-}
-// function handleValueChange(element, options) {}
+// function scrollIntoView(element, position) {
+// 	if (!Array.isArray(position) || position.length == 0) return
+// 	const node = element.querySelector(`[data-index="${position.join(',')}"]`)
+// 	if (node) node.scrollIntoView()
+// }

package/src/types.js

@@ -51,3 +51,68 @@
  * @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} [" "]
+ */
+
+/**
+ * @typedef {Object} TouchTracker
+ * @property {number} startX - The start X position of the touch.
+ * @property {number} startY - The start Y position of the touch.
+ * @property {number} startTime - The start time of the touch.
+ */