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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.39",
+  "version": "1.0.0-next.43",
   "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.39"
+    "shared-config": "1.0.0-next.43"
   },
   "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,4 +1,5 @@
 import { compact } from '@rokkit/core'
+import { hasChildren, isExpanded } from '@rokkit/core'
 
 /**
  * Emits a custom event with the given data.
@@ -64,7 +65,6 @@ export function getClosestAncestorWithAttribute(element, attribute) {
  */
 export function setupListeners(element, listeners, options) {
 	const { enabled } = { enabled: true, ...options }
-
 	if (enabled) {
 		Object.entries(listeners).forEach(([event, listener]) =>
 			element.addEventListener(event, listener)
@@ -87,3 +87,27 @@ export function removeListeners(element, listeners) {
 		})
 	}
 }
+
+/**
+ * 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/swipeable.js

@@ -1,12 +1,5 @@
-/**
- * A svelte action function that captures swipe actions and emits event for corresponding movements.
- *
- * @param {HTMLElement} node
- * @param {import(./types).SwipeableOptions} options
- * @returns {import('./types').SvelteActionReturn}
- */
-
 import { removeListeners, setupListeners } from './lib'
+
 const defaultOptions = {
 	horizontal: true,
 	vertical: false,
@@ -14,6 +7,14 @@ const defaultOptions = {
 	enabled: true,
 	minSpeed: 300
 }
+
+/**
+ * A svelte action function that captures swipe actions and emits event for corresponding movements.
+ *
+ * @param {HTMLElement} node
+ * @param {import(./types).SwipeableOptions} options
+ * @returns {import('./types').SvelteActionReturn}
+ */
 export function swipeable(node, options = defaultOptions) {
 	let track = {}
 	let listeners = {}
@@ -38,6 +39,13 @@ export function swipeable(node, options = defaultOptions) {
 	}
 }
 
+/**
+ * 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 {}
 
@@ -50,6 +58,12 @@ function getListeners(node, options, track) {
 	return listeners
 }
 
+/**
+ * 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
@@ -57,31 +71,38 @@ function touchStart(event, track) {
 	track.startTime = new Date().getTime()
 }
 
+/**
+ * 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 { 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 (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 (speed <= options.minSpeed) return
 
-	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'))
-			}
-		}
+	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,9 +1,11 @@
+import { mappedList, isNested } from '@rokkit/core'
+import { pick } from 'ramda'
 import {
 	getClosestAncestorWithAttribute,
 	mapKeyboardEventsToActions,
-	setupListeners,
-	removeListeners,
-	emit
+	emit,
+	handleItemClick,
+	EventManager
 } from './lib'
 
 const defaultOptions = {
@@ -19,72 +21,81 @@ const defaultOptions = {
  * @param {import('./types').TraversableOptions} data
  * @returns
  */
-export function traversable(element, data) {
-	let options = {}
-	let tracker = {}
-	let handlers
-	let actions
-	let listeners
+export function traversable(element, options) {
+	const content = mappedList(options.items, options.fields)
+	const manager = EventManager(element)
 
-	const configure = (data) => {
-		options = { ...options, ...data }
+	let current = { position: [], item: null }
+	let handlers = {}
 
-		removeListeners(element, listeners)
-		actions = getActions(element, tracker)
-		handlers = mapKeyboardEventsToActions(actions, options)
-		listeners = getListeners(handlers, actions, tracker)
-		setupListeners(element, listeners, options)
+	const moveCursor = (direction) => {
+		const result = content[direction](current.position)
+		if (result) {
+			current = result
+
+			checkAndEmit('move')
+		}
 	}
 
-	configure({ ...defaultOptions, ...data })
+	const checkAndEmit = (event) => {
+		if (current && current.item) {
+			emit(element, event, pick(['item', 'position'], current))
+		}
+	}
 
-	return {
-		update: configure,
-		destroy: () => removeListeners(element, listeners)
+	const actions = {
+		next: () => moveCursor('next'),
+		previous: () => moveCursor('previous'),
+		select: () => checkAndEmit('select'),
+		escape: () => checkAndEmit('escape'),
+		collapse: () => checkAndEmit('collapse'),
+		expand: () => checkAndEmit('expand')
 	}
-}
 
-/**
- * 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 {
+	const listeners = {
 		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()
-			}
+			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)
+		// 	}
+		// }
 	}
-}
 
-/**
- *
- * @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)
+	const update = (data) => {
+		options = { ...defaultOptions, ...options, ...data }
+		options.nested = isNested(options.items, options.fields)
+		content.update(options.items, options.fields)
+		handlers = mapKeyboardEventsToActions(actions, options)
+		manager.update(options.enabled, listeners)
+		// current = handleValueChange(element, data, content, current)
+	}
+
+	update(options)
+
+	return {
+		update,
+		destroy: () => manager.destroy()
 	}
-	return actions
 }
 
-// function handleValueChange(element, 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
+// }
+
+// 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

@@ -109,3 +109,10 @@
  * @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.
+ */