https://www.gruenkraut.de/site/Gruenkraut/resourceCached/24.2.0.10/js/functions-quadrate.js

1// ====== Quadrate CONTENT
2// Desc: Innerhalb der l-page
3function addQuadrateSpansContent() {
4    const container = document.querySelector('.l-content');
5    if (!container) return;
6
7    const quadrateDiv = document.createElement('div');
8    quadrateDiv.className = 'quadrateContent';
9
10    ['gewicht-1', 'gewicht-2', 'gewicht-3'].forEach(klasse => {
11        const span = document.createElement('span');
12        span.className = klasse;
13        quadrateDiv.appendChild(span);
14    });
15
16    container.appendChild(quadrateDiv);
17}
18
19// Beim Laden direkt ausführen
20document.addEventListener('DOMContentLoaded', addQuadrateSpansContent);
21
22// ====== Quadrate FOOTER
23// Desc: Innerhalb der l-footer (zwei Quadrate)
24function addQuadrateSpansFooter() {
25    const container = document.querySelector('.l-footer');
26    if (!container) return;
27
28    const quadrateDiv = document.createElement('div');
29    quadrateDiv.className = 'quadrate--footer';
30
31    ['gewicht-1', 'gewicht-2'].forEach(klasse => {
32        const span = document.createElement('span');
33        span.className = klasse;
34        quadrateDiv.appendChild(span);
35    });
36
37    container.appendChild(quadrateDiv);
38}
39// Beim Laden direkt ausführen
40document.addEventListener('DOMContentLoaded', addQuadrateSpansFooter);
41
42
43// ====== Quadrate CONTENT - Boxen (Hellgrün)
44// Desc: Vorlage .v-box mit Namenszusats .hellgruen
45function addQuadrateSpansContentBox() {
46    const container = document.querySelector('.v-box.hellgruen');
47    if (!container) return;
48
49    const quadrateDiv = document.createElement('div');
50    quadrateDiv.className = 'quadrate';
51
52    ['gewicht-1', 'gewicht-2', 'gewicht-3'].forEach(klasse => {
53        const span = document.createElement('span');
54        span.className = klasse;
55        quadrateDiv.appendChild(span);
56    });
57
58    container.appendChild(quadrateDiv);
59}
60// Beim Laden direkt ausführen
61document.addEventListener('DOMContentLoaded', addQuadrateSpansContentBox);
62
63
64// ====== Quadrate CONTENT - Teaser
65function addQuadrateSpansTeaser() {
66    const containers = document.querySelectorAll('.teaser');
67    if (!containers.length) return;
68
69    containers.forEach(container => {
70        const quadrateDivTeaser = document.createElement('div');
71        quadrateDivTeaser.className = 'quadrate--teaser';
72
73        ['gewicht-1', 'gewicht-2', 'gewicht-3'].forEach(klasse => {
74            const span = document.createElement('span');
75            span.className = klasse;
76            quadrateDivTeaser.appendChild(span);
77        });
78
79        container.appendChild(quadrateDivTeaser);
80    });
81}
82
83
84// Beim Laden direkt ausführen
85document.addEventListener('DOMContentLoaded', addQuadrateSpansTeaser);
86
87// ====== Quadrate CONTENT - Boxen (Kontaktbox - Teil 1)
88// Desc: Vorlage .v-box mit Namenszusats .kontaktbox
89// function addQuadrateSpansContentBox2() {
90//     const container = document.querySelector('.v-box.kontaktbox');
91//     if (!container) return;
92
93//     const quadrateDiv = document.createElement('div');
94//     quadrateDiv.className = 'quadrate-kontaktbox';
95
96//     ['gewicht-1', 'gewicht-3'].forEach(klasse => {
97//         const span = document.createElement('span');
98//         span.className = klasse;
99//         quadrateDiv.appendChild(span);
100//     });
101
102//     // Füge quadrateDiv direkt nach dem container (nach .kontaktbox) ein
103//     //container.insertAdjacentElement('afterend', quadrateDiv);
104//     //container.appendChild(quadrateDiv);
105//     container.insertBefore(quadrateDiv, container.firstChild);
106
107// }
108// // Beim Laden direkt ausführen
109// document.addEventListener('DOMContentLoaded', addQuadrateSpansContentBox2);
110
111// // ====== Quadrate CONTENT - Boxen (Kontaktbox - Teil 2)
112// // Desc: Vorlage .v-box mit Namenszusats .kontaktbox
113// function addQuadrateSpansContentBox3() {
114//     const container = document.querySelector('.kontaktdaten');
115//     if (!container) return;
116
117//     const quadrateDiv = document.createElement('div');
118//     quadrateDiv.className = 'quadrate-kontaktbox';
119
120//     ['gewicht-2'].forEach(klasse => {
121//         const span = document.createElement('span');
122//         span.className = klasse;
123//         quadrateDiv.appendChild(span);

