@pageboard/html 0.11.26 → 0.11.27

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.26",
+  "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 {