jQuery entfernen und Masonry.js auflösen #19

New Issue

2026-05-14T00:29:42+02:00

greggy commented

2026-05-14 00:29:42 +02:00

Problem

jQuery nur für minimale Funktionalität (~80 Zeilen). Masonry.js geladen aber nicht genutzt – 70KB unnötig.

Nutzen

Weniger JavaScript, schnellere Ladezeit, weniger Dependencies.

Technische Umsetzung

jQuery-Code in Vanilla JS umschreiben
jQuery und Masonry.js entfernen
Lightbox in Vanilla JS oder CSS-only
Akkordeon in Vanilla JS
Smooth scroll via CSS scroll-behavior: smooth

Aufwand: Mittel | Risiko: Niedrig | Empfehlung: Sinnvoll

## Problem jQuery nur für minimale Funktionalität (~80 Zeilen). Masonry.js geladen aber nicht genutzt – 70KB unnötig. ## Nutzen Weniger JavaScript, schnellere Ladezeit, weniger Dependencies. ## Technische Umsetzung 1. jQuery-Code in Vanilla JS umschreiben 2. jQuery und Masonry.js entfernen 3. Lightbox in Vanilla JS oder CSS-only 4. Akkordeon in Vanilla JS 5. Smooth scroll via CSS scroll-behavior: smooth ## Aufwand: Mittel | Risiko: Niedrig | Empfehlung: Sinnvoll

greggy added the KI label 2026-05-14 00:29:42 +02:00

greggy commented

2026-05-14 00:58:35 +02:00

Spezifikation: Issue #19 – jQuery entfernen und Masonry.js auflösen

Repo: greggy/landingpage-haus-schleusingen
Issue: #19
Komplexität: S (Small) – ~60-90 Min geschätzt
Datum: 2026-05-13

1. Ausgangslage

Die Landingpage haus-schleusingen.html nutzt jQuery 3.7.1 (via CDN) für ~80 Zeilen JS-Code in js/haus-schleusingen.js. Masonry.js liegt als Datei (js/masonry.pkgd.min.js) im Repo, wird aber weder im HTML geladen noch im JS referenziert – das Galerie-Layout ist bereits komplett per CSS columns umgesetzt.

Dateien im Repo

Datei	Relevanz
`haus-schleusingen.html`	Hauptseite, lädt jQuery (Zeile 8) und `haus-schleusingen.js` (Zeile 552)
`js/haus-schleusingen.js`	103 Zeilen, enthält gesamten jQuery-Code
`js/masonry.pkgd.min.js`	Tot – wird nirgends referenziert, kann gelöscht werden
`css/haus-schleusingen.css`	`.masonry-grid` per CSS columns, keine Abhängigkeit zu jQuery

jQuery-Nutzung (5 Funktionsbereiche)

Navbar-Scroll (Zeile 2-6) – Klasse .scrolled bei scrollTop > 60
Hero-Animation (Zeile 8-11) – Klassen .visible/.loaded nach 200ms Delay
Scroll-Animationen (Zeile 13-26) – .fact und [data-animate] sichtbar machen
Akkordeon (Zeile 28-37) – Etage-Aufklapp-Menü mit slideUp/slideDown
Lightbox (Zeile 39-62) – Bildervergrößerung (Öffnen/Schließen/Escape)
Formular (Zeile 64-91) – Kontaktformular → mailto: Link

2. Technische Spezifikation

Aufgabe 1: jQuery durch Vanilla JS ersetzen

Datei: js/haus-schleusingen.js – komplett neu schreiben

Feature	jQuery	Vanilla JS
Navbar-Scroll	`$(window).on("scroll", ...)`, `$(this).scrollTop()`	`window.addEventListener("scroll", ...)`, `window.scrollY`
Hero-Animation	`$("#heroContent").addClass(...)`	`document.getElementById("heroContent").classList.add(...)`
Scroll-Animationen	`$(".fact, [data-animate]").each(...)`, `el.offset().top`	`document.querySelectorAll(...)`, `el.getBoundingClientRect().top`
Akkordeon	`slideUp()/slideDown()`	CSS `max-height` Transition + `classList.toggle`
Lightbox	`$(document).on("click", ...)`, `$(this).data("img")`	`el.addEventListener("click", ...)`, `el.dataset.img`
Formular	`$("#fname").val()`, `$("#contactForm").on("submit", ...)`	`document.getElementById(...).value`, `form.addEventListener("submit", ...)`

Besonderheiten:

