@pageboard/html 0.11.25 → 0.11.27

package/elements/form.js

@@ -168,7 +168,7 @@ exports.api_form = {
 	tag: 'form[method="post"]',
 	html: `<form is="element-form" method="post" name="[name]"
 		action="/.api/form/[$id]"
-		parameters="[$expr.action.parameters|ornull|templates:$query]"
+		parameters="[$expr.action.parameters|templates:$query]"
 		success="[redirection|urltpl:url:parameters]"
 		badrequest="[badrequest|urltpl:url:parameters]"
 		unauthorized="[unauthorized|urltpl:url:parameters]"

package/elements/image.js

@@ -131,14 +131,11 @@ exports.image = {
 	html: `<element-image
 		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
 		alt="[alt]"
-		data-src="[url|or:[$element.resources.empty]]"
+		data-src="[url]"
 		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>
 	</element-image>`,
-	resources: {
-		empty: '../ui/empty.png'
-	},
 	stylesheets: [
 		'../ui/loading.css',
 		'../ui/image.css'
@@ -281,7 +278,7 @@ exports.inlineImage = {
 	group: "inline",
 	tag: "img",
 	html: `<img is="element-img"
-		data-src="[url|or:[$element.resources.empty]]"
+		data-src="[url]"
 		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
 		alt="" class="ui inline image
 		[display.avatar|?]
@@ -290,9 +287,6 @@ exports.inlineImage = {
 		[display.spaced|?]
 		[display.floated|pre:floated ]
 		[display.align|post: aligned]" />`,
-	resources: {
-		empty: '../ui/empty.png'
-	},
 	stylesheets: [
 		'../lib/components/image.css'
 	],

package/elements/inlines.js

@@ -76,7 +76,7 @@ exports.strike = {
 	contents: "text*",
 	inline: true,
 	inplace: true,
-	group: "inline nolink",
+	group: "nolink",
 	tag: 's',
 	html: '<s></s>'
 };

package/elements/pagination.js

@@ -0,0 +1,35 @@
+exports.pagination = {
+	priority: 13, // after fetch and after menu items
+	title: "Pagination",
+	icon: '<b class="icon">±N</b>',
+	menu: "link",
+	group: "block",
+	isolating: true,
+	properties: {
+		fetch: {
+			title: 'Fetch block',
+			type: 'string',
+			format: 'id',
+			$filter: {
+				name: 'block',
+				types: ["fetch"]
+			}
+		},
+		dir: {
+			title: 'Direction',
+			anyOf: [{
+				const: '-',
+				title: 'Backward'
+			}, {
+				const: '+',
+				title: 'Forward'
+			}],
+			default: '+'
+		},
+	},
+	contents: "inline*",
+	html: `<a class="ui button pagination" is="element-pagination" data-dir="[dir]" data-fetch="[fetch]">[dir|eq:1:Next:Prev]</a>`,
+	scripts: [
+		'../ui/pagination.js'
+	]
+};

package/elements/query-tags.js

@@ -0,0 +1,30 @@
+exports.query_tags = {
+	priority: 10, // after fetch
+	title: 'Tags',
+	icon: '<i class="tags icon"></i>',
+	menu: "form",
+	group: "block",
+	properties: {
+		form: {
+			title: 'Form name',
+			type: 'string',
+			format: 'id',
+			nullable: true
+		}
+	},
+	contents: {
+		id: 'title',
+		nodes: 'inline*'
+	},
+	html: `<element-query-tags for="[form]">
+		<div block-content="title">Filters:</div>
+		<div class="ui labels"></div>
+	</element-query-tags>`,
+	stylesheets: [
+		'../lib/components/label.css',
+		'../ui/query-tags.css'
+	],
+	scripts: [
+		'../ui/query-tags.js'
+	]
+};

package/elements/template.js

@@ -1,82 +1,21 @@
-exports.fetch.install = function() {
-	this.dom.classList.add('ui');
-};
-exports.message.install = function(node, d, scope) {
-	this.dom.classList.add('ui', '[inverted|?]');
-};
+exports.fetch.fragments.push({
+	attributes: {
+		className: "ui"
+	}
+});
+
+exports.message.fragments.push({
+	attributes: {
+		className: '[inverted|?]'
+	}
+});
+
 exports.message.properties.inverted = {
 	title: 'Inverted',
 	type: 'boolean',
 	default: false
 };
+
 exports.message.stylesheets.unshift(
 	'../lib/components/message.css'
 );
-
-exports.query_tags = {
-	priority: 10, // after fetch
-	title: 'Tags',
-	icon: '<i class="tags icon"></i>',
-	menu: "form",
-	group: "block",
-	properties: {
-		form: {
-			title: 'Form name',
-			type: 'string',
-			format: 'id',
-			nullable: true
-		}
-	},
-	contents: {
-		id: 'title',
-		nodes: 'inline*'
-	},
-	html: `<element-query-tags for="[form]">
-		<div block-content="title">Filters:</div>
-		<div class="ui labels"></div>
-	</element-query-tags>`,
-	stylesheets: [
-		'../lib/components/label.css',
-		'../ui/query-tags.css'
-	],
-	scripts: [
-		'../ui/query-tags.js'
-	]
-};
-
-exports.pagination = {
-	priority: 13, // after fetch and after menu items
-	title: "Pagination",
-	icon: '<b class="icon">±N</b>',
-	menu: "link",
-	context: 'menu//',
-	group: "menu_item",
-	properties: {
-		name: {
-			title: 'Offset name',
-			description: 'Query parameter used by fetch block',
-			type: 'string',
-			format: 'id',
-			default: 'offset'
-		},
-		value: {
-			title: 'Offset value',
-			description: 'Integer, can be negative',
-			type: 'integer',
-			default: 10
-		},
-		infinite: {
-			title: 'Infinite loading',
-			type: 'boolean',
-			default: false
-		}
-	},
-	contents: "inline*",
-	html: `<a class="item" is="element-pagination" data-name="[name]" data-value="[value]" data-infinite="[infinite]"></a>`,
-	stylesheets: [
-		'../ui/pagination.css'
-	],
-	scripts: [
-		'../ui/pagination.js'
-	]
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.25",
+  "version": "0.11.27",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/image.css

@@ -1,10 +1,3 @@
-img.loading[data-src]::after {
-	content: none;
-}
-img.error::after {
-	width: 100%;
-}
-
 element-image {
 	display:flex;
 	position:relative;

package/ui/image.js

@@ -98,12 +98,21 @@ class HTMLElementImage extends VirtualHTMLElement {
 		if (!meta || !meta.width || !meta.height) return;
 		this.dataset.width = meta.width;
 		this.dataset.height = meta.height;
-		if (!this.currentSrc) this.placeholder();
+		if (!this.currentSrc) {
+			this.placeholder();
+		}
+	}
+
+	get currentSrc() {
+		const cur = super.currentSrc;
+		if (!cur && this.src?.startsWith('data:')) return this.src;
+		else return cur;
 	}
+
 	reveal(state) {
 		const img = this.image;
 		if (!this.options.src) {
-			img.removeAttribute('src');
+			this.placeholder(true);
 			return;
 		}
 		const fit = this.fit;
@@ -157,23 +166,22 @@ class HTMLElementImage extends VirtualHTMLElement {
 		return this.promise;
 	}
 	captureLoad() {
-		this.promise.done();
+		this.promise?.done();
 		this.classList.remove('loading');
 		this.fix(this.image);
 	}
 	captureError() {
-		this.promise.done();
+		this.promise?.done();
 		this.classList.remove('loading');
 		this.classList.add('error');
 		this.placeholder();
 	}
-	placeholder() {
-		const { w, h } = this.dimensions;
-		this.image.width = w;
-		this.image.height = h;
+	placeholder(error) {
+		let { w, h } = this.dimensions;
+		if (Number.isNaN(w)) w = 320;
+		if (Number.isNaN(h)) h = 240;
 		this.image.src = "data:image/svg+xml," + encodeURIComponent(
-			`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${w} ${h}"></svg>`
-		);
+			`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${w} ${h}"><text text-anchor="middle" dominant-baseline="central" x="50%" y="50%" fill="#aaa">${error ? '∅' : ''}</text></svg>`);
 	}
 }
 
@@ -190,15 +198,27 @@ class HTMLElementInlineImage extends HTMLImageElement {
 	get image() {
 		return this;
 	}
+	get currentSrc() {
+		const cur = super.currentSrc;
+		if (!cur && this.src?.startsWith('data:')) return this.src;
+		else return cur;
+	}
 	captureLoad() {
-		this.promise.done();
+		this.promise?.done();
 		this.classList.remove('loading');
 		this.fix(this.image);
 	}
-	placeholder() {
-		const { w, h } = this.dimensions;
-		this.width = w;
-		this.height = h;
+	captureError() {
+		this.promise?.done();
+		this.classList.remove('loading');
+		this.placeholder(true);
+	}
+	placeholder(error) {
+		let { w, h } = this.dimensions;
+		w = Number.isNaN(w) ? 40 : w;
+		h = Number.isNaN(h) ? 30 : h;
+		this.setAttribute('src', "data:image/svg+xml," + encodeURIComponent(
+			`<svg xmlns="http://www.w3.org/2000/svg" width="${w}px" height="${h}px" viewBox="0 0 ${w} ${h}"><text text-anchor="middle" dominant-baseline="central" x="50%" y="50%" fill="#aaa">${error ? '∅' : ''}</text></svg>`));
 	}
 }
 

package/ui/loading.css

@@ -9,6 +9,7 @@
 	width: 100%;
 	top: 50%;
 	margin-top: -0.5rem;
+	line-height: 1rem;
 }
 
 @keyframes spinner {

package/ui/pagination.js

@@ -1,127 +1,49 @@
 class HTMLElementPagination extends HTMLAnchorElement {
-	#observer;
-	#queue;
-	#reached;
-	#size;
-	#visible;
-	#continue;
-
-	constructor() {
-		super();
-		this.init?.();
-	}
-
 	patch(state) {
-		if (this.isContentEditable || this.closest('[block-content="template"]')) {
-			return;
-		}
-		const name = this.dataset.name || 'offset';
-		const off = parseInt(state.query[name]) || 0;
-		const delta = parseInt(this.dataset.value) || 0;
-		const cur = off + delta;
-		const disabled = cur < 0 || !this.#findFetch() || this.#continue && delta < 0 || false;
-		this.classList.toggle('disabled', disabled);
-
-		if (disabled) {
-			this.removeAttribute('href');
-		} else {
-			this.setAttribute('href', Page.format({
-				pathname: state.pathname,
-				query: {
-					...state.query,
-					[name]: cur || undefined
-				}
-			}));
-		}
+		if (this.isContentEditable) return;
 		state.finish(() => {
-			this.#reached = false;
-			if (this.#updateFetchSize() == false) {
-				this.removeAttribute('href');
-				this.classList.toggle('disabled', true);
-			} else {
-				this.#continue = true;
-			}
-		});
-	}
-
-	#more(state) {
-		this.#reached = true;
-		if (this.#queue) this.#queue = this.#queue.then(() => {
-			if (!this.#continue || !this.hasAttribute('href')) {
-				return;
-			}
-			const fetch = this.#findFetch();
-			if (fetch) {
-				fetch.infinite = true;
-				return state.push(this.getAttribute('href'));
-			}
-		}).then(() => {
-			this.#reached = false;
+			this.#update(state);
 		});
 	}
 
-	#updateFetchSize() {
-		const old = this.#size;
-		const cur = this.#size = this.#findFetch()?.ownView.children.length ?? 0;
-		if (this.#continue) return old != cur;
-		else return cur != 0;
-	}
-
-	#findFetch() {
-		const name = this.dataset.name || 'offset';
-		const fetch = this.ownerDocument.querySelector(
-			`element-template[block-type="fetch"][parameters~="$query.${name}|or:0"]`
+	#update(state) {
+		const node = this.ownerDocument.querySelector(
+			`element-template[action="/.api/query/${this.dataset.fetch}"]`
 		);
-		if (!fetch) {
-			console.warn(`Pagination need Fetch to use $query.${name} parameter`);
+		if (!node) {
+			console.warn("pagination does not find fetch node", this.dataset.fetch);
+			return;
 		}
-		return fetch;
-	}
-
-	handleClick(e, state) {
-		const fetch = this.#findFetch();
-		if (fetch) fetch.infinite = false;
+		const name = node.dataset.pagination;
+		const start = parseInt(node.dataset.start) || 0;
+		const stop = parseInt(node.dataset.stop) || 0;
+		const limit = parseInt(node.dataset.limit) || 10;
+		const count = parseInt(node.dataset.count) || 0;
+		const sign = this.dataset.dir == "-" ? -1 : +1;
+		const cur = sign > 0 ? stop : (start - limit);
+
+		this.setAttribute('href', Page.format({
+			pathname: state.pathname,
+			query: {
+				...state.query,
+				[name]: cur || undefined
+			}
+		}));
+		this.disabled = sign < 0 && cur + limit <= 0 || sign > 0 && count < limit;
 	}
-
-	paint(state) {
-		const name = this.dataset.name || 'offset';
-		const off = parseInt(state.query[name]) || 0;
-		if (off == 0) {
-			this.#continue = true;
-			if (this.#visible) this.#more(state);
+	handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault();
+			e.stopImmediatePropagation();
 		}
 	}
 
-	setup(state) {
-		if (this.isContentEditable || !this.#infinite) return;
-		this.#queue = Promise.resolve();
-		this.#observer = new IntersectionObserver(entries => {
-			entries.forEach(entry => {
-				if (this.#reached) return;
-				if (this.offsetParent && (entry.intersectionRatio || 0) !== 0) {
-					this.#visible = true;
-					this.#more(state);
-				} else {
-					this.#visible = false;
-				}
-			});
-		}, {
-			threshold: [1]
-		});
-		this.#observer.observe(this);
-	}
-
-	close() {
-		this.#queue = null;
-		if (this.#observer) {
-			this.#observer.unobserve(this);
-			this.#observer.disconnect();
-			this.#observer = null;
-		}
+	set disabled(val) {
+		this.classList.toggle('disabled', val);
 	}
 
-	get #infinite() {
-		return this.hasAttribute('data-infinite');
+	get disabled() {
+		return this.classList.contains('disabled');
 	}
 }
 

package/ui/site.css

@@ -293,6 +293,8 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 }
 .ui.grid.full {
 	width: 100% !important;
+	margin-left: auto !important;
+	margin-right: auto !important;
 }
 
 /* for editor only, but semantic-ui dependent */

package/ui/pagination.css

@@ -1,3 +0,0 @@
-a[is="element-pagination"].disabled {
-	display: none !important;
-}