@pageboard/html 0.11.28 → 0.12.0

package/ui/consent.js

@@ -1,8 +1,4 @@
-class HTMLCustomConsentElement extends HTMLFormElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLElementConsent extends Page.create(HTMLFormElement) {
 	static defaults = {
 		dataTransient: false
 	};
@@ -27,7 +23,7 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 		state.consent(this);
 	}
 	chainConsent(state) {
-		window.HTMLCustomFormElement.prototype.fill.call(this, {
+		window.HTMLElementForm.prototype.fill.call(this, {
 			consent: state.scope.$consent
 		});
 		if (this.options.transient) this.classList.remove('visible');
@@ -35,7 +31,7 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
 		if (this.isContentEditable) return;
-		const fd = window.HTMLCustomFormElement.prototype.read.call(this);
+		const fd = window.HTMLElementForm.prototype.read.call(this);
 		const consent = fd.consent;
 		if (consent == null) {
 			return;
@@ -63,9 +59,9 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define(`element-consent`, HTMLCustomConsentElement, 'form');
-});
+
+Page.define(`element-consent`, HTMLElementConsent, 'form');
+
 
 Page.constructor.prototype.consent = function (fn) {
 	const initial = this.scope.$consent === undefined;
@@ -74,7 +70,7 @@ Page.constructor.prototype.consent = function (fn) {
 	this.scope.$consent = consent;
 	this.chain('consent', fn);
 	if (consent === undefined) {
-		HTMLCustomConsentElement.waiting = true;
+		HTMLElementConsent.waiting = true;
 	} else if (consent === null) {
 		// setup finished but no consent is done yet, ask consent
 		this.reconsent();
@@ -86,7 +82,7 @@ Page.constructor.prototype.reconsent = function (fn) {
 	const consent = this.scope.$consent;
 	let asking = false;
 	if (consent != "yes") {
-		asking = HTMLCustomConsentElement.ask();
+		asking = HTMLElementConsent.ask();
 	}
 	if (!asking) {
 		if (consent == null) this.scope.$consent = "yes";
@@ -97,7 +93,7 @@ Page.constructor.prototype.reconsent = function (fn) {
 Page.paint(state => {
 	state.finish(() => {
 		let run = true;
-		if (HTMLCustomConsentElement.waiting) {
+		if (HTMLElementConsent.waiting) {
 			if (state.reconsent()) run = false;
 		}
 		if (run) state.runChain('consent');

package/ui/embed.js

@@ -1,21 +1,15 @@
-class HTMLElementEmbed extends VirtualHTMLElement {
+class HTMLElementEmbed extends Page.Element {
 	static defaults = {
 		src: null,
 		hash: null
 	};
 	static revealRatio = 0.2;
-	init() {
-		this.promise = Promise.resolve();
-		this.promise.done = function() {};
-	}
+	#defer = new Deferred();
+
 	reveal(state) {
-		let done;
-		this.promise = new Promise(resolve => done = resolve);
-		this.promise.done = done;
 		this.classList.add('waiting');
-
 		state.consent(this);
-		return this.promise;
+		return this.#defer;
 	}
 	consent(state) {
 		const consent = state.scope.$consent;
@@ -25,7 +19,7 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 		this.iframe = this.querySelector('iframe');
 		if (consent != "yes") {
 			if (this.iframe) this.iframe.remove();
-			this.promise.done();
+			this.#defer.resolve();
 			return;
 		}
 		if (!this.iframe) {
@@ -52,18 +46,18 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 					this.iframe.setAttribute('src', this.currentSrc);
 				}
 			}
-			this.promise.done();
+			this.#defer.resolve();
 		}
 	}
 	captureClick(e, state) {
 		if (this.matches('.denied')) state.reconsent();
 	}
 	captureLoad() {
-		this.promise.done();
+		this.#defer.resolve();
 		this.classList.remove('loading');
 	}
 	captureError() {
-		this.promise.done();
+		this.#defer.resolve();
 		this.classList.add('error');
 	}
 	handleAllMessage(e, state) {
@@ -79,6 +73,6 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define('element-embed', HTMLElementEmbed);
-});
+
+Page.define('element-embed', HTMLElementEmbed);
+

package/ui/fieldset-list.js

@@ -27,7 +27,7 @@ class WalkIndex {
 	}
 }
 
-class HTMLElementFieldsetList extends VirtualHTMLElement {
+class HTMLElementFieldsetList extends Page.Element {
 	#size;
 	#initialSize;
 	#prefix;
@@ -115,29 +115,29 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		if (this.#size === len) return;
 		this.#size = len;
 		let tpl = this.ownTpl.content.cloneNode(true);
-		const $fieldset = Array.from(Array(len)).map((x, i) => {
+		const fieldlist = Array.from(Array(len)).map((x, i) => {
 			return { index: i };
 		});
 		const inputs = tpl.querySelectorAll('[name]');
 		const prefix = this.#prefix;
 		for (const node of inputs) {
 			if (node.name.startsWith(prefix)) {
-				node.name = `${prefix}[$field.index].${node.name.substring(prefix.length)}`;
+				node.name = `${prefix}[fielditem.index].${node.name.substring(prefix.length)}`;
 				if (node.id?.startsWith('for-' + prefix)) {
-					node.id = `for-${prefix}[$field.index].${node.id.substring(4 + prefix.length)}`;
+					node.id = `for-${prefix}[fielditem.index].${node.id.substring(4 + prefix.length)}`;
 				}
 			}
 		}
 		const conditionalFieldsets = tpl.querySelectorAll('[is="element-fieldset"]');
 		for (const node of conditionalFieldsets) {
 			if (node.dataset.name?.startsWith(prefix)) {
-				node.dataset.name = `${prefix}[$field.index].${node.dataset.name.substring(prefix.length)}`;
+				node.dataset.name = `${prefix}[fielditem.index].${node.dataset.name.substring(prefix.length)}`;
 			}
 		}
 		const labels = tpl.querySelectorAll('label[for]');
 		for (const node of labels) {
 			if (node.htmlFor?.startsWith('for-' + prefix)) {
-				node.htmlFor = `for-${prefix}[$field.index].${node.htmlFor.substring(4 + prefix.length)}`;
+				node.htmlFor = `for-${prefix}[fielditem.index].${node.htmlFor.substring(4 + prefix.length)}`;
 			}
 		}
 
@@ -147,7 +147,7 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 			return;
 		}
 		subtpl.appendChild(
-			subtpl.ownerDocument.createTextNode('[$fieldset|repeat:*:$field|]')
+			subtpl.ownerDocument.createTextNode('[fieldlist|at:*|repeat:fielditem|]')
 		);
 		if (len == 0) {
 			let node = tpl.querySelector(this.#selector('add'));
@@ -163,7 +163,7 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 				tpl.appendChild(hidden);
 			}
 		}
-		tpl = tpl.fuse({ $fieldset }, scope);
+		tpl = tpl.fuse({ fieldlist }, scope);
 
 		const view = this.ownView;
 		view.textContent = '';
@@ -282,4 +282,4 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 	}
 }
 
-VirtualHTMLElement.define('element-fieldset-list', HTMLElementFieldsetList);
+Page.define('element-fieldset-list', HTMLElementFieldsetList);

package/ui/fieldset.js

@@ -1,12 +1,8 @@
-class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
+class HTMLElementFieldSet extends Page.create(HTMLFieldSetElement) {
 	static defaults = {
 		dataName: null,
 		dataValue: null
 	};
-	constructor() {
-		super();
-		this.init?.();
-	}
 
 	fill(query) {
 		if (this.isContentEditable || !this.options?.name || !this.form) return;
@@ -36,6 +32,6 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define(`element-fieldset`, HTMLCustomFieldSetElement, 'fieldset');
-});
+
+Page.define(`element-fieldset`, HTMLElementFieldSet, 'fieldset');
+

package/ui/form.js

@@ -1,10 +1,99 @@
-class HTMLCustomFormElement extends HTMLFormElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
+class HTMLElementForm extends Page.create(HTMLFormElement) {
+	getMethodLater = Page.debounce((e, state) => this.getMethod(e, state), 300);
+
+	static linearizeValues(query, obj = {}, prefix) {
+		if (Array.isArray(query) && query.every(val => {
+			return val == null || typeof val != "object";
+		})) {
+			// do not linearize array-as-value
+			obj[prefix] = query;
+		} else for (let key of Object.keys(query)) {
+			const val = query[key];
+			if (prefix) key = prefix + '.' + key;
+			if (val === undefined) continue;
+			if (val == null) obj[key] = val;
+			else if (typeof val == "object") this.linearizeValues(val, obj, key);
+			else obj[key] = val;
+		}
+		return obj;
 	}
-	init() {
-		this.getMethodLater = Pageboard.debounce(this.getMethod, 300);
+
+	static patch(state) {
+		state.scope.$filters.form = (ctx, val, action, name) => {
+			const form = name
+				? document.querySelector(`form[name="${name}"]`)
+				: ctx.dest.node.closest('form');
+			if (!form) {
+				// eslint-disable-next-line no-console
+				console.warn("No parent form found");
+				return val;
+			}
+			if (action == "toggle") {
+				action = val ? "enable" : "disable";
+			}
+
+			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
+						}
+						form.fill(this.linearizeValues(values), state.scope);
+						form.save();
+					}
+				}
+			});
+
+			return val;
+		};
+	}
+
+	static setup(state) {
+		// https://daverupert.com/2017/11/happier-html5-forms/
+		state.connect({
+			captureBlur: (e, state) => blurHandler(e, false),
+			captureInvalid: (e, state) => blurHandler(e, true),
+			captureFocus: (e, state) => {
+				const el = e.target;
+				if (!el.matches || !el.matches('input,textarea,select')) return;
+				if (e.relatedTarget?.type == "submit") return;
+				updateClass(el.closest('.field') || el, el.validity, true);
+			}
+		}, document);
+
+		function updateClass(field, validity, remove) {
+			for (const [key, has] of Object.entries(validity)) {
+				if (key == "valid") continue;
+				field.classList.toggle(key, !remove && has);
+			}
+			field.classList.toggle('error', !remove && !validity.valid);
+		}
+		function blurHandler(e, checked) {
+			const el = e.target;
+			if (!el.matches || !el.matches('input,textarea,select')) return;
+			if (!checked) el.checkValidity();
+			updateClass(el.closest('.field') || el, el.validity);
+		}
+	}
+
+	toggleMessages(status) {
+		return window.HTMLElementTemplate.prototype.toggleMessages.call(this, status, this);
+	}
+	getRedirect(status) {
+		return window.HTMLElementTemplate.prototype.getRedirect.call(this, status, this);
 	}
 	patch(state) {
 		if (this.isContentEditable) return;
@@ -73,6 +162,7 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			if (val == "") val = null;
 			let defVal = node.defaultValue;
 			if (defVal == "") defVal = null;
+			else if (type == "select-one" && defVal === undefined) defVal = null;
 
 			switch (type) {
 				case "file":
@@ -220,75 +310,66 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			this.toggleMessages(status);
 		});
 	}
-	postMethod(e, state) {
+	async postMethod(e, state) {
 		if (e.type != "submit") return;
 		const form = this;
-		const $query = this.dataset;
-
 		form.classList.add('loading');
 
-		const data = { $query };
-		return Promise.all(Array.from(form.elements).filter(node => {
+		await Promise.all(Array.from(form.elements).filter(node => {
 			return Boolean(node.presubmit);
-		}).map(input => {
-			return input.presubmit();
-		})).then(() => {
-			data.$query = state.query;
-			data.$request = form.read(true);
-			form.disable();
-			return Pageboard.fetch(form.method, Page.format({
-				pathname: form.getAttribute('action'),
-				query: data.$query
-			}), data.$request);
-		}).catch(err => err).then(res => {
-			if (res?.grants) state.data.$grants = res.grants;
-			state.scope.$response = res;
-			form.enable();
+		}).map(input => input.presubmit()));
 
-			form.classList.remove('loading');
+		const { scope } = state;
+		scope.$request = form.read(true);
+		form.disable();
 
-			// messages shown inside form, no navigation
-			const hasMsg = form.toggleMessages(res.status);
-			const ok = res.status >= 200 && res.status < 300;
-			let redirect = form.getRedirect(res.status);
+		const res = await Pageboard.fetch(form.method, Page.format({
+			pathname: form.getAttribute('action'),
+			query: state.query
+		}), scope.$request).catch(err => err);
 
-			if (ok) {
-				form.forget();
-				form.save();
-				if (!redirect && form.closest('element-template') && !hasMsg) {
-					redirect = state.toString();
-				}
-			}
+		if (res?.grants) scope.$grants = res.grants;
+		scope.$response = res;
+		scope.$status = res.status;
+		form.enable();
 
-			if (!redirect) return;
+		form.classList.remove('loading');
 
-			data.$response = res;
-			data.$status = res.status;
-			if (!redirect) {
-				if (res.granted) redirect = state.toString();
-				else return;
-			}
-			if (redirect && !ok) {
-				form.backup();
+		// messages shown inside form, no navigation
+		const hasMsg = form.toggleMessages(res.status);
+		const ok = res.status >= 200 && res.status < 300;
+		let redirect = form.getRedirect(res.status);
+
+		if (ok) {
+			form.forget();
+			form.save();
+			if (!redirect && form.closest('element-template') && !hasMsg) {
+				redirect = state.toString();
 			}
+		}
+		if (!redirect) {
+			if (res.granted) redirect = state.toString();
+			else return;
+		}
+		if (redirect && !ok) {
+			form.backup();
+		}
 
-			const loc = Page.parse(redirect).fuse(data, state.scope);
-			let vary = false;
-			if (loc.samePathname(state)) {
-				if (res.granted) {
-					vary = true;
-				} else {
-					vary = "patch";
-				}
-				state.data.$vary = vary;
+		const loc = Page.parse(redirect).fuse({}, scope);
+		let vary = false;
+		if (loc.samePathname(state)) {
+			if (res.granted) {
+				vary = true;
+			} else {
+				vary = "patch";
 			}
-			return state.push(loc, {
-				vary: vary
-			});
-		});
+			scope.$vary = vary;
+		}
+		return state.push(loc, { vary });
 	}
 }
-window.HTMLCustomFormElement = HTMLCustomFormElement;
+window.HTMLElementForm = HTMLElementForm;
+Page.define(`element-form`, HTMLElementForm, 'form');
 
 /* these methods must be available even on non-upgraded elements */
 HTMLFormElement.prototype.enable = function () {
@@ -305,17 +386,8 @@ HTMLFormElement.prototype.disable = function () {
 	}
 };
 
-Page.ready(() => {
-	const Cla = window.customElements.get('element-template');
-	HTMLCustomFormElement.prototype.toggleMessages = function (status) {
-		return Cla.prototype.toggleMessages.call(this, status, this);
-	};
-	HTMLCustomFormElement.prototype.getRedirect = function (status) {
-		return Cla.prototype.getRedirect.call(this, status, this);
-	};
 
-	VirtualHTMLElement.define(`element-form`, HTMLCustomFormElement, 'form');
-});
+
 
 HTMLSelectElement.prototype.fill = function (val) {
 	if (!Array.isArray(val)) val = [val];
@@ -335,6 +407,7 @@ HTMLInputElement.prototype.fill = function (val) {
 			this.checked = true;
 		} else {
 			this.checked = (Array.isArray(val) ? val : [val]).some(str => {
+				if (str == false && this.value == "") return true;
 				return str.toString() == this.value;
 			});
 		}
@@ -396,91 +469,3 @@ Object.defineProperty(HTMLInputElement.prototype, 'defaultValue', {
 	}
 });
 
-Page.setup(state => {
-	// https://daverupert.com/2017/11/happier-html5-forms/
-	Page.connect({
-		captureBlur: (e, state) => blurHandler(e, false),
-		captureInvalid: (e, state) => blurHandler(e, true),
-		captureFocus: (e, state) => {
-			const el = e.target;
-			if (!el.matches || !el.matches('input,textarea,select')) return;
-			if (e.relatedTarget?.type == "submit") return;
-			updateClass(el.closest('.field') || el, el.validity, true);
-		}
-	}, document);
-
-	function updateClass(field, validity, remove) {
-		for (const [key, has] of Object.entries(validity)) {
-			if (key == "valid") continue;
-			field.classList.toggle(key, !remove && has);
-		}
-		field.classList.toggle('error', !remove && !validity.valid);
-	}
-	function blurHandler(e, checked) {
-		const el = e.target;
-		if (!el.matches || !el.matches('input,textarea,select')) return;
-		if (!checked) el.checkValidity();
-		updateClass(el.closest('.field') || el, el.validity);
-	}
-});
-
-Page.patch(state => {
-	const filters = state.scope.$filters;
-
-	function linearizeValues(query, obj = {}, prefix) {
-		if (Array.isArray(query) && query.every(val => {
-			return val == null || typeof val != "object";
-		})) {
-			// do not linearize array-as-value
-			obj[prefix] = query;
-		}	else for (let key of Object.keys(query)) {
-			const val = query[key];
-			if (prefix) key = prefix + '.' + key;
-			if (val === undefined) continue;
-			if (val == null) obj[key] = val;
-			else if (typeof val == "object") linearizeValues(val, obj, key);
-			else obj[key] = val;
-		}
-		return obj;
-	}
-	filters.form = function (val, what, action, name) {
-		const form = name
-			? document.querySelector(`form[name="${name}"]`)
-			: what.parent.closest('form');
-		if (!form) {
-			// eslint-disable-next-line no-console
-			console.warn("No parent form found");
-			return val;
-		}
-		if (action == "toggle") {
-			action = val ? "enable" : "disable";
-		}
-
-		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
-					}
-					form.fill(linearizeValues(values), state.scope);
-					form.save();
-				}
-			}
-		});
-
-		return val;
-	};
-});

package/ui/heading-helper.js

@@ -1,17 +1,11 @@
-class HTMLElementHeadingHelper extends HTMLHeadingElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
-	init() {
-		this.willSync = Pageboard.debounce(this.sync, 100);
+class HTMLElementHeadingHelper extends Page.create(HTMLHeadingElement) {
+	setup(state) {
+		this.willSync = state.debounce(() => this.sync(), 100);
 		this.observer = new MutationObserver(records => {
 			if (records.some(mut => {
 				return mut.type == "characterData" || mut.type == "childList" && mut.addedNodes.length;
-			}))	this.willSync();
+			})) this.willSync();
 		});
-	}
-	setup() {
 		this.observer.observe(this, {
 			childList: true,
 			subtree: true,
@@ -32,13 +26,13 @@ class HTMLElementHeadingHelper extends HTMLHeadingElement {
 	}
 }
 
-Page.setup(() => {
-	for (let i = 1; i <= 6; i++) {
-		VirtualHTMLElement.define(
-			`h${i}-helper`,
-			class extends HTMLElementHeadingHelper { },
-			`h${i}`
-		);
-	}
-});
+
+for (let i = 1; i <= 6; i++) {
+	Page.define(
+		`h${i}-helper`,
+		class extends HTMLElementHeadingHelper { },
+		`h${i}`
+	);
+}
+