Merge pull request #70 from AegisJSProject/feature/command-invokers

Add fullscreen, details, and command event support

Author: shgysk8zer0

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.3] - 2025-09-29
+
+### Added
+- Add `onCommand` to handle `CommandEvent`s
+- Add `FUNCS.ui.open` and `FUNCS.ui.close` for `<details>` elements
+- Add `FUNCS.ui.reques*tFullscreen` for requesting, exiting, and toggling fullscreen
+
 ## [v1.0.2] - 2024-11-22
 
 ### Added

callbackRegistry.test.js

@@ -1,9 +1,10 @@
+import '@shgysk8zer0/polyfills';
 import './shims.js';
 import { createCallback, unregisterCallback, hasCallback, callCallback, closeRegistration } from '@aegisjsproject/callback-registry/callbacks.js';
 import { describe, test } from 'node:test';
 import assert from 'node:assert';
 
-const signal = AbortSignal.timeout(500);
+const signal = AbortSignal.timeout(1000);
 const sum = createCallback((...nums) => nums.reduce((sum, num) => sum + num));
 
 describe('Test callback registry', () => {
@@ -16,16 +17,16 @@ describe('Test callback registry', () => {
 	});
 
 	test('Callback can be called correctly.', { signal }, () => {
-		assert.equal(callCallback(sum, 1, 2 ,3), 6, 'Sum should be 6 when called with `1, 2, 3`.');
+		assert.strictEqual(callCallback(sum, 1, 2 ,3), 6, 'Sum should be 6 when called with `1, 2, 3`.');
 	});
 
 	test('Callbacks unregister', { signal }, () => {
 		unregisterCallback(sum);
-		assert.notEqual(hasCallback(sum), 'Callbacks should be removed from registry.');
+		assert.strictEqual(hasCallback(sum), false, 'Callbacks should be removed from registry.');
 	});
 
-	test('Cannot register new callbacks after closing registry', ({ signal }, () => {
+	test('Cannot register new callbacks after closing registry', { signal }, () => {
 		closeRegistration();
 		assert.throws(() => createCallback(() => 'test'), 'Creating callbacks should throw if registry is closed.');
-	}));
+	});
 });

callbacks.js

@@ -9,6 +9,9 @@ const $$ = (selector, base = document) => base.querySelectorAll(selector);
 
 const $ = (selector, base = document) => base.querySelector(selector);
 
