Initial Commit

diff --git a/CSVtoJSON.awk b/CSVtoJSON.awk
new file mode 100644 (file)
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 (executable)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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%;
+}
+
+