slideUp/slideDown: jQuery-Animation durch CSS-Lösung ersetzen:
- .floor-body bekommt max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
- .floor-item.open .floor-body bekommt max-height: <passender Wert>;
- Alternativ: scrollHeight auslesen und als max-height setzen (für variable Höhen)
Smooth Scroll: Statt JS scroll-behavior: smooth auf html via CSS
Scroll-Animation: IntersectionObserver statt manuellem Scroll-Event (performanter)

Aufgabe 2: jQuery `<script>`-Tag entfernen

Datei: haus-schleusingen.html, Zeile 8

Entfernen: <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Aufgabe 3: Masonry.js-Datei löschen

Löschen: js/masonry.pkgd.min.js
Wird nirgends geladen oder referenziert. Galerie nutzt bereits CSS columns.

Aufgabe 4: CSS ggf. anpassen

Smooth scroll: html { scroll-behavior: smooth; } hinzufügen (falls Anchor-Links genutzt werden)
Akkordeon-Transition via CSS statt jQuery slideUp/slideDown

3. Akzeptanzkriterien

jQuery-CDN-<script>-Tag aus HTML entfernt
js/masonry.pkgd.min.js gelöscht
js/haus-schleusingen.js funktioniert identisch mit Vanilla JS
Navbar-Scroll-Effekt unverändert (Klasse .scrolled bei Scroll)
Hero-Animation unverändert (Fade-in nach 200ms)
Scroll-Animationen unverändert (.fact, [data-animate] erscheinen beim Scrollen)
Akkordeon unverändert (Öffnen/Schließen mit Animation)
Lightbox unverändert (Klick öffnet, Klick/Escape schließt)
Kontaktformular unverändert (mailto:-Link, Success-Message)
Kein jQuery mehr im Code (grep bestätigt)
Keine Console-Fehler im Browser

4. Risiko & Edge Cases

Risiko	Maßnahme
Akkordeon-Animation sieht anders aus	CSS-Transition sorgfältig abstimmen, visuell testen
Scroll-Performance	`IntersectionObserver` statt scroll-Event für Animationen
Formular-Validierung	HTML5-Validierung bleibt bestehen (`required`-Attribute)
`data-img` Attribut	`dataset.img` statt `$(this).data("img")` beachten

5. Datei-Änderungen (Übersicht)

Datei	Aktion
`haus-schleusingen.html`	Zeile 8 entfernen (jQuery `<script>`)
`js/haus-schleusingen.js`	Komplett neu in Vanilla JS
`js/masonry.pkgd.min.js`	Löschen
`css/haus-schleusingen.css`	Optional: Akkordeon-Transition + smooth scroll ergänzen

6. Pipeline-Empfehlung

Komplexität S → Phase 4 (Test & QA) kann übersprungen werden. Nach Implementierung → Code Review → Merge.

