@rokkit/actions 1.0.0-next.100

package/src/lib/viewport.js

@@ -0,0 +1,123 @@
+import { writable, get } from 'svelte/store'
+import { pick } from 'ramda'
+import {
+	updateSizes,
+	calculateSum,
+	fixViewportForVisibileCount,
+	fitIndexInViewport
+} from './internal'
+
+export function virtualListViewport(options) {
+	const { gap = 0 } = options
+	let { minSize = 40, maxVisible = 0, visibleSize } = options
+	let current = { lower: 0, upper: 0 }
+	const bounds = writable({ lower: 0, upper: 0 })
+	const space = writable({
+		before: 0,
+		after: 0
+	})
+	let items = null
+	let averageSize = minSize
+	let visibleCount = maxVisible
+	let value = null
+	let cache = []
+	let index = -1
+
+	const updateBounds = ({ lower, upper }) => {
+		const previous = get(bounds)
+		if (maxVisible > 0) {
+			const visible = calculateSum(cache, lower, upper, averageSize, gap)
+			space.update((state) => (state = { ...state, visible }))
+		}
+		if (previous.lower !== lower) {
+			const before = calculateSum(cache, 0, lower, averageSize)
+			space.update((state) => (state = { ...state, before }))
+		}
+		if (previous.upper !== upper) {
+			const after = calculateSum(cache, upper, cache.length, averageSize)
+			space.update((state) => (state = { ...state, after }))
+		}
+		if (previous.lower !== lower || previous.upper !== upper) {
+			bounds.set({ lower, upper })
+		}
+	}
+
+	const update = (data) => {
+		// const previous = get(bounds)
+
+		data = {
+			start: current.lower,
+			end: current.upper,
+			value,
+			...data
+		}
+		items = data.items ?? items
+		minSize = data.minSize ?? minSize
+		maxVisible = data.maxVisible ?? maxVisible
+		visibleSize = data.visibleSize ?? visibleSize
+
+		if (items.length !== cache.length) {
+			cache = Array.from({ length: items.length }).fill(null)
+			if (items.length === 0) index = -1
+		}
+		current = { lower: data.start, upper: data.end }
+
+		cache = updateSizes(cache, data.sizes ?? [], current.lower)
+		averageSize =
+			cache.length === 0
+				? minSize
+				: calculateSum(cache, 0, cache.length, averageSize) / cache.length
+
+		let visible = calculateSum(cache, current.lower, current.upper, averageSize, gap)
+
+		if (maxVisible > 0) {
+			visibleCount = maxVisible
+		} else {
+			while (visible < visibleSize) visible += averageSize
+			while (visible - averageSize > visibleSize) visible -= averageSize
+			visibleCount = Math.ceil(visible / averageSize)
+		}
+		current = fixViewportForVisibileCount(current, cache.length, visibleCount)
+
+		// recalculate the lower, upper bounds based on current index
+		if (items.length > 0 && data.value && data.value !== value) {
+			index = items.findIndex((item) => item === data.value)
+			if (index > -1) {
+				value = data.value
+				current = fitIndexInViewport(index, current, visibleCount)
+			}
+		}
+		updateBounds(current)
+	}
+	const moveByOffset = (offset) => {
+		if (cache.length > 0) {
+			index = Math.max(0, Math.min(index + offset, cache.length - 1))
+			current = fitIndexInViewport(index, current, visibleCount)
+			updateBounds(current)
+		}
+	}
+
+	const scrollTo = (position) => {
+		const start = Math.round(position / averageSize)
+		if (start !== current.lower) update({ start })
+	}
+
+	update(options)
+
+	return {
+		bounds: pick(['subscribe'], bounds),
+		space: pick(['subscribe'], space),
+		get index() {
+			return index
+		},
+		update,
+		scrollTo,
+		moveByOffset,
+		next: () => moveByOffset(1),
+		previous: () => moveByOffset(-1),
+		nextPage: () => moveByOffset(visibleCount),
+		previousPage: () => moveByOffset(-visibleCount),
+		first: () => moveByOffset(-cache.length),
+		last: () => moveByOffset(cache.length + 1)
+	}
+}

