merge: resolve conflicts with main (WebP + vanilla JS + a11y)
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 32s
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 32s
This commit is contained in:
Claw
@@ -1,88 +1,216 @@
|
||||
$(function () {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Navbar scroll
|
||||
$(window).on("scroll", function () {
|
||||
if ($(this).scrollTop() > 60) $("#navbar").addClass("scrolled");
|
||||
else $("#navbar").removeClass("scrolled");
|
||||
var navbar = document.getElementById("navbar");
|
||||
window.addEventListener("scroll", function () {
|
||||
if (window.scrollY > 60) navbar.classList.add("scrolled");
|
||||
else navbar.classList.remove("scrolled");
|
||||
});
|
||||
|
||||
// Hero animation on load
|
||||
setTimeout(function () {
|
||||
$("#heroContent").addClass("visible");
|
||||
$("#heroBg").addClass("loaded");
|
||||
document.getElementById("heroContent").classList.add("visible");
|
||||
document.getElementById("heroBg").classList.add("loaded");
|
||||
}, 200);
|
||||
|
||||
// Scroll animations
|
||||
function checkVisible() {
|
||||
$(".fact, [data-animate]").each(function () {
|
||||
var el = $(this);
|
||||
var top = el.offset().top;
|
||||
var windowBottom = $(window).scrollTop() + $(window).height();
|
||||
if (windowBottom > top + 60) {
|
||||
el.addClass("visible");
|
||||
el.css({ opacity: 1, transform: "translateY(0)" });
|
||||
}
|
||||
// Scroll animations via IntersectionObserver
|
||||
var animElements = document.querySelectorAll(".fact, [data-animate]");
|
||||
animElements.forEach(function (el) {
|
||||
el.style.opacity = "0";
|
||||
el.style.transform = "translateY(30px)";
|
||||
el.style.transition = "opacity 0.8s ease, transform 0.8s ease";
|
||||
});
|
||||
|
||||
if ("IntersectionObserver" in window) {
|
||||
var observer = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("visible");
|
||||
entry.target.style.opacity = "1";
|
||||
entry.target.style.transform = "translateY(0)";
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ rootMargin: "0px 0px -60px 0px" }
|
||||
);
|
||||
animElements.forEach(function (el) {
|
||||
observer.observe(el);
|
||||
});
|
||||
} else {
|
||||
// Fallback: show all immediately
|
||||
animElements.forEach(function (el) {
|
||||
el.classList.add("visible");
|
||||
el.style.opacity = "1";
|
||||
el.style.transform = "translateY(0)";
|
||||
});
|
||||
}
|
||||
$("[data-animate]").css({
|
||||
opacity: 0,
|
||||
transform: "translateY(30px)",
|
||||
transition: "opacity 0.8s ease, transform 0.8s ease",
|
||||
});
|
||||
$(window).on("scroll", checkVisible);
|
||||
checkVisible();
|
||||
|
||||
// Floor accordion
|
||||
$(".floor-header").on("click", function () {
|
||||
var item = $(this).closest(".floor-item");
|
||||
var isOpen = item.hasClass("open");
|
||||
$(".floor-item").removeClass("open");
|
||||
$(".floor-body").slideUp(300);
|
||||
if (!isOpen) {
|
||||
item.addClass("open");
|
||||
item.find(".floor-body").slideDown(300);
|
||||
}
|
||||
});
|
||||
// Floor accordion (vanilla JS + a11y)
|
||||
document.querySelectorAll(".floor-header").forEach(function (header) {
|
||||
header.addEventListener("click", function () {
|
||||
var item = this.closest(".floor-item");
|
||||
var isOpen = item.classList.contains("open");
|
||||
var allItems = document.querySelectorAll(".floor-item");
|
||||
|
||||
// Lightbox – gallery grid items
|
||||
$(document).on("click", ".grid-item", function () {
|
||||
var src = $(this).data("img") || $(this).find("img").attr("src");
|
||||
$("#lightboxImg").off("error").on("error", function () {
|
||||
// WebP fallback: try original format
|
||||
if ($(this).attr('src').endsWith('.webp')) {
|
||||
$(this).attr('src', src.replace(/\.webp$/, '.png'));
|
||||
// Close all
|
||||
allItems.forEach(function (fi) {
|
||||
fi.classList.remove("open");
|
||||
var hdr = fi.querySelector(".floor-header");
|
||||
if (hdr) hdr.setAttribute("aria-expanded", "false");
|
||||
var body = fi.querySelector(".floor-body");
|
||||
if (body) body.style.display = "none";
|
||||
});
|
||||
|
||||
// Open clicked if it was closed
|
||||
if (!isOpen) {
|
||||
item.classList.add("open");
|
||||
this.setAttribute("aria-expanded", "true");
|
||||
var body = item.querySelector(".floor-body");
|
||||
if (body) body.style.display = "block";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Accordion keyboard handler (Enter/Space)
|
||||
document.querySelectorAll(".floor-header").forEach(function (header) {
|
||||
header.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Lightbox – track last focused element for focus return
|
||||
var lightboxTrigger = null;
|
||||
|
||||
function openLightbox(src) {
|
||||
lightboxTrigger = document.activeElement;
|
||||
var img = document.getElementById("lightboxImg");
|
||||
// WebP fallback: if .webp fails, try original format
|
||||
img.onerror = function () {
|
||||
if (img.getAttribute('src').endsWith('.webp')) {
|
||||
img.setAttribute('src', src.replace(/\.webp$/, '.png'));
|
||||
}
|
||||
};
|
||||
img.setAttribute("src", src);
|
||||
img.setAttribute("alt", "");
|
||||
document.getElementById("lightbox").classList.add("open");
|
||||
document.body.style.overflow = "hidden";
|
||||
// Set focus to close button
|
||||
setTimeout(function () {
|
||||
document.getElementById("lightboxClose").focus();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
document.getElementById("lightbox").classList.remove("open");
|
||||
document.body.style.overflow = "";
|
||||
// Return focus to trigger
|
||||
if (lightboxTrigger) {
|
||||
lightboxTrigger.focus();
|
||||
lightboxTrigger = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Lightbox – gallery grid items
|
||||
document.querySelectorAll(".grid-item").forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
var src = this.dataset.img || this.querySelector("img").getAttribute("src");
|
||||
openLightbox(src);
|
||||
});
|
||||
});
|
||||
|
||||
// Gallery keyboard handler (Enter/Space)
|
||||
document.querySelectorAll(".grid-item").forEach(function (item) {
|
||||
item.setAttribute("tabindex", "0");
|
||||
item.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
$("#lightboxImg").attr("src", src);
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
});
|
||||
|
||||
// Lightbox – floor plan images in Raumaufteilung
|
||||
$(document).on("click", ".floor-plan img[data-img]", function () {
|
||||
var src = $(this).data("img");
|
||||
$("#lightboxImg").off("error").on("error", function () {
|
||||
if ($(this).attr('src').endsWith('.webp')) {
|
||||
$(this).attr('src', src.replace(/\.webp$/, '.png'));
|
||||
}
|
||||
document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) {
|
||||
img.addEventListener("click", function () {
|
||||
openLightbox(this.dataset.img);
|
||||
});
|
||||
$("#lightboxImg").attr("src", src);
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
});
|
||||
$("#lightboxClose, #lightbox").on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$("#lightbox").removeClass("open");
|
||||
$("body").css("overflow", "");
|
||||
}
|
||||
|
||||
|
||||
|
||||
document.getElementById("lightboxClose").addEventListener("click", closeLightbox);
|
||||
document.getElementById("lightbox").addEventListener("click", function (e) {
|
||||
if (e.target === this) closeLightbox();
|
||||
});
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
$("#lightbox").removeClass("open");
|
||||
$("body").css("overflow", "");
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") closeLightbox();
|
||||
});
|
||||
|
||||
// Focus trap for lightbox
|
||||
document.getElementById("lightbox").addEventListener("keydown", function (e) {
|
||||
if (e.key !== "Tab") return;
|
||||
|
||||
var focusable = this.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
|
||||
focusable = Array.from(focusable).filter(function (el) { return el.offsetParent !== null; });
|
||||
if (focusable.length === 0) return;
|
||||
|
||||
var first = focusable[0];
|
||||
var last = focusable[focusable.length - 1];
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Form submit is handled server-side by PHP – no JS intervention needed.
|
||||
// Form submit – opens email client with pre-filled mailto: link
|
||||
document.getElementById("contactForm").addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var fname = document.getElementById("fname").value.trim();
|
||||
var lname = document.getElementById("lname").value.trim();
|
||||
var email = document.getElementById("email").value.trim();
|
||||
var phone = document.getElementById("phone").value.trim();
|
||||
var interest = document.getElementById("interest").value;
|
||||
var message = document.getElementById("message").value.trim();
|
||||
|
||||
var subject = "Kontaktanfrage: " + interest;
|
||||
var body = "Von: " + fname + " " + lname + "\n";
|
||||
body += "E-Mail: " + email + "\n";
|
||||
if (phone) body += "Telefon: " + phone + "\n";
|
||||
body += "Anliegen: " + interest + "\n\n";
|
||||
body += message;
|
||||
|
||||
var mailto =
|
||||
"mailto:mki@kies-media.de" +
|
||||
"?subject=" + encodeURIComponent(subject) +
|
||||
"&body=" + encodeURIComponent(body);
|
||||
|
||||
window.location.href = mailto;
|
||||
|
||||
// Show success message
|
||||
this.style.display = "none";
|
||||
var success = document.getElementById("formSuccess");
|
||||
success.style.display = "block";
|
||||
success.style.opacity = "0";
|
||||
success.style.transition = "opacity 0.4s ease";
|
||||
requestAnimationFrame(function () {
|
||||
success.style.opacity = "1";
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile hamburger menu (vanilla JS)
|
||||
|
||||
Reference in New Issue
Block a user