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

jQuery entfernen und Masonry.js auflösen #19

New Issue
Closed
opened 2026-05-14 00:29:42 +02:00 by greggy · 3 comments
greggy commented 2026-05-14 00:29:42 +02:00
Owner
Copy Link

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

## 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
Author
Owner
Copy Link

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)

  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.

# 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 commented 2026-05-14 01:09:00 +02:00
Author
Owner
Copy Link

✅ 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 commented 2026-05-14 01:20:07 +02:00
Author
Owner
Copy Link

🔗 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.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Implementing
InQA
InReview
InValidation
KI
Von KI bearbeitet
KI
KI
KI
ReadyForDev
Bereit zur Implementierung
ReadyForMerge
No Label
Implementing
InReview
KI
ReadyForDev
ReadyForMerge
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
greggy
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: greggy/landingpage-haus-schleusingen#19
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?