@pageboard/html 0.12.2 → 0.12.4

package/elements/inlines.js

@@ -81,9 +81,127 @@ exports.strike = {
 	html: '<s></s>'
 };
 
-exports.caps = {
+exports.style = {
+	priority: 99,
+	title: "Style",
+	icon: '<i class="paint brush icon"></i>',
+	contents: "text*",
+	inline: true,
+	inplace: true,
+	group: "inline nolink",
+	tag: 'span.style',
+	properties: {
+		size: {
+			title: 'Size',
+			default: null,
+			anyOf: [{
+				const: null,
+				title: 'Default',
+				icon: '<span class="icon">∅</span>'
+			}, {
+				const: 'small',
+				title: 'Small',
+				icon: '<span class="icon char" style="font-size:0.6em">aA</span>'
+			}, {
+				const: 'base',
+				title: 'Base',
+				icon: '<span class="icon char" style="font-size:0.8em">aA</span>'
+			}, {
+				const: 'large',
+				title: 'Large',
+				icon: '<span class="icon char" style="font-size:1.2em">aA</span>'
+			}, {
+				const: 'extra',
+				title: 'Extra',
+				icon: '<span class="icon char" style="font-size:1.6em">aA</span>'
+			}]
+		},
+		transform: {
+			title: 'Transform',
+			default: null,
+			anyOf: [{
+				const: null,
+				title: 'Default',
+				icon: '<span class="icon">∅</span>'
+			}, {
+				const: "uppercase",
+				title: "upper",
+				icon: '<span class="icon">AB</span>'
+			}, {
+				const: "lowercase",
+				title: "lower",
+				icon: '<span class="icon">ab</span>'
+			}, {
+				const: "capitalize",
+				title: "all caps",
+				icon: '<span class="icon" style="text-transform:capitalize">Ab</span>'
+			}, {
+				const: "smallcaps",
+				title: "small caps",
+				icon: '<span class="icon" style="font-variant:small-caps">Ab</span>'
+			}]
+		},
+		color: {
+			title: 'Color',
+			default: null,
+			anyOf: [{
+				const: null,
+				title: 'Default',
+				icon: '<span class="icon">∅</span>'
+			}, {
+				const: "white",
+				title: "White",
+				icon: '<i class="icon color" style="color:white">W</i>'
+			}, {
+				const: "black",
+				title: "Black",
+				icon: '<i class="icon color" style="color:black">B</i>'
+			}, {
+				const: "red",
+				title: "Red",
+				icon: '<i class="icon color" style="color:red">R</i>'
+			}, {
+				const: "orange",
+				title: "Orange",
+				icon: '<i class="icon color" style="color:orange">O</i>'
+			}, {
+				const: "yellow",
+				title: "Yellow",
+				icon: '<i class="icon color" style="color:yellow">Y</i>'
+			}, {
+				const: "green",
+				title: "Green",
+				icon: '<i class="icon color" style="color:green">G</i>'
+			}, {
+				const: "blue",
+				title: "Blue",
+				icon: '<i class="icon color" style="color:blue">B</i>'
+			}, {
+				const: "purple",
+				title: "Purple",
+				icon: '<i class="icon color" style="color:purple">P</i>'
+			}]
+		}
+	},
+	parse: function(dom) {
+		const data = {};
+		for (const [key, schema] of Object.entries(this.properties)) {
+			for (const item of schema.anyOf) {
+				if (item.const && dom.classList.contains(item.const)) {
+					data[key] = item.const;
+				}
+			}
+		}
+		return data;
+	},
+	html: '<span class="style [size] [transform] [color]"></span>',
+	stylesheets: [
+		'../ui/inlines.css'
+	]
+};
+
+exports.caps = { // deprecated
 	priority: 108,
-	title: "Capitalization",
 	icon: '<span class="icon">A<span style="font-variant: small-caps;">a</span></span>',
 	contents: "text*",
 	inline: true,
@@ -92,7 +210,7 @@ exports.caps = {
 	parse: function(dom) {
 		return { transform: dom.className };
 	},
-	tag: 'span.uppercase,span.lowercase,span.capitalize,span.smallcaps',
+	tag: 'span.uppercase:not(.style),span.lowercase:not(.style),span.capitalize:not(.style),span.smallcaps:not(.style)',
 	properties: {
 		transform: {
 			title: 'Transform',
@@ -119,14 +237,9 @@ exports.caps = {
 	html: '<span class="[transform]"></span>'
 };
 
-exports.color = {
+exports.color = { // deprecated
 	priority: 109,
-	title: "Color",
-	icon: `<i class="icon" style="background-image:
-		linear-gradient(
-			to right,
-			red, orange, yellow, green, blue, purple
-		);"></i>`,
+	icon: '<span class="icon">C</span>',
 	properties: {
 		color: {
 			default: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "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,11 +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 || "";
+		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();
 		}
@@ -115,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;
 
@@ -146,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/inlines.css

@@ -0,0 +1,51 @@
+span.lighter {
+	font-weight:lighter;
+}
+span.capitalize {
+	text-transform:capitalize;
+}
+span.lowercase {
+	text-transform:lowercase;
+}
+span.uppercase {
+	text-transform:uppercase;
+}
+span.smallcaps {
+	font-variant:small-caps;
+}
+span.black {
+	color: black;
+}
+span.white {
+	color: white;
+}
+span.red {
+	color: red;
+}
+span.orange {
+	color: orange;
+}
+span.yellow {
+	color: yellow;
+}
+span.green {
+	color: green;
+}
+span.blue {
+	color: blue;
+}
+span.purple {
+	color: purple;
+}
+span.small {
+	font-size: 0.8em;
+}
+span.base {
+	font-size: 1.2em;
+}
+span.large {
+	font-size: 1.6em;
+}
+span.extra {
+	font-size: 2em;
+}

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,6 +8,8 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 		dataPosition:null
 	};
 
+	#defer;
+
 	get fit() {
 		return this.options.size || 'none';
 	}
@@ -63,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

@@ -14,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/site.css

@@ -106,45 +106,7 @@ p:last-child {
 	text-align:justify;
 }
 
-span.lighter {
-	font-weight:lighter;
-}
-span.capitalize {
-	text-transform:capitalize;
-}
-span.lowercase {
-	text-transform:lowercase;
-}
-span.uppercase {
-	text-transform:uppercase;
-}
-span.smallcaps {
-	font-variant:small-caps;
-}
-span.black {
-	color: black;
-}
-span.white {
-	color: white;
-}
-span.red {
-	color: red;
-}
-span.orange {
-	color: orange;
-}
-span.yellow {
-	color: yellow;
-}
-span.green {
-	color: green;
-}
-span.blue {
-	color: blue;
-}
-span.purple {
-	color: purple;
-}
+
 
 /*-------------------
 				Links

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.js

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