From 70994ddaf48a92d062977bc667c72685a4ccb815 Mon Sep 17 00:00:00 2001 From: Nathan Reiner Date: Mon, 18 May 2026 17:02:32 +0200 Subject: try to use bun for bundling --- static/pages/image-viewer/index.css | 29 ------------------ static/pages/image-viewer/index.js | 61 ++++++------------------------------- static/pages/login/index.js | 4 ++- static/pages/main/index.js | 4 ++- static/pages/settings/index.js | 4 ++- static/pages/shuffle/index.js | 4 ++- 6 files changed, 21 insertions(+), 85 deletions(-) (limited to 'static/pages') 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 Memora' - }) - ], + 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 } } diff --git a/static/pages/login/index.js b/static/pages/login/index.js index 15a6016..0390cc0 100644 --- a/static/pages/login/index.js +++ b/static/pages/login/index.js @@ -2,7 +2,9 @@ import icons from 'icons'; import * as sfw from 'sfw'; const { Div, Label, H1: Title, Input, Button, Form } = sfw.element.native; -const css = await sfw.css(import.meta.url, './index.css'); +import stylesheet from './index.css'; + +const css = await sfw.css.sheet(stylesheet); export default class LoginView extends sfw.element.Container { #container diff --git a/static/pages/main/index.js b/static/pages/main/index.js index 8c0cac1..b0a13f6 100644 --- a/static/pages/main/index.js +++ b/static/pages/main/index.js @@ -2,7 +2,9 @@ import icons from 'icons'; import * as sfw from 'sfw'; const { Div, Input } = sfw.element.native; -const css = await sfw.css(import.meta.url, './index.css'); +import stylesheet from './index.css'; + +const css = await sfw.css.sheet(stylesheet); export default class MainView extends sfw.element.Container { #active_kind diff --git a/static/pages/settings/index.js b/static/pages/settings/index.js index c46987b..5cc40be 100644 --- a/static/pages/settings/index.js +++ b/static/pages/settings/index.js @@ -6,7 +6,9 @@ const { Div, Img } = sfw.element.native; import Editable from '../../widgets/editable/index.js'; import PasswordDialog from '../../widgets/password-dialog/index.js'; -const css = await sfw.css(import.meta.url, './index.css'); +import stylesheet from './index.css'; + +const css = await sfw.css.sheet(stylesheet); export default class SettingsView extends sfw.element.Container { #profile_image diff --git a/static/pages/shuffle/index.js b/static/pages/shuffle/index.js index 7833de4..620195c 100644 --- a/static/pages/shuffle/index.js +++ b/static/pages/shuffle/index.js @@ -3,7 +3,9 @@ const { Div, Canvas } = sfw.element.native; import { Image } from 'widgets'; -const css = await sfw.css(import.meta.url, './index.css'); +import stylesheet from './index.css'; + +const css = await sfw.css.sheet(stylesheet); export default class ShuffleView extends sfw.element.Container { #front_image -- cgit v1.2.3-70-g09d2