129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
/* Tema anahtarı + slider'lar + flash otomatik kapanma */
|
||
(function () {
|
||
"use strict";
|
||
|
||
// ---- Dark / light tema ----
|
||
var root = document.documentElement;
|
||
var stored = null;
|
||
try { stored = localStorage.getItem("key-theme"); } catch (e) {}
|
||
if (stored === "dark" || stored === "light") {
|
||
root.setAttribute("data-theme", stored);
|
||
} else {
|
||
root.setAttribute("data-theme", "light");
|
||
}
|
||
|
||
var toggle = document.getElementById("themeToggle");
|
||
if (toggle) {
|
||
toggle.addEventListener("click", function () {
|
||
var next = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
|
||
root.setAttribute("data-theme", next);
|
||
try { localStorage.setItem("key-theme", next); } catch (e) {}
|
||
});
|
||
}
|
||
|
||
// ---- Slider'lar ----
|
||
document.querySelectorAll(".slider").forEach(function (slider) {
|
||
var images = Array.prototype.slice.call(slider.querySelectorAll(".slides img"));
|
||
if (images.length === 0) return;
|
||
var current = 0;
|
||
var interval = parseInt(slider.getAttribute("data-interval") || "4000", 10);
|
||
var timer = null;
|
||
|
||
var dotsBox = slider.querySelector(".dots");
|
||
images.forEach(function (_, i) {
|
||
var d = document.createElement("span");
|
||
d.setAttribute("role", "button");
|
||
d.setAttribute("aria-label", "Görsel " + (i + 1));
|
||
d.addEventListener("click", function (ev) {
|
||
ev.stopPropagation();
|
||
go(i);
|
||
restart();
|
||
});
|
||
dotsBox.appendChild(d);
|
||
});
|
||
var dots = Array.prototype.slice.call(dotsBox.children);
|
||
|
||
function show() {
|
||
images.forEach(function (img, i) {
|
||
img.classList.toggle("active", i === current);
|
||
});
|
||
dots.forEach(function (d, i) {
|
||
d.classList.toggle("active", i === current);
|
||
});
|
||
}
|
||
|
||
function go(i) {
|
||
current = (i + images.length) % images.length;
|
||
show();
|
||
}
|
||
|
||
function next() { go(current + 1); }
|
||
function prev() { go(current - 1); }
|
||
function restart() {
|
||
if (timer) clearInterval(timer);
|
||
timer = setInterval(next, interval);
|
||
}
|
||
|
||
slider.querySelector(".next").addEventListener("click", function (ev) {
|
||
ev.stopPropagation();
|
||
next();
|
||
restart();
|
||
});
|
||
slider.querySelector(".prev").addEventListener("click", function (ev) {
|
||
ev.stopPropagation();
|
||
prev();
|
||
restart();
|
||
});
|
||
|
||
slider.addEventListener("mouseenter", function () {
|
||
if (timer) clearInterval(timer);
|
||
});
|
||
slider.addEventListener("mouseleave", restart);
|
||
|
||
images.forEach(function (img) {
|
||
img.classList.add("clickable");
|
||
img.addEventListener("click", function (ev) {
|
||
ev.stopPropagation();
|
||
openLightbox(img.src);
|
||
});
|
||
});
|
||
|
||
show();
|
||
restart();
|
||
});
|
||
|
||
// ---- Lightbox ----
|
||
var lightbox = document.getElementById("lightbox");
|
||
var lightboxImg = lightbox ? lightbox.querySelector("img") : null;
|
||
var lightboxClose = lightbox ? lightbox.querySelector(".lightbox-close") : null;
|
||
|
||
function openLightbox(src) {
|
||
if (!lightbox || !lightboxImg) return;
|
||
lightboxImg.src = src;
|
||
lightbox.classList.add("open");
|
||
lightbox.setAttribute("aria-hidden", "false");
|
||
}
|
||
function closeLightbox() {
|
||
if (!lightbox) return;
|
||
lightbox.classList.remove("open");
|
||
lightbox.setAttribute("aria-hidden", "true");
|
||
lightboxImg.src = "";
|
||
}
|
||
if (lightbox) {
|
||
lightbox.addEventListener("click", function (ev) {
|
||
if (ev.target === lightbox || ev.target === lightboxClose) closeLightbox();
|
||
});
|
||
document.addEventListener("keydown", function (ev) {
|
||
if (ev.key === "Escape") closeLightbox();
|
||
});
|
||
}
|
||
|
||
// ---- Flash mesajları ----
|
||
setTimeout(function () {
|
||
document.querySelectorAll(".flash").forEach(function (el) {
|
||
el.style.transition = "opacity .8s ease";
|
||
el.style.opacity = "0";
|
||
setTimeout(function () { el.remove(); }, 800);
|
||
});
|
||
}, 5000);
|
||
})(); |