@shgysk8zer0/polyfills 0.3.1 → 0.3.3

package/array.js

@@ -262,6 +262,19 @@ if (! (Array.prototype.with instanceof Function)) {
 	};
 }
 
+if (! (Array.isTemplateObject instanceof Function)) {
+	Array.isTemplateObject = function(target) {
+		if (! (
+			Array.isArray(target) && Array.isArray(target.raw)
+			&& Object.isFrozen(target) && Object.isFrozen(target.raw)
+		)) {
+			return false;
+		} else {
+			return target.length !== 0 && target.length === target.raw.length;
+		}
+	};
+}
+
 /**
  * @see https://github.com/tc39/proposal-arraybuffer-base64
  */

package/element.js

@@ -1,7 +1,123 @@
 import { aria } from './aom.js';
-import { overwriteMethod, polyfillGetterSetter } from './utils.js';
-import { SanitizerConfig as defaultConfig } from './assets/SanitizerConfigW3C.js';
-import { setHTML as safeSetHTML, convertToSanitizerConfig } from './assets/sanitizerUtils.js';
+import { polyfillGetterSetter } from './utils.js';
+import './sanitizer.js';
+
+function handlePopover({ currentTarget }) {
+	switch(currentTarget.popoverTargetAction) {
+		case 'show':
+			currentTarget.popoverTargetElement.showPopover();
+			break;
+
+		case 'hide':
+			currentTarget.popoverTargetElement.hidePopover();
+			break;
+
+		default:
+			currentTarget.popoverTargetElement.togglePopover();
+	}
+}
+
+export function initPopover(target = document.body) {
+	target.querySelectorAll('button[popovertarget], input[type="button"][popovertarget]')
+		.forEach(el => el.addEventListener('click', handlePopover));
+}
+
+if ((globalThis.ToggleEvent instanceof Function)) {
+	class ToggleEvent extends Event {
+		#newState;
+		#oldState;
+
+		constructor(type, { newState, oldState }) {
+			super(type, { bubbles: true });
+			this.#newState = newState;
+			this.#oldState = oldState;
+		}
+
+		get newState() {
+			return this.#newState;
+		}
+
+		get oldState() {
+			return this.#oldState;
+		}
+	}
+
+	globalThis.ToggleEvent = ToggleEvent;
+}
+
+if (! (HTMLElement.prototype.showPopover instanceof Function)) {
+	const isPopoverOpen = el => el.classList.contains('_popover-open');
+
+	Object.defineProperties(HTMLElement.prototype, {
+		showPopover: {
+			value: function showPopover() {
+				if (! isPopoverOpen(this)) {
+					this.dispatchEvent(new ToggleEvent('beforetoggle', { oldState: 'closed', newState: 'open' }));
+
+					if (this.getAttribute('popover') === 'auto') {
+						const controller = new AbortController();
+
+						document.body.addEventListener('click', ({ target }) => {
+							if (! this.contains(target) && ! this.isSameNode(target.popoverTargetElement)) {
+								controller.abort();
+								this.hidePopover();
+							}
+						}, { signal: controller.signal,  capture: true });
+
+						document.body.addEventListener('keydown', ({ key }) => {
+							if (key === 'Escape') {
+								controller.abort();
+								this.hidePopover();
+							}
+						}, { signal: controller.signal, capture: true });
+
+						document.addEventListener('beforetoggle', ({ target }) => {
+							if (! target.isSameNode(this) && target.getAttribute('popover') === 'auto') {
+								controller.abort();
+								this.hidePopover();
+							}
+						}, { signal: controller.signal });
+					}
+
+					this.classList.add('_popover-open');
+					this.dispatchEvent(new ToggleEvent('toggle', { oldState: 'closed', newState: 'open' }));
+				}
+			}
+		},
+		hidePopover: {
+			value: function hidePopover() {
+				if (isPopoverOpen(this)) {
+					this.dispatchEvent(new ToggleEvent('beforetoggle', { oldState: 'open', newState: 'closed' }));
+					queueMicrotask(() => this.classList.remove('_popover-open'));
+					this.dispatchEvent(new ToggleEvent('toggle', { oldState: 'open', newState: 'closed' }));
+				}
+			}
+		},
+		togglePopover: {
+			value: function togglePopover() {
+				isPopoverOpen(this) ? this.hidePopover() : this.showPopover();
+			}
+		}
+	});
+
+	Object.defineProperties(HTMLButtonElement.prototype, {
+		popoverTargetElement: {
+			get() {
+				return document.getElementById(this.getAttribute('popovertarget'));
+			}
+		},
+		popoverTargetAction: {
+			get() {
+				return this.getAttribute('popovertargetaction') || 'toggle';
+			},
+			set(val) {
+				this.setAttribute('popovertargetaction', val);
+			}
+		}
+	});
+
+	initPopover();
+}
 
 if (! (HTMLScriptElement.supports instanceof Function)) {
 	HTMLScriptElement.supports = function supports(type) {
@@ -126,23 +242,6 @@ if (! (HTMLImageElement.prototype.decode instanceof Function)) {
 	};
 }
 
-if (! (Element.prototype.setHTML instanceof Function)) {
-	Element.prototype.setHTML = function setHTML(input, opts = defaultConfig) {
-		safeSetHTML(this, input, opts);
-	};
-} else {
-	overwriteMethod(Element.prototype, 'setHTML', function(orig) {
-		return function setHTML(input, opts = {}) {
-			if (! (opts.sanitizer instanceof Sanitizer)) {
-				const sanitizer = new Sanitizer(convertToSanitizerConfig(opts));
-				orig.call(this, input, { sanitizer });
-			} else {
-				orig.call(this, input, opts);
-			}
-		};
-	});
-}
-
 if (! HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
 	Object.defineProperty(HTMLTemplateElement.prototype, 'shadowRootMode', {
 		get: function() {

package/iterator.js

@@ -287,6 +287,45 @@ if (! (IteratorPrototype.indexed instanceof Function)) {
 	};
 }
 
+if (! (IteratorPrototype.chunks instanceof Function)) {
+	IteratorPrototype.chunks = function(size) {
+		if (! Number.isSafeInteger(size) || size < 1) {
+			throw new TypeError('Size must be a positive integer.');
+		} else {
+			const iter = this;
+			let done = false;
+
+			return Iterator.from({
+				next() {
+					if (done) {
+						return { done };
+					} else {
+						const items = [];
+						let i = 0;
+
+						while(i++ < size && ! done) {
+							const next = iter.next();
+
+							if (next.done) {
+								done = true;
+
+								if (typeof next.value !== 'undefined') {
+									items.push(next.value);
+								}
+								break;
+							} else {
+								items.push(next.value);
+							}
+						}
+
+						return { value: items, done: false };
+					}
+				}
+			});
+		}
+	};
+}
+
 if (! (Iterator.from instanceof Function)) {
 	Iterator.from = function from(obj) {
 		if (typeof obj !== 'object' || obj === null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/polyfills",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "private": false,
   "type": "module",
   "description": "A collection of JavaScript polyfills",
@@ -38,6 +38,7 @@
     "fix:js": "eslint . --fix",
     "lint:js": "eslint .",
     "lint:html": "htmlhint \"**/*.html\"",
+    "build": "npm run build:js",
     "build:js": "rollup -c rollup.config.js",
     "create:lock": "npm i --package-lock-only --ignore-scripts --no-audit --no-fund",
     "version:bump": "npm run version:bump:patch",
@@ -70,8 +71,12 @@
   },
   "homepage": "https://github.com/shgysk8zer0/polyfills#readme",
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@shgysk8zer0/js-utils": "^1.0.1",
     "htmlhint": "^1.1.4",
     "http-server": "^14.1.1"
+  },
+  "dependencies": {
+    "@aegisjsproject/sanitizer": "^0.0.2"
   }
 }

package/popover.css

@@ -0,0 +1,25 @@
+@supports not selector(:popover-open) {
+	:is([popover]:not(._popover-open)) {
+		display: none;
+	}
+
+	:is([popover]._popover-open) {
+		position: fixed;
+		z-index: 2147483647;
+		margin: auto;
+		inset: 0;
+		border: 3px solid currentColor;
+		height: fit-content;
+		width: fit-content;
+		padding: 0.25em;
+		background-color: #ffffff;
+		color: #070707;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:is([popover]._popover-open) {
+			background-color: #1c1b22;
+			color: #fbfbfe;
+		}
+	}
+}

package/popover.js

@@ -0,0 +1,118 @@
+// function handlePopover({ currentTarget }) {
+// 	currentTarget.addEventListener('click', ({ currentTarget }) => {
+// 		switch(currentTarget.popoverTargetAction) {
+// 			case 'show':
+// 				currentTarget.popoverTargetElement.showPopover();
+// 				break;
+
+// 			case 'hide':
+// 				currentTarget.popoverTargetElement.hidePopover();
+// 				break;
+
+// 			default:
+// 				currentTarget.popoverTargetElement.togglePopover();
+// 		}
+// 	}, { capture: true });
+// }
+
+// export function initPopover(target = document.body) {
+// 	target.querySelectorAll('button[popovertarget], input[type="button"][popovertarget]')
+// 		.forEach(el => el.addEventListener('click', handlePopover));
+// }
+
+// if ((globalThis.ToggleEvent instanceof Function)) {
+// 	class ToggleEvent extends Event {
+// 		#newState;
+// 		#oldState;
+
+// 		constructor(type, { newState, oldState }) {
+// 			super(type, { bubbles: true });
+// 			this.#newState = newState;
+// 			this.#oldState = oldState;
+// 		}
+
+// 		get newState() {
+// 			return this.#newState;
+// 		}
+
+// 		get oldState() {
+// 			return this.#oldState;
+// 		}
+// 	}
+
+// 	globalThis.ToggleEvent = ToggleEvent;
+// }
+
+// if (! (HTMLElement.prototype.showPopover instanceof Function)) {
+// 	const isPopoverOpen = el => el.classList.contains('_popover-open');
+
+// 	Object.defineProperties(HTMLElement.prototype, {
+// 		showPopover: {
+// 			value: function showPopover() {
+// 				if (! isPopoverOpen(this)) {
+// 					this.dispatchEvent(new ToggleEvent('beforetoggle', { oldState: 'closed', newState: 'open' }));
+
+// 					if (this.getAttribute('popover') === 'auto') {
+// 						const controller = new AbortController();
+
+// 						document.body.addEventListener('click', ({ target }) => {
+// 							if (! this.contains(target) && ! this.isSameNode(target.popoverTargetElement)) {
+// 								controller.abort();
+// 								this.hidePopover();
+// 							}
+// 						}, { signal: controller.signal,  capture: true });
+
+// 						document.body.addEventListener('keydown', ({ key }) => {
+// 							if (key === 'Escape') {
+// 								controller.abort();
+// 								this.hidePopover();
+// 							}
+// 						}, { signal: controller.signal, capture: true });
+
+// 						document.addEventListener('beforetoggle', ({ target }) => {
+// 							if (! target.isSameNode(this) && target.getAttribute('popover') === 'auto') {
+// 								controller.abort();
+// 								this.hidePopover();
+// 							}
+// 						}, { signal: controller.signal });
+// 					}
+
+// 					this.classList.add('_popover-open');
+// 					this.dispatchEvent(new ToggleEvent('toggle', { oldState: 'closed', newState: 'open' }));
+// 				}
+// 			}
+// 		},
+// 		hidePopover: {
+// 			value: function hidePopover() {
+// 				if (isPopoverOpen(this)) {
+// 					this.dispatchEvent(new ToggleEvent('beforetoggle', { oldState: 'open', newState: 'closed' }));
+// 					queueMicrotask(() => this.classList.remove('_popover-open'));
+// 					this.dispatchEvent(new ToggleEvent('toggle', { oldState: 'open', newState: 'closed' }));
+// 				}
+// 			}
+// 		},
+// 		togglePopover: {
+// 			value: function togglePopover() {
+// 				isPopoverOpen(this) ? this.hidePopover() : this.showPopover();
+// 			}
+// 		}
+// 	});
+
+// 	Object.defineProperties(HTMLButtonElement.prototype, {
+// 		popoverTargetElement: {
+// 			get() {
+// 				return document.getElementById(this.getAttribute('popovertarget'));
+// 			}
+// 		},
+// 		popoverTargetAction: {
+// 			get() {
+// 				return this.getAttribute('popovertargetaction') || 'toggle';
+// 			},
+// 			set(val) {
+// 				this.setAttribute('popovertargetaction', val);
+// 			}
+// 		}
+// 	});
+
+// 	initPopover();
+// }

package/rollup.config.js

@@ -1,8 +1,11 @@
 /* eslint-env node */
 import { getConfig } from '@shgysk8zer0/js-utils/rollup';
+import nodeResolve from '@rollup/plugin-node-resolve';
+
 
 export default getConfig('./all.js', {
 	sourcemap: true,
 	minify: true,
 	format: 'iife',
+	plugins: [nodeResolve()],
 });

package/sanitizer.js

@@ -0,0 +1 @@
+import '@aegisjsproject/sanitizer/sanitizer.js';

package/assets/Sanitizer.js

@@ -1,61 +0,0 @@
-/**
- * @copyright 2022-2023 Chris Zuber <admin@kernvalley.us>
- */
-import { nativeSupport, getSantizerUtils, sanitize, trustPolicies } from './sanitizerUtils.js';
-import { SanitizerConfig as defaultConfig } from './SanitizerConfigW3C.js';
-
-const protectedData = new WeakMap();
-
-/**
- * Need to create a policy for the Sanitizer API since
- * `trustedTypes.defaultPolicy.createHTML` will most likely use `new Sanitizer().sanitize()`
- * which would create infinite recursion.
- * @type {TrustedTypePolicy}
- */
-
-
-/**
- * @SEE https://wicg.github.io/sanitizer-api/
- * @SEE https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/Sanitizer
- * @TODO: Figure out how to handle `allowElements`, `allowAttributes`, and how each
- *        works with their `block*` and/or `drop*` counterparts.
- * @TODO: Handle `svg:*` and `mathml:*`
- *
- * @NOTE: The spec is still under development and is likely to change.
- * @NOTE: This is a very imperfect implementation and may not perform very well,
- *        as it may involve a lot of querying & modifying.
- */
-export class Sanitizer {
-	constructor({
-		allowElements, allowAttributes, blockElements, dropAttributes,
-		dropElements, allowComments = defaultConfig.allowComments,
-		allowCustomElements = defaultConfig.allowCustomElements,
-		allowUnknownMarkup = defaultConfig.allowUnknownMarkup,
-	} = Sanitizer.getDefaultConfiguration()) {
-		protectedData.set(this, {
-			allowElements, allowComments, allowAttributes, allowCustomElements,
-			blockElements, dropAttributes, dropElements, allowUnknownMarkup,
-		});
-	}
-
-	getConfiguration() {
-		return protectedData.get(this);
-	}
-
-	sanitize(input) {
-		return sanitize(input, this.getConfiguration());
-	}
-
-	sanitizeFor(tag, content) {
-		const el = document.createElement(tag);
-		el.setHTML(content, this.getConfiguration());
-		return el;
-	}
-
-	static getDefaultConfiguration() {
-		return defaultConfig;
-	}
-}
-
-const { setHTML, polyfill } = getSantizerUtils(Sanitizer, defaultConfig);
-export { nativeSupport, setHTML, polyfill, trustPolicies };