Improve page header

1 files changed, 58 insertions, 23 deletions

diff --git a/public/gallery.js b/public/gallery.js
index 96f0216..dbcadf6 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -14,6 +14,56 @@ function call(method, params) {
 
 const loading = (window.location.hostname !== 'localhost') ? 'lazy' : undefined
 
+let Header = {
+	global: [
+		{name: "Browse",     route: '/browse'},
+		{name: "Tags",       route: '/tags'},
+		{name: "Duplicates", route: '/duplicates'},
+		{name: "Orphans",    route: '/orphans'},
+	],
+
+	image: [
+		{
+			route: '/view',
+			render: () => m(m.route.Link, {
+				href: `/view/:key`,
+				params: {key: m.route.param('key')},
+				class: m.route.get().startsWith('/view')
+					? 'active' : undefined,
+			}, "View"),
+		},
+		{
+			route: '/similar',
+			render: () => m(m.route.Link, {
+				href: `/similar/:key`,
+				params: {key: m.route.param('key')},
+				class: m.route.get().startsWith('/similar')
+					? 'active' : undefined,
+			}, "Similar"),
+		},
+	],
+
+	view(vnode) {
+		const route = m.route.get()
+		const main = this.global.map(x =>
+			m(m.route.Link, {
+				href: x.route,
+				class: route.startsWith(x.route) ? 'active' : undefined,
+			}, x.name))
+
+		let context
+		if (this.image.some(x => route.startsWith(x.route)))
+			context = this.image.map(x => x.render())
+
+		return m('.header', {}, [
+			m('nav', main),
+			m('nav', context),
+			// TODO: End it with an activity indicator.
+			m('.activity', '☺'),
+		])
+	},
+}
+
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
 let BrowseModel = {
@@ -113,7 +163,7 @@ let Browse = {
 
 	view(vnode) {
 		return m('.container', {}, [
-			m('.header', {}, "Browser"),
+			m(Header),
 			m('.body', {}, [
 				m('ul.sidebar', BrowseModel.getBrowseLinks().map(link =>
 					m(BrowseBarLink, {link}))),
@@ -209,13 +259,7 @@ let View = {
 				: "No image.",
 		])
 		return m('.container', {}, [
-			m('.header', {}, [
-				"View",
-				m(m.route.Link, {
-					href: `/similar/:key`,
-					params: {key: ViewModel.sha1},
-				}, "Similar"),
-			]),
+			m(Header),
 			m('.body', {}, [view, m(ViewBar)]),
 		])
 	},
@@ -298,13 +342,7 @@ let Similar = {
 
 	view(vnode) {
 		return m('.container', {}, [
-			m('.header', {}, [
-				"Similarity search",
-				m(m.route.Link, {
-					href: `/view/:key`,
-					params: {key: SimilarModel.sha1},
-				}, "View"),
-			]),
+			m(Header),
 			m('.body', {}, m(SimilarList)),
 		])
 	},
@@ -353,9 +391,7 @@ let Duplicates = {
 
 	view(vnode) {
 		return m('.container', {}, [
-			m('.header', {}, [
-				"Duplicates",
-			]),
+			m(Header),
 			m('.body', {}, m(DuplicatesList)),
 		])
 	},
@@ -421,9 +457,7 @@ let Orphans = {
 
 	view(vnode) {
 		return m('.container', {}, [
-			m('.header', {}, [
-				"Orphans",
-			]),
+			m(Header),
 			m('.body', {}, m(OrphansList)),
 		])
 	},
@@ -436,11 +470,12 @@ window.addEventListener('load', () => {
 		// The path doesn't need to be escaped, perhaps change that (":key...").
 		"/browse/": Browse,
 		"/browse/:key": Browse,
-		"/view/:key": View,
-		"/similar/:key": Similar,
 		"/duplicates": Duplicates,
 		"/orphans": Orphans,
 
+		"/view/:key": View,
+		"/similar/:key": Similar,
+
 		"/tags": undefined,
 		"/tags/:space": undefined,
 		"/tags/:space/:tag": undefined,