@pageboard/html 0.12.4 → 0.12.6

package/elements/embed.js

@@ -8,31 +8,49 @@ exports.embed = {
 			description: 'The iframe src URL',
 			nullable: true,
 			type: 'string',
-			format: 'uri-reference'
-			// TODO plug embeds to href, but url-inspector makes it difficult for us right now
+			format: 'uri-reference',
+			$helper: {
+				name: 'href',
+				filter: {
+					type: ["embed"]
+				}
+			}
 		},
-		name: {
-			title: 'Name',
+		linkable: {
+			title: 'Show hash link',
+			type: 'boolean',
+			default: false
+		},
+		id: {
+			nullable: true,
 			type: 'string',
-			format: 'id',
+			pattern: /^[a-z0-9-]*$/.source
+		},
+		query: {
+			title: 'Additional query parameters',
+			type: 'object',
 			nullable: true
 		}
 	},
 	group: "block",
-	parse: function(dom) {
+	parse: function (dom) {
+		if (dom.matches('element-embed')) return;
 		return {
-			url: dom.dataset.src || dom.getAttribute('src')
+			url: dom.getAttribute('src')
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed class="ui embed" data-src="[url]" id="[name|as:xid]"></element-embed>`,
+	html: `<element-embed data-src="[url|meta:source][query|as:query]" id="[id]" title="[url|meta:title]" style="padding-bottom:calc([url|meta:height] / [url|meta:width] * 100%)">
+		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
+		<iframe loading="lazy" allowfullscreen frameborder="0" scrolling="no"></iframe>
+	</element-embed>`,
 	scripts: [
 		'../ui/embed.js'
 	],
 	stylesheets: [
 		'../ui/loading.css',
-		'../lib/components/embed.css',
-		'../ui/embed.css'
+		'../ui/embed.css',
+		'../ui/linkable.css'
 	]
 };
-
+exports.editor.scripts.push('../ui/embed-helper.js');

package/elements/heading.js

@@ -33,7 +33,6 @@ exports.heading = {
 		},
 		linkable: {
 			title: 'Show hash link',
-			description: 'On hover',
 			type: 'boolean',
 			default: false
 		},
@@ -55,8 +54,8 @@ exports.heading = {
 	group: "block",
 	icon: '<i class="icon header"></i>',
 	tag: 'h1,h2,h3,h4,h5,h6',
-	html: `<h[level] class="ui [align|or:left] aligned header" is="h[level]-helper" id="[id][linkable|prune:-]" entitled="[entitled]">
-		<a aria-hidden="true" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
+	html: `<h[level] class="ui [align|or:left] aligned header" is="h[level]-helper" id="[id]" entitled="[entitled]">
+		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
 		<div block-content="text">Heading</div>
 	</hn>`,
 	parse: function (dom) {
@@ -65,7 +64,8 @@ exports.heading = {
 		};
 	},
 	stylesheets: [
-		'../ui/heading.css'
+		'../ui/heading.css',
+		'../ui/linkable.css'
 	],
 	scripts: [
 		'../ui/heading.js'

package/elements/time.js

@@ -158,7 +158,7 @@ exports.time = {
 		const format = {};
 		const list = (dom.dataset.format ?? "").split(':');
 		for (const [key, schema] of Object.entries(this.properties.format.properties)) {
-			for (const tok in list) {
+			for (const tok of list) {
 				if (tok) {
 					const item = schema.anyOf.find(item => item.const === tok);
 					if (item) format[key] = item.const;
@@ -171,6 +171,7 @@ exports.time = {
 			format
 		};
 	},
-	html: `<time datetime="[datetime|now|isoDate]" data-format="[format|values|join:%3A]" data-timezone="[timezone]" is="element-time"></time>`,
+	tag: 'time',
+	html: `<time datetime="[datetime|or:now|date:iso]" data-format="[format|as:values|join:%3A]" data-timezone="[timezone]" is="element-time"></time>`,
 	scripts: ['../ui/time.js']
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/embed-helper.js

@@ -0,0 +1,10 @@
+Page.extend('element-embed', class HTMLElementEmbedHelper {
+	patch(state) {
+		const { editor } = state.scope;
+		if (!editor) return;
+		const id = editor.slug(this.title).slice(0, 32);
+		if (id != this.id) {
+			editor.blocks.mutate(this, { id });
+		}
+	}
+});

package/ui/embed.css

@@ -1,8 +1,24 @@
 element-embed {
 	display:block;
+	position:relative;
+	max-width:100%;
 	width:100%;
+	background-color:#DDD;
+	height:0;
+	padding-bottom:56.25%;
 }
 
 [contenteditable] element-embed iframe {
 	pointer-events:none;
 }
+
+element-embed > iframe {
+	position: absolute;
+	border: none;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	margin: 0em;
+	padding: 0em;
+}

package/ui/embed.js

@@ -4,72 +4,64 @@ class HTMLElementEmbed extends Page.Element {
 		hash: null
 	};
 	static revealRatio = 0.2;
-	#defer = new Deferred();
 
 	reveal(state) {
 		this.classList.add('waiting');
 		state.consent(this);
-		// return this.#defer; // do not hang the chain
+	}
+	get currentSrc() {
+		return this.querySelector('iframe')?.src ?? "about:blank";
 	}
 	consent(state) {
 		const consent = state.scope.$consent;
 		this.classList.toggle('denied', consent == "no");
 		this.classList.toggle('waiting', consent == null);
 
-		this.iframe = this.querySelector('iframe');
+		const iframe = this.querySelector('iframe');
 		if (consent != "yes") {
-			if (this.iframe) this.iframe.remove();
-			this.#defer.resolve();
+			iframe.src = "";
 			return;
 		}
-		if (!this.iframe) {
-			this.innerHTML = `<iframe width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay; fullscreen; accelerometer; gyroscope"></iframe>`;
-			this.iframe = this.firstElementChild;
-		}
-		if (!this.iframe.allow) this.iframe.allowFullscreen = true;
+		if (!iframe.allow) iframe.allowFullscreen = true;
 
 		const opts = this.options;
-		const prev = Page.parse(this.currentSrc || this.iframe.src || "about:blank");
+		const prev = Page.parse(this.currentSrc);
 		const cur = Page.parse(opts.src || "about:blank");
 		cur.hash = opts.hash;
-		this.currentSrc = cur.toString();
+		const curSrc = cur.toString();
 
 		if (cur.samePath(prev) == false) {
 			this.classList.remove('error');
 			this.classList.add('loading');
-			this.iframe.setAttribute('src', this.currentSrc);
-		} else {
-			if (cur.hash != prev.hash) {
-				try {
-					this.iframe.contentWindow.location.replace(this.currentSrc);
-				} catch (err) {
-					this.iframe.setAttribute('src', this.currentSrc);
-				}
+			if (!state.scope.$write) {
+				iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
+			}
+			iframe.src = curSrc;
+		} else if (cur.hash != prev.hash) {
+			try {
+				iframe.contentWindow.location.replace(curSrc);
+			} catch (err) {
+				iframe.src = curSrc;
 			}
-			this.#defer.resolve();
 		}
 	}
 	captureClick(e, state) {
 		if (this.matches('.denied')) state.reconsent();
 	}
 	captureLoad() {
-		this.#defer.resolve();
 		this.classList.remove('loading');
 	}
 	captureError() {
-		this.#defer.resolve();
 		this.classList.add('error');
 	}
 	handleAllMessage(e, state) {
-		if (!e.origin || !this.options.src) return;
-		if (this.options.src.startsWith(e.origin) == false) return;
+		if (!e.origin || !this.options.source) return;
+		if (this.options.source.startsWith(e.origin) == false) return;
 		if (this.receiveMessage) this.receiveMessage(e.data ?? {});
 	}
 	close() {
-		if (this.iframe) {
-			this.iframe.remove();
-			delete this.iframe;
-		}
+		const iframe = this.querySelector('iframe');
+		if (iframe) iframe.src = "";
 	}
 }
 

package/ui/fieldset-list.js

@@ -54,8 +54,8 @@ class HTMLElementFieldsetList extends Page.Element {
 		for (const node of inputs) {
 			keys.add(node.name);
 		}
-		const splits = Array.from(keys).map(name => name.split('.'));
-		const coms = [];
+		const splits = Array.from(keys).map(name => this.#parts(name));
+		const prefix = [];
 		let pos = 0, com = null;
 		while (splits.length && splits.every(list => {
 			if (com == null) {
@@ -69,16 +69,16 @@ class HTMLElementFieldsetList extends Page.Element {
 				return list[pos] == com;
 			}
 		})) {
-			coms.push(com);
+			prefix.push(com);
 			com = null;
 			pos++;
 		}
-		if (coms.length) coms.push('');
-		const prefix = coms.join('.');
 		this.#prefix = prefix;
 		const model = {};
 		for (const key of keys) {
-			if (key.startsWith(prefix)) model[key.substring(prefix.length)] = null;
+			if (this.#prefixed(key)) {
+				model[this.#parts(key).slice(prefix.length).join('.')] = null;
+			}
 		}
 		this.#model = model;
 	}
@@ -109,6 +109,22 @@ class HTMLElementFieldsetList extends Page.Element {
 		return `[block-type="fieldlist_button"][value="${name}"]`;
 	}
 
+	#prefixed(key, p = this.#prefix) {
+		const parts = this.#parts(key);
+		for (let i = 0; i < p.length; i++) {
+			if (parts[i] != p[i]) return false;
+		}
+		return true;
+	}
+
+	#incrementkey(index, name) {
+		if (!this.#prefixed(name)) return null;
+		const parts = this.#prefix.slice();
+		parts.push(index);
+		parts.push(...this.#parts(name).slice(this.#prefix.length));
+		return parts.join('.');
+	}
+
 	#resize(size, scope) {
 		if (scope.$write) return;
 		const len = Math.max(Number(this.dataset.size) || 0, size);
@@ -119,25 +135,17 @@ class HTMLElementFieldsetList extends Page.Element {
 			return { index: i };
 		});
 		const inputs = tpl.querySelectorAll('[name]');
-		const prefix = this.#prefix;
 		for (const node of inputs) {
-			if (node.name.startsWith(prefix)) {
-				node.name = `${prefix}[fielditem.index].${node.name.substring(prefix.length)}`;
-				if (node.id?.startsWith('for-' + prefix)) {
-					node.id = `for-${prefix}[fielditem.index].${node.id.substring(4 + prefix.length)}`;
-				}
+			const name = this.#incrementkey('[fielditem.index]', node.name);
+			if (name != null) {
+				node.name = name;
 			}
 		}
 		const conditionalFieldsets = tpl.querySelectorAll('[is="element-fieldset"]');
 		for (const node of conditionalFieldsets) {
-			if (node.dataset.name?.startsWith(prefix)) {
-				node.dataset.name = `${prefix}[fielditem.index].${node.dataset.name.substring(prefix.length)}`;
-			}
-		}
-		const labels = tpl.querySelectorAll('label[for]');
-		for (const node of labels) {
-			if (node.htmlFor?.startsWith('for-' + prefix)) {
-				node.htmlFor = `for-${prefix}[fielditem.index].${node.htmlFor.substring(4 + prefix.length)}`;
+			const name = this.#incrementkey('[fielditem.index]', node.dataset.name);
+			if (name != null) {
+				node.dataset.name = name;
 			}
 		}
 
@@ -159,7 +167,7 @@ class HTMLElementFieldsetList extends Page.Element {
 			{
 				const hidden = tpl.ownerDocument.createElement('input');
 				hidden.type = "hidden";
-				hidden.name = prefix.slice(0, -1);
+				hidden.name = this.#prefix.join('.');
 				tpl.appendChild(hidden);
 			}
 		}
@@ -177,13 +185,16 @@ class HTMLElementFieldsetList extends Page.Element {
 		});
 	}
 
+	#parts(key) {
+		return key ? key.split(".") : [];
+	}
+
 	#listFromValues(values) {
 		const list = [];
-		const prefix = this.#prefix;
 		// just unflatten the array
 		for (const [key, val] of Object.entries(values)) {
-			if (!key.startsWith(prefix)) continue;
-			const parts = key.slice(prefix.length).split(".");
+			if (!this.#prefixed(key)) continue;
+			const parts = this.#parts(key).slice(this.#prefix.length);
 			const index = Number(parts.shift());
 			if (!Number.isInteger(index)) continue;
 			delete values[key];
@@ -195,11 +206,13 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	#listToValues(values, list) {
-		const prefix = this.#prefix;
 		for (let i = 0; i < list.length; i++) {
 			const obj = list[i];
 			for (const [key, val] of Object.entries(obj)) {
-				values[`${prefix}${i}.${key}`] = val;
+				const parts = this.#prefix.slice();
+				parts.push(i);
+				parts.push(...this.#parts(key));
+				values[parts.join('.')] = val;
 			}
 		}
 	}
@@ -261,9 +274,10 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	#parseName(name) {
-		const prefix = this.prefix;
-		if (!name?.startsWith(prefix)) return { index: -1 };
-		const parts = name.substring(prefix.length).split('.');
+		if (!this.#prefixed(name)) {
+			return { index: -1 };
+		}
+		const parts = this.#parts(name).slice(this.#prefix.length);
 		const index = Number(parts.shift());
 		if (!Number.isInteger(index)) return { index: -1 };
 		return { index, sub: parts.join('.') };

package/ui/fieldset.js

@@ -19,14 +19,8 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 		this.fill(null, state.scope);
 		state.finish(() => this.fill(null, state.scope));
 	}
-	setup() {
-		this.form?.addEventListener('change', this);
-	}
-	close() {
-		this.form?.removeEventListener('change', this);
-	}
-	handleEvent(e, state) {
-		if (e.type == "change") {
+	handleAllChange(e, state) {
+		if (this.form.contains(e.target)) {
 			this.fill(null, state.scope);
 		}
 	}

package/ui/heading.css

@@ -1,12 +1,3 @@
-[block-type="heading"] > a[aria-hidden="true"] {
-	display: block;
-	position: absolute;
-	visibility:hidden;
-	left: -1ch;
-}
-[block-type="heading"]:hover > a[aria-hidden="true"] {
-	visibility:visible;
-}
 h1,
 h2,
 h3,

package/ui/linkable.css

@@ -0,0 +1,5 @@
+[block-type][id] > a.linkable[aria-hidden="true"] {
+	display: block;
+	position: absolute;
+	left: -2ch;
+}

package/ui/media.js

@@ -1,5 +1,4 @@
 const HTMLElementMediaConstructor = Superclass => class extends Superclass {
-	#defer = new Deferred();
 
 	patch(state) {
 		this.classList.remove('error', 'loading');
@@ -15,17 +14,14 @@ const HTMLElementMediaConstructor = Superclass => class extends Superclass {
 			this.setAttribute('src', curSrc);
 		}
 		if (state.scope.$write) this.pause();
-		// return this.#defer; // do not hang chain
 	}
 	handleClick(e, state) {
 		if (state.scope.$write) e.preventDefault();
 	}
 	captureLoad() {
-		this.#defer.resolve();
 		this.classList.remove('loading');
 	}
 	captureError() {
-		this.#defer.resolve();
 		this.classList.remove('loading');
 		this.classList.add('error');
 	}

package/ui/select.js

@@ -169,7 +169,7 @@ class HTMLElementSelect extends Page.Element {
 	}
 
 	patch(state) {
-		if (this.state.scope.$write) return;
+		if (state.scope.$write) return;
 		if (this.children.length == 1) this.build(state);
 
 		state.finish(() => {

package/ui/tab.css

@@ -1,5 +1,6 @@
 element-tabs {
 	display:block;
+	width: 100%;
 }
 .ui.tab.segment:not(.active) {
 	display: none;

package/ui/tab.js

@@ -11,11 +11,11 @@ class HTMLElementTabs extends Page.Element {
 	}
 	patch(state) {
 		const pos = this.options.index;
-		const id = this.id;
+		const key = `${this.id}.index`;
+		state.vars[key] = true;
 
 		this.items.children.forEach((item, i) => {
 			const query = { ...state.query };
-			const key = `${id}.index`;
 			if (i == 0) delete query[key];
 			else query[key] = i;
 			item.setAttribute('href', Page.format({

package/ui/time.js

@@ -6,7 +6,7 @@ class HTMLElementTime extends Page.create(HTMLTimeElement) {
 	};
 
 	patch(state) {
-		this.textContent = `[stamp|formatDate:[fmt]:[tz]]`.fuse({
+		this.textContent = `[stamp|or:now|date:[fmt]:[tz]]`.fuse({
 			stamp: this.dateTime,
 			fmt: this.dataset.format,
 			tz: this.dataset.timezone