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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.37",
+  "version": "1.0.0-next.38",
   "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.38"
   },
   "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,63 @@
+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} [" "]
+ */
+
+/**
+ * Maps keyboard events to actions based on the given handlers and options.
+ *
+ * @param {ActionHandlers} handlers
+ * @param {NavigationOptions} options
+ * @returns {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
+	})
+}
+
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}

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/swipeable.js

@@ -16,8 +16,7 @@ export function swipeable(
 		minSpeed = 300
 	} = {}
 ) {
-	if (!enabled) return { destroy() {} }
-
+	let listening = false
 	let startX
 	let startY
 	let startTime
@@ -57,17 +56,37 @@ export function swipeable(
 		}
 	}
 
-	node.addEventListener('touchstart', touchStart)
-	node.addEventListener('touchend', touchEnd)
-	node.addEventListener('mousedown', touchStart)
-	node.addEventListener('mouseup', touchEnd)
-
-	return {
-		destroy() {
+	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
+		}
+	}
+
+	updateListeners(enabled)
+
+	return {
+		update: (options) => {
+			horizontal = options.horizontal
+			vertical = options.vertical
+			threshold = options.threshold
+			enabled = options.enabled
+			minSpeed = options.minSpeed
+
+			updateListeners(enabled)
+		},
+		destroy() {
+			updateListeners(false)
 		}
 	}
 }

package/src/traversable.js

@@ -0,0 +1,77 @@
+import {
+	getClosestAncestorWithAttribute,
+	mapKeyboardEventsToActions
+} from './lib'
+
+const defaultOptions = {
+	horizontal: false,
+	nested: false,
+	enabled: true
+}
+export function traversable(element, data) {
+	let listening = false
+	let options = {}
+	let tracker = {}
+	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)
+	}
+
+	let 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()
+			}
+		}
+	}
+
+	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)
+		)
+	}
+	return enabled
+}
+
+function emit(element, event, tracker) {
+	element.dispatchEvent(new CustomEvent(event, { detail: tracker }))
+}
+// function handleValueChange(element, options) {}

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
+	}
+}