Add credentialless support when creating <iframe>s

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.2.4] - 2023-10-31
+
+### Added
+- Add utility function for Simple UIDs
+- Add support for `credentialless` iframes [#44](https://github.com/shgysk8zer0/kazoo/issues/44)
+
 ## [v0.2.3] - 2023-07-19
 
 ### Added

elements.js

@@ -10,6 +10,7 @@ import { JS } from './types.js';
 import { isScriptURL, isHTML, setProp } from './trust.js';
 import { getJSONScriptPolicy } from './trust-policies.js';
 import { resolveModule, isBare } from './module.js';
+import { STATES } from './states.js';
 
 export function copyAs(target, tag, {
 	includeAttributes = true,
@@ -508,6 +509,7 @@ export function createIframe(src, {
 	sandbox = ['allow-scripts'],
 	allow = [],
 	referrerPolicy = REFERRER_POLICY,
+	credentialless = false,
 	classList = [],
 	dataset = null,
 	styles = null,
@@ -525,6 +527,10 @@ export function createIframe(src, {
 		...rest
 	});
 
+	if (credentialless) {
+		iframe.credentialless = true;
+	}
+
 	iframe.loading = loading;
 	iframe.fetchPriority = fetchPriority;
 	iframe.referrerPolicy = referrerPolicy;
@@ -789,6 +795,44 @@ export function createSelect(name, options = [], {
 	}
 }
 
+export function createStateSelect(name, {
+	required = false,
+	disabled = false,
+	multiple = false,
+	autocomplete = 'address-level1',
+	id,
+	classList,
+	dataset,
+	styles,
+	slot,
+	part,
+	animation,
+	events: { capture, passive, once, signal, ...events } = {},
+	...attrs
+} = {}) {
+	const labelMap = {
+		states: 'U.S. States',
+		armedForces: 'U.S. Armed Forces',
+		territories: 'U.S. Territories'
+	};
+
+	const states = STATES.reduce((groups, { abbr: value, name: label, group }) => {
+		if (! groups.hasOwnProperty(group)) {
+			groups[group] = [];
+		}
+
+		groups[group].push({ label, value });
+
+		return groups;
+	}, {});
+
+	return createSelect(name, Object.entries(states).map(([label, options]) => ({ label: labelMap[label], options })), {
+		required, disabled, multiple, id, classList, dataset, autocomplete, styles,
+		slot, part, animation, events: { capture, passive, once, signal, ...events },
+		...attrs,
+	});
+}
+
 export async function showDialog({ text, html, children = [], classList = [], animation, signal, ...rest }) {
 	const { resolve, reject, promise } = getDeferred();
 

krv/embed.js

@@ -9,7 +9,7 @@ export function createKRVMaps({
 	latitude = NaN, longitude = NaN, popup, tiles, target,
 	maxZoom = NaN, minZoom = NaN, zoom = NaN, zoomControl = false,
 	fetchPriority = 'auto', title, id, classList, referrerPolicy = 'no-referrer',
-	styles, dataset, slot, part,
+	credentialless = true, styles, dataset, slot, part,
 } = {}) {
 	const src = new URL(trustedURLs.maps);
 	const allow = [];
@@ -41,7 +41,7 @@ export function createKRVMaps({
 
 	if (typeof target === 'string') {
 		src.hash = `#${target}`;
-	}else if (typeof popup === 'string' && popup.length !== 0) {
+	} else if (typeof popup === 'string' && popup.length !== 0) {
 		src.searchParams.set('popup', popup);
 	} else if (popup instanceof HTMLElement) {
 		src.searchParams.set('popup', popup.outerHTML);
@@ -70,13 +70,14 @@ export function createKRVMaps({
 	return createIframe(src.href, {
 		height, width, referrerPolicy, loading, title, classList, id,
 		fetchPriority, allow, sandbox, styles, dataset, slot, part, policy,
+		credentialless,
 	});
 }
 
 export function createKRVEvents({
 	theme, source, width, height, loading = 'lazy',
 	fetchPriority = 'auto', title, id, classList, referrerPolicy = 'no-referrer',
-	styles, dataset, slot, part,
+	credentialless = true, styles, dataset, slot, part,
 } = {}) {
 	const src = new URL(trustedURLs.events);
 
@@ -91,14 +92,14 @@ export function createKRVEvents({
 	return createIframe(src.href, {
 		height, width, referrerPolicy, title, id, classList, fetchPriority,
 		loading, policy, sandbox: ['allow-scripts', 'allow-popups'], styles,
-		dataset, slot, part,
+		dataset, slot, part, credentialless,
 	});
 }
 
 export function createWFDEvents({
 	theme, source, width, height, loading = 'lazy', images = false,
 	fetchPriority = 'auto', title, id, classList, referrerPolicy = 'no-referrer',
-	styles, dataset, slot, part,
+	credentialless = true, styles, dataset, slot, part,
 } = {}) {
 	const src = new URL(trustedURLs.wfdEvents.href);
 
@@ -117,7 +118,7 @@ export function createWFDEvents({
 	return createIframe(src.href, {
 		height, width, referrerPolicy, fetchPriority, loading, title, classList,
 		id, policy, sandbox: ['allow-scripts', 'allow-popups'], styles, dataset,
-		slot, part,
+		slot, part, credentialless,
 	});
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/kazoo",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": false,
   "type": "module",
   "description": "A JavaScript monorepo for all the things!",

spotify.js

@@ -75,11 +75,12 @@ export function uriToLink(uri) {
 	}
 }
 
-function createSpotifyIframe(type, id, { title = 'Spotify Player', large = false, slot, part } = {}) {
+function createSpotifyIframe(type, id, { title = 'Spotify Player', large = false, credentialless = false, slot, part } = {}) {
 	return createIframe(policy.createScriptURL(new URL(`./${type}/${id}`, SPOTIFY)), {
 		width: 300,
 		height: large ? 380 : 80,
 		referrerPolicy: 'origin',
+		credentialless,
 		slot,
 		part,
 		sandbox: SANDBOX,

utility.js

@@ -8,6 +8,9 @@ import { isBare, resolveModule } from './module.js';
 
 const funcs = new WeakMap();
 
+// Math.log(Number.MAX_SAFE_INTEGER);
+const LOG_MAX_SAFE_INTEGER = 36.7368005696771;
+
 export function isStrictMode() {
 	// Probably always true
 	return typeof this === 'undefined';
@@ -405,6 +408,25 @@ export function random(arr) {
 	}
 }
 
+export function getSimpleUID({ radix = 36, padding = null, seperator = '-', timestamp = Date.now() } = {}) {
+	const date = timestamp.toString(radix);
+	const random = crypto.getRandomValues(new Uint32Array(1))[0].toString(radix);
+
+	if (typeof padding !== 'string' || padding.length === 0) {
+		return `${date}${seperator}${random}`;
+	} else if (padding.length !== 1) {
+		throw new TypeError('Padding must be a single character');
+	} else {
+		const length = Math.ceil(LOG_MAX_SAFE_INTEGER / Math.log(radix));
+		return `${date.padStart(length, padding)}${seperator}${random.padStart(length, padding)}`;
+	}
+}
+
+export function parseSimpleUID(uid, { radix = 36, seperator = '-' } = {}) {
+	const [date, random] = uid.split(seperator).map(str => parseInt(str, radix));
+	return { date: new Date(date), random };
+}
+
 export const toSpinalCase = str => str.replace(/[A-Z]/g, (m, i) => i === 0
 	? m.toLowerCase()
 	: `-${m.toLowerCase()}`);

youtube.js

@@ -9,14 +9,15 @@ export const sandbox = ['allow-scripts', 'allow-popups', 'allow-same-origin', 'a
 export const cookie = 'https://www.youtube.com/embed/';
 export const noCookie = 'https://www.youtube-nocookie.com/embed/';
 
-export  const policy = getYouTubePolicy();
+export const policy = getYouTubePolicy();
 
 export function createYouTubeEmbed(video, {
 	height, width, fetchPriority = 'low', referrerPolicy = 'origin',
-	title = 'YouTube Embeded Video', loading = 'lazy', cookies = false,
+	title = 'YouTube Embedded Video', loading = 'lazy', credentialless = true,
 	controls = true, start,
 } = {}) {
-	const src = cookies ? new URL(`./${video}`, cookie) : new URL(`./${video}`, noCookie);
+	const src = credentialless
+		? new URL(`./${encodeURIComponent(video)}`, noCookie) : new URL(`./${encodeURIComponent(video)}`, cookie);
 
 	if (! controls) {
 		src.searchParams.set('controls', '0');
@@ -28,7 +29,7 @@ export function createYouTubeEmbed(video, {
 
 	return createIframe(src.href, {
 		width, height, loading, title, fetchPriority, referrerPolicy, allow,
-		sandbox, policy,
+		sandbox, policy, credentialless,
 	});
 }