package/src/navigable.js

@@ -0,0 +1,46 @@
+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.
+ *
+ * @param {HTMLElement} node
+ * @param {import('./types').NavigableOptions} options
+ * @returns {import('./types').SvelteActionReturn}
+ */
+export function navigable(node, options) {
+	options = { ...defaultOptions, ...options }
+
+	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'))
+	}
+
+	let actions = {} //getKeyboardActions(node, { horizontal, nested })
+	const handleKeydown = (event) => handleAction(actions, event)
+
+	/**
+	 * Update the listeners based on the input configuration.
+	 * @param {import('./types').NavigableOptions} input
+	 */
+	function updateListeners(input) {
+		options = { ...options, ...input }
+		if (listening) node.removeEventListener('keydown', handleKeydown)
+
+		actions = getKeyboardActions(node, input, handlers)
+		if (input.enabled) node.addEventListener('keydown', handleKeydown)
+
+		listening = input.enabled
+	}
+
+	updateListeners(options)
+
+	return {
+		update: (config) => updateListeners(config),
+		destroy: () => updateListeners({ enabled: false })
+	}
+}

package/src/navigator.js

@@ -0,0 +1,182 @@
+import { handleAction } from './utils'
+import { noop, isNested, hasChildren, isExpanded } from '@rokkit/core'
+import {
+	moveNext,
+	movePrevious,
+	pathFromIndices,
+	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.
+ *
+ * @param {HTMLElement}                        element - Root element for the actionn
+ * @param {import('./types').NavigatorOptions} options - Configuration options for the action
+ * @returns
+ */
+export function navigator(element, options) {
+	const { fields, enabled = true, vertical = true, idPrefix = 'id-' } = options
+	let items = [],
+		path = null,
+		currentNode = null
+
+	if (!enabled) return { destroy: noop }
+
+	const update = (input) => {
+		const previousNode = currentNode
+		items = input.items
+		path = pathFromIndices(input.indices ?? [], items, fields)
+		currentNode = getCurrentNode(path)
+
+		if (previousNode !== currentNode && currentNode) {
+			const indices = indicesFromPath(path)
+			const current = element.querySelector(`#${idPrefix}${indices.join('-')}`)
+			if (current) {
+				current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+			}
+		}
+	}
+
+	const next = () => {
+		const previousNode = currentNode
+		path = moveNext(path, items, fields)
+		currentNode = getCurrentNode(path)
+		if (previousNode !== currentNode) moveTo(element, path, currentNode, idPrefix)
+	}
+
+	const previous = () => {
+		const previousNode = currentNode
+		path = movePrevious(path)
+		if (path.length > 0) {
+			currentNode = getCurrentNode(path)
+			if (previousNode !== currentNode) moveTo(element, path, currentNode, idPrefix)
+		}
+	}
+	const select = () => {
+		if (currentNode) emit('select', element, indicesFromPath(path), currentNode)
+	}
+	const collapse = () => {
+		if (currentNode) {
+			const expanded = isExpanded(currentNode, path[path.length - 1].fields)
+			if (expanded) {
+				toggle()
+			} else if (path.length > 0) {
+				path = path.slice(0, -1)
+				currentNode = getCurrentNode(path)
+				select()
+			}
+		}
+	}
+	const expand = () => {
+		if (currentNode && hasChildren(currentNode, path[path.length - 1].fields)) {
+			toggle()
+		}
+	}
+	function toggle() {
+		const expanded = isExpanded(currentNode, path[path.length - 1].fields)
+		const event = expanded ? 'collapse' : 'expand'
+		currentNode[path[path.length - 1].fields.isOpen] = !expanded
+		emit(event, element, indicesFromPath(path), currentNode)
+	}
+	const handlers = { next, previous, select, collapse, expand }
+
+	update(options)
+
+	const nested = isNested(items, fields)
+	const actions = mapKeyboardEventsToActions(handlers, {
+		horizontal: !vertical,
+		nested
+	})
+
+	const handleKeyDown = (event) => handleAction(actions, event)
+
+	const handleClick = (event) => {
+		event.stopPropagation()
+		const target = findParentWithDataPath(event.target, element)
+		const indices = !target
+			? []
+			: target.dataset.path
+					.split(',')
+					.filter((item) => item !== '')
+					.map((item) => Number(item))
+
+		if (indices.length > 0 && event.target.tagName !== 'DETAIL') {
+			path = pathFromIndices(indices, items, fields)
+			currentNode = getCurrentNode(path)
+			if (hasChildren(currentNode, path[path.length - 1].fields)) {
+				currentNode[path[path.length - 1].fields.isOpen] =
+					!currentNode[path[path.length - 1].fields.isOpen]
+				const eventName = currentNode[path[path.length - 1].fields.isOpen] ? 'expand' : 'collapse'
+				emit(eventName, element, indices, currentNode)
+			} else if (currentNode !== null) emit('select', element, indices, currentNode)
+			emit('move', element, indices, currentNode)
+			// emit('select', element, indices, currentNode)
+		}
+	}
+
+	element.addEventListener('keydown', handleKeyDown)
+	element.addEventListener('click', handleClick)
+
+	return {
+		update,
+		destroy() {
+			element.removeEventListener('keydown', handleKeyDown)
+			element.removeEventListener('click', handleClick)
+		}
+	}
+}
+
+/**
+ * Move to the element with the given path
+ *
+ * @param {HTMLElement} element
+ * @param {*} path
+ * @param {*} currentNode
+ * @param {*} idPrefix
+ */
+export function moveTo(element, path, currentNode, idPrefix) {
+	const indices = indicesFromPath(path)
+	const current = element.querySelector(`#${idPrefix}${indices.join('-')}`)
+	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+
+	emit('move', element, indices, currentNode)
+}
+
+/**
+ * Find the parent element with data-path attribute
+ *
+ * @param {HTMLElement} element
+ * @param {HTMLElement} root
+ * @returns {HTMLElement}
+ */
+export function findParentWithDataPath(element, root) {
+	if (element.hasAttribute('data-path')) return element
+	let parent = element.parentNode
+
+	while (parent && parent !== root && !parent.hasAttribute('data-path')) {
+		parent = parent.parentNode
+	}
+
+	return parent !== root ? parent : null
+}
+
+/**
+ * Emit a custom event on the element with the path and node as detail
+ *
+ * @param {string} event
+ * @param {HTMLElement} element
+ * @param {Array<integer>} indices
+ * @param {*} node
+ */
+function emit(event, element, indices, node) {
+	element.dispatchEvent(
+		new CustomEvent(event, {
+			detail: {
+				path: indices,
+				node
+			}
+		})
+	)
+}

package/src/pannable.js

@@ -0,0 +1,67 @@
+import { omit } from 'ramda'
+import { removeListeners, setupListeners } from './lib'
+/**
+ * Makes an element pannable with mouse or touch events.
+ *
+ * @param {HTMLElement} node The DOM element to apply the panning action.
+ * @returns {import('./types').SvelteActionReturn}
+ */
+export function pannable(node) {
+	let coords = { x: 0, y: 0 }
+	const listeners = {
+		primary: {
+			mousedown: start,
+			touchstart: start
+		},
+		secondary: {
+			mousemove: move,
+			mouseup: stop,
+			touchmove: move,
+			touchend: stop
+		}
+	}
+
+	function start(event) {
+		coords = handleEvent(node, event, 'panstart', coords)
+		setupListeners(window, listeners.secondary)
+	}
+
+	function move(event) {
+		coords = handleEvent(node, event, 'panmove', coords)
+	}
+
+	function stop(event) {
+		coords = handleEvent(node, event, 'panend', coords)
+		removeListeners(window, listeners.secondary)
+	}
+
+	setupListeners(node, listeners.primary)
+
+	return {
+		destroy: () => removeListeners(node, listeners.primary)
+	}
+}
+
+/**
+ * Handles the panning event.
+ *
+ * @param {HTMLElement}              node   - The node where the event is dispatched.
+ * @param {Event}                    event  - The event object.
+ * @param {string}                   name   - The name of the event.
+ * @param {import('./types').Coords} coords - The previous coordinates of the event.
+ */
+function handleEvent(node, event, name, coords) {
+	const x = event.clientX || event.touches[0].clientX
+	const y = event.clientY || event.touches[0].clientY
+	const detail = { x, y }
+
+	if (name === 'panmove') {
+		detail.dx = x - coords.x
+		detail.dy = y - coords.y
+	}
+
+	event.stopPropagation()
+	event.preventDefault()
+	node.dispatchEvent(new CustomEvent(name, { detail }))
+	return omit(['dx', 'dy'], detail)
+}

package/src/swipeable.js

@@ -0,0 +1,150 @@
+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.
+ *
+ * @param {HTMLElement} node
+ * @param {import(./types).SwipeableOptions} options
+ * @returns {import('./types').SvelteActionReturn}
+ */
+export function swipeable(node, options = defaultOptions) {
+	const track = {}
+	let listeners = {}
+
+	const updateListeners = (props) => {
+		removeListeners(node, listeners)
+		listeners = getListeners(node, props, track)
+		setupListeners(node, listeners, props)
+	}
+
+	options = { ...defaultOptions, ...options }
+	updateListeners(options)
+
+	return {
+		update: (data) => {
+			options = { ...options, ...data }
+			updateListeners(options)
+		},
+		destroy() {
+			removeListeners(node, listeners)
+		}
+	}
+}
+
+/**
+ * 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 {}
+
+	const 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
+}
+
+/**
+ * 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()
+}
+
+/**
+ * Handles the touch end event and triggers a swipe event if the criteria are met.
+ *
+ * @param {Event}       event   - The event object representing the touch or mouse event.
+ * @param {HTMLElement} node    - The HTML element on which the swipe event will be dispatched.
+ * @param {object}      options - Configuration options for determining swipe behavior.
+ * @param {object}      track   - An object tracking the start point and time of the touch or swipe action.
+ */
+function touchEnd(event, node, options, track) {
+	const { distance, duration } = getTouchMetrics(event, track)
+	if (!isSwipeFastEnough(distance, duration, options.minSpeed)) return
+
+	const swipeDetails = getSwipeDetails(distance, options)
+	if (!swipeDetails.isValid) return
+	node.dispatchEvent(new CustomEvent(`swipe${swipeDetails.direction}`))
+}
+
+/**
+ * Calculates and returns the distance and duration of the swipe.
+ *
+ * @param {Event} event - The event object that initiated the touchEnd.
+ * @param {object} track - The tracking object holding the start of the touch action.
+ * @returns {{distance: {x: number, y: number}, duration: number}} The distance swiped (x and y) and the duration of the swipe.
+ */
+function getTouchMetrics(event, 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
+	return { distance: { x: distX, y: distY }, duration }
+}
+
+/**
+ * Checks if the swipe was fast enough according to the minimum speed requirement.
+ *
+ * @param {{x: number, y: number}} distance - The distance of the swipe action.
+ * @param {number}                 duration - The duration of the swipe action in seconds.
+ * @param {number}                 minSpeed - The minimum speed threshold for the swipe action.
+ * @returns {boolean}              True if the swipe is fast enough, otherwise false.
+ */
+function isSwipeFastEnough(distance, duration, minSpeed) {
+	const speed = Math.max(Math.abs(distance.x), Math.abs(distance.y)) / duration
+	return speed > minSpeed
+}
+
+/**
+ * Determines swipe validity and direction based on horizontal/vertical preferences and thresholds.
+ *
+ * @param {{x: number, y: number}} distance - The distance of the swipe.
+ * @param {object} options - Configuration options such as direction preferences and thresholds.
+ * @returns {{isValid: boolean, direction?: string}} Object indicating whether the swipe is valid, and if so, its direction.
+ */
+function getSwipeDetails(distance, options) {
+	const isHorizontalSwipe = options.horizontal && Math.abs(distance.x) >= options.threshold
+	const isVerticalSwipe = options.vertical && Math.abs(distance.y) >= options.threshold
+	if (isHorizontalSwipe || isVerticalSwipe) {
+		return {
+			isValid: true,
+			direction: getSwipeDirection(distance.x, distance.y)
+		}
+	}
+	return { isValid: false }
+}
+/**
+ * Returns the swipe direction based on the distance in the x and y axis.
+ *
+ * @param {number} distX - The distance in the x axis.
+ * @param {number} distY - The distance in the y axis.
+ * @returns {string} The swipe direction.
+ */
+function getSwipeDirection(distX, distY) {
+	if (Math.abs(distX) > Math.abs(distY)) {
+		return distX > 0 ? 'Right' : 'Left'
+	} else {
+		return distY > 0 ? 'Down' : 'Up'
+	}
+}

package/src/switchable.js

@@ -0,0 +1,52 @@
+import { removeListeners, setupListeners } from './lib'
+
+/**
+ * A switchable action that allows the user to cycle through a list of options
+ *
+ * @param {HTMLElement} node
+ * @param {Object}      data
+ */
+export function switchable(node, data) {
+	let index = 0
+	let { value, options, disabled } = data
+
+	const update = (input) => {
+		value = input.value === null || input.value === undefined ? options[0] : input.value
+		options = input.options
+		disabled = input.disabled
+		index = options.indexOf(value)
+	}
+
+	const toggle = (increment = 1) => {
+		index = (index + increment) % options.length
+		value = options[index]
+		node.dispatchEvent(new CustomEvent('change', { detail: value }))
+	}
+
+	const listeners = getEventHandlers(options, toggle)
+
+	update(data)
+	setupListeners(node, listeners, { enabled: !disabled })
+
+	return {
+		update,
+		destroy: () => removeListeners(node, listeners)
+	}
+}
+/**
+ * Returns a keydown handler for the switchable component
+ *
+ * @param {Object} options
+ */
+function getEventHandlers(options, toggle) {
+	const keydown = (e) => {
+		if ([' ', 'Enter', 'ArrowRight', 'ArrowLeft'].includes(e.key)) {
+			e.preventDefault()
+			e.stopPropagation()
+
+			toggle(e.key === 'ArrowLeft' ? options.length - 1 : 1)
+		}
+	}
+
+	return { keydown, click: () => toggle(1) }
+}

package/src/themeable.js

@@ -0,0 +1,42 @@
+import { theme } from '@rokkit/stores'
+
+/**
+ * A svelte action function that adds theme classes to the element
+ *
+ * @param {HTMLElement} node
+ */
+export function themable(node) {
+	let previous = {}
+
+	theme.subscribe((data) => {
+		switchClass(node, data.name, previous.name)
+		switchClass(node, data.mode, previous.mode)
+		// switchPalette(node, data.palette, previous.palette)
+		previous = data
+	})
+}
+
+/**
+ * Switch the class on the node
+ *
+ * @param {HTMLElement} node
+ * @param {string} current
+ * @param {string} previous
+ * @returns
+ */
+function switchClass(node, current, previous) {
+	if (current && current !== previous) {
+		node.classList.remove(previous)
+		node.classList.add(current)
+	}
+}
+
+// function switchPalette(node, current, previous) {
+// 	Object.keys(current).map((key) => {
+// 		if (!equals(current[key], previous[key])) {
+// 			Object.keys(current[key]).map((shade) => {
+// 				node.style.setProperty(`--${key}-${shade}`, current[key][shade])
+// 			})
+// 		}
+// 	})
+// }