summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorPřemysl Eric Janouch <p@janouch.name>2023-12-25 07:52:46 +0100
committerPřemysl Eric Janouch <p@janouch.name>2023-12-25 09:36:40 +0100
commit552c9f527a778443a593d11e5ce991a8513a18c1 (patch)
tree2e82862b29377d255b5573daa08423a3ed4cec17 /public
parentbc037315470431ac1f1ba2c7365ca634895e113f (diff)
downloadgallery-552c9f527a778443a593d11e5ce991a8513a18c1.tar.gz
gallery-552c9f527a778443a593d11e5ce991a8513a18c1.tar.xz
gallery-552c9f527a778443a593d11e5ce991a8513a18c1.zip
Tag search
Diffstat (limited to 'public')
-rw-r--r--public/gallery.js109
-rw-r--r--public/style.css24
2 files changed, 119 insertions, 14 deletions
diff --git a/public/gallery.js b/public/gallery.js
index 52a92ab..3c64bac 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -43,6 +43,18 @@ let Header = {
},
],
+ search: [
+ {
+ route: '/search',
+ render: () => m(m.route.Link, {
+ href: `/search/:key`,
+ params: {key: m.route.param('key')},
+ class: m.route.get().startsWith('/search')
+ ? 'active' : undefined,
+ }, "Search"),
+ },
+ ],
+
view(vnode) {
const route = m.route.get()
const main = this.global.map(x =>
@@ -54,6 +66,8 @@ let Header = {
let context
if (this.image.some(x => route.startsWith(x.route)))
context = this.image.map(x => x.render())
+ if (this.search.some(x => route.startsWith(x.route)))
+ context = this.search.map(x => x.render())
return m('.header', {}, [
m('nav', main),
@@ -90,7 +104,7 @@ let BrowseModel = {
this.entries = []
}
- let resp = await call('browse', {path: path})
+ let resp = await call('browse', {path})
this.subdirectories = resp.subdirectories
this.entries = resp.entries.sort((a, b) =>
this.collator.compare(a.name, b.name))
@@ -175,8 +189,10 @@ let Browse = {
return m('.container', {}, [
m(Header),
m('.body', {}, [
- m('ul.sidebar', BrowseModel.getBrowseLinks().map(link =>
- m(BrowseBarLink, {link}))),
+ m('.sidebar', [
+ m('ul.path', BrowseModel.getBrowseLinks()
+ .map(link => m(BrowseBarLink, {link}))),
+ ]),
m(BrowseView),
]),
])
@@ -428,9 +444,14 @@ let ViewBar = {
m("ul.tags", Object.entries(tags)
.sort(([t1, w1], [t2, w2]) => (w2 - w1))
.map(([tag, weight]) => m("li", [
+ // XXX: Duplicated with SearchRelated.
m("meter[max=1.0]",
{value: weight, title: weight}, weight),
- ` ${tag}`,
+ ` `,
+ m(m.route.Link, {
+ href: `/search/:key`,
+ params: {key: `${group}:${tag}`},
+ }, ` ${tag}`),
]))),
]),
])
@@ -541,6 +562,84 @@ let Similar = {
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+let SearchModel = {
+ query: undefined,
+ matches: [],
+ related: {},
+
+ async reload(query) {
+ if (this.query !== query) {
+ this.query = query
+ this.matches = []
+ this.related = {}
+ }
+
+ let resp = await call('search', {query})
+ this.matches = resp.matches
+ this.related = resp.related
+ },
+}
+
+let SearchRelated = {
+ view(vnode) {
+ return Object.entries(SearchModel.related)
+ .sort((a, b) => a[0].localeCompare(b[0]))
+ .map(([space, tags]) => [
+ m('h2', space),
+ m('ul.tags', tags
+ .sort((a, b) => (b.score - a.score))
+ .map(({tag, score}) => m('li', [
+ // XXX: Duplicated with ViewBar.
+ m("meter[max=1.0]",
+ {value: score, title: score}, score),
+ ` `,
+ m(m.route.Link, {
+ href: `/search/:key`,
+ params: {key: `${space}:${tag}`},
+ }, ` ${tag}`),
+ ]))),
+ ])
+ },
+}
+
+let SearchView = {
+ // See BrowseView.
+ oncreate(vnode) { vnode.dom.focus() },
+
+ view(vnode) {
+ return m('.browser[tabindex=0]', {
+ // Trying to force the oncreate on path changes.
+ key: SearchModel.path,
+ }, SearchModel.matches
+ .sort((a, b) => b.score - a.score)
+ .map(info => {
+ return m(m.route.Link, {href: `/view/${info.sha1}`},
+ m(Thumbnail, {info, title: info.score}))
+ }))
+ },
+}
+
+let Search = {
+ oninit(vnode) {
+ SearchModel.reload(vnode.attrs.key)
+ },
+
+ view(vnode) {
+ return m('.container', {}, [
+ m(Header),
+ m('.body', {}, [
+ m('.sidebar', [
+ m('p', SearchModel.query),
+ m(SearchRelated),
+ ]),
+ m(SearchView),
+ ]),
+ ])
+ },
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
window.addEventListener('load', () => {
m.route(document.body, "/browse/", {
// The path doesn't need to be escaped, perhaps change that (":key...").
@@ -554,6 +653,6 @@ window.addEventListener('load', () => {
"/view/:key": View,
"/similar/:key": Similar,
- "/search/:key": undefined,
+ "/search/:key": Search,
})
})
diff --git a/public/style.css b/public/style.css
index 701dc8a..e8eb0bc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -23,23 +23,27 @@ a { color: inherit; }
.header nav a.active, .header nav a:hover { padding-bottom: .4rem; }
.header .activity { padding: .25rem .5rem; align-self: center; color: #fff; }
-ul.sidebar { margin: 0; padding: .5rem 0; background: var(--shade-color);
- min-width: 10rem; overflow: auto; border-right: 1px solid #ccc; }
-
-ul.sidebar li { margin: 0; padding: 0; }
-ul.sidebar li a { padding: .25rem .5rem; padding-left: 30px;
+.sidebar { padding: .25rem .5rem; background: var(--shade-color);
+ border-right: 1px solid #ccc; overflow: auto;
+ min-width: 10rem; max-width: 20rem; flex-shrink: 0; }
+.sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
+.sidebar ul { margin: .5rem 0; padding: 0; }
+
+.sidebar .path { margin: .5rem -.5rem; }
+.sidebar .path li { margin: 0; padding: 0; }
+.sidebar .path li a { padding: .25rem .5rem; padding-left: 30px;
display: block; text-decoration: none; white-space: nowrap; }
-ul.sidebar li a:hover { background-color: rgb(0 0 0 / 10%); }
+.sidebar .path li a:hover { background-color: rgb(0 0 0 / 10%); }
-ul.sidebar li.parent a {
+.sidebar .path li.parent a {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 14 10 8 16 14' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-position: 5px center; }
-ul.sidebar li.selected a { font-weight: bold;
+.sidebar .path li.selected a { font-weight: bold;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23888' /%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-position: 5px center; }
-ul.sidebar li.child a {
+.sidebar .path li.child a {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 6 10 12 16 6' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-position: 5px center; }
@@ -78,6 +82,8 @@ img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
.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; }
+
+.sidebar meter,
.viewbar meter { width: 1.25rem;
/* background: white; border: 1px solid #ccc; */ }