From dd32fe1e62c68738d4cfcddd5ab5c3b671712ce5 Mon Sep 17 00:00:00 2001
From: Matthew Kousoulas <shaman.kous@gmail.com>
Date: Mon, 21 Jun 2021 08:52:46 -0400
Subject: [PATCH 1/1] Initial Commit

---
 CSVtoJSON.awk |  32 +++++++++++
 CSVtoJSON.sh  |   2 +
 driver.js     | 143 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  26 +++++++++
 pictures.csv  |   3 ++
 pictures.json |   1 +
 style.css     |  44 ++++++++++++++++
 7 files changed, 251 insertions(+)
 create mode 100644 CSVtoJSON.awk
 create mode 100755 CSVtoJSON.sh
 create mode 100644 driver.js
 create mode 100644 index.html
 create mode 100644 pictures.csv
 create mode 100644 pictures.json
 create mode 100644 style.css

diff --git a/CSVtoJSON.awk b/CSVtoJSON.awk
new file mode 100644
index 0000000..d6dd0ed
--- /dev/null
+++ b/CSVtoJSON.awk
@@ -0,0 +1,32 @@
+BEGIN{
+	FS=":"
+	ORS=""
+	getline #parse header
+	for(i=1;i<=NF;i++)
+	{
+		fields[i]=($i)
+	}
+	print "{\"photos\":["
+}
+{
+	print "{"
+	for(i=1;i<=NF;i++)
+	{
+		vals[i][$i]=($i)
+		printf "\"%s\":\"%s\"%s",fields[i],($i),(i == NF ? "" : ",")
+	}
+	printf "},"
+}
+END{
+	print "],"
+	for(i=1;i<=NF;i++)
+	{
+		printf "\"%s\":[",fields[i]
+		for(v in vals[i])
+		{
+			printf "\"%s\",",v
+		}
+		printf "],"
+	}
+	print "}\n"
+}
diff --git a/CSVtoJSON.sh b/CSVtoJSON.sh
new file mode 100755
index 0000000..99d7a4e
--- /dev/null
+++ b/CSVtoJSON.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+awk -f CSVtoJSON.awk pictures.csv | sed -E 's/,(]|})/\1/g' > pictures.json
diff --git a/driver.js b/driver.js
new file mode 100644
index 0000000..67432aa
--- /dev/null
+++ b/driver.js
@@ -0,0 +1,143 @@
+// (() => {
+"use strict";
+const methods = [ "loc", "date", "sub" ];
+let up_dom, photo_dom;
+// pointers to <ul>
+let meth_dom, cat_dom, thumb_dom;
+// pointers to [<li>]
+let meth_list = new Object();
+// pointers to photos
+let photos;
+let state = [];
+
+function loadJson(text) {
+	let json = JSON.parse(text);
+	photos = json.photos;
+	photos.forEach(p => {
+		p.btn = document.createElement("li");
+		p.btn.innerText = p.desc;
+		p.btn.addEventListener("click", () => {
+					event.stopPropagation();
+					loadPhoto(p);
+				});
+
+		p.thm = document.createElement("img");
+		p.thm.alt = p.desc;
+		p.thm.classList.add("thumbnail");
+		p.thm.src = `/home/kous/website-local/pictures/${p.name}.jpg`;
+
+		p.img = document.createElement("img");
+		p.img.alt = p.desc;
+		p.img.classList.add("responsive");
+		p.img.src = `/home/kous/website-local/pictures/${p.name}.jpg`;
+	});
+
+	methods.forEach(m => {
+		let a = [];
+		json[m].forEach(
+			s => {
+				let e = document.createElement("li");
+				e.innerText = s;
+				e.id = s;
+				e.addEventListener("click", () => {
+					event.stopPropagation();
+					loadCategory(m, e);
+				});
+				a.push(e);
+			});
+		meth_list[m] = a;
+	});
+}
+
+function loadPhoto(p) {
+	removeAll(photo_dom);
+	console.log("load picture " + p.name);
+	photo_dom.appendChild(p.img);
+}
+
+function loadCategory(m, node) {
+	let s = node.innerText;
+	console.log(`load category ${s}:${m}`);
+	let a = siblings(node);
+
+	removeAll(thumb_dom);
+	if (peek(state) === s) {
+		ascend(node);
+	} else {
+		state.push(s);
+		photos.filter(p => p[m] === s)
+			.forEach(p => thumb_dom.appendChild(p.btn));
+		node.appendChild(thumb_dom);
+
+		a.forEach(e => {
+			e.classList.add("deselected")
+			e.classList.remove("selected");
+		});
+		node.classList.remove("deselected");
+		node.classList.add("selected");
+	}
+}
+
+function loadMethod(node) {
+	let m = node.id;
+	console.log(`load method ${m}`);
+	let a = siblings(node);
+
+	removeAll(cat_dom);
+	if (peek(state) === m) {
+		ascend(node);
+	} else {
+		state.push(m);
+		meth_list[m].forEach(e => cat_dom.appendChild(e));
+
+		node.appendChild(cat_dom);
+		a.forEach(e => {
+			e.classList.add("deselected")
+			e.classList.remove("selected");
+		});
+		node.classList.remove("deselected");
+		node.classList.add("selected");
+	}
+}
+
+function ascend(node) {
+	state.pop();
+	removeLast(node);
+	siblings(node).forEach(e => {
+		e.classList.remove("deselected")
+		e.classList.remove("selected");
+	});
+}
+
+function removeAll(e) {
+	while(e.lastChild) {
+		e.removeChild(e.lastChild);
+	}
+}
+function siblings(n) { return Array.from(n.parentNode.children); }
+function removeLast(e) { e.removeChild(e.lastChild); }
+function peek(a) { return a[a.length-1]; }
+
+document.addEventListener("DOMContentLoaded",
+	(event) => {
+		let xhttp = new XMLHttpRequest();
+		xhttp.onload = (() => loadJson(xhttp.responseText));
+		xhttp.open("GET", "pictures.json");
+		xhttp.send();
+
+		cat_dom = document.createElement("ul");
+		thumb_dom = document.createElement("ul");
+
+		meth_dom = document.getElementById("methods");
+		up_dom = document.getElementById("up");
+		photo_dom = document.getElementById("photo");
+
+		Array.from(meth_dom.children)
+			.forEach(e => {
+				e.addEventListener("click", () => {
+					event.stopPropagation();
+					loadMethod(e);
+				});
+			});
+	});
+// })();
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0902067
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" class="parent">
+	<head>
+		<meta charset="UTF-8">
+		<title>MadKous Photography</title>
+		<link rel="stylesheet" type="text/css" href="style.css"></script>
+		<script type="text/javascript" src="driver.js"></script>
+	</head>
+	<body class="parent">
+		<div class="row parent">
+			<div class="col-menu">
+				<ul id="methods">
+					Filter
+					<li id="loc">by Location</li>
+					<li id="sub">by Subject</li>
+					<li id="date">by Date</li>
+				</ul>
+			</div>
+			<div id="photo" class="col-img box">
+			</div>
+		</div>
+		<div id="thumb-bar">
+		</div>
+		<div>
+	</body>
+</html>
diff --git a/pictures.csv b/pictures.csv
new file mode 100644
index 0000000..61ebae7
--- /dev/null
+++ b/pictures.csv
@@ -0,0 +1,3 @@
+name:loc:sub:date:desc
+20210618_0447:White Rock Cliff:Landscape:June 2021:Early Morning Sun Through the Trees
+20210618_0477:White Rock Cliff:Flora:June 2021:Triplet of Young Pine Cones
diff --git a/pictures.json b/pictures.json
new file mode 100644
index 0000000..0b87d5a
--- /dev/null
+++ b/pictures.json
@@ -0,0 +1 @@
+{"photos":[{"name":"20210618_0447","loc":"White Rock Cliff","sub":"Landscape","date":"June 2021","desc":"Early Morning Sun Through the Trees"},{"name":"20210618_0477","loc":"White Rock Cliff","sub":"Flora","date":"June 2021","desc":"Triplet of Young Pine Cones"}],"name":["20210618_0447","20210618_0477"],"loc":["White Rock Cliff"],"sub":["Flora","Landscape"],"date":["June 2021"],"desc":["Triplet of Young Pine Cones","Early Morning Sun Through the Trees"]}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..627c572
--- /dev/null
+++ b/style.css
@@ -0,0 +1,44 @@
+.parent { height: 95%; }
+.deselected { color: #797777; }
+.selected { color: #e3e2e2; }
+
+body {
+	background-color: #151515;
+	color: #c3c2c2;
+	margin: 5%;
+	font-size: x-large;
+	font-family: sans-serif;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.col-menu {
+	float: left;
+	width: 20%;
+	/* background: #451515; */
+}
+
+.col-img {
+	float: right;
+	width: 75%;
+	padding: 20px;
+	/* background: #151545; */
+	height: 90%;
+}
+
+.row:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+.thumbnail {
+	height: 100px;
+	width: 100px;
+	border-radius: 10%;
+}
+
+
-- 
2.45.3