# Spezifikation: Issue #19 – jQuery entfernen und Masonry.js auflösen **Repo:** `greggy/landingpage-haus-schleusingen` **Issue:** [#19](https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen/issues/19) **Komplexität:** **S** (Small) – ~60-90 Min geschätzt **Datum:** 2026-05-13 --- ## 1. Ausgangslage Die Landingpage `haus-schleusingen.html` nutzt jQuery 3.7.1 (via CDN) für ~80 Zeilen JS-Code in `js/haus-schleusingen.js`. Masonry.js liegt als Datei (`js/masonry.pkgd.min.js`) im Repo, wird aber **weder im HTML geladen noch im JS referenziert** – das Galerie-Layout ist bereits komplett per CSS columns umgesetzt. ### Dateien im Repo | Datei | Relevanz | |---|---| | `haus-schleusingen.html` | Hauptseite, lädt jQuery (Zeile 8) und `haus-schleusingen.js` (Zeile 552) | | `js/haus-schleusingen.js` | 103 Zeilen, enthält gesamten jQuery-Code | | `js/masonry.pkgd.min.js` | **Tot** – wird nirgends referenziert, kann gelöscht werden | | `css/haus-schleusingen.css` | `.masonry-grid` per CSS columns, keine Abhängigkeit zu jQuery | ### jQuery-Nutzung (5 Funktionsbereiche) 1. **Navbar-Scroll** (Zeile 2-6) – Klasse `.scrolled` bei scrollTop > 60 2. **Hero-Animation** (Zeile 8-11) – Klassen `.visible`/`.loaded` nach 200ms Delay 3. **Scroll-Animationen** (Zeile 13-26) – `.fact` und `[data-animate]` sichtbar machen 4. **Akkordeon** (Zeile 28-37) – Etage-Aufklapp-Menü mit slideUp/slideDown 5. **Lightbox** (Zeile 39-62) – Bildervergrößerung (Öffnen/Schließen/Escape) 6. **Formular** (Zeile 64-91) – Kontaktformular → mailto: Link --- ## 2. Technische Spezifikation ### Aufgabe 1: jQuery durch Vanilla JS ersetzen **Datei:** `js/haus-schleusingen.js` – komplett neu schreiben | Feature | jQuery | Vanilla JS | |---|---|---| | Navbar-Scroll | `$(window).on("scroll", ...)`, `$(this).scrollTop()` | `window.addEventListener("scroll", ...)`, `window.scrollY` | | Hero-Animation | `$("#heroContent").addClass(...)` | `document.getElementById("heroContent").classList.add(...)` | | Scroll-Animationen | `$(".fact, [data-animate]").each(...)`, `el.offset().top` | `document.querySelectorAll(...)`, `el.getBoundingClientRect().top` | | Akkordeon | `slideUp()/slideDown()` | CSS `max-height` Transition + `classList.toggle` | | Lightbox | `$(document).on("click", ...)`, `$(this).data("img")` | `el.addEventListener("click", ...)`, `el.dataset.img` | | Formular | `$("#fname").val()`, `$("#contactForm").on("submit", ...)` | `document.getElementById(...).value`, `form.addEventListener("submit", ...)` | #### Besonderheiten: - **slideUp/slideDown**: jQuery-Animation durch CSS-Lösung ersetzen: - `.floor-body` bekommt `max-height: 0; overflow: hidden; transition: max-height 0.3s ease;` - `.floor-item.open .floor-body` bekommt `max-height: <passender Wert>;` - Alternativ: `scrollHeight` auslesen und als `max-height` setzen (für variable Höhen) - **Smooth Scroll**: Statt JS `scroll-behavior: smooth` auf `html` via CSS - **Scroll-Animation**: `IntersectionObserver` statt manuellem Scroll-Event (performanter) ### Aufgabe 2: jQuery `<script>`-Tag entfernen **Datei:** `haus-schleusingen.html`, Zeile 8 ``` Entfernen: <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> ``` ### Aufgabe 3: Masonry.js-Datei löschen **Löschen:** `js/masonry.pkgd.min.js` Wird nirgends geladen oder referenziert. Galerie nutzt bereits CSS columns. ### Aufgabe 4: CSS ggf. anpassen - Smooth scroll: `html { scroll-behavior: smooth; }` hinzufügen (falls Anchor-Links genutzt werden) - Akkordeon-Transition via CSS statt jQuery slideUp/slideDown --- ## 3. Akzeptanzkriterien - [ ] jQuery-CDN-`<script>`-Tag aus HTML entfernt - [ ] `js/masonry.pkgd.min.js` gelöscht - [ ] `js/haus-schleusingen.js` funktioniert identisch mit Vanilla JS - [ ] Navbar-Scroll-Effekt unverändert (Klasse `.scrolled` bei Scroll) - [ ] Hero-Animation unverändert (Fade-in nach 200ms) - [ ] Scroll-Animationen unverändert (`.fact`, `[data-animate]` erscheinen beim Scrollen) - [ ] Akkordeon unverändert (Öffnen/Schließen mit Animation) - [ ] Lightbox unverändert (Klick öffnet, Klick/Escape schließt) - [ ] Kontaktformular unverändert (mailto:-Link, Success-Message) - [ ] Kein jQuery mehr im Code (grep bestätigt) - [ ] Keine Console-Fehler im Browser --- ## 4. Risiko & Edge Cases | Risiko | Maßnahme | |---|---| | Akkordeon-Animation sieht anders aus | CSS-Transition sorgfältig abstimmen, visuell testen | | Scroll-Performance | `IntersectionObserver` statt scroll-Event für Animationen | | Formular-Validierung | HTML5-Validierung bleibt bestehen (`required`-Attribute) | | `data-img` Attribut | `dataset.img` statt `$(this).data("img")` beachten | --- ## 5. Datei-Änderungen (Übersicht) | Datei | Aktion | |---|---| | `haus-schleusingen.html` | Zeile 8 entfernen (jQuery `<script>`) | | `js/haus-schleusingen.js` | Komplett neu in Vanilla JS | | `js/masonry.pkgd.min.js` | Löschen | | `css/haus-schleusingen.css` | Optional: Akkordeon-Transition + smooth scroll ergänzen | --- ## 6. Pipeline-Empfehlung **Komplexität S** → Phase 4 (Test & QA) kann übersprungen werden. Nach Implementierung → Code Review → Merge.

