@pageboard/html 0.12.1 → 0.12.2

package/elements/image.js

@@ -132,6 +132,8 @@ exports.image = {
 		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
 		alt="[alt]"
 		data-src="[url]"
+		data-width="[url|meta:width]"
+		data-height="[url|meta:height]"
 		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>
@@ -279,6 +281,8 @@ exports.inlineImage = {
 	tag: "img",
 	html: `<img is="element-img"
 		data-src="[url]"
+		data-width="[url|meta:width]"
+		data-height="[url|meta:height]"
 		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
 		alt="" class="ui inline image
 		[display.avatar]

package/elements/media.js

@@ -67,7 +67,7 @@ exports.video = {
 	},
 	html: `<video is="element-video" data-src="[url]" class="[display.fit|or:none]"
 		preload="metadata" autoplay="[autoplay]" loop="[loop]"
-		muted="[muted]" controls="[controls]"></video>`,
+		muted="[muted]" controls="[controls]" width="[url|meta:width]" height="[url|meta:height]"></video>`,
 	scripts: [
 		'../ui/media.js'
 	],

package/package.json

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

package/ui/image.js

@@ -93,16 +93,8 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		if (this.currentSrc != this.options.src) {
 			this.classList.remove('error');
 		}
-		this.dataset.width = this.constructor.defaultWidth || "";
-		this.dataset.height = this.constructor.defaultHeight || "";
-		if (this.options.src) {
-			const loc = Page.parse(this.options.src);
-			const meta = state.scope.$hrefs?.[loc.pathname];
-			if (meta) {
-				this.dataset.width = meta.width;
-				this.dataset.height = meta.height;
-			}
-		}
+		this.dataset.width ??= this.constructor.defaultWidth || "";
+		this.dataset.height ??= this.constructor.defaultHeight || "";
 		const { w, h } = this.dimensions;
 		if (w) this.image.width = w || this.dataset.width;
 		if (h) this.image.height = h || this.dataset.height;

package/ui/layout.js

@@ -11,14 +11,6 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 	get fit() {
 		return this.options.size || 'none';
 	}
-	patch(state) {
-		if (!this.options.src) return;
-		const loc = Page.parse(this.options.src);
-		const meta = state.scope.$hrefs?.[loc.pathname] ?? {};
-		if (!meta || !meta.width || !meta.height) return;
-		this.dataset.width = meta.width;
-		this.dataset.height = meta.height;
-	}
 	reveal(state) {
 		this.style.backgroundRepeat = this.options.repeat;
 		this.style.backgroundSize = this.options.size;

package/ui/media.js

@@ -3,11 +3,6 @@ const HTMLElementMediaConstructor = Superclass => class extends Superclass {
 
 	patch(state) {
 		this.classList.remove('error', 'loading');
-		const loc = Page.parse(this.options.src);
-		const meta = state.scope.$hrefs?.[loc.pathname] ?? {};
-		if (!meta || !meta.width || !meta.height) return;
-		this.width = meta.width;
-		this.height = meta.height;
 	}
 	reveal(state) {
 		const curSrc = this.options.src;

package/ui/transition.css

@@ -1,47 +1,45 @@
 /* async progress bar and error signal */
 
-body::after {
+body::before {
 	content: "";
 	position:fixed;
 	display:block;
 	left:0;
-	top:1px;
+	top:0px;
 	width:0%;
 	height:0;
 	opacity:0.7;
 	background: #4486cc;
 	box-shadow: 0 0 5px rgb(99 162 235 / 70%);
-	z-index:1000;
+	z-index:10000000;
 }
-html[data-stage] > body::after {
+html[data-stage] > body::before {
 	transition-property:width;
-	transition-duration:1s;
+	transition-duration:0.5s;
 	transition-timing-function:linear;
 }
-html[data-stage="route"] > body::after,
-html[data-stage="ready"] > body::after,
-html[data-stage="setup"] > body::after,
-html[data-stage="error"] > body::after {
+html[data-stage="route"] > body::before,
+html[data-stage="ready"] > body::before,
+html[data-stage="paint"] > body::before,
+html[data-stage="error"] > body::before {
 	height:2px;
 }
 
-html[data-stage="route"] > body::after {
+html[data-stage="route"] > body::before {
+	width:25%;
+}
+html[data-stage="ready"] > body::before {
 	width:50%;
 }
-html[data-stage="ready"] > body::after,
-html[data-stage="setup"] > body::after {
+html[data-stage="paint"] > body::before {
 	width:100%;
 }
-html[data-stage="error"] > body::after {
+html[data-stage="error"] > body::before {
 	display:block;
 	width:100%;
 	background:#c33;
 }
 
-html.transition > body::after {
-	display:none !important;
-}
-
 /* transitions */
 html.transition {
 	width:100%;

package/ui/transition.js

@@ -9,15 +9,15 @@ Page.route(state => {
 	const root = document.documentElement;
 	function dtr(state) {
 		root.dataset.stage = state.stage;
-		if (state.stage == "setup" || state.stage == "patch") {
-			setTimeout(() => root.removeAttribute('data-stage'), 500);
+		if (state.stage == "paint") {
+			setTimeout(() => root.removeAttribute('data-stage'), 700);
 		}
 	}
 	dtr(state);
-	Page.ready(dtr);
-	Page.patch(dtr);
-	Page.setup(dtr);
-	Page.catch(dtr);
+	state.ready(dtr);
+	state.patch(dtr);
+	state.paint(dtr);
+	state.catch(dtr);
 });
 
 class Transition {