@pageboard/html 0.15.14 → 0.16.0

package/elements/consent.js

@@ -2,7 +2,7 @@ exports.consent_form = {
 	priority: 11,
 	title: 'Consent',
 	icon: '<i class="handshake icon"></i>',
-	group: "block",
+	group: "block form",
 	menu: 'form',
 	properties: {
 		transient: {
@@ -17,44 +17,92 @@ exports.consent_form = {
 		nodes: "block+"
 	},
 	html: `<form is="element-consent" class="ui form" data-transient="[transient]">
-		<x[transient|alt:template:div|at:-] block-content="content"></x[transient|alt:template:div|at:-]>
+		<template block-content="content"></template>
+		<div class="view"></div>
 	</form>`,
 	scripts: ['../ui/storage.js', '../ui/consent.js'],
 	stylesheets: ['../ui/consent.css']
 };
 
+const consents = [];
+
+exports.input_radio_consent = {
+	title: 'Consent custom',
+	icon: '<i class="hand scissors icon"></i>',
+	menu: "form",
+	group: "block",
+	context: 'consent_form//',
+	properties: {
+		value: {
+			title: 'Consent',
+			anyOf: [{
+				const: 'custom',
+				title: 'Custom'
+			}, {
+				const: 'yes',
+				title: 'All'
+			}, {
+				const: 'no',
+				title: 'None'
+			}]
+		}
+	},
+	contents: {
+		id: 'label',
+		nodes: 'inline*'
+	},
+	html: `<div class="field">
+		<div class="ui radio checkbox">
+			<input type="radio" name="consent" value="[value]" id="for-consent-[value]" />
+			<label block-content="label" for="for-consent-[value]">Custom</label>
+		</div>
+	</div>`
+};
+
 exports.input_radio_yes = {
-	title: 'Yes',
+	title: 'Consent yes',
 	icon: '<i class="thumbs up icon"></i>',
 	menu: "form",
 	group: "block",
 	context: 'consent_form//',
+	properties: {
+		consent: {
+			title: 'Consent',
+			anyOf: consents
+		}
+	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
 	html: `<div class="field">
 		<div class="ui radio checkbox">
-			<input type="radio" name="consent" value="yes" id="for-consent-yes" />
-			<label block-content="label" for="for-consent-yes">Yes</label>
+			<input type="radio" name="consent.[consent]" value="yes" id="for-consent-yes-[consent]" />
+			<label block-content="label" for="for-consent-yes-[consent]">Yes</label>
 		</div>
 	</div>`
 };
 
 exports.input_radio_no = {
-	title: 'No',
+	title: 'Consent no',
 	icon: '<i class="thumbs down icon"></i>',
 	menu: "form",
 	group: "block",
 	context: 'consent_form//',
+	properties: {
+		consent: {
+			title: 'Consent',
+			anyOf: consents
+		}
+	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
 	html: `<div class="field">
 		<div class="ui radio checkbox">
-			<input type="radio" name="consent" value="no" id="for-consent-no" />
-			<label block-content="label" for="for-consent-no">No</label>
+			<input type="radio" name="consent.[consent]" value="no" id="for-consent-no-[consent]" />
+			<label block-content="label" for="for-consent-no-[consent]">No</label>
 		</div>
 	</div>`
 };

package/elements/embed.js

@@ -55,3 +55,8 @@ exports.embed = {
 		'../ui/linkable.css'
 	]
 };
+
+exports.input_radio_yes.properties.consent.anyOf.push({
+	title: "Embeds",
+	const: "embed"
+});

package/elements/form.js

@@ -31,15 +31,20 @@ exports.query_form = {
 			}
 		},
 		redirection: {
-			title: 'Target Address',
+			title: 'Target',
 			type: 'object',
 			properties: {
 				url: {
-					title: 'Page',
+					title: 'Address',
 					nullable: true,
 					type: "string",
-					format: "page",
-					$helper: "page"
+					format: 'uri-reference',
+					$helper: {
+						name: 'href',
+						filter: {
+							type: ["link", "file", "archive"]
+						}
+					}
 				},
 				parameters: {
 					title: 'Parameters',
@@ -89,8 +94,7 @@ exports.api_form = {
 			title: 'Hidden',
 			description: 'Hidden and disabled\nShown by $query.toggle',
 			type: 'boolean',
-			default: false,
-			context: 'template'
+			default: false
 		},
 		action: {
 			title: 'Action',
@@ -177,10 +181,10 @@ exports.api_form = {
 		id="[name|else:$id]"
 		action="/@api/form/[$id]"
 		parameters="[action?.request|as:expressions]"
-		success="[redirection.parameters|as:query]"
-		badrequest="[badrequest.parameters|as:query]"
-		unauthorized="[unauthorized.parameters|as:query]"
-		notfound="[notfound.parameters|as:query]"
+		success="[redirection.parameters|as:query|as:null]"
+		badrequest="[badrequest.parameters|as:query|as:null]"
+		unauthorized="[unauthorized.parameters|as:query|as:null]"
+		notfound="[notfound.parameters|as:query|as:null]"
 		class="ui form"></form>`,
 	stylesheets: [
 		'../ui/components/form.css',

package/elements/image.js

@@ -128,14 +128,13 @@ exports.image = {
 	}, {
 		id: 'alt',
 		title: 'Alternative Text',
-		$attr: 'data-alt',
 		$helper: {
 			name: 'describe'
 		}
 	}],
 	html: `<element-image
 		class="[display.fit|or:none] [display.horizontal?] [display.vertical?]"
-		data-src="[url]"
+		data-src="[url]" data-alt="[$content.alt]"
 		data-crop="[crop.x|or:50];[crop.y|or:50];[crop.width|or:100];[crop.height|or:100];[crop.zoom|or:100]"
 	>
 		<div block-content="legend"></div>

package/elements/inlines.js

@@ -270,6 +270,6 @@ exports.notranslate = {
 	group: "inline nolink",
 	icon: '<i class="large translate icon"></i>',
 	tag: 'span[translate="no"]',
-	html: '<span translate="no"></span>'
+	html: '<span translate="no" spellcheck="false"></span>'
 };
 

package/elements/inputs.js

@@ -13,8 +13,7 @@ exports.input_button = {
 			title: 'Type',
 			default: 'submit',
 			anyOf: [{
-				title: 'Submit',
-				const: 'submit'
+				const: 'submit' // deprecated
 			}, {
 				title: 'Reset',
 				const: 'reset'
@@ -90,6 +89,93 @@ exports.input_button = {
 	]
 };
 
+exports.input_submit = {
+	title: 'Submit',
+	icon: '<i class="icons"><i class="hand pointer icon"></i><i class="corner write icon"></i></i>',
+	menu: "form",
+	group: "block input_field",
+	context: 'form//',
+	contents: {
+		nodes: "inline*",
+		marks: "nolink"
+	},
+	properties: {
+		action: {
+			title: 'Action',
+			type: 'string',
+			format: 'pathname',
+			nullable: true,
+			$helper: {
+				name: 'datalist',
+				url: '/@api/block/search?type=api_form&limit=20&data.name:not&order=data.name',
+				value: '/@api/form/[data.name]',
+				title: '[$services.[data.action.method|enc:path].title] / [data.name|else:id]'
+			}
+		},
+		name: {
+			title: "Name",
+			description: "The form object key",
+			type: "string",
+			format: "singleline"
+		},
+		value: {
+			title: "Default value",
+			nullable: true,
+			type: "string",
+			format: "singleline"
+		},
+		form: {
+			title: 'Target form',
+			type: 'string',
+			format: 'name',
+			nullable: true,
+			$filter: {
+				name: 'action',
+				action: 'write'
+			}
+		},
+		disabled: {
+			title: 'Disabled',
+			type: 'boolean',
+			default: false
+		},
+		full: {
+			title: 'Fluid',
+			type: 'boolean',
+			default: false
+		},
+		icon: {
+			title: 'Icon',
+			type: 'boolean',
+			default: false
+		},
+		compact: {
+			title: 'Compact',
+			type: 'boolean',
+			default: false
+		},
+		float: {
+			title: 'Float',
+			anyOf: [{
+				type: 'null',
+				title: 'No'
+			}, {
+				const: 'left',
+				title: 'Left'
+			}, {
+				const: 'right',
+				title: 'Right'
+			}],
+			default: null
+		}
+	},
+	html: '<button type="submit" formaction="[action]" form="[form]" disabled="[disabled]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button" name="[name]" value="[value]">Submit</button>',
+	stylesheets: [
+		'../ui/components/button.css',
+		'../ui/button.css'
+	]
+};
+
 exports.input_fields = {
 	title: 'Input Fields',
 	icon: '<i class="icon columns"></i>',
@@ -206,8 +292,8 @@ exports.input_text = {
 		nodes: 'inline*'
 	},
 	patterns: {
-		tel: /^(\(\d+\))? *\d+([ .-]?\d+)*$/.source,
-		email: /^[\w.!#$%&'*+/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
+		tel: /^(\(\d+\))? *\d+([ .\-]?\d+)*$/v.source,
+		email: /[\w.!#$%&'*+\/=?^`\{\|\}~\-]+@\w(?:[\w\-]{0,61}\w)?(?:\.\w(?:[\w\-]{0,61}\w)?)*/v.source
 	},
 	html: `<div class="[width|as:colnums|post: wide] field [type|if:eq:hidden]">
 		<label block-content="label">Label</label>

package/elements/link.js

@@ -29,7 +29,9 @@ exports.link = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/@api/translate/languages'
+				url: '/@api/translate/languages',
+				value: '[data.lang]',
+				title: '[content.]'
 			}
 		},
 		id: {
@@ -75,7 +77,9 @@ exports.link_button = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/@api/translate/languages'
+				url: '/@api/translate/languages',
+				value: '[data.lang]',
+				title: '[content.]'
 			}
 		},
 		full: {

package/elements/menu.js

@@ -102,7 +102,9 @@ exports.menu_item_link = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/@api/translate/languages'
+				url: '/@api/translate/languages',
+				value: '[data.lang]',
+				title: '[content.]'
 			}
 		},
 		labeled: {

package/elements/page.js

@@ -1,20 +1,16 @@
-exports.page.stylesheets = [
-	...exports.page.stylesheets,
+exports.page.stylesheets.push(
 	'../ui/components/reset.css',
 	'../ui/site.css',
 	'../ui/page.css',
 	'../ui/transition.css'
-];
+);
 
-exports.page.resources = {
-	reset: '../ui/components/reset.css',
-	site: '../ui/site.css'
-};
+exports.page.resources.reset = '../ui/components/reset.css';
+exports.page.resources.site = '../ui/site.css';
 
-exports.page.scripts = [
-	...exports.page.scripts,
+exports.page.scripts.push(
 	'../ui/transition.js'
-];
+);
 
 exports.page.properties.transition = {
 	title: 'Transition',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.15.14",
+  "version": "0.16.0",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -16,14 +16,14 @@
   "dependencies": {},
   "devDependencies": {
     "nouislider": "^15.8.1",
-    "postinstall": "^0.10.3"
+    "postinstall": "^0.11.0"
   },
-  "postinstall": {},
-  "prepare": {
-    "nouislider/dist/nouislider.js": "copy lib/",
-    "nouislider/dist/nouislider.css": "copy lib/"
+  "postinstall": {
+    "nouislider/dist/nouislider.js": "link lib/",
+    "nouislider/dist/nouislider.css": "link lib/"
   },
   "pageboard": {
+    "version": "^0.16",
     "priority": -10,
     "directories": [
       "elements",

package/ui/consent.css

@@ -13,9 +13,16 @@ footer [block-type="consent_form"][data-transient="true"] {
 [block-type="consent_form"][data-transient="true"]:not(.visible) {
 	display:none;
 }
-.visible[block-type="consent_form"][data-transient="true"] > template {
-	display:block !important;
-	position: relative;
+
+[block-type="consent_form"] > [block-content="content"] {
+	display:none;
+}
+[block-type="consent_form"] > .view {
+	position:relative;
+}
+[contenteditable] [block-type="consent_form"] > [block-content="content"] {
+	display:block;
+	min-height:1em;
 }
 
 [contenteditable] [block-focused="last"] > .form[block-type="consent_form"][data-transient="true"],

package/ui/consent.js

@@ -3,51 +3,62 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 		dataTransient: false
 	};
 
-	static ask() {
-		this.waiting = false;
+	static explicits = new Set();
+
+	static ask(state, consent) {
 		let tacit = true;
-		for (const node of document.querySelectorAll('[block-type="consent_form"]')) {
+		const forms = document.querySelectorAll('[block-type="consent_form"]');
+		const consents = state.scope.storage.all();
+		for (const node of forms) {
+			window.HTMLElementForm.prototype.fill.call(node, consents);
 			node.classList.add('visible');
-			tacit = false;
+			tacit = consent && !node.querySelector(`[name="${consent}"]`) || false;
 		}
-		return !tacit;
+		if (!tacit) this.explicits.add(consent);
+		return tacit ? "yes" : null;
 	}
 	setup(state) {
 		if (state.scope.$write) return;
+		this.constructor.explicits = new Set();
+		const view = this.ownView;
+		view.textContent = '';
+		const tmpl = this.ownTpl.prerender();
+		view.appendChild(tmpl.content.cloneNode(true));
+		state.chain('consent', this);
+	}
+	chainConsent(state) {
 		if (this.options.transient) {
-			const tmpl = this.ownTpl.prerender();
-			if (tmpl.content && tmpl.children.length == 0) {
-				tmpl.appendChild(tmpl.content);
-			}
+			this.classList.remove('visible');
+		} else {
+			window.HTMLElementForm.prototype.fill.call(this, state.scope.storage.all());
 		}
-		state.consent(this);
 	}
-	chainConsent(state) {
-		window.HTMLElementForm.prototype.fill.call(this, {
-			consent: state.scope.$consent
-		});
-		if (this.options.transient) this.classList.remove('visible');
+	handleChange(e, state) {
+		if (e.type == "submit" || !this.elements.find(item => item.type == "submit")) {
+			this.handleSubmit(e, state);
+		}
 	}
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
 		if (state.scope.$write) return;
-		const fd = window.HTMLElementForm.prototype.read.call(this);
-		const consent = fd.consent;
-		if (consent == null) {
+		const consents = window.HTMLElementForm.prototype.read.call(this);
+		const list = Array.from(this.constructor.explicits);
+		const def = consents.consent;
+		for (const consent of list) {
+			if (def != "custom") consents[consent] = def;
+		}
+		if (list.some(c => consents[c] == null)) {
+			// not all explicit consents have been answered
 			return;
 		}
-		state.scope.storage.set('consent', consent);
-		state.scope.$consent = consent;
+		for (const [key, val] of Object.entries(consents)) {
+			state.scope.storage.set(key, val);
+		}
 		state.copy().runChain('consent');
 	}
-	handleChange(e, state) {
-		this.handleSubmit(e, state);
-	}
 	patch(state) {
 		if (state.scope.$write) return;
-		if (this.options.transient) {
-			this.ownTpl.prerender();
-		}
+		this.ownTpl.prerender();
 	}
 	get ownTpl() {
 		return this.children.find(
@@ -59,31 +70,17 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 	}
 }
 
-Page.constructor.prototype.consent = function (fn) {
-	const initial = this.scope.$consent === undefined;
-	let consent = this.scope.storage.get('consent');
-	if (consent == null && initial) consent = undefined;
-	this.scope.$consent = consent;
-	this.chain('consent', fn);
-	if (consent === undefined) {
-		HTMLElementConsent.waiting = true;
-	} else if (consent === null) {
-		// setup finished but no consent is done yet, ask consent
-		this.reconsent();
+Page.constructor.prototype.consent = function (listener, ask) {
+	const { consent } = listener.constructor;
+	if (!consent) {
+		console.warn("Expected a static consent field", listener);
+		return;
 	}
-};
-
-Page.constructor.prototype.reconsent = function (fn) {
-	if (fn) this.consent(fn);
-	const consent = this.scope.$consent;
-	let asking = false;
-	if (consent != "yes") {
-		asking = HTMLElementConsent.ask();
+	const cur = this.scope.storage.get(consent);
+	if (cur == null || ask) {
+		this.scope.storage.set(consent, HTMLElementConsent.ask(this, consent));
 	}
-	if (!asking) {
-		if (consent == null) this.scope.$consent = "yes";
-	}
-	return asking;
+	this.chain('consent', listener);
 };
 
 Page.define(`element-consent`, HTMLElementConsent, 'form');
@@ -91,12 +88,7 @@ Page.define(`element-consent`, HTMLElementConsent, 'form');
 
 Page.paint(state => {
 	state.finish(() => {
-		let run = true;
-		if (HTMLElementConsent.waiting) {
-			if (state.reconsent()) run = false;
-		}
-		if (run) {
-			// do not change current state stage
+		if (!HTMLElementConsent.explicits.size) {
 			state.copy().runChain('consent');
 		}
 	});

package/ui/embed.js

@@ -1,4 +1,5 @@
 class HTMLElementEmbed extends Page.Element {
+	static consent = "consent.embed";
 	static defaults = {
 		src: null,
 		query: null,
@@ -11,7 +12,7 @@ class HTMLElementEmbed extends Page.Element {
 		state.consent(this);
 	}
 	get currentSrc() {
-		return this.querySelector('iframe')?.src ?? "about:blank";
+		return this.querySelector('iframe')?.getAttribute('src');
 	}
 	patch(state) {
 		const { src } = this.options;
@@ -21,7 +22,7 @@ class HTMLElementEmbed extends Page.Element {
 		if (width && height) this.style.paddingBottom = `calc(${height} / ${width} * 100%)`;
 	}
 	consent(state) {
-		const consent = state.scope.$consent;
+		const consent = state.scope.storage.get(this.constructor.consent);
 		this.classList.toggle('denied', consent == "no");
 		this.classList.toggle('waiting', consent == null);
 
@@ -57,7 +58,9 @@ class HTMLElementEmbed extends Page.Element {
 		}
 	}
 	captureClick(e, state) {
-		if (this.matches('.denied')) state.reconsent();
+		if (this.matches('.denied')) {
+			state.consent(this, true);
+		}
 	}
 	captureLoad() {
 		this.classList.remove('loading');

package/ui/form.js

@@ -98,16 +98,19 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		}
 	}
 	paint(state) {
-		// ?submit=<name> for auto-submit
-		// WORKAROUND use Page instead of state
-		const name = state.query.submit;
-		if (!name || name != this.name) return;
-		// make sure to not resubmit in case of self-redirection
-		delete state.query.submit;
-		state.finish(() => {
-			if (state.status != 200) return;
-			state.dispatch(this, 'submit');
-		});
+		if (state.scope.$write) return;
+		const name = state.query.submit; // explicit auto-submit
+		if (name && name == this.name || this.elements.length == 0 && this.action != state.toString()) {
+			if (state.scope.$read) {
+				console.info("form#paint would auto-submit:", this.action);
+			} else {
+				delete state.query.submit;
+				state.finish(() => {
+					if (state.status != 200) return;
+					state.dispatch(this, 'submit');
+				});
+			}
+		}
 	}
 	read(withDefaults = false, submitter) {
 		const fd = new FormData(this, submitter);
@@ -322,7 +325,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			form.disable();
 			form.classList.add('loading');
 			scope.$response = await state.fetch(
-				form.method, form.getAttribute('action'), scope.$request
+				form.method,
+				e.submitter?.getAttribute('formaction') || form.action,
+				scope.$request
 			);
 		} catch (err) {
 			scope.$response = err;
@@ -416,8 +421,8 @@ HTMLButtonElement.prototype.fill = HTMLInputElement.prototype.fill = function (v
 			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;
+				if ((str == false || str == null) && this.value == "") return true;
+				return (str ?? '').toString() == this.value;
 			});
 		}
 	} else {

package/ui/inlines.css

@@ -38,3 +38,6 @@ span.purple {
 	color: purple;
 }
 
+[contenteditable] span[translate="no"] {
+	text-decoration: dashed underline;
+}