try to use bun for bundling

2 files changed, 9 insertions, 81 deletions

diff --git a/static/pages/image-viewer/index.css b/static/pages/image-viewer/index.css
index 8b57f58..4567050 100644
--- a/static/pages/image-viewer/index.css
+++ b/static/pages/image-viewer/index.css
@@ -6,33 +6,4 @@
 	display: grid;
 	gap: 10px;
 	padding: 10px;
-	padding-bottom: 50%;
-}
-
-#container sfw-image {
-	margin: auto;
-}
-
-#subtitle {
-	text-align: center;
-	color: #7e8fa8;
-	font-size: 0.8em;
-	font-weight: lighter;
-	padding-top: 10px;
-}
-
-#subtitle i {
-	font-family: 'Pacifico';
-	font-style: normal;
-	color: var(--fg-disabled);
-}
-
-#date {
-	font-size: 1.2em;
-	font-weight: bold;
-	background: #efefef99;
-	backdrop-filter: blur(10px);
-	padding: 10px;
-	border-radius: var(--border-radius);
-	box-shadow: #223223aa 1px 1px 4px;
 }
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js
index d4c9dd9..34b5f69 100644
--- a/static/pages/image-viewer/index.js
+++ b/static/pages/image-viewer/index.js
@@ -1,77 +1,34 @@
 import * as sfw from 'sfw';
-const { Div, Img } = sfw.element.native;
+const { Img, Div } = sfw.element.native;
 
 import Month from '../../month.js';
 
-import Image from '../../widgets/image/index.js';
+import stylesheet from './index.css';
 
-const css = await sfw.css(import.meta.url, './index.css')
+const css = await sfw.css.sheet(stylesheet);
 
 export default class ImageViewer extends sfw.element.Container {
-	#container
-	#subtitle
 	#images
-	#current_month
+	#image_elements
 
 	constructor() {
 		super({ css });
 
-		this.#current_month = null;
-
 		this.#images = [];
 
 		this.body.append(
-			this.#container = Div.new({
+			Div.new({
 				id: 'container',
-				onscroll: () => this.preload_all(),
-				children: [
-					this.#subtitle = Div.new({
-						id: 'subtitle',
-						innerHTML: 'Powered by <i>Memora<i>'
-					})
-				],
+				onscroll: () => console.log('scroll'),
 			})
 		);
 	}
 
-	add(metadata) {
-		const month = Month.from_unix(metadata.timestamp);
-
-		if (month != this.#current_month && !(month?.is_same(this.#current_month))) {
-			const content = month == null ? 'No Date' : `${month.name} ${month.year}`;
-			this.#current_month = month;
-			const title = Div.new({
-				id: 'date',
-				innerText: content,
-			})
-			this.#container.insertBefore(title, this.#subtitle);
-		}
-
-		const image = Image.new({ metadata });
-		this.#images.push(image);
-		this.#container.insertBefore(image, this.#subtitle);
-	}
-
-	clear() {
-		this.#container.innerHTML = '';
-		this.#container.append(this.#subtitle);
+	set images(images) {
+		this.#images = images;
 	}
 
 	jump_to(month) {
-		const image = this.#images.find(i => i.month == month || i.month.is_same(month));
-		image.scrollIntoView({ behavior: 'instant' })
-	}
-
-	preload_all() {
-		this.#images.forEach(image => this.#preload(image))
-	}
-
-	#preload(image) {
-		const loading_zone_after = (this.#container.scrollTop + this.#container.offsetHeight) * 2;
-		const loading_zone_before = this.#container.scrollTop - image.offsetHeight * 2;
-
-		if (loading_zone_before < image.offsetTop && image.offsetTop < loading_zone_after) {
-			image.load();
-		}
+		// TODO
 	}
 }