124//     });
125
126//     // Füge quadrateDiv direkt nach dem container (nach .kontaktbox) ein
127//     //container.insertAdjacentElement('afterend', quadrateDiv);
128//     container.appendChild(quadrateDiv);
129//     //container.insertBefore(quadrateDiv, container.firstChild);
130
131// }
132// // Beim Laden direkt ausführen
133// document.addEventListener('DOMContentLoaded', addQuadrateSpansContentBox3);
134
135
136
137
138// ====== Quadrate CONTENT - Boxen (Kontaktbox - Teil 1)
139// Desc: Vorlage .v-box mit Namenszusats .kontaktbox
140function addQuadrateSpansContentBox2() {
141    const containerList = document.querySelectorAll('.v-box.kontaktbox');
142    if (!containerList.length) return;
143
144    containerList.forEach(container => {
145        const quadrateDiv = document.createElement('div');
146        quadrateDiv.className = 'quadrate-kontaktbox';
147
148        ['gewicht-1', 'gewicht-3'].forEach(klasse => {
149            const span = document.createElement('span');
150            span.className = klasse;
151            quadrateDiv.appendChild(span);
152        });
153
154        container.insertBefore(quadrateDiv, container.firstChild);
155    });
156}
157
158document.addEventListener('DOMContentLoaded', addQuadrateSpansContentBox2);
159
160
161// // ====== Quadrate CONTENT - Boxen (Kontaktbox - Teil 2)
162// // Desc: Vorlage .v-box mit Namenszusats .kontaktbox
163
164function addQuadrateSpansContentBox3() {
165    const containerList = document.querySelectorAll('.kontaktdaten');
166    if (!containerList.length) return;
167
168    containerList.forEach(container => {
169        const quadrateDiv = document.createElement('div');
170        quadrateDiv.className = 'quadrate-kontaktbox';
171
172        ['gewicht-2'].forEach(klasse => {
173            const span = document.createElement('span');
174            span.className = klasse;
175            quadrateDiv.appendChild(span);
176        });
177
178        container.appendChild(quadrateDiv);
179    });
180}
181
182document.addEventListener('DOMContentLoaded', addQuadrateSpansContentBox3);
183
184
185// ====== Quadrate Teaser V2
186// Desc: Innerhalb der l-page
187// function addQuadrateSpansTeaser() {
188//     const container = document.querySelector('.teaser');
189//     if (!container) return;
190
191//     const quadrateDivTeaser = document.createElement('div');
192//     quadrateDivTeaser.className = 'quadrateTeaser';
193
194//     ['gewicht-1', 'gewicht-2', 'gewicht-3'].forEach(klasse => {
195//         const span = document.createElement('span');
196//         span.className = klasse;
197//         quadrateDivTeaser.appendChild(span);
198//     });
199
200//     container.appendChild(quadrateDivTeaser);
201// }
202
203// // Beim Laden direkt ausführen
204// document.addEventListener('DOMContentLoaded', addQuadrateSpansTeaser);
205
206// function addQuadrateSpansContent() {
207//     const container = document.querySelector('.l-content');
208
209//     if (!container) return;
210
211//     const quadrateDiv = document.createElement('div');
212//     quadrateDiv.classList.add('quadrate');
213
214//     // Drei unterschiedlich gewichtete Spans erstellen
215//     const span1 = document.createElement('span');
216//     span1.classList.add('gewicht-1');
217
218//     const span2 = document.createElement('span');
219//     span2.classList.add('gewicht-2');
220
221//     const span3 = document.createElement('span');
222//     span3.classList.add('gewicht-3');
223
224//     // Alle hinzufügen
225//     quadrateDiv.appendChild(span1);
226//     quadrateDiv.appendChild(span2);
227//     quadrateDiv.appendChild(span3);
228
229//     // Alles ins .l-content einfügen
230//     container.appendChild(quadrateDiv);
231// }
232
233
234
235
236// ====== Quadrate HEADERSTAGE (Startseite)
237function addQuadrateSpansHeaderstage() {
238    const container = document.querySelector('.l-header-stage');
239    if (!container) return;
240
241    // Quadrate vorne
242    const quadrateDivVorne = document.createElement('div');
243    quadrateDivVorne.classList.add('quadrate--headerstage-vorne');
244
245    // Quadrate hinten
246    const quadrateDivHinten = document.createElement('div');
247    quadrateDivHinten.classList.add('quadrate--headerstage-hinten');
248
249    const spanClasses = ['gewicht-1', 'gewicht-2', 'gewicht-3'];
250
251    // Spans für vorne erstellen

252    spanClasses.forEach(klasse => {
253        const span = document.createElement('span');
254        span.className = klasse;
255        quadrateDivVorne.appendChild(span);
256    });
257
258    // Spans für hinten erstellen
259    spanClasses.forEach(klasse => {
260        const span = document.createElement('span');
261        span.className = klasse;
262        quadrateDivHinten.appendChild(span);
263    });
264
265    // Beide Divs ins Container-Element einfügen
266    container.appendChild(quadrateDivVorne);
267    container.appendChild(quadrateDivHinten);
268}
269
270// Beim Laden der Seite ausführen
271document.addEventListener('DOMContentLoaded', addQuadrateSpansHeaderstage);
272
273
274
275
276// ====== Quadrate Home - Aktuelle Meldungen
277
278document.addEventListener("DOMContentLoaded", function () {
279    const vBox = document.querySelector(".v-box.boxborder");
280    if (vBox && vBox.closest(".aktuelle-meldungen")) {
281        vBox.classList.add("in-aktuellen-meldungen");
282    }
283});
284
285function addQuadrateSpansAktuelleMeldungen() {
286    const container = document.querySelector('.in-aktuellen-meldungen');
287
288
289    if (!container) return;
290
291    // Quadrate Vorne
292    const quadrateDivVorne = document.createElement('div');
293    quadrateDivVorne.classList.add('quadrate--aktuelleMeldungen-vorne');
294
295    // Quadrate Hinten
296    const quadrateDivHinten = document.createElement('div');
297    quadrateDivHinten.classList.add('quadrate--aktuelleMeldungen-hinten');
298
299    // Zwei unterschiedlich gewichtete Spans erstellen
300    const span1 = document.createElement('span');
301    span1.classList.add('gewicht-1');
302
303    const span2 = document.createElement('span');
304    span2.classList.add('gewicht-2');
305
306    // Zwei unterschiedlich gewichtete Spans erstellen
307    const span3 = document.createElement('span');
308    span3.classList.add('gewicht-1');
309
310    const span4 = document.createElement('span');
311    span4.classList.add('gewicht-2');
312
313
314    // Alle hinzufügen
315    quadrateDivVorne.appendChild(span1);
316    quadrateDivVorne.appendChild(span2);
317    quadrateDivHinten.appendChild(span3);
318    quadrateDivHinten.appendChild(span4);
319
320    // Alles ins .l-content einfügen
321    container.prepend(quadrateDivVorne);
322    container.appendChild(quadrateDivHinten);
323}
324
325// Beim Laden direkt ausführen
326document.addEventListener('DOMContentLoaded', addQuadrateSpansAktuelleMeldungen);