add profile settings to backend and add image loader

3 files changed, 100 insertions, 0 deletions

diff --git a/static/widgets/editable/index.js b/static/widgets/editable/index.js
index 8a72aff..0c93c4e 100644
--- a/static/widgets/editable/index.js
+++ b/static/widgets/editable/index.js
@@ -13,6 +13,8 @@ export default class Editable extends sfw.element.Container {
 	constructor() {
 		super({ css });
 
+		this.onupdate = () => {};
+
 		this.body.append(
 			Div.new({
 				id: 'container',
@@ -24,6 +26,7 @@ export default class Editable extends sfw.element.Container {
 							if (e.key === 'Enter') {
 								this.#input.readOnly = true;
 								this.#update()
+								this.onupdate();
 							}
 						},
 					}),
@@ -33,6 +36,10 @@ export default class Editable extends sfw.element.Container {
 						onclick: () => {
 							this.#input.readOnly = !this.#input.readOnly;
 							this.#update();
+
+							if (this.#input.readOnly) {
+								this.onupdate();
+							}
 						}
 					}),
 				],
@@ -59,6 +66,10 @@ export default class Editable extends sfw.element.Container {
 		this.#input.value = value;
 	}
 
+	get value() {
+		return this.#input.value;
+	}
+
 	set type(type) {
 		this.#input.type = type;
 	}
diff --git a/static/widgets/image/index.css b/static/widgets/image/index.css
new file mode 100644
index 0000000..f4e2dce
--- /dev/null
+++ b/static/widgets/image/index.css
@@ -0,0 +1,59 @@
+#container {
+	position: relative;
+	background: var(--card-background);
+	height: 100%;
+}
+
+#container img {
+	max-width: 700px;
+	width: 100%;
+	border-radius: var(--border-radius);
+	box-shadow: #223223aa 1px 1px 4px;
+	visibility: hidden;
+}
+
+#container.loaded img {
+	visibility: visible;
+}
+
+@keyframes loader {
+}
+
+@keyframes loader {
+	0% {
+		width: 60px;
+		height: 60px;
+	}
+
+	25% {
+		border: 5px solid var(--page-background);
+	}
+
+	50% {
+		width: 80px;
+		height: 80px;
+	}
+
+	75% {
+		border: 10px solid var(--page-background);
+	}
+
+	100% {
+		width: 60px;
+		height: 60px;
+	}
+}
+
+#loading {
+	position: absolute;
+	border: 10px solid var(--page-background);
+	border-radius: 100%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	animation: 0.5s infinite loader ease;
+}
+
+.loaded #loading {
+	display: none;
+}
diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
new file mode 100644
index 0000000..ad77c4e
--- /dev/null
+++ b/static/widgets/image/index.js
@@ -0,0 +1,30 @@
+import * as sfw from 'sfw';
+const { Div, Img } = sfw.element.native;
+
+const css = await sfw.css(import.meta.url, './index.css')
+
+export default class Image extends sfw.element.Container {
+	#container
+	#image
+
+	constructor() {
+		super ({ css })
+
+		this.body.append(
+			this.#container = Div.new({
+				id: 'container',
+				children: [
+					this.#image = Img.new({
+						onload: () => this.#container.classList.add('loaded'),
+					}),
+					Div.new({ id: 'loading' })
+				],
+			})
+		);
+	}
+
+	set id(id) {
+		this.#container.classList.remove('loaded');
+		this.#image.src = `/api/image/load/${id}`;
+	}
+}