@pageboard/html 0.14.9 → 0.14.10

package/ui/fieldset-list.js

@@ -1,72 +1,44 @@
-class WalkIndex {
-	#walk;
-	#find;
-	#index;
-	constructor(root, fn) {
-		this.#find = fn;
-		this.#walk = root.ownerDocument.createTreeWalker(
-			root,
-			NodeFilter.SHOW_ELEMENT,
-			this
-		);
-	}
-	acceptNode(node) {
-		const index = this.#find(node);
-		if (index != null) {
-			this.#index = index;
-			return NodeFilter.FILTER_ACCEPT;
-		} else {
-			return NodeFilter.FILTER_SKIP;
-		}
-	}
-	findBefore(node) {
-		this.#index = null;
-		this.#walk.currentNode = node;
-		this.#walk.previousNode();
-		return this.#index;
-	}
-}
-
 class HTMLElementFieldsetList extends Page.Element {
-	#size;
-	#initialSize;
+	#list;
+	#defaultList;
 	#prefix;
 	#model;
-	#walk;
 
-	fill(values, scope) {
-		if (scope.$write || this.prefix == null) return;
-		// unflatten array-values
-		const vars = [];
+	fill(values) {
+		if (this.isContentEditable || this.prefix == null) return;
 		for (const [key, val] of Object.entries(values)) {
-			if (!this.#prefixed(key)) continue;
-			vars.push(key);
-			if (Array.isArray(val)) {
+			const parts = this.#prefixed(key);
+			if (!parts) continue;
+			if (parts.length == 1 && Number.isInteger(Number(parts[0])) && Array.isArray(val)) {
+				console.warn("fielset-list should receive flat lists", key, val);
+			} else if (parts.length == 0 && Array.isArray(val)) {
 				for (let i = 0; i < val.length; i++) {
 					values[key + '.' + i] = val[i];
 				}
 				delete values[key];
 			}
 		}
-		const list = this.#listFromValues({ ...values });
-		if (this.#initialSize == null) this.#initialSize = list.length;
-		this.#resize(list.length, scope);
-		return vars;
+		this.#list = this.#listFromValues({ ...values });
+		if (this.#defaultList == null) this.save();
+		this.#resize();
 	}
 
 	reset() {
-		this.#resize(this.#initialSize, {}); // missing scope
+		this.#list = this.#defaultList.slice();
+		this.#refresh();
 	}
 
 	save() {
-		this.#initialSize = this.#size;
+		this.#defaultList = this.#list.slice();
 	}
 
 	#modelize(tpl) {
 		const keys = new Set();
 		const inputs = tpl.querySelectorAll('[name]');
 		for (const node of inputs) {
-			keys.add(node.name);
+			// because custom elements are not started in templates, do not use .name
+			const name = node.getAttribute('name');
+			keys.add(name);
 		}
 		const splits = Array.from(keys).map(name => this.#parts(name));
 		const prefix = [];
@@ -90,27 +62,24 @@ class HTMLElementFieldsetList extends Page.Element {
 		this.#prefix = prefix;
 		const model = {};
 		for (const key of keys) {
-			if (this.#prefixed(key)) {
-				model[this.#parts(key).slice(prefix.length).join('.')] = null;
+			const keyParts = this.#prefixed(key);
+			if (keyParts) {
+				model[keyParts.join('.')] = undefined;
 			}
 		}
 		this.#model = model;
 	}
 
-	#prepare() {
+	prepare(editable) {
 		const tpl = this.ownTpl;
-		tpl.prerender();
-		this.#modelize(tpl.content);
-		for (const node of tpl.content.querySelectorAll('[block-id]')) {
-			node.removeAttribute('block-id');
-		}
-	}
-
-	patch({ scope }) {
-		if (scope.$write) {
-			this.#modelize(this.ownTpl);
-		} else if (!this.#size) {
-			this.#resize(0, scope);
+		if (editable) {
+			this.#modelize(tpl);
+		} else {
+			tpl.prerender();
+			this.#modelize(tpl.content);
+			for (const node of tpl.content.querySelectorAll('[block-id]')) {
+				node.removeAttribute('block-id');
+			}
 		}
 	}
 
@@ -123,82 +92,97 @@ class HTMLElementFieldsetList extends Page.Element {
 		for (let i = 0; i < p.length; i++) {
 			if (parts[i] != p[i]) return false;
 		}
-		return true;
+		return parts.slice(p.length);
 	}
 
 	#incrementkey(index, name) {
-		if (!this.#prefixed(name)) return null;
+		const nameParts = this.#prefixed(name);
+		if (!nameParts) return null;
 		const parts = this.#prefix.slice();
 		parts.push(index);
-		parts.push(...this.#parts(name).slice(this.#prefix.length));
+		parts.push(...nameParts);
 		return parts.join('.');
 	}
 
-	#resize(size, scope) {
-		if (scope.$write) return;
-		const len = Math.max(Number(this.dataset.size) || 0, size);
-		if (this.#size === len) return;
-		this.#size = len;
+	#resize() {
 		let tpl = this.ownTpl.content.cloneNode(true);
-		const fieldlist = Array.from(Array(len)).map((x, i) => {
-			return { index: i };
-		});
+
 		const inputs = tpl.querySelectorAll('[name]');
 		for (const node of inputs) {
-			const name = this.#incrementkey('[fielditem.index]', node.name);
-			if (name != null) {
+			const name = node.getAttribute('name');
+			const iname = this.#incrementkey('[field.$i]', name);
+			if (iname != null) {
 				const id = node.id;
-				if (id?.startsWith(`for-${node.name}`)) {
-					node.id = id.replace(node.name, name);
+				if (id?.startsWith(`for-${name}`)) {
+					node.id = id.replace(name, iname);
 				}
 				if (node.nextElementSibling?.htmlFor == id) {
 					node.nextElementSibling.htmlFor = node.id;
 				}
-				node.name = name;
+				node.setAttribute('name', iname);
 			}
 		}
+
 		const conditionalFieldsets = tpl.querySelectorAll('[is="element-fieldset"]');
 		for (const node of conditionalFieldsets) {
-			const name = this.#incrementkey('[fielditem.index]', node.dataset.name);
+			const name = this.#incrementkey('[field.$i]', node.dataset.name);
 			if (name != null) {
 				node.dataset.name = name;
 			}
 		}
 
 		const subtpl = inputs.map(node => node.closest('.fields') ?? node).ancestor();
-		if (!subtpl) {
-			console.warn("fieldset-list should contain input[name]", this);
-			return;
-		}
 		subtpl.appendChild(
-			subtpl.ownerDocument.createTextNode('[fieldlist|at:*|repeat:fielditem|]')
+			subtpl.ownerDocument.createTextNode(
+				`[$fields|at:${this.dataset.at || '*'}|repeat:field|const:]`
+			)
 		);
-		if (len == 0) {
-			let node = tpl.querySelector(this.#selector('add'));
-			while (node != null && node != tpl && node != subtpl) {
-				while (node.nextSibling) node.nextSibling.remove();
-				while (node.previousSibling) node.previousSibling.remove();
-				node = node.parentNode;
-			}
-			{
-				const hidden = tpl.ownerDocument.createElement('input');
-				hidden.type = "hidden";
-				hidden.name = this.#prefix.join('.');
-				tpl.appendChild(hidden);
-			}
+		const min = Number(this.dataset.min) || 0;
+		const max = Number(this.dataset.max) || Infinity;
+		let list = this.#list;
+		const placeholder = list.length == 0 && min == 0;
+		if (list.length == 0) {
+			list = [{...this.#model, $i: min == 0 ? -1 : 0}];
 		}
-		tpl = tpl.fuse({ fieldlist }, scope);
+		tpl = tpl.fuse({
+			$fields: list,
+			$pathname: Page.pathname,
+			$query: Page.query
+		}, {
+			$hooks: {
+				before: {
+					get(ctx, val, args) {
+						const path = args[0];
+						if (path[0] == "field") {
+							args[0] = [path[0], path.slice(1).join('.')];
+						}
+					}
+				}
+			}
+		});
 
 		const view = this.ownView;
 		view.textContent = '';
 		view.appendChild(tpl);
 
+		if (placeholder) {
+			for (const node of view.querySelectorAll(`[name^="${this.#prefixStr}"]`)) {
+				node.disabled = true;
+			}
+		}
+
 		view.querySelectorAll(this.#selector('up')).forEach((node, i) => {
 			node.disabled = i == 0;
 		});
 		view.querySelectorAll(this.#selector('down')).forEach((node, i, arr) => {
 			node.disabled = i == arr.length - 1;
 		});
+		view.querySelectorAll(this.#selector('del')).forEach((node) => {
+			node.disabled = this.#list.length <= min;
+		});
+		view.querySelectorAll(this.#selector('add')).forEach((node) => {
+			node.disabled = this.#list.length >= max;
+		});
 	}
 
 	#parts(key) {
@@ -208,14 +192,15 @@ class HTMLElementFieldsetList extends Page.Element {
 	#listFromValues(values) {
 		const list = [];
 		for (const [key, val] of Object.entries(values)) {
-			if (!this.#prefixed(key)) continue;
-			const parts = this.#parts(key).slice(this.#prefix.length);
+			const parts = this.#prefixed(key);
+			if (!parts) continue;
 			const index = Number(parts.shift());
 			if (!Number.isInteger(index)) continue;
 			delete values[key];
 			let obj = list[index];
 			if (!obj) list[index] = obj = {};
 			obj[parts.join('.')] = val;
+			obj.$i = index;
 		}
 		return list;
 	}
@@ -224,6 +209,7 @@ class HTMLElementFieldsetList extends Page.Element {
 		for (let i = 0; i < list.length; i++) {
 			const obj = list[i] ?? {};
 			for (const [key, val] of Object.entries(obj)) {
+				if (key == "$i") continue;
 				const parts = this.#prefix.slice();
 				parts.push(i);
 				parts.push(...this.#parts(key));
@@ -232,33 +218,32 @@ class HTMLElementFieldsetList extends Page.Element {
 		}
 	}
 
+	#findIndex(btn) {
+		let node = btn;
+		const sel = `[name^="${this.#prefixStr}"]`;
+		while ((node = node.parentNode)) {
+			const input = Array.from(node.querySelectorAll(sel)).pop();
+			if (!input) continue;
+			const { index } = this.#parseName(input.name);
+			if (index >= 0 && index < this.#list.length) return index;
+		}
+	}
+
 	handleClick(e, state) {
 		if (state.scope.$write) return;
 		const btn = e.target.closest('button');
 		if (!btn) return;
 		const action = btn.value;
 		if (["add", "del", "up", "down"].includes(action) == false) return;
-
-		const form = this.closest('form');
-		const values = form.read(true);
-		const list = this.#listFromValues(values);
-
-		if (!this.#walk) this.#walk = new WalkIndex(this, node => {
-			const { index } = this.#parseName(node.name);
-			if (index >= 0 && index < list.length) return index;
-			else return null;
-		});
+		const list = this.#listFromValues(this.closest('form').read(true));
 		let index;
 
-		const fileInputs = this.querySelectorAll('[name][type="file"]')
-			.map(n => n.cloneNode(true));
-
 		switch (action) {
 			case "add":
-				list.splice((this.#walk.findBefore(btn) ?? -1) + 1, 0, this.#model);
+				list.splice((this.#findIndex(btn) ?? 0), 0, { ...this.#model });
 				break;
 			case "del":
-				list.splice(this.#walk.findBefore(btn) ?? 0, 1);
+				list.splice(this.#findIndex(btn) ?? 0, 1);
 				break;
 			case "up":
 				index = this.querySelectorAll(this.#selector('up')).indexOf(btn);
@@ -273,8 +258,22 @@ class HTMLElementFieldsetList extends Page.Element {
 				}
 				break;
 		}
-		this.#listToValues(values, list);
-		form.fill(values, state.scope);
+		this.#list = list;
+		this.#refresh();
+		state.dispatch(this, 'change');
+	}
+
+	#refresh() {
+		const form = this.closest('form');
+		const values = form.read(true);
+		for (const key of Object.keys(values)) {
+			if (this.#prefixed(key)) delete values[key];
+		}
+		const fileInputs = this.querySelectorAll('[name][type="file"]')
+			.map(n => n.cloneNode(true));
+		this.#listToValues(values, this.#list);
+		form.fill(values);
+
 		const liveFileInputs = this.querySelectorAll('[name][type="file"]');
 		for (const node of fileInputs) {
 			const { value } = node;
@@ -286,14 +285,13 @@ class HTMLElementFieldsetList extends Page.Element {
 				live.replaceWith(node);
 			}
 		}
-		state.dispatch(this, 'change');
 	}
 
 	#parseName(name) {
-		if (!this.#prefixed(name)) {
+		const parts = this.#prefixed(name);
+		if (!parts) {
 			return { index: -1 };
 		}
-		const parts = this.#parts(name).slice(this.#prefix.length);
 		const index = Number(parts.shift());
 		if (!Number.isInteger(index)) return { index: -1 };
 		return { index, sub: parts.join('.') };
@@ -308,11 +306,11 @@ class HTMLElementFieldsetList extends Page.Element {
 		return this.children.find(node => node.matches('.view'));
 	}
 	get prefix() {
-		if (this.#prefix == null) {
-			this.#prepare();
-		}
 		return this.#prefix;
 	}
+	get #prefixStr() {
+		return this.#prefix.length ? this.#prefix.join('.') + '.' : '';
+	}
 }
 
 Page.define('element-fieldset-list', HTMLElementFieldsetList);

package/ui/fieldset.js

@@ -4,8 +4,8 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 		dataValue: null
 	};
 
-	fill(query, scope) {
-		if (scope.$write || !this.options?.name || !this.form) return;
+	fill(query) {
+		if (this.isContentEditable || !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,12 +16,12 @@ class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 
 	patch(state) {
 		// before/after form#fill
-		this.fill(null, state.scope);
-		state.finish(() => this.fill(null, state.scope));
+		this.fill(null);
+		state.finish(() => this.fill(null));
 	}
 	handleAllChange(e, state) {
 		if (this.form?.contains(e.target)) {
-			this.fill(null, state.scope);
+			this.fill(null);
 		}
 	}
 }

package/ui/form.css

@@ -15,8 +15,11 @@ label[for] {
 	user-select: none;
 }
 
-element-select {
-	z-index:1; /* or else dropdown menu goes under what's next */
+element-select.active {
+	z-index:1;
+}
+element-select.active.ui.dropdown .menu {
+	display:block;
 }
 
 .inline.fields element-select {

package/ui/form.js

@@ -122,7 +122,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			}
 			this.restore(state.scope);
 		} else {
-			for (const name of this.fill(state.query, state.scope)) {
+			for (const name of this.fill(state.query)) {
 				state.vars[name] = true;
 			}
 		}
@@ -224,11 +224,11 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		}
 		return query;
 	}
-	fill(query, scope) {
+	fill(query) {
 		// fieldset-list are not custom inputs yet
 		const vars = [];
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
-			if (node.fill) vars.push(...node.fill(query, scope));
+			node?.fill(query);
 		}
 
 		for (const elem of this.elements) {
@@ -242,8 +242,11 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				elem.fill?.(val);
 			}
 		}
+		for (const node of this.querySelectorAll("element-select")) {
+			node.fill?.(query);
+		}
 		for (const node of this.querySelectorAll('fieldset[is="element-fieldset"]')) {
-			node.fill?.(query, scope);
+			node.fill?.(query);
 		}
 		return vars;
 	}
@@ -253,17 +256,17 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			node.save();
 		}
 		for (const node of this.elements) {
-			if (node.save) node.save();
+			node.save?.();
 		}
 	}
 	reset() {
 		this.classList.remove('unsaved');
+		for (const node of this.elements) {
+			node.reset?.();
+		}
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
 			node.reset();
 		}
-		for (const node of this.elements) {
-			if (node.reset) node.reset();
-		}
 	}
 	backup() {
 		if (!this.action) return;
@@ -289,6 +292,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		window.sessionStorage.removeItem(this.action);
 	}
 	handleReset(e, state) {
+		e.preventDefault();
 		this.reset();
 	}
 	handleSubmit(e, state) {
@@ -422,18 +426,22 @@ HTMLFormElement.prototype.disable = function () {
 	}
 };
 
-
-
-
 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];
-		opt.selected = val.indexOf(opt.value) > -1;
+		opt.selected = val.includes(opt.value);
 	}
 };
 HTMLSelectElement.prototype.reset = function () {
-	for (let i = 0; i < this.options.length; i++) this.options[i].selected = false;
+	for (let i = 0; i < this.options.length; i++) {
+		this.options[i].selected = this.options[i].defaultSelected;
+	}
+};
+HTMLSelectElement.prototype.save = function () {
+	for (let i = 0; i < this.options.length; i++) {
+		this.options[i].defaultSelected = this.options[i].selected;
+	}
 };
 
 HTMLButtonElement.prototype.fill = HTMLInputElement.prototype.fill = function (val) {
@@ -465,7 +473,7 @@ HTMLButtonElement.prototype.fill = HTMLInputElement.prototype.fill = function (v
 
 HTMLInputElement.prototype.reset = function () {
 	if (this.type == "radio" || this.type == "checkbox") {
-		this.fill(this.defaultChecked);
+		this.fill(this.defaultChecked ? this.value : '');
 	} else {
 		this.fill(this.defaultValue);
 	}

package/ui/image.js

@@ -72,22 +72,6 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		return img;
 	}
 
-	fix(img) {
-		if (!window.objectFitImages.supportsObjectFit) {
-			let style = "";
-			if (this.fit) {
-				style += `object-fit: ${this.fit};`;
-			}
-			if (this.position) {
-				const pos = this.position.replace(/(h|v)center/g, 'center');
-				style += `object-position: ${pos};`;
-			}
-			if (style.length) {
-				img.style.fontFamily = `'${style}'`;
-				window.objectFitImages(img);
-			}
-		}
-	}
 	patch(state) {
 		this.classList.remove('loading');
 		if (this.currentSrc != this.options.src) {
@@ -171,7 +155,6 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	captureLoad() {
 		this.#defer.resolve();
 		this.classList.remove('loading');
-		this.fix(this.image);
 	}
 	captureError() {
 		this.#defer.reject();

package/ui/input-file.css

@@ -29,12 +29,7 @@
 .form .field.error > input[type="file"][value]::after {
 	color:inherit;
 }
-.form .field > input[type="file"]::after,
-.form .field > input[type="file"]:not([value])::after {
-	content:attr(placeholder);
-	color: rgba(0 0 0 / 50%);
-	float: left;
-}
+
 input[type="file"]::file-selector-button {
 	display:block;
 	position:absolute;

package/ui/select.css

@@ -5,3 +5,18 @@ element-select.ui.multiple.dropdown > .label {
 	vertical-align: baseline;
 	line-height: inherit;
 }
+
+[contenteditable] .ui.dropdown[block-focused] > .menu {
+	overflow: visible;
+	width: auto;
+	height: auto;
+	top: 100% !important;
+	opacity: 1;
+}
+
+[contenteditable] .field[block-focused] > .ui.dropdown {
+	z-index:1;
+}
+[contenteditable] .field[block-focused] .dropdown > .menu {
+	display: block !important;
+}