@shgysk8zer0/polyfills 0.3.0 → 0.3.2

package/assets/sanitizerUtils.js

@@ -1,5 +1,5 @@
 /**
- * @copyright 2023 Chris Zuber <admin@kernvalley.us>
+ * @copyright 2023-2024 Chris Zuber <admin@kernvalley.us>
  */
 import { SanitizerConfig as defaultConfig } from './SanitizerConfigW3C.js';
 import { createPolicy } from './trust.js';
@@ -9,16 +9,21 @@ import { urls } from './attributes.js';
 export const supported = () => 'Sanitizer' in globalThis;
 export const nativeSupport = supported();
 
+const isDataAttr = name => name.length > 5 && name.substring(0, 5) === 'data-';
+
 export const setHTML = function setHTML(el, input, opts = defaultConfig) {
 	const doc = safeParseHTML(input, opts);
 	el.replaceChildren(documentToFragment(doc));
 };
 
-const allowProtocols = ['https:'];
+const allowProtocols = ['https:', 'blob:'];
+
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
 
 if (! allowProtocols.includes(location.protocol)) {
 	allowProtocols.push(location.protocol);
 }
+
 const policyName = 'sanitizer-raw#html';
 const getPolicy = callOnce(() => createPolicy(policyName, { createHTML: input => input }));
 const createHTML = input => getPolicy().createHTML(input);
@@ -30,6 +35,12 @@ export function documentToFragment(doc) {
 	return frag;
 }
 
+export function addNamesapces(list) {
+	const mapped = list.map(allow => typeof allow === 'string' ? ({ name: allow, namespace: HTML_NS }) : allow);
+
+	return Object.groupBy(mapped, ({ namespace = HTML_NS }) => namespace);
+}
+
 /**
  * Helper function to adapt to changes in spec
  */
