MadKous Photography

Location
Subject
Date

diff --git a/scripts/click.js b/scripts/click.js index 4cff8dc..a17b037 100644 --- a/scripts/click.js +++ b/scripts/click.js @@ -6,7 +6,7 @@ var CLICK = (click => { if(PHOTO.removeFilter(m, s)) { UTIL.siblings(node).forEach(e => { CLASS.un_deselected(e); - CLASS.normal(e); + // CLASS.normal(e); }); } else { CLASS.deselected(node); @@ -16,7 +16,7 @@ var CLICK = (click => { PHOTO.addFilter(m, s, p => p[m] === s); UTIL.siblings(node).forEach(e => { CLASS.deselected(e); - CLASS.un_normal(e); + // CLASS.un_normal(e); }); CLASS.un_deselected(node); CLASS.selected(node); @@ -33,13 +33,14 @@ var CLICK = (click => { if (CLASS.is_selected(node)) { CLASS.hidden(node.children[1]); CLASS.un_selected(node); - CLASS.normal(node); + // CLASS.normal(node); } else { CLASS.un_hidden(node.children[1]); - CLASS.un_normal(node); + // CLASS.un_normal(node); CLASS.selected(node); } } return click; + })(CLICK || {}); diff --git a/scripts/dom.js b/scripts/dom.js index ef22bbb..09ac22a 100644 --- a/scripts/dom.js +++ b/scripts/dom.js @@ -1,10 +1,13 @@ var DOM = (dom => { // main photo container - dom.photo_dom; + dom.photo_layer; + dom.photo_frame; + dom.photo_left; + dom.photo_right; // pointers to

by method dom.meth_list = new Object(); @@ -26,8 +29,13 @@ var DOM = (dom => { dom.makePicture = (p) => { let e = document.createElement("img"); + e.alt = p.desc; e.src = `pictures/${p.name}_sm.jpg`; + e.addEventListener("click", () => { + event.stopPropagation(); + window.open(`pictures/${p.name}.jpg`); + }); return e; } @@ -58,22 +66,34 @@ var DOM = (dom => { } dom.loadPhoto = (p) => { - UTIL.removeAll(dom.photo_dom); - dom.photo_dom.appendChild(p.img); - CLASS.un_hidden(dom.photo_dom); + UTIL.removeAll(dom.photo_frame); + UTIL.disableScroll(); + dom.photo_frame.appendChild(p.img()); + CLASS.un_hidden(dom.photo_layer); } dom.init = () => { - dom.thumb_dom = document.getElementById("thumbs"); - dom.meth_dom = document.getElementById("methods"); - dom.photo_dom = document.getElementById("photo"); + dom.thumb_grid = document.getElementById("thumbs"); + dom.methods = document.getElementById("methods"); + dom.photo_layer = document.getElementById("photo-layer"); + dom.photo_frame = document.getElementById("photo-frame"); + dom.photo_left = document.getElementById("photo-left"); + dom.photo_right = document.getElementById("photo-right"); - dom.photo_dom.addEventListener("click", () => { - CLASS.hidden(DOM.photo_dom); + dom.photo_layer.addEventListener("click", () => { + event.stopPropagation(); + PHOTO.hide(); + }); + dom.photo_left.addEventListener("click", () => { + event.stopPropagation(); + PHOTO.prev(); + }); + dom.photo_right.addEventListener("click", () => { + event.stopPropagation(); + PHOTO.next(); }); - // methods - Array.from(dom.meth_dom.children) + Array.from(dom.methods.children) .forEach(e => { dom.makeMethod(e, dom.meth_list); e.addEventListener("click", () => { diff --git a/scripts/main.js b/scripts/main.js index 733991b..e2ed899 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -4,9 +4,16 @@ function loadJson(text) { let json = JSON.parse(text); PHOTO.all = json.photos; - PHOTO.all.forEach(p => { + PHOTO.all.forEach((p, i) => { p.thm = DOM.makeThumbnail(p); - p.img = DOM.makePicture(p); + // p.img = _ => DOM.makePicture(p); + let cel = null; + let get = _ => { + if (cel === null) + cel = DOM.makePicture(p); + return cel; + }; + p.img = get; }); PHOTO.methods.forEach(m => { @@ -18,12 +25,13 @@ ///// input handling ///// function keyDown(e) { + event.stopPropagation(); if (e.keyCode === 27 || e.keyCode === 32) { // space, escape PHOTO.hide(); } else if (e.keyCode === 37) { // left arrow - PHOTO.prev(); + if (!CLASS.is_hidden(DOM.photo_layer)) PHOTO.prev(); } else if (e.keyCode === 39) { // right arrow - PHOTO.next(); + if (!CLASS.is_hidden(DOM.photo_layer)) PHOTO.next(); } else { console.log(`${e.code} -> ${e.keyCode}`); } diff --git a/scripts/photo.js b/scripts/photo.js index e065293..0a752b4 100644 --- a/scripts/photo.js +++ b/scripts/photo.js @@ -6,11 +6,11 @@ var PHOTO = (photo => { = new Map(photo.methods.map(s => [s, new Map([["T", UTIL.top]])])); photo.updateThumbs = () => { - UTIL.removeAll(DOM.thumb_dom); + UTIL.removeAll(DOM.thumb_grid); let pred = p => Array.from(photo.filter_groups.values()).every( m => Array.from(m.values()).some(f => f(p))); photo.shown = photo.all.filter(pred); - photo.shown.forEach(p => DOM.thumb_dom.appendChild(p.thm)); + photo.shown.forEach(p => DOM.thumb_grid.appendChild(p.thm)); } photo.addFilter = (m, s, f) => { @@ -34,19 +34,23 @@ 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()); + photo.current = _ => document.querySelector("#photo-frame>img"); + photo.hide = _ => { + UTIL.enableScroll(); + CLASS.hidden(DOM.photo_layer); + } + photo.next = _ => { + let i = photo.shown.findIndex(p => p.img() === photo.current()); + if (i === -1) + console.log("error, no current image"); 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); + photo.prev = _ => { + let i = photo.shown.findIndex(p => p.img() === photo.current()); + if (i === -1) + console.log("error, no current image"); let j = i <= 0 ? photo.shown.length - 1 : i - 1; - console.log(j); DOM.loadPhoto(photo.shown[j]); }; diff --git a/scripts/util.js b/scripts/util.js index 7533116..b1ba9fd 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -9,15 +9,23 @@ var UTIL = (util => { e.removeChild(e.lastChild); } } + + util.disableScroll = _ => { + let x=window.scrollX; + let y=window.scrollY; + window.onscroll = _ => window.scrollTo(x, y); + } + util.enableScroll = _ => window.onscroll = _ => {}; + return util; })(UTIL || {}); var CLASS = (cls => { let classes = ["hidden", "selected", "deselected", "normal"]; classes.forEach(c => { - cls[c] = (e) => e.classList.add(c); - cls[`un_${c}`] = (e) => e.classList.remove(c); - cls[`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 || {}); diff --git a/styles/main.css b/styles/main.css index b6df478..2c84c3b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -2,78 +2,79 @@ --bg-col: #151515; --bg-lite-col: #212121; --fg-col: #c3c3c3; - --emph-fg-col: #e8e8e8; - --mute-fg-col: #797979; + --fg-emph-col: #e8e8e8; + --fg-mute-col: #797979; --shadow-col: #050505; -} -.parent { height: 95%; } -.deselected { color: var(--mute-fg-col); } -.selected { color: var(--emph-fg-col); } -.normal { color: var(--fg-col); } -.hidden { display: none; } + --menu-width: calc(100px + 10vw); + --gutter-width: calc(10px + 4vw); +} body { background-color: var(--bg-col); color: var(--fg-col); margin: 5%; - font-size: 2vw; + font-size: calc(1em + 0.5vw); font-family: sans-serif; } -ul { - list-style-type: none; - margin: 0; - padding: 0; +.grid { + display: grid; + grid-template-columns: var(--menu-width) 1fr; + grid-column-gap: 3vw; + /* background-color: blue; */ } -li { - padding: 1vw; +#sidebar { + /* background-color: blue; */ + /* width: auto; */ } -img { - max-width: 100%; - max-height: 100%; +.float { + position: fixed; + width: var(--menu-width); + /* background-color: red; */ } #logo { - padding-bottom: 2vh; - padding-left: 2vw; + display: flex; + padding-bottom: 3vh; + justify-content: center; + align-items: center; } #logo > img { - height: 10vh; - /* box-shadow: 10px 10px 10px var(--shadow-col); */ -} - -.grid { - display: grid; - grid-template-columns: 15vw 0.8fr; - grid-column-gap: 3vw; + height: calc(7px + 7vw); + box-shadow: 5px 5px 5px var(--shadow-col); } .menu { display: inline grid; + width: 100%; + overflow-y: scroll; + max-height: 70vh; } .menu > ul { cursor: pointer; background-color: var(--bg-lite-col); - /* border-radius: 1vw; */ - padding: 1vw; + width: 100%; box-shadow: 5px 5px 5px inset var(--shadow-col); } +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + + 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 { + padding: 1vw; } li > div:active { @@ -86,8 +87,8 @@ li > div:active { @keyframes text_press { 0% { - text-shadow: 5px 5px 5px var(--shadow-col); - transform: translate(0px, -2.5px); + text-shadow: 3px 3px 3px var(--shadow-col); + /* transform: translate(0px, -2.5px); */ } 100% { text-shadow: 1px 1px 1px var(--shadow-col); @@ -108,11 +109,15 @@ li > div:active { .thumb-grid { display: grid; - grid-gap: 1vw; + grid-row-gap: 1vw; + grid-column-gap: 1vw; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + padding-bottom: 3vh; + /* background-color: green; */ } .thumb-grid > div { + /* background-color: red; */ display: flex; height: 160px; width: 160px; @@ -167,19 +172,26 @@ li > div:active { } } -.photo-frame { +.photo-bg { position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0,0,0,0.8); +} + +.photo-bg { + width: 100%; + height: 100%; + display: grid; + grid-template-columns: var(--gutter-width) auto var(--gutter-width); } .photo-frame > img { - max-width: 70%; - max-height: 90%; + max-width: 90vw; + max-height: 90vh; margin-left: auto; margin-right: auto; margin-top: 5vh; @@ -188,3 +200,54 @@ li > div:active { border: medium solid; box-shadow: 0px 0px 5vmax 5vmax var(--shadow-col); } + +.center { + display: flex; + justify-content: center; + align-items: center; +} + +.arrow-sym { + /* border: solid var(--fg-mute-col); */ + /* border-width: 0 1vw 1vw 0; */ + /* display: inline-block; */ + /* padding: 1vw; */ + /* margin-left: auto; */ + /* margin-right: auto; */ + /* width: 0; */ + /* height: 0; */ + /* margin: 0; */ + position: absolute; + top: 50%; + transform: translateY(-50%); + /* text-align: center; */ +} + +.arrow-left { + /* transform: rotate(135deg); */ + border-top: 2vw solid transparent; + border-bottom: 2vw solid transparent; + border-right: 2vw solid var(--fg-mute-col); +} + +.arrow-right { + /* transform: rotate(-45deg); */ + border-top: 2vw solid transparent; + border-bottom: 2vw solid transparent; + border-left: 2vw solid var(--fg-mute-col); +} + +.arrow-bar { + /* background-color: red; */ + /* background-color: var(--bg-lite-col); */ + /* box-shadow: 0px 0px 1vw 1vw var(--bg-lite-col); */ + /* position: fixed; */ +} + +/* these must remain at the bottom */ +.parent { height: 95%; } +.normal { color: var(--fg-col); } +.deselected { color: var(--fg-mute-col); } +.selected { color: var(--fg-emph-col); } +.hidden { display: none; } +