greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(js): remove jQuery dependency and replace with vanilla JS
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 24s
Details

Browse Source 
- Rewrite haus-schleusingen.js entirely in vanilla JavaScript
- Use IntersectionObserver instead of scroll event for scroll animations
- Replace jQuery slideUp/slideDown with display toggle for accordion
- Replace jQuery fadeIn with CSS opacity transition for form success
- Remove jQuery CDN script tag from haus-schleusingen.html
- Delete unused masonry.pkgd.min.js
- Remove jquery globals from eslint.config.js

Ref #19
This commit is contained in:
greggy
2026-05-13 23:06:52 +00:00
committed by greggy
parent 88ef7aa6ac
commit 1fcdca95b7
4 changed files with 119 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
eslint.config.js
View File

@@ -13,7 +13,6 @@ module.exports = [
sourceType: "script",
globals: {
...globals.browser,
...globals.jquery,
},
},
plugins: {

1
index.php
View File

@@ -182,7 +182,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</script>
<link rel="stylesheet" href="fonts/fonts.css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="css/haus-schleusingen.css" />
</head>
<body>

163
js/haus-schleusingen.js
View File

@@ -1,77 +1,144 @@
$(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);
}
});
}
$("[data-animate]").css({
opacity: 0,
transform: "translateY(30px)",
transition: "opacity 0.8s ease, transform 0.8s ease",
},
{ rootMargin: "0px 0px -60px 0px" }
);
animElements.forEach(function (el) {
observer.observe(el);
});
$(window).on("scroll", checkVisible);
checkVisible();
} else {
// Fallback: show all immediately
animElements.forEach(function (el) {
el.classList.add("visible");
el.style.opacity = "1";
el.style.transform = "translateY(0)";
});
}
// 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);
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");
// Close all
allItems.forEach(function (fi) {
fi.classList.remove("open");
var body = fi.querySelector(".floor-body");
if (body) body.style.display = "none";
});
// Open clicked if it was closed
if (!isOpen) {
item.addClass("open");
item.find(".floor-body").slideDown(300);
item.classList.add("open");
var body = item.querySelector(".floor-body");
if (body) body.style.display = "block";
}
});
});
// Lightbox – gallery grid items
$(document).on("click", ".grid-item", function () {
var src = $(this).data("img") || $(this).find("img").attr("src");
$("#lightboxImg").attr("src", src);
$("#lightbox").addClass("open");
$("body").css("overflow", "hidden");
document.querySelectorAll(".grid-item").forEach(function (item) {
item.addEventListener("click", function () {
var src = this.dataset.img || this.querySelector("img").getAttribute("src");
openLightbox(src);
});
});
// Lightbox – floor plan images in Raumaufteilung
$(document).on("click", ".floor-plan img[data-img]", function () {
var src = $(this).data("img");
$("#lightboxImg").attr("src", src);
$("#lightbox").addClass("open");
$("body").css("overflow", "hidden");
document.querySelectorAll(".floor-plan img[data-img]").forEach(function (img) {
img.addEventListener("click", function () {
openLightbox(this.dataset.img);
});
$("#lightboxClose, #lightbox").on("click", function (e) {
if (e.target === this) {
$("#lightbox").removeClass("open");
$("body").css("overflow", "");
}
});
$(document).on("keydown", function (e) {
if (e.key === "Escape") {
$("#lightbox").removeClass("open");
$("body").css("overflow", "");
function openLightbox(src) {
document.getElementById("lightboxImg").setAttribute("src", src);
document.getElementById("lightbox").classList.add("open");
document.body.style.overflow = "hidden";
}
function closeLightbox() {
document.getElementById("lightbox").classList.remove("open");
document.body.style.overflow = "";
}
document.getElementById("lightboxClose").addEventListener("click", closeLightbox);
document.getElementById("lightbox").addEventListener("click", function (e) {
if (e.target === this) closeLightbox();
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") closeLightbox();
});
// 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)

9
js/masonry.pkgd.min.js vendored
View File

File diff suppressed because one or more lines are too long