greggy added the ReadyForDev label 2026-05-14 00:58:48 +02:00

greggy referenced this issue from a commit

2026-05-14 01:07:04 +02:00

refactor(js): remove jQuery dependency and replace with vanilla JS

greggy referenced a pull request that will close this issue

2026-05-14 01:08:00 +02:00

Fix #19: Remove jQuery dependency, replace with vanilla JS #21

greggy commented

2026-05-14 01:09:00 +02:00

✅ Pipeline abgeschlossen – wartet auf Merge

PR: #21

Was wurde gemacht

jQuery 3.7.1 (CDN) vollständig entfernt
js/haus-schleusingen.js komplett in Vanilla JS neu geschrieben (~130 Zeilen)
Ungenutzte masonry.pkgd.min.js gelöscht
Performance-Verbesserung: IntersectionObserver statt scroll-Event

Ergebnis

✅ Code Review: APPROVED
✅ Abnahme: ACCEPTED (11/11 Akzeptanzkriterien erfüllt)
✅ PR #21 ist mergeable
📦 ~30KB weniger, keine externe Abhängigkeit mehr

Bitte PR #21 mergen. Issue wird danach geschlossen.

## ✅ Pipeline abgeschlossen – wartet auf Merge **PR:** [#21](https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen/pulls/21) ### Was wurde gemacht - jQuery 3.7.1 (CDN) vollständig entfernt - `js/haus-schleusingen.js` komplett in Vanilla JS neu geschrieben (~130 Zeilen) - Ungenutzte `masonry.pkgd.min.js` gelöscht - Performance-Verbesserung: IntersectionObserver statt scroll-Event ### Ergebnis - ✅ Code Review: APPROVED - ✅ Abnahme: ACCEPTED (11/11 Akzeptanzkriterien erfüllt) - ✅ PR #21 ist mergeable - 📦 ~30KB weniger, keine externe Abhängigkeit mehr **Bitte PR #21 mergen.** Issue wird danach geschlossen.

greggy added the Implementing InReview ReadyForMerge labels 2026-05-14 01:17:08 +02:00

greggy referenced this issue

2026-05-14 01:20:06 +02:00

Accessibility: ARIA-Labels, Focus-Management, Skip-Navigation #18

greggy commented

2026-05-14 01:20:07 +02:00

🔗 Blockiert: #18 (Accessibility)

Dieses Issue sollte VOR #18 gemergt werden, da #18 JS-Änderungen macht die auf der Vanilla-JS-Basis aufsetzen sollten.

🔗 **Blockiert:** #18 (Accessibility) Dieses Issue sollte VOR #18 gemergt werden, da #18 JS-Änderungen macht die auf der Vanilla-JS-Basis aufsetzen sollten.

greggy referenced this issue from a commit

2026-05-15 09:57:24 +02:00

refactor(js): remove jQuery dependency and replace with vanilla JS

greggy closed this issue

2026-05-15 10:29:56 +02:00

greggy referenced this issue from a commit

2026-05-15 10:29:57 +02:00

Merge pull request 'Fix #19: Remove jQuery dependency, replace with vanilla JS' (#21) from feature/issue-19-remove-jquery-masonry into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: greggy/landingpage-haus-schleusingen#19

jQuery entfernen und Masonry.js auflösen #19

Problem

Nutzen

Technische Umsetzung

Aufwand: Mittel | Risiko: Niedrig | Empfehlung: Sinnvoll

Spezifikation: Issue #19 – jQuery entfernen und Masonry.js auflösen

1. Ausgangslage

Dateien im Repo

jQuery-Nutzung (5 Funktionsbereiche)

2. Technische Spezifikation

Aufgabe 1: jQuery durch Vanilla JS ersetzen

Besonderheiten:

Aufgabe 2: jQuery <script>-Tag entfernen

Aufgabe 3: Masonry.js-Datei löschen

Aufgabe 4: CSS ggf. anpassen

3. Akzeptanzkriterien

4. Risiko & Edge Cases

5. Datei-Änderungen (Übersicht)

6. Pipeline-Empfehlung

✅ Pipeline abgeschlossen – wartet auf Merge

Was wurde gemacht

Ergebnis

Aufgabe 2: jQuery `<script>`-Tag entfernen