@pageboard/html 0.10.14 → 0.11.0

package/ui/form.js

@@ -33,27 +33,26 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		delete state.query.submit;
 		state.finish(() => {
 			if (state.status != 200) return;
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('submit', true, true);
-			this.dispatchEvent(e);
+			this.dispatchEvent(new Event('submit', {
+				bubbles: true,
+				cancelable: true
+			}));
 		});
 	}
-	read(withDefaults) {
+	read(withDefaults = false) {
 		const fd = new FormData(this);
 		const query = {};
 		fd.forEach((val, key) => {
-			if (val == null || val == "") {
-				const cur = this.querySelectorAll(`[name="${key}"]`).slice(-1).pop();
-				if (cur.required == false) {
-					val = undefined;
-				} else {
-					val = null;
-				}
+			const cur = this.querySelectorAll(`[name="${key}"]`).slice(-1).pop();
+			if (cur.type == "file") {
+				val = cur.value;
 			}
+			if (val == "") val = null;
+			// build array-like values
 			const old = query[key];
 			if (old !== undefined) {
 				if (!Array.isArray(old)) {
-					query[key] = [old];
+					query[key] = old == null ? [] : [old];
 				}
 				if (val !== undefined) query[key].push(val);
 			} else {
@@ -61,55 +60,63 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			}
 		});
 
+		// withDefaults: keep value if equals to its default
+		// else unset value
 		for (const node of this.elements) {
-			if (node.name == null || node.name == "" || node.type == "button") continue;
+			const { name, type } = node;
+			if (name == null || name == "" || type == "button") {
+				continue;
+			}
 			let val = node.value;
 			if (val == "") val = null;
-			if (node.type == "radio") {
-				if (!withDefaults && node.checked == node.defaultChecked && query[node.name] == val) {
-					query[node.name] = undefined;
-				}
-			} else if (node.type == "checkbox") {
-				if (!(node.name in query)) {
-					if (!withDefaults) query[node.name] = undefined;
-				}
-			} else if (node.type == "hidden") {
-				// always include them
-			} else {
-				let defVal = node.defaultValue;
-				if (defVal == "") defVal = null;
-				if (!withDefaults && query[node.name] == defVal) {
-					query[node.name] = undefined;
-				} else {
-					// not yet using form-associated custom input
-					query[node.name] = node.value;
-				}
-			}
-			if (query[node.name] === undefined && withDefaults) {
-				query[node.name] = null;
+			let defVal = node.defaultValue;
+			if (defVal == "") defVal = null;
+
+			switch (type) {
+				case "radio":
+					if (!withDefaults && node.checked == node.defaultChecked) {
+						if (query[name] == val) {
+							query[name] = undefined;
+						}
+					}
+					break;
+				case "checkbox":
+					if (!withDefaults) {
+						if (!(name in query)) {
+							query[name] = undefined;
+						}
+					}
+					break;
+				case "hidden":
+					break;
+				default:
+					if (withDefaults) {
+						if (query[name] === undefined) {
+							query[name] = defVal;
+						}
+					} else if (val === defVal) {
+						query[name] = node.required ? null : undefined;
+					}
 			}
 		}
+		// FIXME use e.submitter polyfill when available
+		// https://github.com/Financial-Times/polyfill-library/issues/1111
 		const btn = document.activeElement;
-		// FIXME https://github.com/whatwg/html/issues/3195 use e.submitter polyfill
-		// https://github.com/whatwg/xhr/issues/262 it's a mess
 		if (btn && btn.type == "submit" && btn.name && btn.value) {
 			query[btn.name] = btn.value;
 		}
 		return query;
 	}
 	fill(query, scope) {
-		// workaround for merging arrays
-		const tagList = "element-fieldset-list";
-		const FieldSet = VirtualHTMLElement.define(tagList);
-		for (const node of this.querySelectorAll(tagList)) {
-			if (!node.fill) Object.setPrototypeOf(node, FieldSet.prototype);
+		// fieldset-list are not custom inputs yet
+		for (const node of this.querySelectorAll("element-fieldset-list")) {
 			node.fill(query, scope);
 		}
 		const vars = [];
 		for (const elem of this.elements) {
 			const name = elem.name;
 			if (!name) continue;
-			if (Object.prototype.hasOwnProperty.call(query, name) && !vars.includes(name)) vars.push(name);
+			if (name in query && !vars.includes(name)) vars.push(name);
 			const val = query[name];
 			const str = ((v) => {
 				if (v == null) return "";
@@ -218,7 +225,7 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		const loc = Page.parse(redirect);
 		Object.assign(loc.query, this.read(false));
 		if (loc.samePathname(state)) {
-			loc.query = Object.assign({}, state.query, loc.query);
+			loc.query = { ...state.query, ...loc.query };
 		}
 		let status = 200;
 		const p = this.ignoreInputChange
@@ -345,7 +352,8 @@ HTMLInputElement.prototype.fill = function (val) {
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.checked = val;
 	} else if (this.type == "file") {
-		this.setAttribute('value', val);
+		if (val == '' || val == null) this.removeAttribute('value');
+		else this.setAttribute('value', val);
 	} else {
 		this.value = val;
 	}
@@ -363,7 +371,7 @@ HTMLInputElement.prototype.save = function () {
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.defaultChecked = this.checked;
 	} else if (this.type == "file") {
-		this.defaultValue = this.getAttribute('value');
+		this.defaultValue = this.getAttribute('value') || '';
 	} else {
 		this.defaultValue = this.value;
 	}
@@ -381,11 +389,13 @@ Object.defineProperty(HTMLInputElement.prototype, 'defaultValue', {
 	configurable: true,
 	enumerable: true,
 	get: function () {
+		// FIXME might not be needed anymore
 		if (this.form?.method == "get") return '';
 		else return this.getAttribute('value');
 	},
 	set: function (val) {
-		this.setAttribute('value', val);
+		if (val == '' || val == null) this.removeAttribute('value');
+		else this.setAttribute('value', val);
 	}
 });
 
@@ -417,7 +427,7 @@ Page.setup((state) => {
 	}
 });
 
-Page.ready((state) => {
+Page.patch(state => {
 	const filters = state.scope.$filters;
 
 	function linearizeValues(query, obj = {}, prefix) {
@@ -448,35 +458,32 @@ Page.ready((state) => {
 		if (action == "toggle") {
 			action = val ? "enable" : "disable";
 		}
-		// NB: call Class methods to deal with uninstantiated custom form
-		if (action == "enable") {
-			HTMLCustomFormElement.prototype.enable.call(form);
-		} else if (action == "disable") {
-			HTMLCustomFormElement.prototype.disable.call(form);
-		} else if (action == "fill") {
-			if (val == null) {
-				form.reset();
-			} else if (typeof val == "object") {
-				let values = val;
-				if (val.id && val.data) {
-					// old way
-					values = Object.assign({}, val.data);
-					for (const key of Object.keys(val)) {
-						if (key != "data") values['$' + key] = val[key];
+
+		state.finish(() => {
+			if (action == "enable") {
+				form.enable();
+			} else if (action == "disable") {
+				form.disable();
+			} else if (action == "fill") {
+				if (val == null) {
+					form.reset();
+				} else if (typeof val == "object") {
+					let values = val;
+					if (val.id && val.data) {
+						// old way
+						values = { ...val.data };
+						for (const key of Object.keys(val)) {
+							if (key != "data") values['$' + key] = val[key];
+						}
+					} else {
+						// new way
 					}
-				} else {
-					// new way
+					form.fill(linearizeValues(values), state.scope);
+					form.save();
 				}
-				HTMLCustomFormElement.prototype.fill.call(form, linearizeValues(values), state.scope);
-				HTMLCustomFormElement.prototype.save.call(form);
-			}
-		} else if (action == "read") {
-			const obj = {};
-			for (const [key, kval] of Object.entries(val)) {
-				if (form.querySelector(`[name="${key}"]`)) obj[key] = kval;
 			}
-			return obj;
-		}
+		});
+
 		return val;
 	};
 });

package/ui/input-file.js

@@ -14,7 +14,6 @@ class HTMLElementInputFile extends HTMLInputElement {
 		super();
 		if (this.init) this.init();
 		this.save();
-
 	}
 	get defaultValue() {
 		return this.#defaultValue;
@@ -26,7 +25,7 @@ class HTMLElementInputFile extends HTMLInputElement {
 		return this.getAttribute('value');
 	}
 	set value(str) {
-		if (str != null) {
+		if (str) {
 			this.setAttribute('value', str);
 		} else {
 			this.removeAttribute('value');

package/ui/input-range.js

@@ -81,9 +81,10 @@ class HTMLElementInputRange extends HTMLInputElement {
 			helper.classList.remove('indeterminate');
 			if (isInt) values = values.map((n) => parseInt(n));
 			this.rangeValue = values;
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('change', true, true);
-			this.dispatchEvent(e);
+			this.dispatchEvent(new Event('change', {
+				bubbles: true,
+				cancelable: true
+			}));
 		});
 		helper.addEventListener('keydown', this, true);
 		helper.addEventListener('dblclick', this, true);
@@ -92,9 +93,10 @@ class HTMLElementInputRange extends HTMLInputElement {
 	handleEvent(e) {
 		if (e.type == "dblclick" || e.keyCode == 8 || e.keyCode == 46) {
 			this.fill();
-			const ne = document.createEvent('HTMLEvents');
-			ne.initEvent('change', true, true);
-			this.dispatchEvent(ne);
+			this.dispatchEvent(new Event('change', {
+				bubbles: true,
+				cancelable: true
+			}));
 		}
 	}
 

package/ui/menu.js

@@ -27,15 +27,17 @@ class HTMLElementMenu extends VirtualHTMLElement {
 		const menu = this.firstElementChild;
 		const helper = this.lastElementChild;
 		helper.lastElementChild.lastElementChild.appendChild(this.toHelper(menu));
-		this.observer = new ResizeObserver((entries, observer) => {
-			window.requestAnimationFrame(() => {
-				const styles = window.getComputedStyle(this);
-				const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
-				const menuWidth = menu.offsetWidth;
-				this.classList.toggle('burger', parentWidth <= menuWidth);
+		state.finish(() => {
+			this.observer = new ResizeObserver((entries, observer) => {
+				window.requestAnimationFrame(() => {
+					const styles = window.getComputedStyle(this);
+					const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
+					const menuWidth = menu.offsetWidth;
+					this.classList.toggle('burger', parentWidth <= menuWidth);
+				});
 			});
+			this.observer.observe(this.parentNode);
 		});
-		this.observer.observe(this.parentNode);
 	}
 	close(state) {
 		if (this.observer) this.observer.disconnect();

package/ui/pagination.js

@@ -27,9 +27,10 @@ class HTMLElementPagination extends HTMLAnchorElement {
 		} else {
 			this.setAttribute('href', Page.format({
 				pathname: state.pathname,
-				query: Object.assign({}, state.query, {
+				query: {
+					...state.query,
 					[name]: cur || undefined
-				})
+				}
 			}));
 		}
 		state.finish(() => {

package/ui/query-tags.js

@@ -90,9 +90,10 @@ class HTMLElementQueryTags extends VirtualHTMLElement {
 			else if (control.selected) control.selected = false;
 			else if (control.reset) control.reset();
 			else if (control.value) control.value = "";
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('submit', true, true);
-			control.form.dispatchEvent(e);
+			control.form.dispatchEvent(new Event('submit', {
+				bubbles: true,
+				cancelable: true
+			}));
 		}
 		label.remove();
 	}

package/ui/tab.js

@@ -14,7 +14,7 @@ class HTMLElementTabs extends VirtualHTMLElement {
 		const id = this.id;
 
 		this.items.children.forEach((item, i) => {
-			const query = Object.assign({}, state.query);
+			const query = { ...state.query };
 			const key = `${id}.index`;
 			if (i == 0) delete query[key];
 			else query[key] = i;