<html lang="en" class="parent">
<head>
<meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MadKous Photography</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"></script>
<link rel="icon" href="/favicon.ico?=v2"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</head>
<body class="parent">
- <div id="logo">
- <img src="/media/logo.svg" alt="MadKous">
- </div>
<div class="grid parent">
- <div class="menu">
- <ul id="methods">
- <li id="loc"><div>Location</div></li>
- <li id="sub"><div>Subject</div></li>
- <li id="date"><div>Date</div></li>
- </ul>
+ <div id="sidebar">
+ <div class="float">
+ <div id="logo">
+ <img src="/media/logo_cl.svg" alt="MadKous">
+ </div>
+ <div class="menu">
+ <ul id="methods">
+ <li id="loc"><div>Location</div></li>
+ <li id="sub"><div>Subject</div></li>
+ <li id="date"><div>Date</div></li>
+ </ul>
+ </div>
+ </div>
</div>
<div id="thumbs" class="thumb-grid">
</div>
- <div id="photo" class="photo-frame hidden">
+ <div id="photo-layer" class="photo-bg hidden">
+ <div id="photo-left" class="arrow-bar">
+ <div class="center">
+ <a class="arrow-sym arrow-left" href="#"></a>
+ </div>
+ </div>
+ <div id="photo-frame" class="photo-frame"></div>
+ <div id="photo-right" class="arrow-bar">
+ <div class="center">
+ <a class="arrow-sym arrow-right" href="#"></a>
+ </div>
+ </div>
</div>
</div>
<div>
if(PHOTO.removeFilter(m, s)) {
UTIL.siblings(node).forEach(e => {
CLASS.un_deselected(e);
- CLASS.normal(e);
+ // CLASS.normal(e);
});
} else {
CLASS.deselected(node);
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);
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 || {});
var DOM = (dom => {
// main photo container
- dom.photo_dom;
+ dom.photo_layer;
+ dom.photo_frame;
+ dom.photo_left;
+ dom.photo_right;
// pointers to <ul>
- dom.meth_dom;
+ dom.methods;
// thumbnail container
- dom.thumb_dom;
+ dom.thumb_grid;
// lists of <li> by method
dom.meth_list = new Object();
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;
}
}
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", () => {
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 => {
///// 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}`);
}
= 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) => {
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]);
};
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 || {});
--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 {
@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);
.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;
}
}
-.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;
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; }
+
projects / photo-site.git / commitdiff