Add Date hopping

diff --git a/scripts/dom.js b/scripts/dom.js
index cea7a4de63dcf0dfc7ee54cd1bed48acf4e91755..40fba08e0009307aca4f4feefe075698b82ce8cf 100644 (file)
--- 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 bbf0a358f62b201b52016d7ab8d310b097cf20d0..0f2006eebf9ba69f166bded6662a883b907be3d5 100644 (file)
--- 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 5124d7fac84272e814593fbbb5b828d44a9c5fe3..c58867c2e32d8107ad06e5ff4527ee0a906d70c4 100644 (file)
--- 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;
 }
-