https://grueneliga.de/templates/ig_grueneliga_v9/js/template.js?cd425d

1/**
2 * ig-grueneliga_v9 template JS
3 */
4
5
6/* ==========================================================================
7   Back to top
8   ========================================================================== */
9
10document.addEventListener('DOMContentLoaded', () => {
11
12    const backToTop = document.getElementById('back-top');
13
14    function checkScrollPos() {
15        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
16            backToTop?.classList.add('visible');
17        } else {
18            backToTop?.classList.remove('visible');
19        }
20    }
21
22    if (backToTop) {
23        checkScrollPos();
24        window.addEventListener('scroll', checkScrollPos);
25        backToTop.addEventListener('click', (ev) => {
26            ev.preventDefault();
27            window.scrollTo({ top: 0, behavior: 'smooth' });
28        });
29    }
30
31    // If any lazy stylesheets exist, activate them.
32    document.head.querySelectorAll('link[rel="lazy-stylesheet"]').forEach((link) => {
33        link.rel = 'stylesheet';
34    });
35});
36
37
38/* ==========================================================================
39   Masonry-Berechnung für Blog-Ansicht
40   ========================================================================== */
41document.addEventListener('DOMContentLoaded', function () {
42
43    const grid       = document.querySelector('.blog-items.masonry-js');
44    const pagination = document.querySelector('.ig-pagination');
45    const itemsMore  = document.querySelector('.ig-items-more');
46
47    if (!grid) {
48        return;
49    }
50
51    const mq = window.matchMedia('(max-width: 768px)');
52
53    function resetMobile(items) {
54        grid.style.position = '';
55        grid.style.height   = '';
56
57        items.forEach(item => {
58            item.style.position = '';
59            item.style.width    = '';
60            item.style.transform = '';
61            item.style.left     = '';
62            item.style.top      = '';
63        });
64    }
65
66    function layout() {
67
68        const items = Array.from(grid.querySelectorAll('.blog-item'));
69
70        // Mobile-Ansicht: Masonry deaktivieren
71        if (mq.matches) {
72            resetMobile(items);
73
74            // Pagination und "Mehr"-Link freigeben
75            if (pagination) {
76                pagination.classList.add('loaded');
77            }
78            if (itemsMore) {
79                itemsMore.classList.add('loaded');
80            }
81            return;
82        }
83
84        const gutter     = 32;
85        const columns    = 2;
86        const colHeights = new Array(columns).fill(0);
87        const gridWidth  = grid.clientWidth;
88        const itemWidth  = (gridWidth - gutter) / columns;
89
90        grid.style.position = 'relative';
91
92        items.forEach(item => {
93            item.style.position = 'absolute';
94            item.style.width    = itemWidth + 'px';
95
96            const minCol = colHeights.indexOf(Math.min(...colHeights));
97            const x      = minCol * (itemWidth + gutter);
98            const y      = colHeights[minCol];
99
100            item.style.left = x + 'px';
101            item.style.top  = y + 'px';
102
103            colHeights[minCol] += item.offsetHeight + gutter;
104        });
105
106        grid.style.height = Math.max(...colHeights) + 'px';
107
108        // Pagination und "Mehr"-Link erst jetzt freigeben
109        if (pagination) {
110            pagination.classList.add('loaded');
111        }
112        if (itemsMore) {
113            itemsMore.classList.add('loaded');
114        }
115    }
116
117    // Layout sofort berechnen
118    layout();
119
120    // Nach vollständigem Laden (Bilder etc.) erneut layouten
121    window.addEventListener('load', layout);
122    window.addEventListener('resize', layout);
123    mq.addEventListener('change', layout);
124
125    // Layout nach jedem Bild-Load aktualisieren
126    const images      = grid.querySelectorAll('img');
127    let loadedCount   = 0;
128
129    images.forEach(img => {
130        if (img.complete) {
131            loadedCount++;
132        } else {
133            img.addEventListener('load', () => {
134                loadedCount++;
135                if (loadedCount === images.length) {
136                    layout();
137                }
138            });
139        }
140    });

141
142    if (loadedCount === images.length) {
143        layout();
144    }
145});