MadKous Photography

diff --git a/scripts/click.js b/scripts/click.js index 772b060..4cff8dc 100644 --- a/scripts/click.js +++ b/scripts/click.js @@ -2,65 +2,44 @@ var CLICK = (click => { click.category = (m, node) => { let s = node.innerText; - if (UTIL.is_selected(node)) { - console.log(`clicked selected ${s}`); + if (CLASS.is_selected(node)) { if(PHOTO.removeFilter(m, s)) { UTIL.siblings(node).forEach(e => { - UTIL.un_deselected(e); - UTIL.normal(e); + CLASS.un_deselected(e); + CLASS.normal(e); }); } else { - UTIL.deselected(node); + CLASS.deselected(node); } - UTIL.un_selected(node); - } else if (UTIL.is_normal(node)) { - console.log(`clicked normal ${s}`); + CLASS.un_selected(node); + } else if (CLASS.is_normal(node)) { PHOTO.addFilter(m, s, p => p[m] === s); UTIL.siblings(node).forEach(e => { - UTIL.deselected(e); - UTIL.un_normal(e); + CLASS.deselected(e); + CLASS.un_normal(e); }); - UTIL.un_deselected(node); - UTIL.selected(node); + CLASS.un_deselected(node); + CLASS.selected(node); } else { // assumed to be 'deselected' - console.log(`clicked deselected ${s}`); PHOTO.addFilter(m, s, p => p[m] === s); - UTIL.un_deselected(node); - UTIL.selected(node); + CLASS.un_deselected(node); + CLASS.selected(node); } } click.method = (node) => { let m = node.id; - console.log(`click method ${m}`); - if (node.classList.contains("selected")) { - Array.from(node.children).forEach(UTIL.hidden); - click.close(node); + if (CLASS.is_selected(node)) { + CLASS.hidden(node.children[1]); + CLASS.un_selected(node); + CLASS.normal(node); } else { - Array.from(node.children).forEach(UTIL.un_hidden); - click.open(node); + CLASS.un_hidden(node.children[1]); + CLASS.un_normal(node); + CLASS.selected(node); } } - click.open = (node) => { - UTIL.siblings(node).forEach(e => { - UTIL.deselected(e); - UTIL.un_selected(e); - UTIL.un_normal(e); - }); - UTIL.un_deselected(node); - UTIL.un_normal(node); - UTIL.selected(node); - } - - click.close = (node) => { - UTIL.siblings(node).forEach(e => { - UTIL.un_deselected(e); - UTIL.un_selected(e); - UTIL.normal(e); - }); - } - return click; })(CLICK || {}); diff --git a/scripts/dom.js b/scripts/dom.js index 6761a09..ef22bbb 100644 --- a/scripts/dom.js +++ b/scripts/dom.js @@ -33,37 +33,45 @@ var DOM = (dom => { dom.makeCategory = (s, m) => { let e = document.createElement("li"); - e.innerText = s; + let d = document.createElement("div"); + d.innerText = s; + e.appendChild(d); e.id = s; e.addEventListener("click", () => { event.stopPropagation(); CLICK.category(m, e); }); - UTIL.normal(e); + CLASS.normal(e); return e; } dom.makeList = (l) => { let c = document.createElement("ul"); l.forEach(e => c.appendChild(e)); - UTIL.hidden(c); + CLASS.hidden(c); return c; } dom.makeMethod = (node, l) => { let m = node.id; - console.log(`load method ${m}`); node.appendChild(dom.makeList(l[m])); } dom.loadPhoto = (p) => { UTIL.removeAll(dom.photo_dom); - console.log("load picture " + p.name); dom.photo_dom.appendChild(p.img); - UTIL.un_hidden(dom.photo_dom); + CLASS.un_hidden(dom.photo_dom); } dom.init = () => { + dom.thumb_dom = document.getElementById("thumbs"); + dom.meth_dom = document.getElementById("methods"); + dom.photo_dom = document.getElementById("photo"); + + dom.photo_dom.addEventListener("click", () => { + CLASS.hidden(DOM.photo_dom); + }); + // methods Array.from(dom.meth_dom.children) .forEach(e => { diff --git a/scripts/main.js b/scripts/main.js index 2bd4832..733991b 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -18,8 +18,12 @@ ///// input handling ///// function keyDown(e) { - if (e.keyCode === 27 || e.keyCode === 32) { - DOM.photo_dom.classList.add("hidden"); + if (e.keyCode === 27 || e.keyCode === 32) { // space, escape + PHOTO.hide(); + } else if (e.keyCode === 37) { // left arrow + PHOTO.prev(); + } else if (e.keyCode === 39) { // right arrow + PHOTO.next(); } else { console.log(`${e.code} -> ${e.keyCode}`); } @@ -30,20 +34,12 @@ let xhttp = new XMLHttpRequest(); xhttp.onload = (() => { loadJson(xhttp.responseText); - PHOTO.updateThumbs(); DOM.init(); + PHOTO.updateThumbs(); }); xhttp.open("GET", "data/pictures.json"); xhttp.send(); - DOM.thumb_dom = document.getElementById("thumbs"); - DOM.meth_dom = document.getElementById("methods"); - DOM.photo_dom = document.getElementById("photo"); - - DOM.photo_dom.addEventListener("click", () => { - DOM.photo_dom.classList.add("hidden"); - }); - document.addEventListener("keydown", keyDown); }); })(); diff --git a/scripts/photo.js b/scripts/photo.js index e683655..e065293 100644 --- a/scripts/photo.js +++ b/scripts/photo.js @@ -34,5 +34,21 @@ var PHOTO = (photo => { return r; } + photo.current = () => document.querySelector("#photo>img"); + photo.hide = () => CLASS.hidden(DOM.photo_dom); + photo.next = () => { + let i = photo.shown.findIndex(p => p.img === photo.current()); + let j = i + 1 === photo.shown.length ? 0 : i + 1; + DOM.loadPhoto(photo.shown[j]); + }; + photo.prev = () => { + console.log("prev"); + let i = photo.shown.findIndex(p => p.img === photo.current()); + console.log(i); + let j = i <= 0 ? photo.shown.length - 1 : i - 1; + console.log(j); + DOM.loadPhoto(photo.shown[j]); + }; + return photo; })(PHOTO || {}); diff --git a/scripts/util.js b/scripts/util.js index ec3c858..7533116 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -9,13 +9,16 @@ var UTIL = (util => { e.removeChild(e.lastChild); } } + return util; +})(UTIL || {}); +var CLASS = (cls => { let classes = ["hidden", "selected", "deselected", "normal"]; classes.forEach(c => { - util[c] = (e) => e.classList.add(c); - util[`un_${c}`] = (e) => e.classList.remove(c); - util[`is_${c}`] = (e) => e.classList.contains(c); + cls[c] = (e) => e.classList.add(c); + cls[`un_${c}`] = (e) => e.classList.remove(c); + cls[`is_${c}`] = (e) => e.classList.contains(c); }); + return cls; +})(CLASS || {}); - return util; -})(UTIL || {}); diff --git a/styles/main.css b/styles/main.css index 517afea..b6df478 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,12 +1,21 @@ +:root { + --bg-col: #151515; + --bg-lite-col: #212121; + --fg-col: #c3c3c3; + --emph-fg-col: #e8e8e8; + --mute-fg-col: #797979; + --shadow-col: #050505; +} + .parent { height: 95%; } -.deselected { color: #797777; } -.selected { color: #e3e2e2; } -.normal { color: #c3c2c2; } +.deselected { color: var(--mute-fg-col); } +.selected { color: var(--emph-fg-col); } +.normal { color: var(--fg-col); } .hidden { display: none; } body { - background-color: #161516; - color: #c3c2c2; + background-color: var(--bg-col); + color: var(--fg-col); margin: 5%; font-size: 2vw; font-family: sans-serif; @@ -27,6 +36,16 @@ img { max-height: 100%; } +#logo { + padding-bottom: 2vh; + padding-left: 2vw; +} + +#logo > img { + height: 10vh; + /* box-shadow: 10px 10px 10px var(--shadow-col); */ +} + .grid { display: grid; grid-template-columns: 15vw 0.8fr; @@ -37,6 +56,56 @@ img { display: inline grid; } +.menu > ul { + cursor: pointer; + background-color: var(--bg-lite-col); + /* border-radius: 1vw; */ + padding: 1vw; + box-shadow: 5px 5px 5px inset var(--shadow-col); +} + +li > div { + text-shadow: 3px 3px 3px var(--shadow-col); +} + +li > div:hover { + animation-name: text_bounce; + animation-timing-function: ease-in-out; + animation-duration: 300ms; + text-shadow: 5px 5px 5px var(--shadow-col); + transform: translate(0px, -2.5px); +} + +li > div:active { + animation-name: text_press; + animation-timing-function: ease-in-out; + animation-duration: 100ms; + text-shadow: 1px 1px 1px var(--shadow-col); + transform: translate(0px, 1px); +} + +@keyframes text_press { + 0% { + text-shadow: 5px 5px 5px var(--shadow-col); + transform: translate(0px, -2.5px); + } + 100% { + text-shadow: 1px 1px 1px var(--shadow-col); + transform: translate(0px, 1px); + } +} + +@keyframes text_bounce { + 0% { + text-shadow: 3px 3px 3px var(--shadow-col); + transform: translate(0px, 0px); + } + 100% { + text-shadow: 5px 5px 5px var(--shadow-col); + transform: translate(0px, -2.5px); + } +} + .thumb-grid { display: grid; grid-gap: 1vw; @@ -55,45 +124,45 @@ img { display: block; max-height: 160px; max-width: 160px; - border-radius: 10px; - box-shadow: 5px 5px 5px #050404; + /* border-radius: 10px; */ + box-shadow: 5px 5px 5px var(--shadow-col); /* margin: auto; */ } .thumb-grid > div > img:hover { - animation-name: bounce; + animation-name: box_bounce; animation-timing-function: ease-in-out; animation-duration: 300ms; - box-shadow: 10px 10px 5px #050404; + box-shadow: 10px 10px 10px var(--shadow-col); transform: translate(0px, -2.5px); } .thumb-grid > div > img:active { - animation-name: press; + animation-name: box_press; animation-timing-function: ease-in-out; animation-duration: 100ms; - box-shadow: 2px 2px 5px #050404; + box-shadow: 2px 2px 2px var(--shadow-col); transform: translate(0px, 1px); } -@keyframes press { +@keyframes box_press { 0% { - box-shadow: 10px 10px 5px #050404; + box-shadow: 10px 10px 10px var(--shadow-col); transform: translate(0px, -2.5px); } 100% { - box-shadow: 2px 2px 5px #050404; + box-shadow: 2px 2px 2px var(--shadow-col); transform: translate(0px, 1px); } } -@keyframes bounce { +@keyframes box_bounce { 0% { - box-shadow: 5px 5px 5px #050404; + box-shadow: 5px 5px 5px var(--shadow-col); transform: translate(0px, 0px); } 100% { - box-shadow: 10px 10px 5px #050404; + box-shadow: 10px 10px 10px var(--shadow-col); transform: translate(0px, -2.5px); } } @@ -116,4 +185,6 @@ img { margin-top: 5vh; margin-bottom: auto; display: block; + border: medium solid; + box-shadow: 0px 0px 5vmax 5vmax var(--shadow-col); }