You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.2 KiB
84 lines
2.2 KiB
5 years ago
|
document.addEventListener("DOMContentLoaded", run);
|
||
|
|
|
||
|
|
function run() {
|
||
|
|
supportFireFox();
|
||
|
|
initializeClickHandler();
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Firefox seems to handle positioning after transform
|
||
|
|
differently to webkit based browsers, therefore this
|
||
|
|
function checks if the current userAgent is FF and sets
|
||
|
|
the required property for bottom from 0 to 15vh */
|
||
|
|
function supportFireFox() {
|
||
|
|
// console.log(navigator.userAgent);
|
||
|
|
if (navigator.userAgent.includes("Firefox")) {
|
||
|
|
// document.getElementById("exhibition").style.bottom = "15vh";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initializeClickHandler() {
|
||
|
|
document.addEventListener("click", (e) => {
|
||
|
|
let overlay = document.getElementById("info-box");
|
||
|
|
let curr = e.target;
|
||
|
|
console.log(curr);
|
||
|
|
if (curr.className === "thumb") {
|
||
|
|
handleThumb(overlay, curr);
|
||
|
|
} else if (curr.id === "btn-close") {
|
||
|
|
hideOverlay(overlay);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleThumb(overlay, elem) {
|
||
|
|
let imgName = elem.dataset.img;
|
||
|
|
showOverlay(overlay, imgName);
|
||
|
|
}
|
||
|
|
|
||
|
|
function showOverlay(overlay, imgName) {
|
||
|
|
let info = getInfoForImg(imgName);
|
||
|
|
// \xD7 is the multiplication sign in hex
|
||
|
|
overlay.children[0].innerHTML =
|
||
|
|
`<div id="btn-close">\xD7</div>
|
||
|
|
<img src="/inc/images/${imgName}.jpg" alt="${imgName}" />
|
||
|
|
|
||
|
|
<table id="img-description">
|
||
|
|
<tr>
|
||
|
|
<th>Author:</th><td>${info.author}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Size:</th><td>${info.size}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Tools:</th><td>${info.tools}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Date:</th><td>${info.date}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Price:</th><td>${info.price}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2">Description:</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="2">${info.desc}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2"><a href="${info.blog}">Read more...</a></th>
|
||
|
|
</tr>
|
||
|
|
</table>`;
|
||
|
|
overlay.classList.remove("hidden");
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideOverlay(overlay) {
|
||
|
|
overlay.classList.add("hidden");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get info from server
|
||
|
|
function getInfoForImg(imgName) {
|
||
|
|
let info = {author: "Philip Gaber", size: "1920x1080 @24MP", tools: "Sony a5100", date: "2019-10-10",
|
||
|
|
desc: "A couple words about the piece of art. I like trees, I am groot, Winter is coming!!!", price: "2999,99 €",
|
||
|
|
blog: "./blog/some/url"};
|
||
|
|
return info;
|
||
|
|
}
|