+export const requestFullscreen = { attr: 'data-request-fullscreen-selector', data: 'requestFullscreenSelector' };
+export const toggleFullsceen = { attr: 'data-toggle-fullscreen-selector', data: 'toggleFullscreenSelector' };
+
 export const FUNCS = {
 	debug: {
 		log: 'aegis:debug:log',
@@ -25,6 +28,7 @@ export const FUNCS = {
 		popup: 'aegis:navigate:popup',
 	},
 	ui: {
+		command: 'aegis:ui:command',
 		print: 'aegis:ui:print',
 		remove: 'aegis:ui:remove',
 		hide: 'aegis:ui:hide',
@@ -40,6 +44,11 @@ export const FUNCS = {
 		prevent: 'aegis:ui:prevent',
 		revokeObjectURL: 'aegis:ui:revokeObjectURL',
 		cancelAnimationFrame: 'aegis:ui:cancelAnimationFrame',
+		requestFullscreen: 'aegis:ui:requestFullscreen',
+		toggleFullscreen: 'aegis:ui:toggleFullsceen',
+		exitFullsceen: 'aegis:ui:exitFullscreen',
+		open: 'aegis:ui:open',
+		close: 'aegis:ui:close',
 		abortController: 'aegis:ui:controller:abort',
 	},
 };
@@ -96,6 +105,8 @@ const registry = new Map([
 	[FUNCS.ui.clearInterval, ({ currentTarget }) => clearInterval(parseInt(currentTarget.dataset.clearInterval))],
 	[FUNCS.ui.clearTimeout, ({ currentTarget }) => clearTimeout(parseInt(currentTarget.dataset.timeout))],
 	[FUNCS.ui.abortController, ({ currentTarget }) => abortController(currentTarget.dataset.aegisEventController, currentTarget.dataset.aegisControllerReason)],
+	[FUNCS.ui.open, ({ currentTarget }) => document.querySelector(currentTarget.dataset.openSelector).open = true],
+	[FUNCS.ui.close, ({ currentTarget }) => document.querySelector(currentTarget.dataset.closeSelector).open = false],
 	[FUNCS.ui.showModal, ({ currentTarget }) => {
 		const target = $(currentTarget.dataset.showModalSelector);
 
@@ -133,6 +144,25 @@ const registry = new Map([
 	}],
 	[FUNCS.ui.print, () => globalThis.print()],
 	[FUNCS.ui.prevent, event => event.preventDefault()],
+	[FUNCS.ui.requestFullscreen, ({ currentTarget}) => {
+		if (currentTarget.dataset.hasOwnProperty(requestFullscreen.data)) {
+			document.getElementById(currentTarget.dataset[requestFullscreen.data]).requestFullscreen();
+		} else {
+			currentTarget.requestFullscreen();
+		}
+	}],
+	[FUNCS.ui.toggleFullscreen, ({ currentTarget }) => {
+		const target = currentTarget.dataset.hasOwnProperty(toggleFullsceen.data)
+			? document.getElementById(currentTarget.dataset[toggleFullsceen.data])
+			: currentTarget;
+
+		if (target.isSameNode(document.fullscreenElement)) {
+			document.exitFullscreen();
+		} else {
+			target.requestFullscreen();
+		}
+	}],
+	[FUNCS.ui.exitFullsceen, () => document.exitFullscreen()],
 ]);
 
 /**

events.js

@@ -27,6 +27,7 @@ export const onCanplaythrough = EVENT_PREFIX + 'canplaythrough';
 export const onChange = EVENT_PREFIX + 'change';
 export const onClick = EVENT_PREFIX + 'click';
 export const onClose = EVENT_PREFIX + 'close';
+export const onCommand = EVENT_PREFIX + 'command';
 export const onContextmenu = EVENT_PREFIX + 'contextmenu';
 export const onCopy = EVENT_PREFIX + 'copy';
 export const onCuechange = EVENT_PREFIX + 'cuechange';
@@ -124,6 +125,7 @@ export const eventAttrs = [
 	onChange,
 	onClick,
 	onClose,
+	onCommand,
 	onContextmenu,
 	onCopy,
 	onCuechange,
@@ -293,6 +295,7 @@ export const EVENTS = {
 	onChange,
 	onClick,
 	onClose,
+	onCommand,
 	onContextmenu,
 	onCopy,
 	onCuechange,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/callback-registry",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": " A callback registry for AegisJSProject",
   "keywords": [
     "aegis",
@@ -78,6 +78,7 @@
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
     "@shgysk8zer0/eslint-config": "^1.0.1",
+    "@shgysk8zer0/polyfills": "^0.4.13",
     "eslint": "^9.15.0",
     "http-server": "^14.1.1",
     "rollup": "^4.27.2"

package.json

@@ -1,5 +1,5 @@
-import { onClick, onClose, observeEvents, onLoad, onError, registerSignal, signal as signalAttr, controller as controllerAttr, registerController } from '@aegisjsproject/callback-registry/events.js';
-import { createCallback, FUNCS, on } from '@aegisjsproject/callback-registry/callbacks.js';
+import { onClick, onClose, onCommand, observeEvents, onLoad, onError, registerSignal, signal as signalAttr, controller as controllerAttr, registerController, onDblclick } from '@aegisjsproject/callback-registry/events.js';
+import { createCallback, FUNCS, on, toggleFullsceen, requestFullscreen } from '@aegisjsproject/callback-registry/callbacks.js';
 
 const controller = new AbortController();
 const signal = registerSignal(controller.signal);
@@ -58,9 +58,15 @@ document.body.append(html`
 		<button type="button" ${onClick}="${FUNCS.navigate.reload}" ${signalAttr}="${signal}">Reload</button>
 		<button type="button" ${onClick}="${FUNCS.navigate.close}" ${signalAttr}="${signal}">Close</button>
 		<button type="button" ${onClick}="${FUNCS.ui.print}" ${signalAttr}="${signal}">Print</button>
+		<button type="button" ${onClick}="${FUNCS.ui.requestFullscreen}" ${signalAttr}="${signal}" ${requestFullscreen.attr}="container">Fullscreen</button>
+		<button type="button" ${onClick}="${FUNCS.ui.open}" ${signalAttr}="${signal}" data-open-selector="details">Open Details</button>
+		<button type="button" ${onClick}="${FUNCS.ui.close}" ${signalAttr}="${signal}" data-close-selector="details">Close Details</button>
 		<button type="button" ${onClick}="${FUNCS.ui.showModal}" data-show-modal-selector="#dialog" ${signalAttr}="${signal}">Show Dialog</button>
 		<button type="button" id="caf" ${onClick}="${FUNCS.ui.abortController}" ${controllerAttr}="${animController}" ${signalAttr}="${animSignal}">Cancel Animation</button>
 		<button type="button" ${onClick}="${() => alert('Hello, World!')}">Alert</button>
+		<button type="button" command="show-modal" commandfor="dialog">Show Dialog (command)</button>
+		<button type="button" command="show-popover" commandfor="popover">Show Popover</button>
+		<button type="button" command="--foo" commandfor="main">Dispatch <code>--foo</code></button>
 		<button type="button" ${on('click', event => {
 		const li = document.createElement('li');
 		li.textContent = `${event.type} @ ${event.timeStamp}`;
@@ -69,10 +75,12 @@ document.body.append(html`
 		<button type="button" ${on('click', () => controller.abort(), { signal })}>Abort</button>
 		<button type="button" ${on('click', event => event.target.parentElement.dispatchEvent(new CustomEvent('my:foo', { detail: event })), { signal })}>Foo</button>
 	</nav>
-	<main>
-		<div id="container">
+	<main id="main" ${onCommand}="${FUNCS.debug.log}">
+		<div id="container" ${onDblclick}="${FUNCS.ui.requestFullscreen}">
 			<template shadowrootmode="open">
 				<div part="container">
+					<button type="button" ${onClick}="${FUNCS.ui.toggleFullscreen}" ${toggleFullsceen.attr}="container">Toggle Fullscreen</button>
+					<br />
 					<slot name="list"></slot>
 					<pre part="events">[<slot name="events">No Events</slot>]</pre>
 					<img src="${URL.createObjectURL(getSvg())}"
@@ -85,11 +93,19 @@ document.body.append(html`
 			</template>
 			<ul id="list" slot="list"></ul>
 		</div>
+		<details id="details">
+			<summary>A &lt;details&gt;</summary>
+			<p> And here is the content.</p>
+		</details>
 	</main>
 	<footer></footer>
 	<dialog id="dialog" ${onClose}="${FUNCS.debug.log}" ${signalAttr}="${signal}">
 		<button type="button" ${onClick}="${FUNCS.ui.closeModal}" data-close-modal-selector="#dialog">Close</button>
+		<button type="button" command="request-close" commandfor="dialog">Close (command)</button>
 	</dialog>
+	<div popover="maual" id="popover">
+		<button type="button" command="hide-popover" commandfor="popover">Hide Popover</button>
+	</div>
 `);
 
 observeEvents(document.body);