@pageboard/html 0.14.36 → 0.15.0

package/elements/form.js

@@ -38,7 +38,7 @@ exports.query_form = {
 					title: 'Page',
 					nullable: true,
 					type: "string",
-					format: "pathname",
+					format: "page",
 					$helper: "page"
 				},
 				parameters: {
@@ -79,7 +79,7 @@ exports.api_form = {
 	properties: {
 		name: {
 			title: 'Name',
-			description: "Used by query 'submit' or 'toggle'\nExposes /.api/form/$name",
+			description: "Used by query 'submit' or 'toggle'\nExposes /@api/form/$name",
 			type: 'string',
 			format: 'id',
 			nullable: true
@@ -101,6 +101,16 @@ exports.api_form = {
 			description: 'Choose a service',
 			$ref: '/writes'
 		},
+		request: {
+			title: 'Map inputs',
+			type: 'object',
+			nullable: true
+		},
+		response: {
+			title: 'Map outputs',
+			type: 'object',
+			nullable: true
+		},
 		redirection: {
 			title: 'Success',
 			type: 'object',
@@ -109,7 +119,7 @@ exports.api_form = {
 					title: 'Page',
 					nullable: true,
 					type: "string",
-					format: "pathname",
+					format: "page",
 					$helper: "page"
 				},
 				parameters: {
@@ -160,7 +170,7 @@ exports.api_form = {
 	contents: 'block+',
 	tag: 'form[method="post"]',
 	html: `<form is="element-form" method="post" name="[name]" masked="[masked]"
-		action="/.api/form/[name|else:$id]"
+		action="/@api/form/[name|else:$id]"
 		parameters="[$expr?.action?.parameters|as:expressions]"
 		success="[redirection.url][redirection.parameters|as:query]"
 		badrequest="[badrequest.url][badrequest.parameters|as:query]"

package/elements/inlines.js

@@ -95,35 +95,7 @@ exports.style = {
 	group: "inline nolink",
 	tag: 'span.style',
 	properties: {
-		size: {
-			title: 'Size',
-			default: null,
-			anyOf: [{
-				const: null,
-				title: 'Default',
-				icon: '<span class="icon">∅</span>'
-			}, {
-				const: 'tiny',
-				title: 'Tiny',
-				icon: '<span class="icon char" style="font-size:0.6em;margin-inline:0.6rem">aA</span>'
-			}, {
-				const: 'small',
-				title: 'Small',
-				icon: '<span class="icon char" style="font-size:0.8em;margin-inline:0.6rem">aA</span>'
-			}, {
-				const: 'base',
-				title: 'Base',
-				icon: '<span class="icon char" style="font-size:1em;margin-inline:0.6rem">aA</span>'
-			}, {
-				const: 'large',
-				title: 'Large',
-				icon: '<span class="icon char" style="font-size:1.2em;margin-inline:0.6rem">aA</span>'
-			}, {
-				const: 'extra',
-				title: 'Extra',
-				icon: '<span class="icon char" style="font-size:1.6em;margin-inline:0.6rem">aA</span>'
-			}]
-		},
+		size: exports.paragraph.properties.size,
 		transform: {
 			title: 'Transform',
 			default: null,
@@ -197,18 +169,7 @@ exports.style = {
 			nullable: true
 		}
 	},
-	parse: function(dom) {
-		const data = {};
-		for (const [key, schema] of Object.entries(this.properties)) {
-			if (schema.anyOf) for (const item of schema.anyOf) {
-				if (item.const && dom.classList.contains(item.const)) {
-					data[key] = item.const;
-				}
-			}
-		}
-		if (dom.translate === false) data.idiom = true;
-		return data;
-	},
+	parse: exports.paragraph.parse,
 	html: '<span class="style [size] [transform] [color]" translate="[idiom|alt:no:]"></span>',
 	stylesheets: [
 		'../ui/inlines.css'

package/elements/input-property.js

@@ -50,7 +50,7 @@ exports.input_property = {
 			return node;
 		}
 		// list[0] = "data";
-		// /.api/form wraps it into block.data
+		// /@api/form wraps it into block.data
 		list.shift();
 		name = list.join('.');
 		const id = scope.$id;

package/elements/layout.js

@@ -133,6 +133,64 @@ exports.layout = {
 		heightUnits: {
 			$ref: "#/definitions/units/properties/data/properties/block"
 		},
+		column: {
+			title: 'Column',
+			nullable: true,
+			properties: {
+				count: {
+					title: 'Count',
+					description: 'empty for auto',
+					type: 'integer',
+					nullable: true,
+					minimum: 1
+				},
+				width: {
+					title: 'Width',
+					properties: {
+						length: {
+							title: 'Length',
+							type: 'number',
+							default: 0,
+							minimum: 0,
+							multipleOf: 0.01,
+							nullable: true
+						},
+						unit: {
+							$ref: "#/definitions/units/properties/data/properties/inline"
+						}
+					}
+				},
+				fill: {
+					title: 'Fill',
+					anyOf: [{
+						type: 'null',
+						title: 'Auto'
+					}, {
+						const: 'balance',
+						title: 'Balance'
+					}, {
+						const: 'balance-all',
+						title: 'Balance All'
+					}]
+				},
+				gap: {
+					title: 'Gap',
+					properties: {
+						length: {
+							title: 'Length',
+							type: 'number',
+							default: 0,
+							minimum: 0,
+							multipleOf: 0.01,
+							nullable: true
+						},
+						unit: {
+							$ref: "#/definitions/units/properties/data/properties/inline"
+						}
+					}
+				}
+			}
+		},
 		margins: {
 			title: 'Margins',
 			type: 'object',
@@ -391,6 +449,10 @@ exports.layout = {
 		style-background-repeat="[background.repeat]"
 		style-background-attachment="[background.attachment]"
 		style-background-position="[background.position]"
+		style-column-gap="[column.gap.length|fail:][column.gap.unit]"
+		style-column-fill="[column.fill|or:auto]"
+		style-column-count="[column.count|or:auto]"
+		style-column-width="[column.width.length|fail:][column.width.unit]"
 	></div>`,
 	stylesheets: [
 		'../ui/components/container.css',
@@ -400,4 +462,3 @@ exports.layout = {
 		'../ui/layout.js'
 	]
 };
-

package/elements/link.js

@@ -29,7 +29,7 @@ exports.link = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/.api/languages'
+				url: '/@api/languages'
 			}
 		},
 		id: {
@@ -75,7 +75,7 @@ exports.link_button = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/.api/languages'
+				url: '/@api/languages'
 			}
 		},
 		full: {
@@ -108,7 +108,7 @@ exports.link_button = {
 			default: null
 		}
 	},
-	contents: "text*",
+	contents: "inline*",
 	group: "block",
 	html: '<a href="[url|lang:[lang]]" hreflang="[lang]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button"></a>',
 	stylesheets: [

package/elements/menu.js

@@ -105,7 +105,7 @@ exports.menu_item_link = {
 			nullable: true,
 			$helper: {
 				name: 'datalist',
-				url: '/.api/languages'
+				url: '/@api/languages'
 			}
 		},
 		labeled: {

package/elements/navigation.js

@@ -20,7 +20,7 @@ exports.nav = {
 		}
 	},
 	group: "block",
-	html: `<a class="ui icon button [$links.[relation]|as:array|.first|alt::disabled]" href="[$links.[relation]|as:array|.first.url]" title="[$links.[relation]|as:array|.first.title]"><i class="icon [rel]"></i></a>`
+	html: `<a class="ui icon button [$links.[relation]|as:array|.first|alt::disabled]" href="[$links.[relation]|as:array|.first.url]" title="[$links.[relation]|as:array|.first.title]"><i class="icon [relation]"></i></a>`
 };
 
 exports.scrollLink = {

package/elements/textcard.js

@@ -0,0 +1,21 @@
+exports.textcard = {
+	title: 'Text Card',
+	group: 'block',
+	icon: '<i class="icons"><i class="small heading icon"></i><i class="bottom right corner text cursor icon"></i></i>',
+	contents: [{
+		id: 'title',
+		nodes: "inline*",
+		title: 'title'
+	}, {
+		id: 'content',
+		nodes: "inline*",
+		title: 'content'
+	}],
+	html: `<div class="ui textcard">
+		<div class="header" block-content="title"></div>
+		<div class="content" block-content="content"></div>
+	</div>`,
+	stylesheets: [
+		"../ui/textcard.css"
+	]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.14.36",
+  "version": "0.15.0",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {},
   "devDependencies": {
     "nouislider": "^15.7.1",
-    "postinstall": "^0.9.0"
+    "postinstall": "^0.10.3"
   },
   "postinstall": {},
   "prepare": {

package/ui/image.js

@@ -9,27 +9,20 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 
 	#defer;
 
-	static getZoom({ w, h, rw, rh, fit }) {
-		let z = 100;
-		if (!rw && !rh) return z;
-		if (!rw) rw = rh * w / h;
-		if (!rh) rh = rw * h / w;
-		z = Math.ceil((fit == "contain" ? Math.min : Math.max)(rw / w, rh / h) * 100 * (window.devicePixelRatio || 1));
-		// svg need to be resized to scale to its intrinsic dimension
-		if (z > 100) z = 100;
-		const zstep = 5;
-		z = Math.ceil(z / zstep) * zstep;
-		return z;
-	}
 	get dimensions() {
+		// dimension in pixels of the (extracted) source image
 		let w = parseInt(this.dataset.width);
 		let h = parseInt(this.dataset.height);
-		const r = this.crop;
-		w = Math.round(w * r.w / 100);
-		h = Math.round(h * r.h / 100);
-		if (r.z != 100 && this.fit == "none") {
-			w = Math.round(w * r.z / 100);
-			h = Math.round(h * r.z / 100);
+		const { crop } = this;
+		if (crop.w != 100) {
+			w = Math.round(w * crop.w / 100);
+		}
+		if (crop.h != 100) {
+			h = Math.round(h * crop.h / 100);
+		}
+		if (crop.z != 100) {
+			w = Math.round(w * crop.z / 100);
+			h = Math.round(h * crop.z / 100);
 		}
 		return { w, h };
 	}
@@ -53,12 +46,12 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		});
 	}
 	get crop() {
-		let [x, y, w, h, z] = (this.dataset.crop || ";;;;").split(";").map(x => parseFloat(x));
-		if (Number.isNaN(x)) x = 50;
-		if (Number.isNaN(y)) y = 50;
-		if (Number.isNaN(w)) w = 100;
-		if (Number.isNaN(h)) h = 100;
-		if (Number.isNaN(z)) z = 100;
+		const defs = [50, 50, 100, 100, 100];
+		const list = (this.dataset.crop || ";;;;").split(";").map(x => parseFloat(x));
+		for (let i = 0; i < defs.length; i++) {
+			if (Number.isNaN(list[i])) list[i] = defs[i];
+		}
+		const [x, y, w, h, z] = list;
 		return { x, y, w, h, z };
 	}
 	set crop({ x, y, w, h, z }) {
@@ -99,6 +92,44 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		else return src;
 	}
 
+	requestSrc(srcLoc) {
+		const { crop, fit } = this;
+		const { w, h } = this.dimensions;
+		const r = {};
+		if (!Number.isNaN(w) && !Number.isNaN(h)) {
+			if (fit == "none") {
+				r.width = w;
+				r.height = h;
+			} else {
+				const rect = this.getBoundingClientRect();
+				r.width = rect.width;
+				r.height = rect.height;
+			}
+		}
+		if (!r.width && !r.height) {
+			// don't show
+			return;
+		}
+		if (crop.x != 50 || crop.y != 50 || crop.w != 100 || crop.h != 100) {
+			if (Math.round((crop.x - crop.w / 2) * 100) < 0 || Math.round((crop.x + crop.w / 2) * 100) > 10000) {
+				crop.w = 2 * Math.min(crop.x, 100 - crop.x);
+			}
+			if (Math.round((crop.y - crop.h / 2) * 100) < 0 || Math.round((crop.y + crop.h / 2) * 100) > 10000) {
+				crop.h = 2 * Math.min(crop.y, 100 - crop.y);
+			}
+			srcLoc.query.ex = `x-${crop.x}_y-${crop.y}_w-${crop.w}_h-${crop.h}`;
+		}
+
+		if (!r.width) r.width = r.height * w / h;
+		if (!r.height) r.height = r.width * h / w;
+		const clientHintWidth = Math.ceil(
+			(fit == "contain" ? Math.min : Math.max)(r.width / w, r.height / h)
+			* w * (window.devicePixelRatio || 1)
+		);
+		srcLoc.query.rs = `w-${clientHintWidth}`; // max, min ?
+		return srcLoc.toString();
+	}
+
 	reveal(state) {
 		const img = this.image;
 		if (!this.options.src) {
@@ -108,47 +139,15 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		if (this.classList.contains('loading')) {
 			return;
 		}
-		const fit = this.fit;
-		const r = this.crop;
-
-		let loc = Page.parse(this.options.src);
-		if (loc.hostname && loc.hostname != document.location.hostname) {
-			loc = Page.parse({
-				pathname: "/.api/image",
-				query: {
-					url: this.options.src
-				}
-			});
-		}
-
-		if (r.x != 50 || r.y != 50 || r.w != 100 || r.h != 100) {
-			if (Math.round((r.x - r.w / 2) * 100) < 0 || Math.round((r.x + r.w / 2) * 100) > 10000) {
-				r.w = 2 * Math.min(r.x, 100 - r.x);
-			}
-			if (Math.round((r.y - r.h / 2) * 100) < 0 || Math.round((r.y + r.h / 2) * 100) > 10000) {
-				r.h = 2 * Math.min(r.y, 100 - r.y);
-			}
-			loc.query.ex = `x-${r.x}_y-${r.y}_w-${r.w}_h-${r.h}`;
-		}
-		const { w, h } = this.dimensions;
-		if (fit == "none") {
-			loc.query.rs = `z-${r.z}`;
-		} else if (!Number.isNaN(w) && !Number.isNaN(h)) {
-			const rect = this.getBoundingClientRect();
-			const rw = rect.width;
-			const rh = rect.height;
-			if (rw == 0 && rh == 0) {
-				// don't show
-				return;
-			}
-			loc.query.rs = "z-" + this.constructor.getZoom({ w, h, rw, rh, fit });
-		}
-		const curSrc = loc.toString();
-		if (curSrc != this.currentSrc) {
+		const srcLoc = Page.parse(this.options.src);
+		const reqSrc = this.requestSrc(srcLoc);
+		if (!reqSrc) {
+			img.setAttribute('src', '');
+		}	else if (reqSrc != this.currentSrc) {
 			this.classList.add('loading');
 			this.#defer?.resolve();
 			this.#defer = new Deferred();
-			img.setAttribute('src', curSrc);
+			img.setAttribute('src', reqSrc);
 			return this.#defer;
 		}
 	}

package/ui/inlines.css

@@ -37,18 +37,4 @@ span.blue {
 span.purple {
 	color: purple;
 }
-span.tiny {
-	font-size: 0.5715em;
-}
-span.small {
-	font-size: 0.8em;
-}
-span.base {
-	font-size: 1.2em;
-}
-span.large {
-	font-size: 1.6em;
-}
-span.extra {
-	font-size: 2em;
-}
+

package/ui/input-file.js

@@ -73,9 +73,10 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 			this.#defer = null;
 		};
 		const pass = (obj) => {
-			if (!obj.items || obj.items.length == 0) return fail(new Error("File rejected"));
-			const val = obj.items[0];
-			this.value = val;
+			if (!obj.hrefs?.length) {
+				return fail(new Error("File rejected"));
+			}
+			this.value = obj.hrefs[0]?.pathname;
 			field.classList.add('success');
 			field.classList.remove('loading');
 			this.#xhr = null;
@@ -124,7 +125,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 			fail(err);
 		});
 		try {
-			xhr.open("POST", `/.api/upload/${this.id}`, true);
+			xhr.open("POST", `/@api/upload/${this.id}`, true);
 			xhr.setRequestHeader('Accept', "application/json; q=1.0");
 			xhr.send(fd);
 			this.#xhr = xhr;

package/ui/layout.js

@@ -14,48 +14,16 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 			this.style.backgroundImage = '';
 			return;
 		}
-		const fit = this.fit;
-		const r = this.crop;
-
-		let loc = Page.parse(this.options.src);
-		if (loc.hostname && loc.hostname != document.location.hostname) {
-			loc = Page.parse({
-				pathname: "/.api/image",
-				query: {
-					url: this.options.src
-				}
-			});
-		}
-
-		if (r.x != 50 || r.y != 50 || r.w != 100 || r.h != 100) {
-			if (Math.round((r.x - r.w / 2) * 100) < 0 || Math.round((r.x + r.w / 2) * 100) > 10000) {
-				r.w = 2 * Math.min(r.x, 100 - r.x);
-			}
-			if (Math.round((r.y - r.h / 2) * 100) < 0 || Math.round((r.y + r.h / 2) * 100) > 10000) {
-				r.h = 2 * Math.min(r.y, 100 - r.y);
-			}
-			loc.query.ex = `x-${r.x}_y-${r.y}_w-${r.w}_h-${r.h}`;
-		}
-		const {w, h} = this.dimensions;
-		if (fit == "none") {
-			loc.query.rs = `z-${r.z}`;
-		} else if (!Number.isNaN(w) && !Number.isNaN(h)) {
-			const rect = this.getBoundingClientRect();
-			const rw = rect.width;
-			const rh = rect.height;
-			if (rw == 0 && rh == 0) {
-				// don't show
-				return;
-			}
-			loc.query.rs = "z-" + HTMLElementLayout.getZoom({w, h, rw, rh, fit});
+		const srcLoc = Page.parse(this.options.src);
+		const reqSrc = this.requestSrc(srcLoc);
+		try {
+			this.currentSrc = reqSrc;
+		} catch (e) {
+			// pass
 		}
-		const curSrc = loc.toString();
-		if (curSrc != this.currentSrc) {
-			try {
-				this.currentSrc = curSrc;
-			} catch(e) {
-				// pass
-			}
+		if (!reqSrc) {
+			this.style.backgroundImage = '';
+		} else if (reqSrc != this.currentSrc) {
 			this.#defer?.resolve();
 			this.#defer = new Deferred();
 			const img = new Image();
@@ -63,8 +31,8 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 			img.addEventListener('error',
 				e => this.#defer.reject(new Error(this.currentSrc))
 			);
-			img.src = curSrc;
-			this.style.backgroundImage = `url("${curSrc}")`;
+			img.src = reqSrc;
+			this.style.backgroundImage = `url("${reqSrc}")`;
 			return this.#defer;
 		}
 	}
@@ -74,14 +42,13 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 }
 
 (function(HTMLElementImage) {
-HTMLElementLayout.getZoom = HTMLElementImage.getZoom;
-for (const name of ['crop', 'dimensions']) {
-	Object.defineProperty(
-		HTMLElementLayout.prototype,
-		name,
-		Object.getOwnPropertyDescriptor(HTMLElementImage.prototype, name)
-	);
-}
+	for (const name of ['crop', 'dimensions', 'requestSrc']) {
+		Object.defineProperty(
+			HTMLElementLayout.prototype,
+			name,
+			Object.getOwnPropertyDescriptor(HTMLElementImage.prototype, name)
+		);
+	}
 })(window.customElements.get('element-image'));
 
 Page.define(`element-layout`, HTMLElementLayout, 'div');

package/ui/pagination.js

@@ -9,7 +9,7 @@ class HTMLElementPagination extends Page.create(HTMLAnchorElement) {
 	#update(state) {
 		const { fetch } = this.dataset;
 		const node = this.ownerDocument.querySelector(
-			`element-template[action="/.api/query/${fetch}"]`
+			`element-template[action="/@api/query/${fetch}"]`
 		);
 		if (!node) {
 			console.warn("pagination does not find fetch node", fetch);

package/ui/textcard.css

@@ -0,0 +1,3 @@
+.textcard > .header {
+	font-weight:bold;
+}