@rokkit/actions 1.0.0-next.44 → 1.0.0-next.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.44",
+  "version": "1.0.0-next.48",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,18 +13,18 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.3",
+    "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "@testing-library/svelte": "^4.0.3",
     "@types/ramda": "^0.29.3",
-    "@vitest/coverage-v8": "^0.33.0",
-    "@vitest/ui": "~0.33.0",
+    "@vitest/coverage-v8": "^0.34.4",
+    "@vitest/ui": "~0.34.4",
     "jsdom": "^22.1.0",
-    "svelte": "^4.1.1",
-    "typescript": "^5.1.6",
+    "svelte": "^4.2.0",
+    "typescript": "^5.2.2",
     "validators": "latest",
-    "vite": "^4.4.7",
-    "vitest": "~0.33.0",
-    "shared-config": "1.0.0-next.44"
+    "vite": "^4.4.9",
+    "vitest": "~0.34.4",
+    "shared-config": "1.0.0-next.48"
   },
   "files": [
     "src/**/*.js",

package/src/delegate.js

@@ -0,0 +1,34 @@
+import { EventManager } from './lib'
+/**
+ * Svelte action function for forwarding keyboard events from a parent element to a child.
+ * The child is selected using a CSS selector passed in the options object.
+ * Optionally, you can specify which keyboard events you want to forward: "keydown", "keyup", and/or "keypress".
+ * By default, all three events are forwarded.
+ * The action returns an object with a destroy method.
+ * The destroy method removes all event listeners from the parent.
+ *
+ * @param {HTMLElement} element - The parent element from which keyboard events will be forwarded.
+ * @param {import('./types').PushDownOptions} options - The options object.
+ * @returns {{destroy: Function}}
+ */
+export function delegateKeyboardEvents(
+	element,
+	{ selector, events = ['keydown', 'keyup', 'keypress'] }
+) {
+	const child = element.querySelector(selector)
+	const handlers = {}
+	const manager = EventManager(element)
+
+	function forwardEvent(event) {
+		child.dispatchEvent(new KeyboardEvent(event.type, event))
+	}
+
+	if (child) {
+		events.forEach((event) => (handlers[event] = forwardEvent))
+		manager.update(handlers)
+	}
+
+	return {
+		destroy: () => manager.reset()
+	}
+}

package/src/index.js

@@ -1,4 +1,6 @@
 import './types'
+export * from './lib/constants'
+export * from './lib'
 export { fillable } from './fillable'
 export { pannable } from './pannable'
 export { navigable } from './navigable'
@@ -6,3 +8,5 @@ export { navigator } from './navigator'
 export { dismissable } from './dismissable'
 export { themable } from './themeable'
 export { swipeable } from './swipeable'
+export { delegateKeyboardEvents } from './delegate'
+export { virtualListViewport } from './lib/viewport'

package/src/lib/constants.js

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

@@ -6,27 +6,28 @@ export function EventManager(element, handlers = {}) {
 
 	function activate() {
 		if (!listening) {
-			for (const event in handlers) {
-				element.addEventListener(event, handlers[event])
-			}
+			Object.entries(handlers).forEach(([event, handler]) =>
+				element.addEventListener(event, handler)
+			)
 			listening = true
 		}
 	}
-	function destroy() {
+	function reset() {
 		if (listening) {
-			for (const event in handlers) {
-				element.removeEventListener(event, handlers[event])
-			}
+			Object.entries(handlers).forEach(([event, handler]) =>
+				element.removeEventListener(event, handler)
+			)
 			listening = false
 		}
 	}
-	function update(enabled, newHandlers = handlers) {
+	function update(newHandlers = handlers, enabled = true) {
 		if (listening !== enabled || handlers !== newHandlers) {
-			destroy()
+			reset()
 			handlers = newHandlers
+			// console.log(listening, enabled, handlers)
 			if (enabled) activate()
 		}
 	}
 
-	return { activate, destroy, update }
+	return { activate, reset, update }
 }

package/src/lib/index.js

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

package/src/lib/internal.js

@@ -111,3 +111,79 @@ export function handleItemClick(element, current) {
 	}
 	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) {
+	let 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

@@ -0,0 +1,127 @@
+import { writable, get } from 'svelte/store'
+import { pick } from 'ramda'
+import {
+	updateSizes,
+	calculateSum,
+	fixViewportForVisibileCount,
+	fitIndexInViewport
+} from './internal'
+
+export function virtualListViewport(options) {
+	let { minSize = 40, maxVisible = 0, visibleSize, gap = 0 } = options
+	let current = { lower: 0, upper: 0 }
+	const bounds = writable({ lower: 0, upper: 0 })
+	const space = writable({
+		before: 0,
+		after: 0
+	})
+	let items
+	let averageSize = minSize
+	let visibleCount = maxVisible
+	let value = null
+	let cache = []
+	let index = -1
+
+	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 updateBounds = ({ lower, upper }) => {
+		const previous = get(bounds)
+		if (maxVisible > 0) {
+			let visible = calculateSum(cache, lower, upper, averageSize, gap)
+			space.update((value) => (value = { ...value, visible }))
+		}
+		if (previous.lower !== lower) {
+			let before = calculateSum(cache, 0, lower, averageSize)
+			space.update((value) => (value = { ...value, before }))
+		}
+		if (previous.upper !== upper) {
+			let after = calculateSum(cache, upper, cache.length, averageSize)
+			space.update((value) => (value = { ...value, after }))
+		}
+		if (previous.lower !== lower || previous.upper !== upper) {
+			bounds.set({ lower, upper })
+		}
+	}
+
+	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/navigator.js

@@ -63,8 +63,7 @@ export function navigator(element, options) {
 		if (currentNode) {
 			const collapse = isExpanded(currentNode, path[path.length - 1].fields)
 			if (collapse) {
-				currentNode[path[path.length - 1].fields.isOpen] = false
-				emit('collapse', element, indicesFromPath(path), currentNode)
+				toggle()
 			} else if (path.length > 0) {
 				path = path.slice(0, -1)
 				currentNode = getCurrentNode(path)
@@ -74,10 +73,15 @@ export function navigator(element, options) {
 	}
 	const expand = () => {
 		if (currentNode && hasChildren(currentNode, path[path.length - 1].fields)) {
-			currentNode[path[path.length - 1].fields.isOpen] = true
-			emit('expand', element, indicesFromPath(path), currentNode)
+			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)

package/src/pannable.js

@@ -1,5 +1,4 @@
 import { removeListeners, setupListeners } from './lib'
-
 /**
  * Handle drag and move events
  *

package/src/traversable.js

@@ -1,10 +1,10 @@
 import { mappedList, isNested } from '@rokkit/core'
 import { pick } from 'ramda'
 import {
-	getClosestAncestorWithAttribute,
+	// getClosestAncestorWithAttribute,
 	mapKeyboardEventsToActions,
 	emit,
-	handleItemClick,
+	// handleItemClick,
 	EventManager
 } from './lib'
 
@@ -32,7 +32,6 @@ export function traversable(element, options) {
 		const result = content[direction](current.position)
 		if (result) {
 			current = result
-
 			checkAndEmit('move')
 		}
 	}
@@ -70,11 +69,14 @@ export function traversable(element, options) {
 	}
 
 	const update = (data) => {
-		options = { ...defaultOptions, ...options, ...data }
+		options = { ...defaultOptions, ...options, value: current.item, ...data }
 		options.nested = isNested(options.items, options.fields)
 		content.update(options.items, options.fields)
 		handlers = mapKeyboardEventsToActions(actions, options)
-		manager.update(options.enabled, listeners)
+		manager.update(listeners, options.enabled)
+		if (options.value !== null) {
+			current = { ...current, ...content.findByValue(options.value) }
+		}
 		// current = handleValueChange(element, data, content, current)
 	}
 
@@ -82,7 +84,7 @@ export function traversable(element, options) {
 
 	return {
 		update,
-		destroy: () => manager.destroy()
+		destroy: () => manager.reset()
 	}
 }
 

package/src/types.js

@@ -116,3 +116,15 @@
  * @property {number} startY - The start Y position of the touch.
  * @property {number} startTime - The start time of the touch.
  */
+
+/**
+ * @typedef {Object} PushDownOptions
+ * @property {string} selector - The CSS selector for the child element to which keyboard events will be forwarded.
+ * @property {Array<string>} [events=['keydown', 'keyup', 'keypress']] - The keyboard events to forward.
+ */
+
+/**
+ * @typedef {Object} Bounds
+ * @property {number} lower
+ * @property {number} upper
+ */