diff options
Diffstat (limited to 'public/gallery.js')
| -rw-r--r-- | public/gallery.js | 59 |
1 files changed, 47 insertions, 12 deletions
diff --git a/public/gallery.js b/public/gallery.js index d25c544..940b0d2 100644 --- a/public/gallery.js +++ b/public/gallery.js @@ -14,35 +14,64 @@ let BrowseModel = { entries: [], async reload(path) { - this.path = path - this.subdirectories = [] - this.entries = [] + if (this.path !== path) { + this.path = path + this.subdirectories = [] + this.entries = [] + } let resp = await call('browse', {path: path}) this.subdirectories = resp.subdirectories this.entries = resp.entries }, + + joinPath(parent, child) { + if (!parent) + return child + if (!child) + return parent + return `${parent}/${child}` + }, + + getBrowseLinks() { + if (this.path === undefined) + return [] + + let links = [{name: "Root", path: "", level: -1}], path + for (const crumb of this.path.split('/').filter(s => !!s)) { + path = this.joinPath(path, crumb) + links.push({name: crumb, path: path, level: -1}) + } + + links[links.length - 1].level = 0 + + for (const sub of this.subdirectories) { + links.push( + {name: sub, path: this.joinPath(this.path, sub), level: +1}) + } + return links + }, } let Browse = { - // Reload the model immediately, to improve responsibility. + // Reload the model immediately, to improve responsivity. // But we don't need to: https://mithril.js.org/route.html#preloading-data // Also see: https://mithril.js.org/route.html#route-cancellation--blocking oninit(vnode) { - let path = vnode.attrs.key || "/" + let path = vnode.attrs.key || "" BrowseModel.reload(path) }, view(vnode) { return m('.container', {}, [ m('.header', {}, "Browse"), - m('h1', "Root"), - m('ul', BrowseModel.subdirectories.map(sd => { - const name = sd.split('/').pop() + m('ul', BrowseModel.getBrowseLinks().map(link => { + // TODO: Differentiate the level as CSS classes. + // - Last entry (current path) should look selected. return m('li', m(m.route.Link, { href: `/browse/:key`, - params: {key: `${BrowseModel.path}/${sd}`}, - }, name)) + params: {key: link.path}, + }, `${link.level} ${link.name}`)) })), m('.browser', {}, BrowseModel.entries.map(e => { return m(m.route.Link, {href: `/view/${e.sha1}`}, @@ -76,13 +105,19 @@ let View = { }, view(vnode) { - // TODO: Show more information. return m('.container', {}, [ m('.header', {}, "View"), - m('ul', ViewModel.paths.map(sd => m('li', sd))), ViewModel.sha1 !== undefined ? m('img', {src: `/image/${ViewModel.sha1}`}) : "No image.", + m('h2', "Locations"), + m('ul', ViewModel.paths.map(sd => m('li', sd))), + m('h2', "Tags"), + Object.entries(ViewModel.tags).map(([group, tags]) => [ + m("h3", group), + m("ul", Object.entries(tags).map( + ([tag, weight]) => m("li", `${tag}: ${weight}`))), + ]), ]) }, } |