<meta charset="UTF-8">
<title>MadKous Photography</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"></script>
+ <link rel="icon" href="/favicon.ico?=v2"></script>
<!-- util must be first; driver must be last -->
<script type="text/javascript" src="scripts/util.js"></script>
<script type="text/javascript" src="scripts/photo.js"></script>
</head>
<body class="parent">
<div id="logo">
- <img src="logo_sm.png" alt="MadKous">
+ <img src="/media/logo.svg" alt="MadKous">
</div>
<div class="grid parent">
<div class="menu">
- <ul id="methods">Filter<li id="loc">by Location</li>
- <li id="sub">by Subject</li>
- <li id="date">by Date</li>
+ <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 id="thumbs" class="thumb-grid">
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 || {});
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 => {
///// 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}`);
}
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);
});
})();
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 || {});
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 || {});
+: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;
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;
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;
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);
}
}
margin-top: 5vh;
margin-bottom: auto;
display: block;
+ border: medium solid;
+ box-shadow: 0px 0px 5vmax 5vmax var(--shadow-col);
}
projects / photo-site.git / commitdiff