diff options
Diffstat (limited to 'static/pages/image-viewer/index.js')
| -rw-r--r-- | static/pages/image-viewer/index.js | 25 |
1 files changed, 22 insertions, 3 deletions
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js index 73b824e..62e39d8 100644 --- a/static/pages/image-viewer/index.js +++ b/static/pages/image-viewer/index.js @@ -1,6 +1,8 @@ import * as sfw from 'sfw'; const { Div, Img } = sfw.element.native; +import Month from '../../month.js'; + import Image from '../../widgets/image/index.js'; const css = await sfw.css(import.meta.url, './index.css') @@ -9,16 +11,19 @@ export default class ImageViewer extends sfw.element.Container { #container #subtitle #images + #current_month constructor() { super({ css }); + this.#current_month = null; + this.#images = []; this.body.append( this.#container = Div.new({ id: 'container', - onscroll: () => this.#images.forEach(image => this.#preload(image)), + onscroll: () => this.preload_all(), children: [ this.#subtitle = Div.new({ id: 'subtitle', @@ -30,11 +35,21 @@ export default class ImageViewer extends sfw.element.Container { } 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); - - this.#preload(image); } clear() { @@ -47,6 +62,10 @@ export default class ImageViewer extends sfw.element.Container { 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 - (this.#container.offsetHeight - image.offsetHeight) * 2; |