@rokkit/actions 1.0.0-next.35

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jerry Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Core Components

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@rokkit/actions",
+  "version": "1.0.0-next.35",
+  "description": "Contains generic actions that can be used in various components.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "main": "index.js",
+  "svelte": "src/index.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/svelte": "^4.0.3",
+    "@vitest/coverage-v8": "^0.32.3",
+    "@vitest/ui": "~0.32.3",
+    "jsdom": "^22.1.0",
+    "svelte": "^4.0.1",
+    "typescript": "^5.1.6",
+    "validators": "latest",
+    "vite": "^4.3.9",
+    "vitest": "~0.32.3",
+    "shared-config": "1.0.0-next.35"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "!src/mocks",
+    "!src/**/*.spec.js"
+  ],
+  "exports": {
+    "./src": "./src",
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.js"
+    }
+  },
+  "dependencies": {
+    "@rokkit/stores": "latest"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint --fix .",
+    "test:ct": "playwright test -c playwright.config.js",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "latest": "pnpm upgrade --latest && pnpm test:ci",
+    "release": "tsc && pnpm publish --access public"
+  }
+}

package/src/dismissable.js

@@ -0,0 +1,24 @@
+const KEYCODE_ESC = 27
+
+export function dismissable(node) {
+	const handleClick = (event) => {
+		if (node && !node.contains(event.target) && !event.defaultPrevented) {
+			node.dispatchEvent(new CustomEvent('dismiss', node))
+		}
+	}
+	const keyup = (event) => {
+		if (event.keyCode === KEYCODE_ESC) {
+			node.dispatchEvent(new CustomEvent('dismiss', node))
+		}
+	}
+
+	document.addEventListener('click', handleClick, true)
+	document.addEventListener('keyup', keyup, true)
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true)
+			document.removeEventListener('keyup', keyup, true)
+		}
+	}
+}

package/src/fillable.js

@@ -0,0 +1,114 @@
+/**
+ * @typedef FillOptions
+ * @property {Array<string>} options available options to fill
+ * @property {integer} current       index of option to be filled
+ * @property {boolean} check         validate filled values
+ */
+/**
+ * Action for filling a <del>?</del> element in html block.
+ *
+ * @param {*} node
+ * @param {FillOptions} options
+ * @returns
+ */
+export function fillable(node, { options, current, check }) {
+	let data = { options, current, check }
+	let blanks = node.getElementsByTagName('del')
+
+	function click(event) {
+		if ('?' !== event.target.innerHTML) {
+			clear(event, node)
+		}
+	}
+
+	initialize(blanks, click)
+
+	return {
+		update({ options, current }) {
+			data.options = options
+			data.current = current
+			data.check = check
+
+			fill(blanks, data.options, data.current)
+			if (data.check) validate(blanks, data)
+		},
+		destroy() {
+			Object.keys(blanks).map((ref) => {
+				blanks[ref].removeEventListener('click', click)
+			})
+		}
+	}
+}
+
+/**
+ * Initialize empty fillable element style and add listener for click
+ *
+ * @param {*} blanks
+ * @param {*} click
+ */
+function initialize(blanks, click) {
+	Object.keys(blanks).map((ref) => {
+		blanks[ref].addEventListener('click', click)
+		blanks[ref].classList.add('empty')
+		blanks[ref].name = 'fill-' + ref
+		blanks[ref]['data-index'] = ref
+	})
+}
+
+/**
+ * Fill current blank with provided option
+ *
+ * @param {*} blanks
+ * @param {*} options
+ * @param {*} current
+ */
+function fill(blanks, options, current) {
+	if (current > -1 && current < Object.keys(blanks).length) {
+		let index = options.findIndex(({ actualIndex }) => actualIndex == current)
+		if (index > -1) {
+			blanks[current].innerHTML = options[index].value
+			blanks[current].classList.remove('empty')
+			blanks[current].classList.add('filled')
+		}
+	}
+}
+
+/**
+ * Clear all fillable elements
+ *
+ * @param {*} event
+ * @param {*} node
+ */
+function clear(event, node) {
+	event.target.innerHTML = '?'
+	event.target.classList.remove('filled')
+	event.target.classList.remove('pass')
+	event.target.classList.remove('fail')
+	event.target.classList.add('empty')
+	node.dispatchEvent(
+		new CustomEvent('remove', {
+			detail: {
+				index: event.target.name.split('-')[1],
+				value: event.target['data-index']
+			}
+		})
+	)
+}
+
+/**
+ * Validate the filled values
+ *
+ * @param {*} blanks
+ * @param {*} data
+ */
+function validate(blanks, data) {
+	Object.keys(blanks).map((ref) => {
+		let index = data.options.findIndex(({ actualIndex }) => actualIndex == ref)
+		if (index > -1)
+			blanks[ref].classList.add(
+				data.options[index].expectedIndex == data.options[index].actualIndex
+					? 'pass'
+					: 'fail'
+			)
+	})
+}

package/src/hierarchy.js

