@rokkit/actions 1.0.0-next.96 → 1.0.0-next.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.96",
+  "version": "1.0.0-next.97",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "typescript": "^5.4.5",
     "vite": "^5.2.12",
     "vitest": "~1.6.0",
-    "shared-config": "1.0.0-next.96",
-    "validators": "1.0.0-next.96"
+    "shared-config": "1.0.0-next.97",
+    "validators": "1.0.0-next.97"
   },
   "files": [
     "src/**/*.js",
@@ -40,8 +40,8 @@
   },
   "dependencies": {
     "ramda": "^0.30.1",
-    "@rokkit/core": "1.0.0-next.96",
-    "@rokkit/stores": "1.0.0-next.96"
+    "@rokkit/core": "1.0.0-next.97",
+    "@rokkit/stores": "1.0.0-next.97"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/index.js

@@ -1,4 +1,6 @@
+// skipcq: JS-E1004 - Needed for exposing all types
 export * from './types'
+// skipcq: JS-E1004 - Needed for exposing collection of functions
 export * from './lib'
 export { fillable } from './fillable'
 export { pannable } from './pannable'

package/src/lib/event-manager.js

@@ -1,9 +1,16 @@
 /**
  * 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]) =>
@@ -12,6 +19,10 @@ export function EventManager(element, handlers = {}) {
 			listening = true
 		}
 	}
+
+	/**
+	 * Reset the event listeners.
+	 */
 	function reset() {
 		if (listening) {
 			Object.entries(handlers).forEach(([event, handler]) =>
@@ -20,11 +31,17 @@ export function EventManager(element, handlers = {}) {
 			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
-			// console.log(listening, enabled, handlers)
 			if (enabled) activate()
 		}
 	}

package/src/lib/index.js

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

package/src/lib/viewport.js

@@ -8,7 +8,8 @@ import {
 } from './internal'
 
 export function virtualListViewport(options) {
-	let { minSize = 40, maxVisible = 0, visibleSize, gap = 0 } = 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({

package/src/navigator.js

@@ -24,8 +24,6 @@ export function navigator(element, options) {
 
 	if (!enabled) return { destroy: noop }
 
-	// todo: Update should handle selection value change
-	// should we wait a tick before updating?
 	const update = (input) => {
 		const previousNode = currentNode
 		items = input.items

package/src/traversable.js

@@ -1,5 +1,6 @@
 import { has } from 'ramda'
 import { EventManager } from './lib'
+
 const defaultConfig = {
 	allowDrag: false,
 	allowDrop: false,
@@ -21,40 +22,49 @@ const defaultConfig = {
  * @param {boolean}     config.options.vertical   - The orientation of the list/tree
  */
 export function traversable(root, config) {
-	let store = config.store
 	const manager = EventManager(root, {})
+	const events = config.store.events
 
-	/**
-	 * Update the event handlers based on the configuration
-	 * @param {Object} config - The configuration object
-	 */
-	function update(config) {
-		store = config.store
-		const options = { ...defaultConfig, ...config.options }
-
-		const listeners = {
-			keydown: getKeydownHandler(store, options, root),
-			click: getClickHandler(store, options)
-		}
-		if (options.allowDrag) listeners.dragstart = getDragStartHandler(store)
-		if (options.allowDrop) {
-			listeners.dragover = getDragOverHandler(store)
-			listeners.drop = getDropHandler(store)
+	const unsubscribe = events.subscribe((data) => {
+		if (data.length > 0) {
+			data.forEach(({ type, detail }) => root.dispatchEvent(new CustomEvent(type, { detail })))
+			events.set([])
 		}
-		manager.update(listeners)
-	}
+	})
 
-	/**
-	 * Cleanup action on destroy
-	 */
-	function destroy() {
-		manager.reset()
-		// store.onNavigate(null)
+	updateEventHandlers(root, manager, config)
+
+	return {
+		destroy: () => {
+			// console.log(typeof unsubscribe)
+			unsubscribe()
+			manager.reset()
+		},
+		update: (newConfig) => updateEventHandlers(root, manager, newConfig)
 	}
+}
 
-	update(config)
+/**
+ * Update the event handlers based on the configuration
+ *
+ * @param {HTMLElement} root    - The DOM root node to add the action to
+ * @param {Object} manager - The event manager object
+ * @param {Object} config - The configuration object
+ */
+function updateEventHandlers(root, manager, config) {
+	const store = config.store
+	const options = { ...defaultConfig, ...config.options }
 
-	return { destroy, update }
+	const listeners = {
+		keydown: getKeydownHandler(store, options, root),
+		click: getClickHandler(store, options)
+	}
+	if (options.allowDrag) listeners.dragstart = getDragEventHandler(store, 'dragStart')
+	if (options.allowDrop) {
+		listeners.dragover = getDragEventHandler(store, 'dragOver')
+		listeners.drop = getDragEventHandler(store, 'dropOver')
+	}
+	manager.update(listeners)
 }
 
 /**
@@ -145,44 +155,22 @@ function getClickHandler(store, options) {
 
 	return handleClick
 }
-/**
- * Get a function to handle the dragstart event
- *
- * @param {Object} store - The store object with navigation methods
- */
-function getDragStartHandler(store) {
-	function handleDragStart(event) {
-		const index = getTargetIndex(event)
-		if (index) store.dragStart(index)
-	}
-	return handleDragStart
-}
 
 /**
- * Get a function to handle the dragover event
+ * Get the handler function for the drag events
  *
- * @param {Object} store - The store object with navigation methods
+ * @param {Object} store    - The store object with navigation methods
+ * @param {string} eventName - The name of the event to dispatch
+ * @returns {Function} The event handler function
  */
-function getDragOverHandler(store) {
-	function handleDragOver(event) {
+function getDragEventHandler(store, eventName) {
+	function handle(event) {
 		const index = getTargetIndex(event)
-		if (index) store.dragOver(index)
+		if (index) store[eventName](index)
 	}
-	return handleDragOver
+	return handle
 }
 
-/**
- * Get a function to handle the drop event
- *
- * @param {Object} store - The store object with navigation methods
- */
-function getDropHandler(store) {
-	function handleDrop(event) {
-		const index = getTargetIndex(event)
-		if (index) store.dropOver(index)
-	}
-	return handleDrop
-}
 /**
  * Handle multi-select based on the modifier keys pressed
  *
@@ -199,6 +187,7 @@ function handleMultiSelect(store, index, modifier) {
 		store.select(index)
 	}
 }
+
 /**
  * Get the keydown event handler
  *
@@ -220,7 +209,7 @@ function getKeydownHandler(store, options, root) {
 			event.preventDefault()
 			action()
 			scrollIntoView(root, store)
-			dispatchEvents(root, store)
+			// dispatchEvents(root, store)
 		}
 	}
 
@@ -390,7 +379,7 @@ function scrollIntoView(root, store) {
  * @param {HTMLElement} root  - The root element to dispatch the events from
  * @param {Object}      store - The store object with navigation methods
  */
-function dispatchEvents(root, store) {
-	const events = store.getEvents()
-	events.forEach((event, detail) => root.dispatchEvent(new CustomEvent(event, { detail })))
-}
+// function dispatchEvents(root, store) {
+// 	const events = store.getEvents()
+// 	events.forEach((event, detail) => root.dispatchEvent(new CustomEvent(event, { detail })))
+// }