@rokkit/core 1.0.0-next.11

package/src/actions/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/actions/hierarchy.js

@@ -0,0 +1,189 @@
+/**
+ * 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
+}
+
+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
+}
+
+// export function getNodeFromIndices(indices, items, fields) {
+// 	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
+// 			}
+// 		}
+// 	})
+// 	return indices.length === 0 ? null : fragment.items[fragment.index]
+// }

package/src/actions/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/actions/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/actions/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) {
+			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: 'auto' })
+
+	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/actions/pannable.js

@@ -0,0 +1,50 @@
+/**
+ * Handle drag and move events
+ *
+ * @param {*} node
+ * @returns
+ */
+export function pannable(node) {
+	let x
+	let y
+
+	function track(event, name, delta = {}) {
+		x = event.clientX
+		y = event.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)
+	}
+
+	function handleMousemove(event) {
+		const dx = event.clientX - x
+		const dy = event.clientY - y
+
+		track(event, 'panmove', { dx, dy })
+	}
+
+	function handleMouseup(event) {
+		track(event, 'panend')
+
+		window.removeEventListener('mousemove', handleMousemove)
+		window.removeEventListener('mouseup', handleMouseup)
+	}
+
+	node.addEventListener('mousedown', handleMousedown)
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown)
+		}
+	}
+}

package/src/actions/swipeable.js

@@ -0,0 +1,56 @@
+// const defaultOptions = { horizontal: true, vertical: false, threshold: 100 }
+export function swipeable(
+	node,
+	{ horizontal = true, vertical = false, threshold = 100, enabled = true } = {}
+) {
+	if (!enabled) return { destroy() {} }
+
+	let startX
+	let startY
+
+	function touchStart(event) {
+		const touch = event.touches ? event.touches[0] : event
+		startX = touch.clientX
+		startY = touch.clientY
+	}
+
+	function touchEnd(event) {
+		const touch = event.changedTouches ? event.changedTouches[0] : event
+		const distX = touch.clientX - startX
+		const distY = touch.clientY - startY
+
+		if (horizontal) {
+			if (Math.abs(distX) > Math.abs(distY) && Math.abs(distX) >= threshold) {
+				if (distX > 0) {
+					node.dispatchEvent(new CustomEvent('swipeRight'))
+				} else {
+					node.dispatchEvent(new CustomEvent('swipeLeft'))
+				}
+			}
+		}
+
+		if (vertical) {
+			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/actions/themeable.js

@@ -0,0 +1,23 @@
+import { theme } from '../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
+	})
+}