@pageboard/html 0.16.17 → 0.17.1

package/elements/table.js

@@ -162,7 +162,7 @@ exports.table_cell = {
 	},
 	inplace: true,
 	contents: "block+",
-	tag: 'td',
+	tag: 'td:not([is])',
 	parse: function(dom) {
 		const d = {};
 		if (dom.classList.contains('center')) d.align = 'center';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.16.17",
+  "version": "0.17.1",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -15,7 +15,7 @@
   "homepage": "https://github.com/pageboard/client#readme",
   "dependencies": {
     "nouislider": "^15.8.1",
-    "postinstall": "^0.11.1"
+    "postinstall": "^0.11.2"
   },
   "postinstall": {
     "nouislider/dist/nouislider.js": "link lib/",

package/ui/form.css

@@ -47,6 +47,11 @@ element-select.active.ui.dropdown .menu {
 	position:relative;
 }
 
+.ui.form .inline.fields {
+	align-items: end;
+	margin:0;
+}
+
 .ui.form[method="post"].unsaved button[type="submit"] {
 	text-decoration:underline;
 }

package/ui/form.js

@@ -18,16 +18,20 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		return obj;
 	}
 
+	static improveHtmlFor(node) {
+		const indexes = {};
+		for (const label of node.querySelectorAll('input+label[for^="for-"]')) {
+			const { previousElementSibling: input, htmlFor } = label;
+			const [pre, name] = htmlFor.split('-');
+			if (input.name != name) continue;
+			const index = indexes[name] = (indexes[name] ?? 0) + 1;
+			input.id = label.htmlFor = `${pre}-${name}-${index}`;
+		}
+	}
+
 	static patch(state) {
 		state.finish(() => {
-			const indexes = {};
-			for (const label of document.querySelectorAll('input+label[for^="for-"]')) {
-				const { previousElementSibling: input, htmlFor } = label;
-				const [pre, name] = htmlFor.split('-');
-				if (input.name != name) continue;
-				const index = indexes[name] = (indexes[name] ?? 0) + 1;
-				input.id = label.htmlFor = `${pre}-${name}-${index}`;
-			}
+			HTMLElementForm.improveHtmlFor(document);
 		});
 	}
 
@@ -187,6 +191,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		const vars = [];
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
 			if (node.fill) vars.push(...node.fill(query));
+			HTMLElementForm.improveHtmlFor(node);
 		}
 
 		for (const elem of this.elements) {
@@ -310,7 +315,6 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		}
 
 		const scope = state.scope.copy();
