aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/gallery.js67
-rw-r--r--public/style.css15
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; */ }