@shgysk8zer0/polyfills 0.4.12 → 0.4.13

package/command.js

@@ -0,0 +1,146 @@
+if (! ('command' in HTMLButtonElement.prototype)) {
+	const COMMAND_FOR = Symbol('command:for');
+
+	const CLICK_OPTIONS = { passive: true };
+
+	Object.defineProperty(HTMLButtonElement.prototype, 'command', {
+		get() {
+			return this.getAttribute('command');
+		},
+		set(val) {
+			if (typeof val === 'string') {
+				this.setAttribute('command', val);
+			} else {
+				this.removeAttribute('command');
+			}
+		}
+	});
+
+	Object.defineProperty(HTMLButtonElement.prototype, 'commandForElement', {
+		get() {
+			if (this[COMMAND_FOR] instanceof Element) {
+				return this[COMMAND_FOR];
+			} else if (this.hasAttribute('commandfor')) {
+				return document.getElementById(this.getAttribute('commandfor'));
+			} else {
+				return null;
+			}
+		},
+		set(val) {
+			if (! (val instanceof Element)) {
+				this.removeAttribute('commandfor');
+				this[COMMAND_FOR] = null;
+			} else if (val.id.length === 0) {
+				this.setAttribute('commandfor', '');
+				this[COMMAND_FOR] = val;
+			} else {
+				this.setAttribute('commandfor', val.id);
+				this[COMMAND_FOR] = null;
+			}
+		}
+	});
+
+	class CommandEvent extends Event {
+		#source = null;
+		#command = '';
+
+		constructor(type, { source, command, bubbles, cancelable, composed } = {}) {
+			super(type, { bubbles, cancelable, composed });
+
+			if (typeof command === 'string') {
+				this.#command = command;
+			}
+
+			if (source instanceof HTMLButtonElement) {
+				this.#source = source;
+			}
+		}
+
+		get command() {
+			return this.#command;
+		}
+
+		get source() {
+			return this.#source;
+		}
+	}
+
+	function dispatchCommand({ currentTarget }) {
+		if (currentTarget instanceof HTMLButtonElement && currentTarget.hasAttribute('command') && currentTarget.hasAttribute('commandfor')) {
+			const target = currentTarget.commandForElement;
+			const command = currentTarget.command;
+
+			if (target instanceof Element && typeof command === 'string') {
+				const event = new CommandEvent('command', { command, source: currentTarget, cancelable: true });
+				target.dispatchEvent(event);
+
+				if (! event.defaultPrevented) {
+					switch(command) {
+						case 'show-modal':
+							if (target instanceof HTMLDialogElement) {
+								target.showModal();
+							}
+							break;
+
+						case 'close':
+							if (target instanceof HTMLDialogElement) {
+								target.close();
+							}
+							break;
+
+						case 'request-close':
+							if (target instanceof HTMLDialogElement) {
+								target.requestClose();
+							}
+							break;
+
+						case 'show-popover':
+							target.showPopover();
+							break;
+
+						case 'hide-popover':
+							target.hidePopover();
+							break;
+
+						case 'toggle-popover':
+							target.togglePopover();
+							break;
+					}
+				}
+			}
+		}
+	}
+
+	const observer = new MutationObserver(mutations => {
+		for (const mutation of mutations) {
+			if (mutation.type === 'childList') {
+				for (const node of mutation.addedNodes) {
+					if (node instanceof HTMLButtonElement && node.hasAttribute('command') && node.hasAttribute('commandfor')) {
+						node.addEventListener('click', dispatchCommand, CLICK_OPTIONS);
+					} else if (node instanceof Element) {
+						for (const btn of node.querySelectorAll('button[command][commandfor]')) {
+							btn.addEventListener('click', dispatchCommand, CLICK_OPTIONS);
+						}
+					}
+				}
+			} else if (
+				mutation.type === 'attributes'
+				&& mutation.target instanceof HTMLButtonElement
+				&& typeof mutation.oldValue !== typeof mutation.target.getAttribute(mutation.attributeName)
+			) {
+				if (mutation.target.hasAttribute('command') && mutation.target.hasAttribute('commandfor')) {
+					mutation.target.addEventListener('click', dispatchCommand, CLICK_OPTIONS);
+				} else {
+					mutation.target.removeEventListener('click', dispatchCommand, CLICK_OPTIONS);
+				}
+			}
+		}
+	});
+
+	const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['command', 'commandfor'], attributeOldValue: true };
+	observer.observe(document, config);
+	document.querySelectorAll('button').forEach(btn => btn.addEventListener('click', dispatchCommand, CLICK_OPTIONS));
+	globalThis.CommandEvent = CommandEvent;
+	// For use in Shadow DOM
+	globalThis[Symbol.for('polyfill-command')] = target => observer.observe(target, config);
+}

package/element.js

@@ -2,6 +2,7 @@ import { aria } from './aom.js';
 import { polyfillGetterSetter, polyfillMethod, overwriteMethod } from './utils.js';
 import { getHTML, setHTMLUnsafe } from './methods/dom.js';
 import './sanitizer.js';
+import './command.js';
 
 polyfillMethod(Element.prototype, 'setHTMLUnsafe', setHTMLUnsafe);
 polyfillMethod(Element.prototype, 'getHTML', getHTML);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/polyfills",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "private": false,
   "type": "module",
   "description": "A collection of JavaScript polyfills",