@@ -0,0 +1,180 @@
+/**
+ * A part of the path to node in hierarchy
+ *
+ * @typedef PathFragment
+ * @property {integer}                             index  - Index to item in array
+ * @property {Array<*>}                            items  - Array of items
+ * @property {import('../constants').FieldMapping} fields - Field mapping for the data
+ */
+
+/**
+ * Check if the current item is a parent
+ *
+ * @param {*} item
+ * @param {import('../constants').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('../constants').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('../constants').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
+}
+
+/**
+ * Navigate to last visible child in the hirarchy starting with the provided path
+ *
+ * @param {Array<PathFragment>} path - path to a node in the hierarchy
+ * @returns
+ */
+export function navigateToLastVisibleChild(path) {
+	let current = path[path.length - 1]
+	// console.log(current)
+	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<PathFragment>}                 path  - path to a node in the hierarchy
+ * @param {Array<*>}                            items - array of items
+ * @param {import('../constants').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 {
+		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<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('../constants').FieldMapping} fields
+ * @returns
+ */
+export function pathFromIndices(indices, items, fields) {
+	let path = []
+	let fragment
+	indices.map((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
+}
+
+export function indicesFromPath(path) {
+	return path.map(({ index }) => index)
+}
+export function getCurrentNode(path) {
+	if (path.length === 0) return null
+	const lastIndex = path.length - 1
+	return path[lastIndex].items[path[lastIndex].index]
+}
+
+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/index.js

@@ -0,0 +1,7 @@
+export { fillable } from './fillable'
+export { pannable } from './pannable'
+export { navigable } from './navigable'
+export { navigator } from './navigator'
+export { dismissable } from './dismissable'
+export { themable } from './themeable'
+export { swipeable } from './swipeable'

package/src/navigable.js

@@ -0,0 +1,42 @@
+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'))
+
+	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
+	}
+
+	function handleKeydown(event) {
+		if (actions[event.key]) {
+			event.preventDefault()
+			event.stopPropagation()
+			actions[event.key]()
+		}
+	}
+
+	node.addEventListener('keydown', handleKeydown)
+
+	return {
+		destroy() {
+			node.removeEventListener('keydown', handleKeydown)
+		}
+	}
+}

package/src/navigator.js

@@ -0,0 +1,179 @@
+import {
+	moveNext,
+	movePrevious,
+	isNested,
+	hasChildren,
+	pathFromIndices,
+	indicesFromPath,
+	getCurrentNode
+} from './hierarchy'
+/**
+ * @typedef NavigatorOptions
+ * @property {Array<*>}     items           - An array containing the data set to navigate
+ * @property {boolean}      [vertical=true] - Identifies whether navigation shoud be vertical or horizontal
+ * @property {string}       [idPrefix='id-'] - id prefix used for identifying individual node
+ * @property {import('../constants').FieldMapping} fields - Field mapping to identify attributes to be used for state and identification of children
+ */
+
+/**
+ * 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}      node    - The node on which the action is to be used on
+ * @param {NavigatorOptions} options - Configuration options for the action
+ * @returns
+ */
+export function navigator(node, options) {
+	const { fields, enabled = true, vertical = true, idPrefix = 'id-' } = options
+	let items, path, currentNode
+
+	if (!enabled) return { destroy: () => {} }
+
+	const update = (options) => {
+		items = options.items
+		path = pathFromIndices(options.indices ?? [], items, fields)
+		currentNode = getCurrentNode(path)
+	}
+
+	const next = () => {
+		const previousNode = currentNode
+		path = moveNext(path, items, fields)
+		currentNode = getCurrentNode(path)
+
+		if (previousNode !== currentNode) moveTo(node, path, currentNode, idPrefix)
+	}
+	const previous = () => {
+		const previousNode = currentNode
+		path = movePrevious(path)
+		if (path.length > 0) {
+			currentNode = getCurrentNode(path)
+			if (previousNode !== currentNode)
+				moveTo(node, path, currentNode, idPrefix)
+		}
+	}
+	const select = () => {
+		if (currentNode)
+			node.dispatchEvent(
+				new CustomEvent('select', {
+					detail: { path: indicesFromPath(path), node: currentNode }
+				})
+			)
+	}
+	const collapse = () => {
+		if (currentNode) {
+			const collapse =
+				hasChildren(currentNode, path[path.length - 1].fields) &&
+				currentNode[path[path.length - 1].fields.isOpen]
+			if (collapse) {
+				currentNode[path[path.length - 1].fields.isOpen] = false
+				node.dispatchEvent(
+					new CustomEvent('collapse', {
+						detail: { path: indicesFromPath(path), node: currentNode }
+					})
+				)
+			} 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)) {
+			currentNode[path[path.length - 1].fields.isOpen] = true
+			node.dispatchEvent(
+				new CustomEvent('expand', {
+					detail: { path: indicesFromPath(path), node: currentNode }
+				})
+			)
+		}
+	}
+
+	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 handleClick = (event) => {
+		let target = findParentWithDataPath(event.target)
+		let indices = !target
+			? []
+			: target.dataset.path
+					.split(',')
+					.filter((item) => item !== '')
+					.map((item) => +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 event = currentNode[path[path.length - 1].fields.isOpen]
+					? 'expand'
+					: 'collapse'
+				node.dispatchEvent(
+					new CustomEvent(event, {
+						detail: { path: indices, node: currentNode }
+					})
+				)
+			}
+			node.dispatchEvent(
+				new CustomEvent('select', {
+					detail: { path: indices, node: currentNode }
+				})
+			)
+		}
+	}
+
+	node.addEventListener('keydown', handleKeyDown)
+	node.addEventListener('click', handleClick)
+
+	return {
+		update,
+		destroy() {
+			node.removeEventListener('keydown', handleKeyDown)
+			node.removeEventListener('click', handleClick)
+		}
+	}
+}
+
+export function moveTo(node, path, currentNode, idPrefix) {
+	const indices = indicesFromPath(path)
+
+	let current = node.querySelector('#' + idPrefix + indices.join('-'))
+	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+
+	node.dispatchEvent(
+		new CustomEvent('move', {
+			detail: { path: indices, node: currentNode }
+		})
+	)
+}
+
+export function findParentWithDataPath(element) {
+	if (element.hasAttribute('data-path')) return element
+	let parent = element.parentNode
+
+	while (parent && !parent.hasAttribute('data-path')) {
+		parent = parent.parentNode
+	}
+
+	return parent
+}

