@pageboard/html 0.16.16 → 0.17.0

package/elements/table.js

@@ -125,9 +125,8 @@ exports.table_cell = {
 	properties: {
 		align: {
 			title: 'Align',
-			default: "",
 			anyOf: [{
-				const: "",
+				const: null,
 				title: "Left",
 				icon: '<i class="icon align left"></i>'
 			}, {
@@ -163,12 +162,14 @@ exports.table_cell = {
 	},
 	inplace: true,
 	contents: "block+",
-	tag: 'td',
+	tag: 'td:not([is])',
 	parse: function(dom) {
 		const d = {};
-		if (dom.matches('.center')) d.align = 'center';
-		else if (dom.matches('.right')) d.align = 'right';
-		if (dom.matches('.selectable')) d.selectable = true;
+		if (dom.classList.contains('center')) d.align = 'center';
+		else if (dom.classList.contains('right')) d.align = 'right';
+		if (dom.classList.contains('selectable')) d.selectable = true;
+		if (dom.rowspan) d.rowspan = dom.rowspan;
+		if (dom.colspan) d.colspan = dom.colspan;
 		return d;
 	},
 	html: '<td class="[align|post: aligned] [selectable]" rowspan="[rowspan]" colspan="[colspan]"></td>'
@@ -216,10 +217,21 @@ exports.table_head_cell = {
 			}]
 		}
 	},
+	parse: function (dom) {
+		const d = {};
+		if (dom.classList.contains('center')) d.align = 'center';
+		else if (dom.classList.contains('right')) d.align = 'right';
+		if (dom.classList.contains('selectable')) d.selectable = true;
+		if (dom.rowspan) d.rowspan = dom.rowspan;
+		if (dom.colspan) d.colspan = dom.colspan;
+		if (dom.scope) d.scope = dom.scope;
+		if (dom.dataset.width) d.width = parseInt(dom.dataset.width) || null;
+		return d;
+	},
 	contents: "block+",
 	tag: 'th',
 	inplace: true,
-	html: '<th class="[align|post: aligned] [width|as:colnums|post: wide]" rowspan="[rowspan]" colspan="[colspan]" scope="[scope]"></th>',
+	html: '<th class="[align|post: aligned] [width|as:colnums|post: wide]" data-width="[width]" rowspan="[rowspan]" colspan="[colspan]" scope="[scope]"></th>',
 	stylesheets: [
 		"../ui/table.css"
 	]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.16.16",
+  "version": "0.17.0",
   "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) {

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/input-date.js

@@ -4,8 +4,6 @@ class HTMLElementInputDate extends Page.create(HTMLInputElement) {
 		if (this.hasAttribute('value')) this.setAttribute('value', this.getAttribute('value'));
 	}
 
-	// FIXME: doesn't initialize itself with already set "value" attribute
-
 	setAttribute(name, value) {
 		if (name == "value") {
 			this.value = value;

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;