@pageboard/html 0.12.1 → 0.12.3

package/elements/image.js

@@ -132,6 +132,8 @@ 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>
@@ -279,6 +281,8 @@ 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]"></video>`,
+		muted="[muted]" controls="[controls]" width="[url|meta:width]" height="[url|meta:height]"></video>`,
 	scripts: [
 		'../ui/media.js'
 	],

package/package.json

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

package/ui/consent.js

@@ -13,7 +13,7 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 		return !tacit;
 	}
 	setup(state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		if (this.options.transient) {
 			const tmpl = this.ownTpl.prerender();
 			if (tmpl.content && tmpl.children.length == 0) {
@@ -30,7 +30,7 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 	}
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		const fd = window.HTMLElementForm.prototype.read.call(this);
 		const consent = fd.consent;
 		if (consent == null) {
@@ -44,7 +44,7 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 		this.handleSubmit(e, state);
 	}
 	patch(state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		if (this.options.transient) {
 			this.ownTpl.prerender();
 		}

package/ui/embed.js

@@ -9,7 +9,7 @@ class HTMLElementEmbed extends Page.Element {
 	reveal(state) {
 		this.classList.add('waiting');
 		state.consent(this);
-		return this.#defer;
+		// return this.#defer; // do not hang the chain
 	}
 	consent(state) {
 		const consent = state.scope.$consent;

package/ui/fieldset-list.js

@@ -83,10 +83,10 @@ class HTMLElementFieldsetList extends Page.Element {
 		this.#model = model;
 	}
 
-	#prepare() {
+	#prepare(scope) {
 		const tpl = this.ownTpl;
 		tpl.prerender();
-		if (this.isContentEditable) {
+		if (scope.$write) {
 			this.#modelize(tpl);
 			return;
 		}
@@ -96,13 +96,13 @@ class HTMLElementFieldsetList extends Page.Element {
 		}
 	}
 
-	patch(state) {
-		this.#prepare();
-		if (!this.#size) this.#resize(0, state.scope);
+	patch({ scope }) {
+		this.#prepare(scope);
+		if (!this.#size) this.#resize(0, scope);
 	}
 
-	setup() {
-		this.#prepare();
+	setup({ scope }) {
+		this.#prepare(scope);
 	}
 
 	#selector(name) {
@@ -110,7 +110,7 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	#resize(size, scope) {
-		if (this.isContentEditable) return;
+		if (scope.$write) return;
 		const len = Math.max(Number(this.dataset.size) || 0, size);
 		if (this.#size === len) return;
 		this.#size = len;
@@ -205,7 +205,7 @@ class HTMLElementFieldsetList extends Page.Element {
 	}
 
 	handleClick(e, state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		const btn = e.target.closest('button');
 		if (!btn) return;
 		const action = btn.value;

package/ui/fieldset.js

@@ -4,8 +4,8 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 		dataValue: null
 	};
 
-	fill(query) {
-		if (this.isContentEditable || !this.options?.name || !this.form) return;
+	fill(query, scope) {
+		if (scope.$write || !this.options?.name || !this.form) return;
 		if (!query) query = this.form.read(true);
 		const val = query[this.options.name];
 		const disabled = this.disabled = this.hidden = val != this.options.value;
@@ -16,8 +16,8 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 
 	patch(state) {
 		// before/after form#fill
-		this.fill();
-		state.finish(() => this.fill());
+		this.fill(null, state.scope);
+		state.finish(() => this.fill(null, state.scope));
 	}
 	setup() {
 		this.form?.addEventListener('change', this);
@@ -25,9 +25,9 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 	close() {
 		this.form?.removeEventListener('change', this);
 	}
-	handleEvent(e) {
+	handleEvent(e, state) {
 		if (e.type == "change") {
-			this.fill();
+			this.fill(null, state.scope);
 		}
 	}
 }

package/ui/form.js

@@ -96,7 +96,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		return window.HTMLElementTemplate.prototype.getRedirect.call(this, status, this);
 	}
 	patch(state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		if (this.method != "get") {
 			// ?submit=<name> for auto-submit
 			const name = state.query.submit;
@@ -220,7 +220,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			}
 		}
 		for (const node of this.querySelectorAll('fieldset[is="element-fieldset"]')) {
-			node.fill(query);
+			node.fill(query, scope);
 		}
 		return vars;
 	}
@@ -268,7 +268,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	}
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		this.toggleMessages();
 		if (this.matches('.loading')) return;
 		if (e.type != "submit" && this.querySelector('[type="submit"]')) return;
@@ -299,17 +299,18 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		if (loc.samePathname(state)) {
 			loc.query = { ...state.query, ...loc.query };
 		}
-		let status = 200;
-		const p = this.ignoreInputChange
+		const nstate = this.ignoreInputChange
 			? state.replace(loc)
 			: state.push(loc);
-		return p.catch(err => {
-			if (err.status != null) status = err.status;
-			else status = 0;
-		}).then(() => {
+		nstate.catch(state => {
+			const status = state.error?.status ?? 0;
 			this.toggleMessages(status);
 		});
 	}
+	catch(state) {
+		const status = state.error?.status ?? 0;
+		this.toggleMessages(status);
+	}
 	async postMethod(e, state) {
 		if (e.type != "submit") return;
 		const form = this;
@@ -365,7 +366,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			}
 			scope.$vary = vary;
 		}
-		return state.push(loc, { vary });
+		state.push(loc, { vary });
 	}
 }
 window.HTMLElementForm = HTMLElementForm;

package/ui/image.js

@@ -7,7 +7,7 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	static defaultWidth = 240;
 	static defaultHeight = 180;
 
-	#defer = new Deferred();
+	#defer;
 
 	static getZoom({ w, h, rw, rh, fit }) {
 		let z = 100;
@@ -93,19 +93,17 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		if (this.currentSrc != this.options.src) {
 			this.classList.remove('error');
 		}
-		this.dataset.width = this.constructor.defaultWidth || "";
-		this.dataset.height = this.constructor.defaultHeight || "";
-		if (this.options.src) {
-			const loc = Page.parse(this.options.src);
-			const meta = state.scope.$hrefs?.[loc.pathname];
-			if (meta) {
-				this.dataset.width = meta.width;
-				this.dataset.height = meta.height;
-			}
+		const d = this.dataset;
+		if (d.width == null || d.height == null) {
+			const meta = state.scope.$hrefs?.[this.options.src];
+			if (meta?.width) d.width = meta.width;
+			if (meta?.height) d.height = meta.height;
 		}
+		d.width ??= this.constructor.defaultWidth || "";
+		d.height ??= this.constructor.defaultHeight || "";
 		const { w, h } = this.dimensions;
-		if (w) this.image.width = w || this.dataset.width;
-		if (h) this.image.height = h || this.dataset.height;
+		if (w) this.image.width = w || d.width;
+		if (h) this.image.height = h || d.height;
 		if (!this.currentSrc) {
 			this.placeholder();
 		}
@@ -123,6 +121,9 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 			this.placeholder(true);
 			return;
 		}
+		if (this.classList.contains('loading')) {
+			return;
+		}
 		const fit = this.fit;
 		const r = this.crop;
 
@@ -154,16 +155,17 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 			const rh = rect.height;
 			if (rw == 0 && rh == 0) {
 				// don't show
-				return this.#defer;
+				return;
 			}
 			loc.query.rs = "z-" + this.constructor.getZoom({ w, h, rw, rh, fit });
 		}
 		const curSrc = loc.toString();
 		if (curSrc != this.currentSrc) {
 			this.classList.add('loading');
+			this.#defer = new Deferred();
 			img.setAttribute('src', curSrc);
+			return this.#defer;
 		}
-		return this.#defer;
 	}
 	captureLoad() {
 		this.#defer.resolve();

package/ui/input-range.js

@@ -82,7 +82,7 @@ class HTMLElementInputRange extends Page.create(HTMLInputElement) {
 			start: opts.multiple ? [null, null] : [null],
 			connect: true
 		}, this.convertOptions(opts))).on('change', (values) => {
-			if (this.isContentEditable) return;
+			if (state.scope.$write) return;
 			const isInt = parseInt(opts.step) == opts.step;
 			helper.classList.remove('indeterminate');
 			if (isInt) values = values.map(n => parseInt(n));
@@ -96,8 +96,8 @@ class HTMLElementInputRange extends Page.create(HTMLInputElement) {
 		helper.addEventListener('dblclick', this, true);
 		this.patch(state);
 	}
-	handleEvent(e) {
-		if (this.isContentEditable) return;
+	handleEvent(e, state) {
+		if (state.scope.$write) return;
 		if (e.type == "dblclick" || e.keyCode == 8 || e.keyCode == 46) {
 			this.fill();
 			this.dispatchEvent(new Event('change', {

package/ui/layout.js

@@ -8,17 +8,11 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 		dataPosition:null
 	};
 
+	#defer;
+
 	get fit() {
 		return this.options.size || 'none';
 	}
-	patch(state) {
-		if (!this.options.src) return;
-		const loc = Page.parse(this.options.src);
-		const meta = state.scope.$hrefs?.[loc.pathname] ?? {};
-		if (!meta || !meta.width || !meta.height) return;
-		this.dataset.width = meta.width;
-		this.dataset.height = meta.height;
-	}
 	reveal(state) {
 		this.style.backgroundRepeat = this.options.repeat;
 		this.style.backgroundSize = this.options.size;
@@ -71,11 +65,14 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 				// pass
 			}
 			this.style.backgroundImage = `url(${curSrc})`;
+			this.#defer = new Deferred();
+			const img = new Image();
+			img.addEventListener('load', this.#defer.resolve);
+			img.addEventListener('error', this.#defer.resolve);
+			img.src = curSrc;
+			return this.#defer;
 		}
 	}
-	captureLoad() {}
-	captureError() {}
-	placeholder() {}
 }
 
 (function(HTMLElementImage) {

package/ui/media.js

@@ -3,11 +3,6 @@ const HTMLElementMediaConstructor = Superclass => class extends Superclass {
 
 	patch(state) {
 		this.classList.remove('error', 'loading');
-		const loc = Page.parse(this.options.src);
-		const meta = state.scope.$hrefs?.[loc.pathname] ?? {};
-		if (!meta || !meta.width || !meta.height) return;
-		this.width = meta.width;
-		this.height = meta.height;
 	}
 	reveal(state) {
 		const curSrc = this.options.src;
@@ -19,11 +14,11 @@ const HTMLElementMediaConstructor = Superclass => class extends Superclass {
 			}
 			this.setAttribute('src', curSrc);
 		}
-		if (this.isContentEditable) this.pause();
-		return this.#defer;
+		if (state.scope.$write) this.pause();
+		// return this.#defer; // do not hang chain
 	}
-	handleClick(e) {
-		if (this.isContentEditable) e.preventDefault();
+	handleClick(e, state) {
+		if (state.scope.$write) e.preventDefault();
 	}
 	captureLoad() {
 		this.#defer.resolve();

package/ui/menu.js

@@ -24,7 +24,7 @@ class HTMLElementMenu extends Page.Element {
 		});
 	}
 	setup(state) {
-		if (this.isContentEditable || this.matches('.vertical')) return;
+		if (state.scope.$write || this.matches('.vertical')) return;
 		const menu = this.firstElementChild;
 		const helper = this.lastElementChild;
 		if (helper == menu) {

package/ui/pagination.js

@@ -1,6 +1,6 @@
 class HTMLElementPagination extends Page.create(HTMLAnchorElement) {
 	patch(state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		state.finish(() => {
 			this.#update(state);
 		});

package/ui/query-tags.js

@@ -27,7 +27,7 @@ class HTMLElementQueryTags extends Page.Element {
 		const query = state.query;
 		state.finish(() => {
 			this.labels.textContent = '';
-			if (this.isContentEditable) this.insertLabel('', '', 'Auto');
+			if (state.scope.$write) this.insertLabel('', '', 'Auto');
 			else for (const [name, val] of Object.entries(query)) {
 				this.add(name, val);
 			}

package/ui/scroll-link.js

@@ -4,7 +4,7 @@ class HTMLScrollLinkElement extends Page.create(HTMLAnchorElement) {
 	};
 
 	handleClick(e, state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		if (this.options.to == "home") {
 			const main = document.querySelector('body > main') || document.body;
 			main.scrollIntoView({

package/ui/select.js

@@ -24,7 +24,7 @@ class HTMLElementSelect extends Page.Element {
 	}
 
 	handleClick(e, state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		const node = e.target;
 		const item = node.closest('element-select .item');
 		if (item) {
@@ -143,7 +143,7 @@ class HTMLElementSelect extends Page.Element {
 	}
 
 	build(state) {
-		if (this.isContentEditable) return;
+		if (state.scope.$write) return;
 		if (this.children.length == 1) {
 			this.insertAdjacentHTML(
 				'afterBegin',
@@ -169,7 +169,7 @@ class HTMLElementSelect extends Page.Element {
 	}
 
 	patch(state) {
-		if (this.isContentEditable) return;
+		if (this.state.scope.$write) return;
 		if (this.children.length == 1) this.build(state);
 
 		state.finish(() => {

package/ui/sitemap.css

@@ -2,6 +2,7 @@
 	min-height:2em;
 	position:relative;
 	display: block;
+	width: 100%;
 }
 [block-type="sitemap"] .caret-icon::before {
 	right:auto;

package/ui/sitemap.js

@@ -53,7 +53,7 @@ class HTMLElementSitemap extends Page.Element {
 	}
 
 	async build(state) {
-		if (this.firstElementChild.children.length > 0 && this.isContentEditable) {
+		if (this.firstElementChild.children.length > 0 && state.scope.$write) {
 			// workaround... build is called a second time with pagecut-placeholder set
 			return;
 		}

package/ui/transition.css

@@ -1,47 +1,45 @@
 /* async progress bar and error signal */
 
-body::after {
+body::before {
 	content: "";
 	position:fixed;
 	display:block;
 	left:0;
-	top:1px;
+	top:0px;
 	width:0%;
 	height:0;
 	opacity:0.7;
 	background: #4486cc;
 	box-shadow: 0 0 5px rgb(99 162 235 / 70%);
-	z-index:1000;
+	z-index:10000000;
 }
-html[data-stage] > body::after {
+html[data-stage] > body::before {
 	transition-property:width;
-	transition-duration:1s;
+	transition-duration:0.5s;
 	transition-timing-function:linear;
 }
-html[data-stage="route"] > body::after,
-html[data-stage="ready"] > body::after,
-html[data-stage="setup"] > body::after,
-html[data-stage="error"] > body::after {
+html[data-stage="route"] > body::before,
+html[data-stage="ready"] > body::before,
+html[data-stage="paint"] > body::before,
+html[data-stage="error"] > body::before {
 	height:2px;
 }
 
-html[data-stage="route"] > body::after {
+html[data-stage="route"] > body::before {
+	width:25%;
+}
+html[data-stage="ready"] > body::before {
 	width:50%;
 }
-html[data-stage="ready"] > body::after,
-html[data-stage="setup"] > body::after {
+html[data-stage="paint"] > body::before {
 	width:100%;
 }
-html[data-stage="error"] > body::after {
+html[data-stage="error"] > body::before {
 	display:block;
 	width:100%;
 	background:#c33;
 }
 
-html.transition > body::after {
-	display:none !important;
-}
-
 /* transitions */
 html.transition {
 	width:100%;

package/ui/transition.js

@@ -9,15 +9,15 @@ Page.route(state => {
 	const root = document.documentElement;
 	function dtr(state) {
 		root.dataset.stage = state.stage;
-		if (state.stage == "setup" || state.stage == "patch") {
-			setTimeout(() => root.removeAttribute('data-stage'), 500);
+		if (state.stage == "paint") {
+			setTimeout(() => root.removeAttribute('data-stage'), 700);
 		}
 	}
 	dtr(state);
-	Page.ready(dtr);
-	Page.patch(dtr);
-	Page.setup(dtr);
-	Page.catch(dtr);
+	state.ready(dtr);
+	state.patch(dtr);
+	state.paint(dtr);
+	state.catch(dtr);
 });
 
 class Transition {
@@ -131,7 +131,7 @@ Page.constructor.prototype.mergeBody = function (body, corpse) {
 	if (this.referrer.scope.transition) {
 		this.referrer.scope.transition.end();
 	}
-	if (body.isContentEditable || body.getAttribute('block-type') != corpse.getAttribute('block-type')) {
+	if (this.scope.$write || body.getAttribute('block-type') != corpse.getAttribute('block-type')) {
 		corpse.replaceWith(body);
 	} else {
 		this.scope.transition = new Transition(this, body, corpse);