108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
/**
|
|
* Ertunç Özbay — Personal Engineering Website
|
|
* Theme toggle (Light / Dark), copy helpers, and image zoom
|
|
*/
|
|
(function () {
|
|
"use strict";
|
|
|
|
var STORAGE_KEY = "ertunc_site_theme";
|
|
var root = document.documentElement;
|
|
|
|
function applyTheme(theme) {
|
|
var mode = theme === "dark" ? "dark" : "light";
|
|
root.setAttribute("data-theme", mode);
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, mode);
|
|
} catch (e) {}
|
|
|
|
document.querySelectorAll(".theme-btn[data-set-theme]").forEach(function (btn) {
|
|
var isMatch = btn.getAttribute("data-set-theme") === mode;
|
|
btn.classList.toggle("active", isMatch);
|
|
btn.setAttribute("aria-pressed", isMatch ? "true" : "false");
|
|
});
|
|
}
|
|
|
|
var saved = null;
|
|
try {
|
|
saved = localStorage.getItem(STORAGE_KEY);
|
|
} catch (e) {}
|
|
applyTheme(saved === "dark" ? "dark" : "light");
|
|
|
|
document.querySelectorAll(".theme-btn[data-set-theme]").forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
applyTheme(btn.getAttribute("data-set-theme"));
|
|
});
|
|
});
|
|
|
|
// Copy Email Button
|
|
var copyEmailBtns = document.querySelectorAll("[data-copy-email]");
|
|
copyEmailBtns.forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
var email = btn.getAttribute("data-copy-email") || "ertunc.ozbay@outlook.com";
|
|
if (!navigator.clipboard) return;
|
|
navigator.clipboard.writeText(email).then(function () {
|
|
var orig = btn.textContent;
|
|
btn.textContent = "Copied: " + email;
|
|
setTimeout(function () {
|
|
btn.textContent = orig;
|
|
}, 2000);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Copy Code Block Button
|
|
document.querySelectorAll("[data-copy-code]").forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
var wrapper = btn.closest(".code-window");
|
|
if (!wrapper) return;
|
|
var codeEl = wrapper.querySelector("pre code");
|
|
if (!codeEl || !navigator.clipboard) return;
|
|
navigator.clipboard.writeText(codeEl.textContent).then(function () {
|
|
var orig = btn.textContent;
|
|
btn.textContent = "Copied";
|
|
setTimeout(function () {
|
|
btn.textContent = orig;
|
|
}, 1800);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Image Lightbox
|
|
var zoomImages = document.querySelectorAll(".zoomable-img");
|
|
if (zoomImages.length > 0) {
|
|
var backdrop = document.createElement("div");
|
|
backdrop.className = "lightbox-backdrop";
|
|
backdrop.hidden = true;
|
|
backdrop.innerHTML =
|
|
'<button type="button" class="lightbox-close" aria-label="Close image preview">Close (Esc)</button>' +
|
|
'<img class="lightbox-Backdrop-img" src="" alt="">' +
|
|
'<div class="lightbox-caption"></div>';
|
|
document.body.appendChild(backdrop);
|
|
|
|
var lbImg = backdrop.querySelector(".lightbox-Backdrop-img");
|
|
var lbCap = backdrop.querySelector(".lightbox-caption");
|
|
var lbClose = backdrop.querySelector(".lightbox-close");
|
|
|
|
function closeLightbox() {
|
|
backdrop.hidden = true;
|
|
lbImg.src = "";
|
|
}
|
|
|
|
zoomImages.forEach(function (img) {
|
|
img.addEventListener("click", function () {
|
|
lbImg.src = img.src;
|
|
lbImg.alt = img.alt || "";
|
|
lbCap.textContent = img.alt || "";
|
|
backdrop.hidden = false;
|
|
});
|
|
});
|
|
|
|
lbClose.addEventListener("click", closeLightbox);
|
|
backdrop.addEventListener("click", function (e) {
|
|
if (e.target === backdrop) closeLightbox();
|
|
});
|
|
document.addEventListener("keydown", function (e) {
|
|
if (e.key === "Escape" && !backdrop.hidden) closeLightbox();
|
|
});
|
|
}
|
|
})();
|