diff options
Diffstat (limited to 'static/pages/image-viewer/index.js')
| -rw-r--r-- | static/pages/image-viewer/index.js | 61 |
1 files changed, 9 insertions, 52 deletions
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 } } |