@pageboard/html 0.12.7 → 0.12.9

package/elements/embed.js

@@ -40,7 +40,7 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,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%)">
+	html: `<element-embed data-url="[url]" data-query="[query|as:query]" id="[id]">
 		<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>`,

package/elements/fieldsets.js

@@ -6,7 +6,7 @@ exports.fieldset = {
 	context: 'form//',
 	properties: {
 		name: {
-			title: 'Show if input named',
+			title: 'Show if input[name]',
 			type: 'string',
 			format: 'singleline',
 			nullable: true,
@@ -29,7 +29,7 @@ exports.fieldset = {
 		}
 	},
 	contents: "fieldset_legend block+",
-	html: '<fieldset class="[plain]" data-name="[name|split:.|slice:1|join:.]" data-value="[value]" is="element-fieldset"></fieldset>',
+	html: '<fieldset class="[plain]" data-name="[name]" data-value="[value]" is="element-fieldset"></fieldset>',
 	scripts: ["../ui/fieldset.js"],
 	stylesheets: ['../ui/fieldset.css']
 };

package/elements/image.js

@@ -132,8 +132,6 @@ exports.image = {
 		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
 		alt="[alt]"
 		data-src="[url]"
-		data-width="[url|meta:width]"
-		data-height="[url|meta:height]"
 		data-crop="[crop.x|or:50];[crop.y|or:50];[crop.width|or:100];[crop.height|or:100];[crop.zoom|or:100]"
 	>
 		<div block-content="legend"></div>
@@ -281,8 +279,6 @@ exports.inlineImage = {
 	tag: "img",
 	html: `<img is="element-img"
 		data-src="[url]"
-		data-width="[url|meta:width]"
-		data-height="[url|meta:height]"
 		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
 		alt="" class="ui inline image
 		[display.avatar]

package/elements/inputs.js

@@ -323,8 +323,8 @@ exports.input_checkbox = {
 		<div class="ui [toggle] checkbox">
 			<input type="checkbox" required="[required]" disabled="[disabled]"
 				name="[name]" value="[value]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
+				id="for-[name][value|pre:-]" />
+			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [
@@ -370,8 +370,8 @@ exports.input_radio = {
 		<div class="ui radio checkbox">
 			<input type="radio" disabled="[disabled]"
 				name="[name]" value="[value|or:]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
+				id="for-[name][value|pre:-]" />
+			<label block-content="label" for="for-[name][value|pre:-]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [

package/elements/media.js

@@ -67,7 +67,7 @@ exports.video = {
 	},
 	html: `<video is="element-video" data-src="[url]" class="[display.fit|or:none]"
 		preload="metadata" autoplay="[autoplay]" loop="[loop]"
-		muted="[muted]" controls="[controls]" width="[url|meta:width]" height="[url|meta:height]"></video>`,
+		muted="[muted]" controls="[controls]"></video>`,
 	scripts: [
 		'../ui/media.js'
 	],

package/package.json

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

package/ui/embed-helper.js

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

package/ui/embed.js

@@ -1,6 +1,7 @@
 class HTMLElementEmbed extends Page.Element {
 	static defaults = {
 		src: null,
+		query: null,
 		hash: null
 	};
 	static revealRatio = 0.2;
@@ -12,6 +13,16 @@ class HTMLElementEmbed extends Page.Element {
 	get currentSrc() {
 		return this.querySelector('iframe')?.src ?? "about:blank";
 	}
+	patch(state) {
+		const meta = state.scope.$hrefs?.[this.options.src];
+		if (meta) {
+			this.title = meta.title;
+			if (meta.source) this.setAttribute('data-source', meta.source);
+			this.style.paddingBottom = `calc(${meta.height} / ${meta.width} * 100%)`;
+		} else {
+			console.warn("Missing href", this.options.src);
+		}
+	}
 	consent(state) {
 		const consent = state.scope.$consent;
 		this.classList.toggle('denied', consent == "no");
@@ -26,7 +37,7 @@ class HTMLElementEmbed extends Page.Element {
 
 		const opts = this.options;
 		const prev = Page.parse(this.currentSrc);
-		const cur = Page.parse(opts.src || "about:blank");
+		const cur = Page.parse(this.dataset.source || this.options.src || "about:blank");
 		cur.hash = opts.hash;
 		const curSrc = cur.toString();
 
@@ -55,8 +66,8 @@ class HTMLElementEmbed extends Page.Element {
 		this.classList.add('error');
 	}
 	handleAllMessage(e, state) {
-		if (!e.origin || !this.options.source) return;
-		if (this.options.source.startsWith(e.origin) == false) return;
+		if (!e.origin || !this.currentSrc) return;
+		if (this.currentSrc?.startsWith(e.origin) == false) return;
 		if (this.receiveMessage) this.receiveMessage(e.data ?? {});
 	}
 	close() {

package/ui/fieldset-list.js

@@ -138,6 +138,13 @@ class HTMLElementFieldsetList extends Page.Element {
 		for (const node of inputs) {
 			const name = this.#incrementkey('[fielditem.index]', node.name);
 			if (name != null) {
+				const id = node.id;
+				if (id?.startsWith(`for-${node.name}`)) {
+					node.id = id.replace(node.name, name);
+				}
+				if (node.nextElementSibling?.htmlFor == id) {
+					node.nextElementSibling.htmlFor = node.id;
+				}
 				node.name = name;
 			}
 		}

package/ui/form.js

@@ -299,7 +299,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		if (loc.samePathname(state)) {
 			loc.query = { ...state.query, ...loc.query };
 		}
-		const nstate = this.ignoreInputChange
+		const nstate = this.ignoreInputChange && state.referrer
 			? state.replace(loc)
 			: state.push(loc);
 		nstate.catch(state => {
@@ -316,9 +316,11 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		const form = this;
 		form.classList.add('loading');
 
-		await Promise.all(Array.from(form.elements).filter(node => {
-			return Boolean(node.presubmit);
-		}).map(input => input.presubmit()));
+		await Promise.all(
+			Array.from(form.elements)
+				.filter(node => Boolean(node.presubmit) && !node.disabled)
+				.map(input => input.presubmit(state))
+		);
 
 		const { scope } = state;
 		scope.$request = form.read(true);

package/ui/input-file.js

@@ -52,7 +52,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 		}
 	}
 
-	presubmit() {
+	presubmit(state) {
 		if (this.#defer) return this.#defer;
 		if (!this.files.length) return Promise.resolve();
 		const field = this.closest('.field');

package/ui/media.js

@@ -31,6 +31,18 @@ class HTMLElementVideo extends HTMLElementMediaConstructor(Page.create(HTMLVideo
 	static defaults = {
 		dataSrc: null
 	};
+	patch(state) {
+		super.patch(state);
+		const { url } = this.options;
+		const meta = state.scope.$hrefs?.[url];
+		if (meta) {
+			this.title = meta.title;
+			this.width = meta.width;
+			this.height = meta.height;
+		} else {
+			console.warn("Missing href", url);
+		}
+	}
 }
 Page.define('element-video', HTMLElementVideo, 'video');