-		scope.$request = form.read(true, e.submitter);
 		try {
 			const prelist = Array.from(form.elements)
 				.filter(node => Boolean(node.presubmit) && !node.disabled);
@@ -318,10 +322,14 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			for (const node of prelist) {
 				await node.presubmit(state);
 			}
-			form.enable();
-			scope.$request = form.read(true, e.submitter);
-			form.disable();
-			form.classList.add('loading');
+		} catch (err) {
+			scope.$response = err;
+		}
+		form.enable();
+		scope.$request = form.read(true, e.submitter);
+		form.disable();
+		form.classList.add('loading');
+		try {
 			scope.$response = await state.fetch(
 				form.method,
 				e.submitter?.getAttribute('formaction') || form.action,
@@ -381,34 +389,35 @@ Page.define(`element-form`, HTMLElementForm, 'form');
 
 /* these methods must be available even on non-upgraded elements */
 HTMLFormElement.prototype.enable = function () {
-	for (let i = 0; i < this.elements.length; i++) {
-		const elem = this.elements[i];
+	for (const elem of this.elements) {
+		if (elem.matches('fieldset')) continue;
+		const fieldset = elem.closest('fieldset');
+		if (fieldset?.disabled) continue;
 		elem.disabled = false;
 		if (elem.hasAttribute('disabled')) elem.removeAttribute('disabled');
 	}
 };
 HTMLFormElement.prototype.disable = function () {
-	for (let i = 0; i < this.elements.length; i++) {
-		const elem = this.elements[i];
+	for (const elem of this.elements) {
+		if (elem.matches('fieldset')) continue;
 		elem.disabled = true;
 	}
 };
 
 HTMLSelectElement.prototype.fill = function (val) {
 	if (!Array.isArray(val)) val = [val];
-	for (let i = 0; i < this.options.length; i++) {
-		const opt = this.options[i];
+	for (const opt of this.options) {
 		opt.selected = val.includes(opt.value);
 	}
 };
 HTMLSelectElement.prototype.reset = function () {
-	for (let i = 0; i < this.options.length; i++) {
-		this.options[i].selected = this.options[i].defaultSelected;
+	for (const opt of this.options) {
+		opt.selected = opt.defaultSelected;
 	}
 };
 HTMLSelectElement.prototype.save = function () {
-	for (let i = 0; i < this.options.length; i++) {
-		this.options[i].defaultSelected = this.options[i].selected;
+	for (const opt of this.options) {
+		opt.defaultSelected = opt.selected;
 	}
 };
 

package/ui/image.js

@@ -10,6 +10,14 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 
 	#defer;
 
+	get image() {
+		let img = this.firstElementChild;
+		if (!img || !img.matches('img')) {
+			img = this.insertBefore(this.ownerDocument.createElement('img'), this.firstChild);
+		}
+		return img;
+	}
+
 	get dimensions() {
 		// dimension in pixels of the (extracted) source image
 		let w = parseInt(this.dataset.width);
@@ -58,24 +66,17 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	set crop({ x, y, w, h, z }) {
 		this.dataset.crop = [x, y, w, h, z].join(';');
 	}
-	get image() {
-		let img = this.firstElementChild;
-		if (!img || !img.matches('img')) {
-			img = this.insertBefore(this.ownerDocument.createElement('img'), this.firstChild);
-		}
-		return img;
-	}
 
-	#meta() {
+	patch() {
 		const {
 			dataset: d,
 			image,
 			dimensions: { w, h },
 			constructor,
-			currentSrc
+			currentSrc: src
 		} = this;
 		this.classList.remove('loading');
-		if (currentSrc != this.options.src) {
+		if (src != this.options.src) {
 			this.classList.remove('error');
 		}
 
@@ -84,21 +85,13 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		image.width = w || d.width;
 		image.height = h || d.height;
 		image.alt = d.alt ?? "";
-		const cur = currentSrc;
-		if (!cur) {
+		if (!src) {
 			this.placeholder();
-		} else if (cur.startsWith('data:')) {
-			image.setAttribute('src', cur);
+		} else if (src.startsWith('data:')) {
+			image.setAttribute('src', src);
 		}
 	}
 
-	patch() {
-		this.#meta();
-	}
-	paint() {
-		this.#meta();
-	}
-
 	get currentSrc() {
 		return this.image?.currentSrc;
 	}
@@ -142,19 +135,20 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	}
 
 	reveal(state) {
-		if (!this.options.src) {
-			this.placeholder(true);
+		const { src } = this.options;
+		if (!src) {
+			this.placeholder("Empty image");
 			return;
 		}
 		if (this.classList.contains('loading')) {
 			return;
 		}
 		const img = this.image;
-		const srcLoc = Page.parse(this.options.src);
+		const srcLoc = Page.parse(src);
 		const reqSrc = this.requestSrc(srcLoc);
 		if (!reqSrc) {
 			img.setAttribute('src', '');
-		}	else if (reqSrc != this.currentSrc) {
+		} else if (reqSrc != this.currentSrc) {
 			this.classList.add('loading');
 			this.#defer?.resolve();
 			this.#defer = new Deferred();
@@ -169,11 +163,11 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	captureError(e) {
 		this.classList.remove('loading');
 		this.classList.add('error');
-		this.placeholder(true);
-		this.#defer?.reject(new Error(this.currentSrc));
+		this.placeholder(this.options.src);
 	}
-	placeholder(error) {
+	placeholder(src) {
 		this.image.removeAttribute('src');
+		if (src) this.#defer?.reject(new Error(src));
 	}
 	close() {
 		this.#defer?.resolve();
@@ -192,10 +186,10 @@ class HTMLElementInlineImage extends HTMLElementImageConstructor(Page.create(HTM
 		return this;
 	}
 
-	placeholder(error) {
-		if (error) {
+	placeholder(src) {
+		if (src) {
 			this.image.src = "data:image/svg+xml," + encodeURIComponent(
-				`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${this.image.width} ${this.image.height}"><text text-anchor="middle" dominant-baseline="central" x="50%" y="50%" fill="#aaa">${error ? '∅' : ''}</text></svg>`);
+				`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${this.image.width} ${this.image.height}"><text text-anchor="middle" dominant-baseline="central" x="50%" y="50%" fill="#aaa">∅</text></svg>`);
 		} else {
 			this.image.removeAttribute('src');
 		}

package/ui/select.js

@@ -56,7 +56,9 @@ class HTMLElementSelect extends Page.Element {
 	set value(v) {
 		this.getAttribute('value', v);
 	}
-
+	captureAllClick(e, state) {
+		if (this.classList.contains('active')) this.classList.remove('active');
+	}
 	handleClick(e, state) {
 		if (state.scope.$write) return;
 		if (this.disabled) return;