package/src/pannable.js

@@ -0,0 +1,57 @@
+// pannable.js
+/**
+ * Handle drag and move events
+ *
+ * @param {*} node
+ * @returns
+ */
+export function pannable(node) {
+	let x
+	let y
+
+	function track(event, name, delta = {}) {
+		x = event.clientX || event.touches[0].clientX
+		y = event.clientY || event.touches[0].clientY
+		event.stopPropagation()
+		event.preventDefault()
+		node.dispatchEvent(
+			new CustomEvent(name, {
+				detail: { x, y, ...delta }
+			})
+		)
+	}
+
+	function handleMousedown(event) {
+		track(event, 'panstart')
+		window.addEventListener('mousemove', handleMousemove)
+		window.addEventListener('mouseup', handleMouseup)
+		window.addEventListener('touchmove', handleMousemove, { passive: false })
+		window.addEventListener('touchend', handleMouseup)
+	}
+
+	function handleMousemove(event) {
+		const dx = (event.clientX || event.touches[0].clientX) - x
+		const dy = (event.clientY || event.touches[0].clientY) - y
+
+		track(event, 'panmove', { dx, dy })
+	}
+
+	function handleMouseup(event) {
+		track(event, 'panend')
+
+		window.removeEventListener('mousemove', handleMousemove)
+		window.removeEventListener('mouseup', handleMouseup)
+		window.removeEventListener('touchmove', handleMousemove)
+		window.removeEventListener('touchend', handleMouseup)
+	}
+
+	node.addEventListener('mousedown', handleMousedown)
+	node.addEventListener('touchstart', handleMousedown, { passive: false })
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown)
+			node.removeEventListener('touchstart', handleMousedown)
+		}
+	}
+}

package/src/swipeable.js

@@ -0,0 +1,65 @@
+export function swipeable(
+	node,
+	{
+		horizontal = true,
+		vertical = false,
+		threshold = 100,
+		enabled = true,
+		minSpeed = 300
+	} = {}
+) {
+	if (!enabled) return { destroy() {} }
+
+	let startX
+	let startY
+	let startTime
+
+	function touchStart(event) {
+		const touch = event.touches ? event.touches[0] : event
+		startX = touch.clientX
+		startY = touch.clientY
+		startTime = new Date().getTime()
+	}
+
+	function touchEnd(event) {
+		const touch = event.changedTouches ? event.changedTouches[0] : event
+		const distX = touch.clientX - startX
+		const distY = touch.clientY - startY
+		const duration = (new Date().getTime() - 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 (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'))
+				}
+			}
+		}
+	}
+
+	node.addEventListener('touchstart', touchStart)
+	node.addEventListener('touchend', touchEnd)
+	node.addEventListener('mousedown', touchStart)
+	node.addEventListener('mouseup', touchEnd)
+
+	return {
+		destroy() {
+			node.removeEventListener('touchstart', touchStart)
+			node.removeEventListener('touchend', touchEnd)
+			node.removeEventListener('mousedown', touchStart)
+			node.removeEventListener('mouseup', touchEnd)
+		}
+	}
+}

package/src/themeable.js

@@ -0,0 +1,23 @@
+import { theme } from '@rokkit/stores'
+
+/**
+ * Sets theme level classes based on the theme store
+ *
+ * @param {HTMLElement} node
+ */
+export function themable(node) {
+	let previous = {}
+
+	theme.subscribe((data) => {
+		if (data.name && data.name !== previous.name) {
+			node.classList.remove(previous.name)
+			node.classList.add(data.name)
+		}
+		if (data.mode && data.mode !== previous.mode) {
+			node.classList.remove(previous.mode)
+			node.classList.add(data.mode)
+		}
+
+		previous = data
+	})
+}