Style the view better

1 files changed, 51 insertions, 16 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)]),
 		])
 	},
 }