From: Matthew Kousoulas <shaman.kous@gmail.com>
Date: Thu, 3 Mar 2022 20:19:57 +0000 (-0500)
Subject: Add Date hopping
X-Git-Url: http://gitweb.madkous.net/?a=commitdiff_plain;h=ee94535f86dfe40eec1d83a809387f35394fdca2;p=photo-site.git

Add Date hopping
---

diff --git a/scripts/dom.js b/scripts/dom.js
index cea7a4d..40fba08 100644
--- a/scripts/dom.js
+++ b/scripts/dom.js
@@ -57,20 +57,57 @@ var DOM = (dom => {
 
 	dom.addSection = (n) =>
 	{
+		let h = n.toLowerCase().replace(" ","-");
+
 		let e = document.createElement("div");
 		e.classList.add("section");
+		e.id = h;
 		dom.thumb_layer.appendChild(e);
 
+		let d = document.createElement("div");
+		d.classList.add("section-holder");
+		e.appendChild(d);
+
 		let t = document.createElement("div");
 		t.innerText = n;
 		t.classList.add("section-text");
-		e.appendChild(t);
+		d.appendChild(t);
+
+		let u = document.createElement("ul");
+		u.classList.add("section-list");
+		u.id = h + "-list";
+		d.appendChild(u);
+		// 2em+1vh + n *
 
 		let g = document.createElement("div");
 		g.classList.add("grid");
 		dom.thumb_layer.appendChild(g);
 		dom.thumb_grid = g;
+	}
 
+	dom.finishSections = (l) =>
+	{
+		for (let section of document.getElementsByClassName("section-holder")) {
+			let height = section.offsetHeight;
+			let list = section.childNodes[1];
+			let name = section.childNodes[0].innerText;
+			for (let n of l) {
+				let h = n.toLowerCase().replace(" ","-");
+				let l = document.createElement("li");
+				list.appendChild(l);
+
+				let a = document.createElement("a");
+				a.innerText = n;
+				a.href = "#" + h;
+				l.appendChild(a);
+
+				if (n === name) {
+					console.log("Setting <" + n + "> top to: -" + height + "px");
+					list.style.top = "-" + height + "px";
+				}
+				height += a.offsetHeight;
+			}
+		}
 	}
 	
 	dom.revealGrid = () => {
@@ -78,10 +115,17 @@ var DOM = (dom => {
 			CLASS.show(dom.logo);
 			setTimeout(() => {
 				CLASS.show(dom.thumb_layer);
+				dom.scrollTo(window.location.hash);
 			}, 300);
 		}, 500);
 	}
 
+	dom.scrollTo = (hash) => {
+		if (hash) {
+			document.getElementById(hash.substring(1)).scrollIntoView();
+		}
+	}
+
 	dom.init = () => {
 		dom.logo        = document.getElementById("logo");
 		dom.thumb_layer = document.getElementById("thumb-layer");
diff --git a/scripts/main.js b/scripts/main.js
index bbf0a35..0f2006e 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -3,6 +3,7 @@
 	//// json handling ////
 	function loadJson(text) {
 		let json = JSON.parse(text);
+		let section_list = [];
 		let section = "";
 		PHOTO.all = json.photos;
 		PHOTO.all.forEach((p, i) => {
@@ -20,10 +21,12 @@
 				DOM.addThumbnail(p.thm)
 			} else {
 				section = p.date
+				section_list.push(p.date);
 				DOM.addSection(section);
 				DOM.addThumbnail(p.thm)
 			}
 		});
+		DOM.finishSections(section_list);
 	}
 
 	///// input handling /////
diff --git a/styles/main.css b/styles/main.css
index 5124d7f..c58867c 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -17,6 +17,7 @@
 	--gutter-width: calc(10px + 7vw);
 }
 
+
 body {
 	background-color: var(--bg-col);
 	color: var(--fg-col);
@@ -52,6 +53,47 @@ body {
 	background-color: var(--bg-lite-col);
 	border-radius: 2vw;
 	padding: 1vw;
+	text-align: center;
+	visibility: visible;
+	opacity: 1;
+	transition: visibility 500ms, opacity 500ms;
+}
+
+.section-list {
+	background-color: var(--bg-lite-col);
+	border-radius: 2vw;
+	position: relative;
+	text-align: center;
+	list-style: none;
+	margin: 0;
+	padding: 1vw;
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 300ms, opacity 300ms;
+}
+
+.section-list a {
+	text-decoration: none;
+	color: var(--fg-col);
+	display: block;
+	padding: .3vw;
+}
+
+.section-holder {
+	height: calc(2em + 1vh);
+	
+}
+
+.section-holder:hover .section-text {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 300ms, opacity 300ms;
+}
+
+.section-holder:hover .section-list {
+	visibility: visible;
+	opacity: 1;
+	transition: visibility 500ms, opacity 500ms;
 }
 
 .grid {
@@ -70,7 +112,6 @@ body {
 
 .thumb > img {
 	border-radius: inherit;
-	object-fit: cover;
 	min-width: 100%;
 	max-height: 200px;
 	transition: all 800ms ease-in-out;
@@ -152,7 +193,6 @@ body {
 /* these must remain at the bottom */
 .parent { height: 95%; }
 .fade-in {
-	visibility: show;
 	opacity: 1;
 	transition: visibility 500ms, opacity 500ms;
 }
@@ -161,4 +201,3 @@ body {
 	opacity: 0;
 	transition: visibility 300ms, opacity 300ms;
 }
-