@pageboard/html 0.12.7 → 0.12.8

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/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.8",
   "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,
+		url: 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.url];
+		if (meta) {
+			this.title = meta.title;
+			this.setAttribute('data-src', meta.source);
+			this.style.paddingBottom = `calc(${meta.height} / ${meta.width} * 100%)`;
+		} else {
+			console.warn("Missing href", this.options.url);
+		}
+	}
 	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.src || "about:blank");
 		cur.hash = opts.hash;
 		const curSrc = cur.toString();
 

package/ui/form.js

@@ -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');