@pageboard/html 0.17.3 → 0.17.5

package/package.json

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

package/ui/form.css

@@ -50,6 +50,7 @@ element-select.active.ui.dropdown .menu {
 .ui.form .inline.fields {
 	align-items: end;
 	margin:0;
+	flex-wrap: wrap;
 }
 
 .ui.form[method="post"].unsaved button[type="submit"] {

package/ui/image.js

@@ -96,7 +96,7 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		return this.image?.currentSrc;
 	}
 
-	requestSrc(srcLoc) {
+	requestSrc(srcLoc, self) {
 		const { crop, fit } = this;
 		const { w, h } = this.dimensions;
 		const r = {};
@@ -105,7 +105,10 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 				r.width = w;
 				r.height = h;
 			} else {
-				const { clientWidth, clientHeight } = this.offsetParent ?? {};
+				const {
+					clientWidth,
+					clientHeight
+				} = self ? this : (this.offsetParent ?? {});
 				r.width = clientWidth;
 				r.height = clientHeight;
 			}
@@ -151,9 +154,9 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		} else if (reqSrc != this.currentSrc) {
 			this.classList.add('loading');
 			this.#defer?.resolve();
-			this.#defer = new Deferred();
+			this.#defer = Promise.withResolvers();
 			img.setAttribute('src', reqSrc);
-			return this.#defer;
+			return this.#defer.promise;
 		}
 	}
 	captureLoad() {

package/ui/input-file.js

@@ -53,7 +53,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 	}
 
 	presubmit(state) {
-		if (this.#defer) return this.#defer;
+		if (this.#defer) return this.#defer.promise;
 		if (!this.files.length) return Promise.resolve();
 		const field = this.closest('.field');
 		field.classList.remove('success', 'error');
@@ -63,7 +63,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 		}
 		track(0);
 		field.classList.add('loading');
-		this.#defer = new Deferred();
+		this.#defer = Promise.withResolvers();
 
 		const fail = (err) => {
 			field.classList.add('error');
@@ -132,7 +132,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 		} catch (err) {
 			fail(err);
 		}
-		return this.#defer;
+		return this.#defer.promise;
 	}
 }
 

package/ui/layout.js

@@ -15,12 +15,12 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 			return;
 		}
 		const srcLoc = Page.parse(this.options.src);
-		const reqSrc = this.requestSrc(srcLoc);
+		const reqSrc = this.requestSrc(srcLoc, true);
 		if (!reqSrc) {
 			this.style.backgroundImage = '';
 		} else if (reqSrc != this.currentSrc) {
 			this.#defer?.resolve();
-			this.#defer = new Deferred();
+			this.#defer = Promise.withResolvers();
 			const img = new Image();
 			img.addEventListener('load', this.#defer.resolve);
 			img.addEventListener('error',
@@ -28,7 +28,7 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 			);
 			img.src = this.currentSrc = reqSrc;
 			this.style.backgroundImage = `url("${reqSrc}")`;
-			return this.#defer;
+			return this.#defer.promise;
 		}
 	}
 	close() {

package/ui/site.css

@@ -19,7 +19,6 @@ html {
 body {
 	margin: 0px;
 	padding: 0px;
-	overflow-x: hidden;
 	min-width: 320px;
 	background: #FFFFFF;
 	font-family: Arial, sans-serif;

package/ui/transition.js

@@ -6,12 +6,6 @@ Object.defineProperty(document, 'body', {
 });
 
 const loader = new class {
-	ready(state) {
-		this.update(state.stage);
-	}
-	build(state) {
-		if (!document.hidden) document.body.hidden = true;
-	}
 	patch(state) {
 		this.update(state);
 	}
@@ -27,20 +21,18 @@ const loader = new class {
 		document.documentElement.dataset.stage = state.stage;
 	}
 	async setup(state) {
-		const tr = state.scope.transition;
-		await document.fonts?.ready;
-		document.body.hidden = false;
+		const { transition: tr } = state.scope;
+		if (!tr) return;
 		state.finish(async () => {
-			if (tr?.ok) return tr.start();
+			if (tr.ok) return tr.start();
 		});
-		tr?.end();
+		tr.end();
 	}
 };
 Page.connect(loader);
 loader.update(Page);
 
 class Transition {
-	#defer;
 
 	static event(name) {
 		const low = name.toLowerCase();
@@ -78,7 +70,6 @@ class Transition {
 		from.after(to);
 	}
 	start() {
-		this.#defer = new Deferred();
 		if (!this.ok) {
 			this.destroy();
 		} else {
@@ -95,19 +86,11 @@ class Transition {
 	cancel() {
 		this.ok = false;
 		this.root.classList.remove('transitioning');
-		if (this.#defer) {
-			this.#defer.resolve();
-			this.#defer = null;
-		}
 	}
 	end() {
 		this.ok = false;
 		this.from.remove();
 		this.destroy();
-		if (this.#defer) {
-			this.#defer.resolve();
-			this.#defer = null;
-		}
 	}
 	scrollTo(obj) {
 		this.to.scrollTop = obj.top;