@@ -170,8 +181,10 @@ export function sanitizeNode(root, opts = defaultConfig) {
 									}
 								} else if (isObject(allowAttributes)) {
 									if (
-										! (name in allowAttributes
-										&& ['*', tag].some(sel => allowAttributes[name].includes(sel)))
+										! ((
+											name in allowAttributes
+											&& ['*', tag].some(sel => allowAttributes[name].includes(sel))
+										) || isDataAttr(name))
 									) {
 										node.removeAttributeNode(attr);
 									}

package/element.js

@@ -3,6 +3,123 @@ import { overwriteMethod, polyfillGetterSetter } from './utils.js';
 import { SanitizerConfig as defaultConfig } from './assets/SanitizerConfigW3C.js';
 import { setHTML as safeSetHTML, convertToSanitizerConfig } from './assets/sanitizerUtils.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) {
 		switch(type.toLowerCase()) {

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/math.js

@@ -1,69 +1,74 @@
-(function() {
-	'use strict';
+if (! Number.hasOwnProperty('isSafeInteger')) {
+	Number.MAX_SAFE_INTEGER = 2**53 -1;
+	Number.MIN_SAFE_INTEGER = -Number.MAX_SAFE_INTEGER;
+	Number.isSafeInteger = num => num <= Number.MAX_SAFE_INTEGER && num >= Number.MIN_SAFE_INTEGER;
+}
 
-	if (! Number.hasOwnProperty('isSafeInteger')) {
-		Number.MAX_SAFE_INTEGER = 2**53 -1;
-		Number.MIN_SAFE_INTEGER = -Number.MAX_SAFE_INTEGER;
-		Number.isSafeInteger = num => num <= Number.MAX_SAFE_INTEGER && num >= Number.MIN_SAFE_INTEGER;
-	}
+if (! Number.hasOwnProperty('EPSILON')) {
+	Number.EPSILON = 2**-52;
+}
 
-	if (! Number.hasOwnProperty('EPSILON')) {
-		Number.EPSILON = 2**-52;
-	}
+if (! Math.hasOwnProperty('sign')) {
+	Math.sign = x => ((x > 0) - (x < 0)) || +x;
+}
 
-	if (! Math.hasOwnProperty('sign')) {
-		Math.sign = x => ((x > 0) - (x < 0)) || +x;
-	}
+if (! Math.hasOwnProperty('trunc')) {
+	Math.trunc = x => {
+		const n = x - x%1;
+		return n===0 && (x<0 || (x===0 && (1/x !== 1/0))) ? -0 : n;
+	};
+}
 
-	if (! Math.hasOwnProperty('trunc')) {
-		Math.trunc = x => {
-			const n = x - x%1;
-			return n===0 && (x<0 || (x===0 && (1/x !== 1/0))) ? -0 : n;
-		};
-	}
+if (! Math.hasOwnProperty('expm1')) {
+	Math.expm1 = x => Math.exp(x) - 1;
+}
 
-	if (! Math.hasOwnProperty('expm1')) {
-		Math.expm1 = x => Math.exp(x) - 1;
-	}
+if (! Math.hasOwnProperty('hypot')) {
+	Math.hypot = (...nums) => Math.sqrt(nums.reduce((sum, num) => sum +  num**2, 0));
+}
 
-	if (! Math.hasOwnProperty('hypot')) {
-		Math.hypot = (...nums) => Math.sqrt(nums.reduce((sum, num) => sum +  num**2, 0));
-	}
+if (! Math.hasOwnProperty('cbrt')) {
+	Math.cbrt = x => x**(1/3);
+}
 
-	if (! Math.hasOwnProperty('cbrt')) {
-		Math.cbrt = x => x**(1/3);
-	}
+if (! Math.hasOwnProperty('log10')) {
+	Math.log10 = x => Math.log(x) * Math.LOG10E;
+}
 
-	if (! Math.hasOwnProperty('log10')) {
-		Math.log10 = x => Math.log(x) * Math.LOG10E;
-	}
+if (! Math.hasOwnProperty('log2')) {
+	Math.log2 = x => Math.log(x) * Math.LOG2E;
+}
 
-	if (! Math.hasOwnProperty('log2')) {
-		Math.log2 = x => Math.log(x) * Math.LOG2E;
-	}
+if (! Math.hasOwnProperty('log1p')) {
+	Math.log1p = x => Math.log(1 + x);
+}
 
-	if (! Math.hasOwnProperty('log1p')) {
-		Math.log1p = x => Math.log(1 + x);
-	}
+if (! Math.hasOwnProperty('fround')) {
+	Math.fround = (function (array) {
+		return function(x) {
+			return array[0] = x, array[0];
+		};
+	})(new Float32Array(1));
+}
 
-	if (! Math.hasOwnProperty('fround')) {
-		Math.fround = (function (array) {
-			return function(x) {
-				return array[0] = x, array[0];
-			};
-		})(new Float32Array(1));
-	}
+if (! (Math.clamp instanceof Function)) {
+	Math.clamp = function(value, min, max) {
+		return Math.min(Math.max(value, min), max);
+	};
+}
 
-	if (! (Math.clamp instanceof Function)) {
-		Math.clamp = function(value, min, max) {
-			return Math.min(Math.max(value, min), max);
-		};
-	}
+/*
+ * Question of if it will be `Math.clamp` or `Math.constrain`
+ */
+if (! (Math.constrain instanceof Function)) {
+	Math.constrain = Math.clamp;
+}
 
-	/*
-	 * Question of if it will be `Math.clamp` or `Math.constrain`
-	 */
-	if (! (Math.constrain instanceof Function)) {
-		Math.constrain = Math.clamp;
-	}
-})();
+/**
+ * @see https://github.com/tc39/proposal-math-sum
+ */
+if(! (Math.sum instanceof Function)) {
+	Math.sum = function(...nums) {
+		return nums.map(num => parseFloat(num)).reduce((sum, num) => sum + num);
+	};
+}

package/package.json

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

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();
+// }