@pageboard/html 0.13.7 → 0.14.0

package/elements/embed.js

@@ -53,4 +53,4 @@ exports.embed = {
 		'../ui/linkable.css'
 	]
 };
-exports.editor.scripts.push('../ui/embed-helper.js');
+exports.editor?.scripts.push('../ui/embed-helper.js');

package/elements/form.js

@@ -80,7 +80,7 @@ exports.api_form = {
 	properties: {
 		name: {
 			title: 'Name',
-			description: '<action>=<name> where action=submit or toggle',
+			description: 'Trigger query submit|toggle=<name>\nExpose endpoint /.api/form/<name>',
 			type: 'string',
 			format: 'id',
 			nullable: true

package/elements/heading.js

@@ -71,7 +71,7 @@ exports.heading = {
 		'../ui/heading.js'
 	]
 };
-exports.editor.scripts.push('../ui/heading-helper.js');
+exports.editor?.scripts.push('../ui/heading-helper.js');
 
 exports.heading_nolink = {
 	...exports.heading,

package/elements/inlines.js

@@ -181,20 +181,27 @@ exports.style = {
 				title: "Purple",
 				icon: '<i class="icon color" style="color:purple">P</i>'
 			}]
+		},
+		idiom: {
+			title: 'Untranslatable',
+			type: 'boolean',
+			default: false,
+			nullable: true
 		}
 	},
 	parse: function(dom) {
 		const data = {};
 		for (const [key, schema] of Object.entries(this.properties)) {
-			for (const item of schema.anyOf) {
+			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;
 	},
-	html: '<span class="style [size] [transform] [color]"></span>',
+	html: '<span class="style [size] [transform] [color]" translate="[idiom|alt:no:]"></span>',
 	stylesheets: [
 		'../ui/inlines.css'
 	]

package/elements/sitemap.js

@@ -19,32 +19,26 @@ exports.sitemap = {
 	scripts: [
 		'../ui/sitemap.js'
 	],
-	itemModel: function(name, leaf) {
+	itemModel: function(name) {
 		const schema = exports[name];
 		return {
 			title: schema.title,
 			icon: schema.icon,
+			properties: schema.properties,
 			standalone: true,
-			properties: {
-				leaf: {
-					type: 'boolean',
-					default: Boolean(leaf)
-				},
-				...schema.properties
-			},
 			menu: "link",
 			bundle: 'sitemap',
 			group: 'sitemap_item',
 			virtual: true,
-			contents: leaf ? undefined : {
+			contents: {
 				id: 'children',
 				nodes: "sitemap_item*",
 				virtual: true
 			},
 			alias: name,
 			context: 'sitemap/ | sitepage/',
-			html: `<element-sitepage class="item [leaf|alt::fold]" data-url="[url]" data-index="[index]">
-				<div class="title [leaf|alt::caret-icon]">
+			html: `<element-sitepage class="item fold" data-url="[url]" data-index="[index]">
+				<div class="title caret-icon">
 					<span class="header">[title|or:-]</span>
 					<span class="ui mini type label">[$grants.webmaster|prune:*][$type|slice:4]</span>
 					<span class="ui mini grey label">[$grants.webmaster|prune:*][nositemap|prune:*]no sitemap</span>
@@ -54,11 +48,16 @@ exports.sitemap = {
 					<a href="[url]" class="description">[url|or:-]</a>
 					<a href="[redirect|fail:*]" class="redirection"> ➜ [redirect]</a>
 				</div>
-				<div class="list content [leaf|not:prune:*]" block-content="children"></div>
+				<div class="list content" block-content="children"></div>
 			</element-sitepage>`
 		};
 	}
 };
-exports.editor.scripts.push('../ui/sitemap-helper.js');
-exports.sitepage = exports.sitemap.itemModel('page', false);
-exports.siteredirection = exports.sitemap.itemModel('redirection', false);
+
+if (exports.page) exports.sitepage = exports.sitemap.itemModel('page');
+if (exports.pdf) exports.sitepdf = exports.sitemap.itemModel('pdf');
+if (exports.redirection) exports.siteredirection = exports.sitemap.itemModel('redirection');
+if (exports.mail) exports.sitemail = exports.sitemap.itemModel('mail');
+
+exports.editor?.scripts.push('../ui/sitemap-helper.js');
+

package/elements/tab.js

@@ -32,7 +32,7 @@ exports.tabs = {
 		'../ui/tab.js'
 	]
 };
-exports.editor.scripts.push('../ui/tab-helper.js');
+exports.editor?.scripts.push('../ui/tab-helper.js');
 
 exports.tab_item = {
 	title: "Item",

package/elements/time.js

@@ -158,7 +158,7 @@ exports.time = {
 		const format = {};
 		const list = (dom.dataset.format ?? "").split(':');
 		for (const [key, schema] of Object.entries(this.properties.format.properties)) {
-			for (const tok of list) {
+			if (schema.anyOf) for (const tok of list) {
 				if (tok) {
 					const item = schema.anyOf.find(item => item.const === tok);
 					if (item) format[key] = item.const;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.13.7",
+  "version": "0.14.0",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "formdata-polyfill": "^4.0.10",
-    "nouislider": "^15.6.1",
+    "nouislider": "^15.7.1",
     "object-fit-images": "^3.2.4",
     "postinstall-bundle": "^0.8.0"
   },

package/ui/sitemap.js

@@ -61,7 +61,7 @@ class HTMLElementSitemap extends Page.Element {
 		const scope = state.scope.copy();
 		await scope.import(res);
 		const tree = this.constructor.transformResponse(res);
-		const node = scope.render({
+		const node = await scope.render({
 			item: tree
 		});
 		// only change block content

package/elements/svg.js

@@ -1,367 +0,0 @@
-exports.svg = {
-	title: "Svg",
-	bundle: true,
-	icon: '<i class="object ungroup icon"></i>',
-	menu: 'media',
-	group: "block",
-	properties: {
-		viewBox: {
-			title: 'View Box',
-			type: 'string',
-			description: 'Typically "0 0 width height"'
-		},
-		width: {
-			title: 'Width',
-			type: 'integer'
-		},
-		height: {
-			title: 'Height',
-			type: 'integer'
-		}
-	},
-	contents: "svg_defs? svg_node+",
-	ns: "svg",
-	html: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="[viewBox]" width="[width]" height="[height]"></svg>`
-};
-
-exports.text.group += ' svg_inline';
-
-exports.svg_text = {
-	title: "text",
-	icon: '<i class="icon font"></i>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		x: {
-			title: 'x',
-			type: 'number',
-			nullable: true
-		},
-		y: {
-			title: 'y',
-			type: 'number',
-			nullable: true
-		}
-	},
-	contents: "svg_inline*",
-	inplace: true,
-	ns: "svg",
-	html: `<text x="[x]" y="[y]">Text</text>`
-};
-
-exports.svg_tspan = {
-	title: "span",
-	icon: '<i class="icon font"></i>',
-	menu: 'media',
-	group: "svg_inline",
-	properties: {
-	},
-	contents: "text*",
-	inplace: true,
-	inline: true,
-	ns: "svg",
-	html: `<tspan></tspan>`
-};
-
-exports.svg_defs = {
-	title: "defs",
-	icon: '<b class="icon">defs</b>',
-	menu: 'media',
-	contents: "svg_node+",
-	inplace: true,
-	ns: "svg",
-	html: `<defs></defs>`
-};
-
-exports.svg_group = {
-	title: "group",
-	icon: '<i class="clone outline icon"></i>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		id: {
-			title: 'id',
-			type: 'string',
-			format: 'id',
-			nullable: true
-		},
-		fill: {
-			title: 'Fill',
-			type: 'string',
-			nullable: true
-		},
-		stroke: {
-			title: 'Stroke',
-			type: 'string',
-			nullable: true
-		},
-		transform: {
-			title: 'Transform',
-			type: 'string',
-			nullable: true
-		}
-	},
-	contents: "svg_node+",
-	inplace: true,
-	ns: "svg",
-	html: `<g id="[id]" fill="[fill]" stroke="[stroke]" transform="[transform]"></g>`
-};
-
-exports.svg_path = {
-	title: "path",
-	icon: '<b class="icon">path</b>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		d: {
-			title: 'd',
-			type: 'string',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<path d="[d]"></path>`
-};
-
-exports.svg_line = {
-	title: "line",
-	icon: '<b class="icon">line</b>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		x1: {
-			title: 'x1',
-			type: 'number',
-			nullable: true
-		},
-		y1: {
-			title: 'y1',
-			type: 'number',
-			nullable: true
-		},
-		x2: {
-			title: 'x2',
-			type: 'number',
-			nullable: true
-		},
-		y2: {
-			title: 'y2',
-			type: 'number',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<line x1="[x1]" y1="[y1]" x2="[x2]" y2="[y2]"></line>`
-};
-
-exports.svg_rect = {
-	title: "rect",
-	icon: '<i class="square outline icon"></i>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		x: {
-			title: 'x',
-			type: 'number',
-			nullable: true
-		},
-		y: {
-			title: 'y',
-			type: 'number',
-			nullable: true
-		},
-		width: {
-			title: 'Width',
-			type: 'number',
-			nullable: true
-		},
-		height: {
-			title: 'Height',
-			type: 'number',
-			nullable: true
-		},
-		rx: {
-			title: 'rx',
-			type: 'number',
-			nullable: true
-		},
-		ry: {
-			title: 'ry',
-			type: 'number',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<rect x="[x]" y="[y]" width="[width]" height="[height]" rx="[rx]" ry="[ry]"></rect>`
-};
-
-exports.svg_circle = {
-	title: "circle",
-	icon: '<i class="circle outline icon"></i>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		cx: {
-			title: 'cx',
-			type: 'number',
-			nullable: true
-		},
-		cy: {
-			title: 'cy',
-			type: 'number',
-			nullable: true
-		},
-		r: {
-			title: 'r',
-			type: 'number',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<circle cx="[cx]" cy="[cy]" r="[r]"></circle>`
-};
-
-exports.svg_ellipse = {
-	title: "ellipse",
-	icon: '<i class="circle outline icon"></i>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		cx: {
-			title: 'cx',
-			type: 'number',
-			nullable: true
-		},
-		cy: {
-			title: 'cy',
-			type: 'number',
-			nullable: true
-		},
-		rx: {
-			title: 'rx',
-			type: 'number',
-			nullable: true
-		},
-		ry: {
-			title: 'ry',
-			type: 'number',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<ellipse cx="[cx]" cy="[cy]" rx="[rx]" ry="[ry]"></ellipse>`
-};
-
-exports.svg_polygon = {
-	title: "polygon",
-	icon: '<b class="icon">pgon</b>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		points: {
-			title: 'Points',
-			type: 'string',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<polygon points="[points]"></polygon>`
-};
-
-exports.svg_polyline = {
-	title: "polyline",
-	icon: '<b class="icon">pline</b>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		points: {
-			title: 'Points',
-			type: 'string',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<polyline points="[points]"></polyline>`
-};
-
-exports.svg_linearGradient = {
-	title: "gradient",
-	icon: '<b class="icon">grad</b>',
-	menu: 'media',
-	group: "svg_node",
-	properties: {
-		id: {
-			title: 'id',
-			type: 'string',
-			format: 'id',
-			nullable: true
-		},
-		gradientUnits: {
-			title: 'Units',
-			type: 'string',
-			nullable: true
-		},
-		gradientTransform: {
-			title: 'Transform',
-			type: 'string',
-			nullable: true
-		},
-		x1: {
-			title: 'x1',
-			type: 'number',
-			nullable: true
-		},
-		y1: {
-			title: 'y1',
-			type: 'number',
-			nullable: true
-		},
-		x2: {
-			title: 'x2',
-			type: 'number',
-			nullable: true
-		},
-		y2: {
-			title: 'y2',
-			type: 'number',
-			nullable: true
-		}
-	},
-	inplace: true,
-	contents: "svg_stop+",
-	ns: "svg",
-	html: `<linearGradient id="[id]" gradientUnits="[gradientUnits]" x1="[x1]" x2="[x2]" y1="[y1]" y2="[y2]"></linearGradient>`
-};
-
-exports.svg_stop = {
-	title: "stop",
-	icon: '<b class="icon">stop</b>',
-	menu: 'media',
-	properties: {
-		offset: {
-			title: 'Offset',
-			type: 'string',
-			nullable: true
-		},
-		stopColor: {
-			title: 'Color',
-			type: 'string',
-			nullable: true
-		},
-		stopOpacity: {
-			title: 'Opacity',
-			type: 'string',
-			nullable: true
-		}
-	},
-	inplace: true,
-	ns: "svg",
-	html: `<stop offset="[offset]" stop-color="[stopColor]" stop-opacity="[stopOpacity]"></stop>`
-};