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.
88 lines
2.3 KiB
88 lines
2.3 KiB
/*
|
|
* main.js
|
|
* functions to power my portfolio
|
|
* Author: phga/teord
|
|
* Date: 2019-10-18
|
|
* Version: 1.0
|
|
*/
|
|
document.addEventListener("DOMContentLoaded", run);
|
|
// global var to control the animation of the text
|
|
var runTextAnimation = true;
|
|
function run() {
|
|
initializeClickHandler();
|
|
}
|
|
|
|
function initializeClickHandler() {
|
|
let welcome = document.getElementById("welcome");
|
|
flyingText(welcome);
|
|
document.addEventListener("click", (e) => {
|
|
let overlay = document.getElementById("info-box");
|
|
let curr = e.target;
|
|
if (curr.className === "thumb") {
|
|
runTextAnimation = false;
|
|
hideElement(welcome);
|
|
handleThumb(overlay, curr);
|
|
} else if (curr.id === "btn-close") {
|
|
runTextAnimation = true;
|
|
flyingText(welcome);
|
|
hideElement(overlay);
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleThumb(overlay, elem) {
|
|
let imgName = elem.dataset.img;
|
|
showOverlay(overlay, imgName);
|
|
}
|
|
|
|
function showOverlay(overlay, imgName) {
|
|
let info = getInfoForImg(imgName);
|
|
let magni = document.getElementById("zoom");
|
|
let infoTable = document.getElementById("img-description");
|
|
let img = document.createElement("img");
|
|
// call my zoom function (zoom.js)
|
|
img.addEventListener("load", () => {zoom(0.4, imgName)});
|
|
img.src = `/inc/images/${imgName}.jpg`;
|
|
img.id = imgName;
|
|
img.alt = imgName;
|
|
|
|
magni.innerHTML = "";
|
|
magni.appendChild(img);
|
|
|
|
infoTable.innerHTML =
|
|
` <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 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> `;
|
|
overlay.classList.remove("hidden");
|
|
}
|
|
|
|
function hideElement(elem) {
|
|
elem.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;
|
|
}
|