@rokkit/actions 1.0.0-next.100 → 1.0.0-next.103

package/src/hierarchy.js

@@ -1,156 +0,0 @@
-import { isExpanded } from '@rokkit/core'
-
-/**
- * Navigate to last visible child in the hirarchy starting with the provided path
- *
- * @param {Array<import('./types').PathFragment>} path - path to a node in the hierarchy
- * @returns
- */
-export function navigateToLastVisibleChild(path) {
-	let current = path[path.length - 1]
-
-	while (isExpanded(current.items[current.index], current.fields)) {
-		const items = current.items[current.index][current.fields.children]
-		const level = {
-			items,
-			index: items.length - 1,
-			fields: current.fields.fields ?? current.fields
-		}
-		path.push(level)
-		current = level
-	}
-
-	return path
-}
-
-/**
- * Navigate to the next item
- *
- * @param {Array<import('./types').PathFragment>}                 path  - path to a node in the hierarchy
- * @param {Array<*>}                            items - array of items
- * @param {import('@rokkit/core').FieldMapping} fields - field mapping
- * @returns
- */
-export function moveNext(path, items, fields) {
-	if (path.length === 0) {
-		return [{ index: 0, items, fields }]
-	}
-
-	const current = path[path.length - 1]
-	if (isExpanded(current.items[current.index], current.fields)) {
-		path.push({
-			items: current.items[current.index][current.fields.children],
-			index: 0,
-			fields: current.fields.fields || current.fields
-		})
-	} else if (current.index < current.items.length - 1) {
-		current.index++
-	} else {
-		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
- *
- * @param {Array<import('./types').PathFragment>} path  - path to a node in the hierarchy
- * @returns
- */
-export function movePrevious(path) {
-	if (path.length === 0) return []
-
-	const current = path[path.length - 1]
-
-	if (current.index === 0) {
-		if (path.length > 1) path.pop()
-		return path
-	}
-
-	current.index--
-	if (isExpanded(current.items[current.index], current.fields)) {
-		return navigateToLastVisibleChild(path)
-	}
-	return path
-}
-
-/**
- *
- * @param {Array<integer>} indices
- * @param {Array<*>} items
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns
- */
-export function pathFromIndices(indices, items, fields) {
-	const path = []
-	let fragment = {}
-	indices.forEach((index, level) => {
-		if (level === 0) {
-			fragment = { index, items, fields }
-		} else {
-			fragment = {
-				index,
-				items: fragment.items[fragment.index][fragment.fields.children],
-				fields: fragment.fields.fields ?? fragment.fields
-			}
-		}
-		path.push(fragment)
-	})
-	return path
-}
-
-/**
- * Get the indices from the path
- * @param {Array<import('./types').PathFragment>} path
- * @returns {Array<integer>}
- */
-export function indicesFromPath(path) {
-	return path.map(({ index }) => index)
-}
-
-/**
- * Get the current node from the path
- * @param {Array<import('./types').PathFragment>} path
- * @returns {*}
- */
-export function getCurrentNode(path) {
-	if (path.length === 0) return null
-	const lastIndex = path.length - 1
-	return path[lastIndex].items[path[lastIndex].index]
-}
-
-/**
- * Find the item in the hierarchy using the indices
- *
- * @param {Array<*>} items
- * @param {Array<integer>} indices
- * @param {import('@rokkit/core').FieldMapping} fields
- * @returns {*}
- */
-export function findItem(items, indices, fields) {
-	let item = items[indices[0]]
-	let levelFields = fields
-	for (let level = 1; level < indices.length; level++) {
-		item = item[levelFields.children][indices[level]]
-		levelFields = levelFields.fields ?? levelFields
-	}
-	return item
-}

package/src/lib/constants.js

@@ -1,35 +0,0 @@
-export const dimensionAttributes = {
-	vertical: {
-		scroll: 'scrollTop',
-		offset: 'offsetHeight',
-		paddingStart: 'paddingTop',
-		paddingEnd: 'paddingBottom',
-		size: 'height'
-	},
-	horizontal: {
-		scroll: 'scrollLeft',
-		offset: 'offsetWidth',
-		paddingStart: 'paddingLeft',
-		paddingEnd: 'paddingRight',
-		size: 'width'
-	}
-}
-
-export const defaultResizerOptions = {
-	horizontal: false,
-	minSize: 40,
-	minVisible: 1,
-	maxVisible: null,
-	availableSize: 200,
-	start: 0
-}
-
-export const defaultVirtualListOptions = {
-	itemSelector: 'virtual-list-item',
-	contentSelector: 'virtual-list-content',
-	enabled: true,
-	horizontal: false,
-	start: 0,
-	limit: null,
-	index: null
-}

package/src/lib/event-manager.js

@@ -1,50 +0,0 @@
-/**
- * EventManager class to manage event listeners on an element.
- *
- * @param {HTMLElement} element  - The element to listen for events on.
- * @param {Object}      handlers - An object with event names as keys and event handlers as values.
- * @returns {Object} - An object with methods to activate, reset, and update the event listeners.
- */
-export function EventManager(element, handlers = {}) {
-	let listening = false
-
-	/**
-	 * Activate the event listeners.
-	 */
-	function activate() {
-		if (!listening) {
-			Object.entries(handlers).forEach(([event, handler]) =>
-				element.addEventListener(event, handler)
-			)
-			listening = true
-		}
-	}
-
-	/**
-	 * Reset the event listeners.
-	 */
-	function reset() {
-		if (listening) {
-			Object.entries(handlers).forEach(([event, handler]) =>
-				element.removeEventListener(event, handler)
-			)
-			listening = false
-		}
-	}
-
-	/**
-	 * Update the event listeners.
-	 *
-	 * @param {Object} newHandlers - An object with event names as keys and event handlers as values.
-	 * @param {boolean} enabled - Whether to enable or disable the event listeners.
-	 */
-	function update(newHandlers = handlers, enabled = true) {
-		if (listening !== enabled || handlers !== newHandlers) {
-			reset()
-			handlers = newHandlers
-			if (enabled) activate()
-		}
-	}
-
-	return { activate, reset, update }
-}

package/src/lib/index.js

@@ -1,5 +0,0 @@
-export { dimensionAttributes, defaultResizerOptions, defaultVirtualListOptions } from './constants'
-// skipcq: JS-E1004 - Needed for exposing all functions
-export * from './internal'
-export { EventManager } from './event-manager'
-export { virtualListViewport } from './viewport'

package/src/lib/internal.js

@@ -1,185 +0,0 @@
-import { compact, hasChildren, isExpanded } 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
-	}
-	const expand = nested ? handlers.expand : null
-	const 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)
-		})
-	}
-}
-
-/**
- * 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
-}
-
-/**
- * Caclulates sum of array values between the given bounds.
- * If a value is null, the default size is used.
- *
- * @param {Array<number|null>} sizes
- * @param {number} lower
- * @param {number} upper
- * @param {number} [defaultSize]
- * @returns {number}
- */
-export function calculateSum(sizes, lower, upper, defaultSize = 40, gap = 0) {
-	return (
-		sizes
-			.slice(lower, upper)
-			.map((size) => size ?? defaultSize)
-			.reduce((acc, size) => acc + size + gap, 0) - gap
-	)
-}
-
-/**
- * Updates the sizes array with the given values.
- *
- * @param {Array<number|null>} sizes
- * @param {Array<number>} values
- * @param {number} [offset]
- * @returns {Array<number|null>}
- */
-export function updateSizes(sizes, values, offset = 0) {
-	const result = [...sizes.slice(0, offset), ...values, ...sizes.slice(offset + values.length)]
-
-	return result
-}
-
-/**
- * Adjusts the viewport to ensure that the bounds contain the given number of items.
- *
- * @param {import('../types').Bounds} current
- * @param {number} count
- * @param {number} visibleCount
- * @returns {import('../types').Bounds}
- */
-export function fixViewportForVisibileCount(current, count, visibleCount) {
-	let { lower, upper } = current
-	if (lower < 0) lower = 0
-	if (lower + visibleCount > count) {
-		upper = count
-		lower = Math.max(0, upper - visibleCount)
-	} else if (lower + visibleCount !== upper) {
-		upper = lower + visibleCount
-	}
-	return { lower, upper }
-}
-
-/**
- * Adjusts the viewport to ensure the given index is visible.
- *
- * @param {number} index
- * @param {import('../types').Bounds} current
- * @param {number} visibleCount
- * @returns {import('../types').Bounds}
- */
-export function fitIndexInViewport(index, current, visibleCount) {
-	let { lower, upper } = current
-	if (index >= upper) {
-		upper = index + 1
-		lower = upper - visibleCount
-	} else if (index < lower) {
-		lower = index
-		upper = lower + visibleCount
-	}
-	return { lower, upper }
-}

package/src/lib/viewport.js

@@ -1,123 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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 })
-	}
-}