diff options
| -rw-r--r-- | public/gallery.js | 67 | ||||
| -rw-r--r-- | public/style.css | 15 |
2 files changed, 63 insertions, 19 deletions
diff --git a/public/gallery.js b/public/gallery.js index bf73c84..1abb114 100644 --- a/public/gallery.js +++ b/public/gallery.js @@ -53,7 +53,7 @@ let BrowseModel = { }, } -let BrowseLink = { +let BrowseBarLink = { view(vnode) { const link = vnode.attrs.link @@ -82,6 +82,7 @@ let BrowseView = { view(vnode) { return m('.browser[tabindex=0]', { + // Trying to force the oncreate on path changes. key: BrowseModel.path, }, BrowseModel.entries.map(e => { return m(m.route.Link, {href: `/view/${e.sha1}`}, @@ -105,7 +106,7 @@ let Browse = { m('.header', {}, "Browser"), m('.body', {}, [ m('ul.sidebar', BrowseModel.getBrowseLinks().map(link => - m(BrowseLink, {link}))), + m(BrowseBarLink, {link}))), m(BrowseView), ]), ]) @@ -128,6 +129,53 @@ let ViewModel = { }, } +let ViewBarBrowseLink = { + view(vnode) { + return m(m.route.Link, { + href: `/browse/:key`, + params: {key: vnode.attrs.path}, + }, vnode.attrs.name) + }, +} + +let ViewBarPath = { + view(vnode) { + const parents = vnode.attrs.path.split('/') + const basename = parents.pop() + + let result = [], path + if (!parents.length) + result.push(m(ViewBarBrowseLink, {path: "", name: "Root"}), "/") + for (const crumb of parents) { + path = BrowseModel.joinPath(path, crumb) + result.push(m(ViewBarBrowseLink, {path, name: crumb}), "/") + } + result.push(basename) + return result + }, +} + +let ViewBar = { + view(vnode) { + return m('.viewbar', [ + m('h2', "Locations"), + m('ul', ViewModel.paths.map(path => + m('li', m(ViewBarPath, {path})))), + m('h2', "Tags"), + Object.entries(ViewModel.tags).map(([group, tags]) => [ + m("h3", group), + m("ul.tags", Object.entries(tags) + .sort(([t1, w1], [t2, w2]) => (w2 - w1)) + .map(([tag, weight]) => m("li", [ + m("meter[max=1.0]", + {value: weight, title: weight}, weight), + ` ${tag}`, + ]))), + ]), + ]) + }, +} + let View = { oninit(vnode) { let sha1 = vnode.attrs.key || "" @@ -140,22 +188,9 @@ let View = { ? m('img', {src: `/image/${ViewModel.sha1}`}) : "No image.", ]) - const viewbar = m('.viewbar', [ - 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}`))), - ]), - ]) return m('.container', {}, [ m('.header', {}, "View"), - m('.body', {}, [ - view, - viewbar, - ]), + m('.body', {}, [view, m(ViewBar)]), ]) }, } diff --git a/public/style.css b/public/style.css index 7daa69b..7feddb2 100644 --- a/public/style.css +++ b/public/style.css @@ -1,5 +1,7 @@ body { margin: 0; padding: 0; font-family: sans-serif; } +a { color: inherit; } + .container { display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; } .body { display: flex; flex-grow: 1; overflow: hidden; } @@ -11,7 +13,7 @@ ul.sidebar { margin: 0; padding: 0; background: #eee; border-right: 1px solid #ccc; min-width: 10rem; overflow: auto; } ul.sidebar li { margin: 0; padding: 0; } ul.sidebar li a { padding: .25rem .5rem; padding-left: 30px; - color: #000; display: block; text-decoration: none; white-space: nowrap; } + display: block; text-decoration: none; white-space: nowrap; } ul.sidebar li a:hover { background: #ddd; } ul.sidebar li.parent a { @@ -29,12 +31,19 @@ ul.sidebar li.child a { .browser { overflow: auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: center; gap: 10px; padding: 9px; } -.browser:focus-visible { outline: 0; box-shadow: 0; } +.browser:focus-visible { outline: 0; box-shadow: none; } .browser img { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); } -.view { overflow: hidden; display: flex; +.view { display: flex; flex-grow: 1; overflow: hidden; justify-content: center; align-items: center; } .view img { max-width: 100%; max-height: 100%; } .viewbar { padding: .25rem .5rem; background: #eee; border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; } +.viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; } +.viewbar h3 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; } +.viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; } +.viewbar ul.tags { padding: 0; list-style-type: none; } +.viewbar li { margin: 0; padding: 0; } +.viewbar meter { width: 1.25rem; + /* background: white; border: 1px solid #ccc; */ } |