hr-design-system-handlebars 1.123.0 → 1.123.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/assets/index.css +3 -3
- package/dist/assets/js/components/external-service/externalServiceDs.feature.js +202 -101
- package/dist/views/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
- package/dist/views_static/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/fixtures/content/copytext/copytext_externalservice.json +19 -0
- package/src/assets/fixtures/external-service/external_service.inc.json +14 -0
- package/src/assets/fixtures/external-service/external_service.json +9 -0
- package/src/stories/views/components/content/copytext/copytext_body.hbs +1 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json +1 -1
- package/src/stories/views/components/external-service/externalServiceDs.feature.js +202 -101
- package/src/stories/views/components/external-service/external_service.stories.js +9 -5
- package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
- package/src/stories/views/components/external-service/fixtures/external_service.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v1.123.2 (Thu Nov 13 2025)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `main`
|
|
4
|
+
|
|
5
|
+
- Add support for 23 Degrees embed and refactor external service component ([@szuelch](https://github.com/szuelch))
|
|
6
|
+
- :bug: Fix lazyLoad default value in external service data policy component ([@szuelch](https://github.com/szuelch))
|
|
7
|
+
|
|
8
|
+
#### Authors: 1
|
|
9
|
+
|
|
10
|
+
- [@szuelch](https://github.com/szuelch)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v1.123.1 (Tue Nov 11 2025)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- :bug: Remove falsy context switch when calling voting template [#1320](https://github.com/mumprod/hr-design-system-handlebars/pull/1320) ([@szuelch](https://github.com/szuelch))
|
|
19
|
+
|
|
20
|
+
#### Authors: 1
|
|
21
|
+
|
|
22
|
+
- [@szuelch](https://github.com/szuelch)
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v1.123.0 (Mon Nov 03 2025)
|
|
2
27
|
|
|
3
28
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -3895,7 +3895,7 @@ article #commentList {
|
|
|
3895
3895
|
border-bottom-color: var(--color-secondary-ds);
|
|
3896
3896
|
}
|
|
3897
3897
|
.counter-reset {
|
|
3898
|
-
counter-reset:
|
|
3898
|
+
counter-reset: cnt1763030567815;
|
|
3899
3899
|
}
|
|
3900
3900
|
.animate-delay-100 {
|
|
3901
3901
|
--tw-animate-delay: 100ms;
|
|
@@ -4356,7 +4356,7 @@ html { scroll-behavior: smooth; }
|
|
|
4356
4356
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4357
4357
|
}
|
|
4358
4358
|
.-ordered {
|
|
4359
|
-
counter-increment:
|
|
4359
|
+
counter-increment: cnt1763030567815 1;
|
|
4360
4360
|
}
|
|
4361
4361
|
.-ordered::before {
|
|
4362
4362
|
position: absolute;
|
|
@@ -4374,7 +4374,7 @@ html { scroll-behavior: smooth; }
|
|
|
4374
4374
|
--tw-text-opacity: 1;
|
|
4375
4375
|
color: rgba(0, 0, 0, 1);
|
|
4376
4376
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4377
|
-
content: counter(
|
|
4377
|
+
content: counter(cnt1763030567815);
|
|
4378
4378
|
}
|
|
4379
4379
|
/*! ****************************/
|
|
4380
4380
|
/*! DataPolicy stuff */
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
loadScript,
|
|
10
10
|
removeScript,
|
|
11
11
|
replaceAnimated,
|
|
12
|
-
requestTimeout
|
|
12
|
+
requestTimeout,
|
|
13
13
|
} from 'hrQuery'
|
|
14
14
|
|
|
15
15
|
const ExternalService = function (context) {
|
|
@@ -36,7 +36,6 @@ const ExternalService = function (context) {
|
|
|
36
36
|
isExternalServiceLoaded = false,
|
|
37
37
|
tiktokOnPage = []
|
|
38
38
|
|
|
39
|
-
|
|
40
39
|
const testDOMElements = function () {
|
|
41
40
|
console.log(rootElement)
|
|
42
41
|
console.log(rootParent)
|
|
@@ -78,6 +77,9 @@ const ExternalService = function (context) {
|
|
|
78
77
|
switch (embedType) {
|
|
79
78
|
case 'js':
|
|
80
79
|
switch (id) {
|
|
80
|
+
case '23degrees':
|
|
81
|
+
createTwentyThreeDegreesEmbed()
|
|
82
|
+
break
|
|
81
83
|
case 'facebook-post':
|
|
82
84
|
createFacebookEmbed()
|
|
83
85
|
break
|
|
@@ -86,7 +88,7 @@ const ExternalService = function (context) {
|
|
|
86
88
|
break
|
|
87
89
|
case 'tiktok':
|
|
88
90
|
createTikTokEmbed()
|
|
89
|
-
break
|
|
91
|
+
break
|
|
90
92
|
case 'twitter':
|
|
91
93
|
createTwitterEmbed()
|
|
92
94
|
break
|
|
@@ -135,28 +137,16 @@ const ExternalService = function (context) {
|
|
|
135
137
|
gemeindewahlergebnis.createErgebnis()
|
|
136
138
|
}
|
|
137
139
|
const createWahlOMatEuwaEmbed = function () {
|
|
138
|
-
|
|
139
140
|
const divTag = document.createElement('div')
|
|
140
141
|
divTag.id = 'wahl-o-mat-europawahl-2024'
|
|
141
142
|
rootElement.insertBefore(divTag, null)
|
|
142
|
-
loadScript(
|
|
143
|
-
'wahl-o-mat-js',
|
|
144
|
-
'https://static.hr.de/wahl-o-mat/embed.js',
|
|
145
|
-
true
|
|
146
|
-
)
|
|
147
|
-
|
|
143
|
+
loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/embed.js', true)
|
|
148
144
|
}
|
|
149
145
|
const createWahlOMatButawaEmbed = function () {
|
|
150
|
-
|
|
151
146
|
const divTag = document.createElement('div')
|
|
152
147
|
divTag.id = 'wahl-o-mat-bundestagswahl-2025'
|
|
153
148
|
rootElement.insertBefore(divTag, null)
|
|
154
|
-
loadScript(
|
|
155
|
-
'wahl-o-mat-js',
|
|
156
|
-
'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js',
|
|
157
|
-
true
|
|
158
|
-
)
|
|
159
|
-
|
|
149
|
+
loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js', true)
|
|
160
150
|
}
|
|
161
151
|
|
|
162
152
|
const createWahlEmbed = function () {
|
|
@@ -179,86 +169,100 @@ const ExternalService = function (context) {
|
|
|
179
169
|
}
|
|
180
170
|
|
|
181
171
|
const werWaehlteWenEmbed = function () {
|
|
182
|
-
let iframe = document.createElement('iframe')
|
|
183
|
-
let cleanUrl
|
|
184
|
-
const parts = embedCode.split('*')
|
|
172
|
+
let iframe = document.createElement('iframe')
|
|
173
|
+
let cleanUrl
|
|
174
|
+
const parts = embedCode.split('*')
|
|
185
175
|
if (parts.length === 2) {
|
|
186
|
-
const params = parts[1].split(' ')
|
|
187
|
-
cleanUrl = parts[0].trim()
|
|
176
|
+
const params = parts[1].split(' ')
|
|
177
|
+
cleanUrl = parts[0].trim()
|
|
188
178
|
for (const param of params) {
|
|
189
|
-
const [key, value] = param.split('=')
|
|
179
|
+
const [key, value] = param.split('=')
|
|
190
180
|
if (key === 'id') {
|
|
191
|
-
iframe.id = value
|
|
181
|
+
iframe.id = value
|
|
192
182
|
} else {
|
|
193
|
-
iframe.setAttribute(key, value)
|
|
183
|
+
iframe.setAttribute(key, value)
|
|
194
184
|
}
|
|
195
185
|
}
|
|
196
186
|
}
|
|
197
187
|
|
|
198
|
-
iframe.src = cleanUrl
|
|
199
|
-
iframe.style.width =
|
|
200
|
-
iframe.style.border =
|
|
188
|
+
iframe.src = cleanUrl
|
|
189
|
+
iframe.style.width = '100%'
|
|
190
|
+
iframe.style.border = '0'
|
|
201
191
|
if (lazyLoad) {
|
|
202
|
-
iframe.loading =
|
|
192
|
+
iframe.loading = 'lazy'
|
|
203
193
|
}
|
|
204
|
-
rootElement.appendChild(iframe)
|
|
205
|
-
|
|
206
|
-
window.addEventListener(
|
|
207
|
-
if (
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
194
|
+
rootElement.appendChild(iframe)
|
|
195
|
+
|
|
196
|
+
window.addEventListener('message', function (e) {
|
|
197
|
+
if (
|
|
198
|
+
e.data.contentUrl &&
|
|
199
|
+
e.data.contentUrl.includes('/wahl/embed/2025-02-23-BT-DE/wer-waehlte-wen/')
|
|
200
|
+
) {
|
|
201
|
+
let h = parseInt(e.data.height, 10) + 2
|
|
202
|
+
if (iframe.id === 'ts-embed-wer-waehlte-wen-2025-02-23-BT-DE') {
|
|
203
|
+
iframe.style.height = h + 'px'
|
|
211
204
|
}
|
|
212
205
|
}
|
|
213
|
-
})
|
|
206
|
+
})
|
|
214
207
|
}
|
|
215
|
-
|
|
208
|
+
|
|
216
209
|
const createUniqueID = function () {
|
|
217
|
-
console.log(
|
|
218
|
-
uniqueId = Math.random()
|
|
210
|
+
console.log('Erzeuge einzigartige ID')
|
|
211
|
+
uniqueId = Math.random()
|
|
212
|
+
.toString(36)
|
|
213
|
+
.replace(/[^a-z]+/g, '')
|
|
214
|
+
.substring(2, 10)
|
|
219
215
|
}
|
|
220
216
|
|
|
221
217
|
const getAspectRatioClass = function () {
|
|
222
218
|
switch (iFrameConfig.aspectRatio) {
|
|
223
219
|
case '16x9':
|
|
224
|
-
return
|
|
220
|
+
return 'ar-16-9'
|
|
225
221
|
case '16x7':
|
|
226
|
-
return
|
|
222
|
+
return 'ar-16-7'
|
|
227
223
|
case '4x3':
|
|
228
|
-
return
|
|
224
|
+
return 'ar-4-3'
|
|
229
225
|
case '100x27':
|
|
230
|
-
return
|
|
226
|
+
return 'ar-100-27'
|
|
231
227
|
case '100':
|
|
232
|
-
return
|
|
228
|
+
return 'ar-1-1'
|
|
233
229
|
case '9x16':
|
|
234
|
-
return
|
|
230
|
+
return 'ar-9-16'
|
|
235
231
|
case '7x16':
|
|
236
|
-
return
|
|
232
|
+
return 'ar-7-16'
|
|
237
233
|
default:
|
|
238
|
-
return
|
|
234
|
+
return 'ar-16-9'
|
|
239
235
|
}
|
|
240
236
|
}
|
|
241
237
|
|
|
242
238
|
const createDataWrapperEmbed = function () {
|
|
243
239
|
removeDatapolicyBox()
|
|
244
240
|
createUniqueID()
|
|
245
|
-
console.log(
|
|
241
|
+
console.log('UniqueID' + uniqueId)
|
|
246
242
|
if (iFrameConfig.noResponsiveIframe == 'true') {
|
|
247
|
-
|
|
248
243
|
//Klassisches Iframe mit AR-Wrapper oder fester Höhe
|
|
249
|
-
noResponsiveIframe = new DataWrapperNoResponsiveIframe(
|
|
244
|
+
noResponsiveIframe = new DataWrapperNoResponsiveIframe(
|
|
245
|
+
context,
|
|
246
|
+
iFrameConfig.aspectRatio,
|
|
247
|
+
iFrameConfig.fixedHeight,
|
|
248
|
+
uniqueId,
|
|
249
|
+
embedCode,
|
|
250
|
+
lazyLoad
|
|
251
|
+
)
|
|
250
252
|
noResponsiveIframe.createNoResponsiveIframe()
|
|
251
253
|
|
|
252
254
|
if (iFrameConfig.refreshContent == 'true') {
|
|
253
|
-
console.log(
|
|
254
|
-
contentRefresher = new DataWrapperContentRefresher(
|
|
255
|
+
console.log('contentRefresher anfügen')
|
|
256
|
+
contentRefresher = new DataWrapperContentRefresher(
|
|
257
|
+
context,
|
|
258
|
+
uniqueId,
|
|
259
|
+
iFrameConfig.refreshIntervall,
|
|
260
|
+
false
|
|
261
|
+
)
|
|
255
262
|
contentRefresher.createRefresher()
|
|
256
263
|
}
|
|
257
|
-
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
264
|
+
} else {
|
|
260
265
|
if (iFrameConfig.webcomponent == 'true') {
|
|
261
|
-
|
|
262
266
|
// Webcomponent
|
|
263
267
|
const divTag = document.createElement('div')
|
|
264
268
|
divTag.id = 'datawrapper-chart-' + uniqueId
|
|
@@ -278,13 +282,16 @@ const ExternalService = function (context) {
|
|
|
278
282
|
divTag.appendChild(noScriptTag)
|
|
279
283
|
|
|
280
284
|
if (iFrameConfig.refreshContent == 'true') {
|
|
281
|
-
console.log(
|
|
282
|
-
contentRefresher = new DataWrapperContentRefresher(
|
|
285
|
+
console.log('contentRefresher anfügen')
|
|
286
|
+
contentRefresher = new DataWrapperContentRefresher(
|
|
287
|
+
context,
|
|
288
|
+
uniqueId,
|
|
289
|
+
iFrameConfig.refreshIntervall,
|
|
290
|
+
true
|
|
291
|
+
)
|
|
283
292
|
contentRefresher.createRefresher()
|
|
284
293
|
}
|
|
285
|
-
}
|
|
286
|
-
else {
|
|
287
|
-
|
|
294
|
+
} else {
|
|
288
295
|
//Responsives Iframe
|
|
289
296
|
var iframe = document.createElement('iframe')
|
|
290
297
|
//Auflösen nach Tailwind-Klassen //dataWrapper-embed
|
|
@@ -297,7 +304,7 @@ const ExternalService = function (context) {
|
|
|
297
304
|
iframe.src = embedCode
|
|
298
305
|
iframe.id = 'datawrapper-chart-' + uniqueId
|
|
299
306
|
if (lazyLoad) {
|
|
300
|
-
iframe.loading =
|
|
307
|
+
iframe.loading = 'lazy'
|
|
301
308
|
}
|
|
302
309
|
rootElement.insertBefore(iframe, null)
|
|
303
310
|
|
|
@@ -307,14 +314,80 @@ const ExternalService = function (context) {
|
|
|
307
314
|
true
|
|
308
315
|
)
|
|
309
316
|
if (iFrameConfig.refreshContent == 'true') {
|
|
310
|
-
console.log(
|
|
311
|
-
contentRefresher = new DataWrapperContentRefresher(
|
|
317
|
+
console.log('contentRefresher anfügen')
|
|
318
|
+
contentRefresher = new DataWrapperContentRefresher(
|
|
319
|
+
context,
|
|
320
|
+
uniqueId,
|
|
321
|
+
iFrameConfig.refreshIntervall,
|
|
322
|
+
false
|
|
323
|
+
)
|
|
312
324
|
contentRefresher.createRefresher()
|
|
313
325
|
}
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
const createTwentyThreeDegreesEmbed = function () {
|
|
331
|
+
removeDatapolicyBox()
|
|
332
|
+
const foundMatchesForSlug = embedCode.match(/embed\/([^/?]+)/)
|
|
333
|
+
const slug =
|
|
334
|
+
foundMatchesForSlug && foundMatchesForSlug.length > 1 ? foundMatchesForSlug[1] : null
|
|
335
|
+
if (slug) {
|
|
336
|
+
const script = document.createElement('script')
|
|
337
|
+
script.src = `https://app.23degrees.io/services/public/embed-code/${slug}`
|
|
338
|
+
script.type = 'text/javascript'
|
|
339
|
+
|
|
340
|
+
const css = `
|
|
341
|
+
.responsive23-${slug} {
|
|
342
|
+
width: 100%;
|
|
343
|
+
padding-top: 100%;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
@media (max-width: 800px) {
|
|
347
|
+
.responsive23-${slug} {
|
|
348
|
+
padding-top: 80%;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
314
351
|
|
|
352
|
+
@media (max-width: 600px) {
|
|
353
|
+
.responsive23-${slug} {
|
|
354
|
+
padding-top: 90.91%;
|
|
355
|
+
}
|
|
315
356
|
}
|
|
316
357
|
|
|
358
|
+
@media (max-width: 480px) {
|
|
359
|
+
.responsive23-${slug} {
|
|
360
|
+
padding-top: 111.11%;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
317
363
|
|
|
364
|
+
@media (max-width: 360px) {
|
|
365
|
+
.responsive23-${slug} {
|
|
366
|
+
padding-top: 142.86%;
|
|
367
|
+
}
|
|
368
|
+
}`
|
|
369
|
+
const style = document.createElement('style')
|
|
370
|
+
style.textContent = css
|
|
371
|
+
|
|
372
|
+
const iFrame = document.createElement('iframe')
|
|
373
|
+
iFrame.src = embedCode
|
|
374
|
+
iFrame.style.position = 'absolute'
|
|
375
|
+
iFrame.style.top = '0'
|
|
376
|
+
iFrame.style.left = '0'
|
|
377
|
+
iFrame.style.width = '100%'
|
|
378
|
+
iFrame.style.height = '100%'
|
|
379
|
+
iFrame.style.border = '0'
|
|
380
|
+
iFrame.allowFullscreen = true
|
|
381
|
+
iFrame.title = '23degrees Embed'
|
|
382
|
+
const div = document.createElement('div')
|
|
383
|
+
div.className = `responsive23-${slug}`
|
|
384
|
+
div.id = `container23-${slug}`
|
|
385
|
+
div.style.position = 'relative'
|
|
386
|
+
div.appendChild(iFrame)
|
|
387
|
+
|
|
388
|
+
rootElement.appendChild(style)
|
|
389
|
+
rootElement.appendChild(div)
|
|
390
|
+
rootElement.appendChild(script)
|
|
318
391
|
}
|
|
319
392
|
}
|
|
320
393
|
|
|
@@ -382,21 +455,21 @@ const ExternalService = function (context) {
|
|
|
382
455
|
if (!document.getElementById('tiktok-js')) {
|
|
383
456
|
loadScript('tiktok-js', '//www.tiktok.com/embed.js', true)
|
|
384
457
|
}
|
|
385
|
-
const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}
|
|
386
|
-
const tiktokEmbedData = await fetch(tiktokEmbedDataUrl)
|
|
387
|
-
const tiktokEmbedDataJson = await tiktokEmbedData.json()
|
|
458
|
+
const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`
|
|
459
|
+
const tiktokEmbedData = await fetch(tiktokEmbedDataUrl)
|
|
460
|
+
const tiktokEmbedDataJson = await tiktokEmbedData.json()
|
|
388
461
|
replaceAnimated(rootElement, tiktokEmbedDataJson.html, false, reloadTikTokEmbed)
|
|
389
462
|
}
|
|
390
463
|
|
|
391
|
-
const reloadTikTokEmbed = function() {
|
|
392
|
-
if(!tiktokOnPage.length) {
|
|
393
|
-
const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]
|
|
394
|
-
tiktokOnPage = Array.from(document.querySelectorAll(selector)
|
|
464
|
+
const reloadTikTokEmbed = function () {
|
|
465
|
+
if (!tiktokOnPage.length) {
|
|
466
|
+
const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`
|
|
467
|
+
tiktokOnPage = Array.from(document.querySelectorAll(selector))
|
|
395
468
|
}
|
|
396
469
|
if (typeof tiktokEmbed !== 'undefined' && tiktokOnPage.length) {
|
|
397
|
-
tiktokEmbed.lib.render(tiktokOnPage)
|
|
470
|
+
tiktokEmbed.lib.render(tiktokOnPage)
|
|
398
471
|
} else {
|
|
399
|
-
reloadTikTokEmbed()
|
|
472
|
+
reloadTikTokEmbed()
|
|
400
473
|
}
|
|
401
474
|
}
|
|
402
475
|
|
|
@@ -429,16 +502,40 @@ const ExternalService = function (context) {
|
|
|
429
502
|
|
|
430
503
|
const loadIframe = function () {
|
|
431
504
|
console.log('load iframe ' + id)
|
|
432
|
-
const loadingAttribute = lazyLoad ? "loading='lazy'" :
|
|
433
|
-
iframe =
|
|
434
|
-
|
|
435
|
-
|
|
505
|
+
const loadingAttribute = lazyLoad ? "loading='lazy'" : ''
|
|
506
|
+
iframe =
|
|
507
|
+
"<iframe id='i_frame' " +
|
|
508
|
+
loadingAttribute +
|
|
509
|
+
" data-isloaded='0' src='" +
|
|
510
|
+
embedCode +
|
|
511
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
|
|
512
|
+
if (iFrameConfig && iFrameConfig.aspectRatio) {
|
|
513
|
+
iframe =
|
|
514
|
+
"<div class='!h-full'><div class='" +
|
|
515
|
+
getAspectRatioClass() +
|
|
516
|
+
"'><iframe id='i_frame' " +
|
|
517
|
+
loadingAttribute +
|
|
518
|
+
" data-isloaded='0' src='" +
|
|
519
|
+
embedCode +
|
|
520
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
|
|
436
521
|
//TODO Weiche Animation der Inhalte
|
|
437
522
|
} else {
|
|
438
|
-
if (iFrameConfig.fixedHeight) {
|
|
439
|
-
iframe =
|
|
523
|
+
if (iFrameConfig && iFrameConfig.fixedHeight) {
|
|
524
|
+
iframe =
|
|
525
|
+
"<div style='height:" +
|
|
526
|
+
iFrameConfig.fixedHeight +
|
|
527
|
+
"px'><iframe data-isloaded='0' " +
|
|
528
|
+
loadingAttribute +
|
|
529
|
+
" src='" +
|
|
530
|
+
embedCode +
|
|
531
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
|
|
440
532
|
} else {
|
|
441
|
-
iframe =
|
|
533
|
+
iframe =
|
|
534
|
+
"<div class='!h-full'><iframe data-isloaded='0' " +
|
|
535
|
+
loadingAttribute +
|
|
536
|
+
" src='" +
|
|
537
|
+
embedCode +
|
|
538
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
|
|
442
539
|
}
|
|
443
540
|
}
|
|
444
541
|
replaceAnimated(rootElement, iframe, false)
|
|
@@ -447,29 +544,33 @@ const ExternalService = function (context) {
|
|
|
447
544
|
const initDataPolicy = function () {
|
|
448
545
|
if (dataPolicyCheck) {
|
|
449
546
|
acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
|
|
450
|
-
listen('click', handleDatapolicy, acceptButton)
|
|
547
|
+
acceptButton && listen('click', handleDatapolicy, acceptButton)
|
|
451
548
|
if (settingsCookie.isSettingsCookieExistent(id)) {
|
|
452
|
-
console.log(
|
|
549
|
+
console.log(
|
|
550
|
+
'Dienst ' +
|
|
551
|
+
id +
|
|
552
|
+
' ist im Cookie enthalten und hat den Wert ' +
|
|
553
|
+
settingsCookie.isSettingsCookieAccepted(id)
|
|
554
|
+
)
|
|
453
555
|
if (settingsCookie.isSettingsCookieAccepted(id)) {
|
|
454
|
-
console.log(
|
|
455
|
-
loadServiceWithDataPolicyButton()
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
dataPolicyBox.style.visibility = 'visible';
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
else {
|
|
463
|
-
console.log("Dienst " + id + " ist im Cookie nicht enthalten, prüfe daher den Default")
|
|
464
|
-
if (document.getElementById(id).getAttribute("data-whitelist") == "true") {
|
|
465
|
-
console.log("Ist per Default eingeschaltet")
|
|
466
|
-
console.log("Lade den Dienst")
|
|
467
|
-
loadServiceWithDataPolicyButton();
|
|
556
|
+
console.log('Lade den Dienst')
|
|
557
|
+
loadServiceWithDataPolicyButton()
|
|
558
|
+
} else {
|
|
559
|
+
console.log('Zeige Datapolicy-Box')
|
|
560
|
+
dataPolicyBox.style.visibility = 'visible'
|
|
468
561
|
}
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
562
|
+
} else {
|
|
563
|
+
console.log(
|
|
564
|
+
'Dienst ' + id + ' ist im Cookie nicht enthalten, prüfe daher den Default'
|
|
565
|
+
)
|
|
566
|
+
if (document.getElementById(id).getAttribute('data-whitelist') == 'true') {
|
|
567
|
+
console.log('Ist per Default eingeschaltet')
|
|
568
|
+
console.log('Lade den Dienst')
|
|
569
|
+
loadServiceWithDataPolicyButton()
|
|
570
|
+
} else {
|
|
571
|
+
console.log('Ist per Default ausgeschaltet')
|
|
572
|
+
console.log('Zeige Datapolicy-Box')
|
|
573
|
+
dataPolicyBox.style.visibility = 'visible'
|
|
473
574
|
}
|
|
474
575
|
}
|
|
475
576
|
listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
{{> components/content/copytext/components/radioplaylist }}
|
|
50
50
|
{{~/if}}
|
|
51
51
|
{{~#if this.isVoting}}
|
|
52
|
-
{{> components/content/copytext/components/voting
|
|
52
|
+
{{> components/content/copytext/components/voting }}
|
|
53
53
|
{{/if~}}
|
|
54
54
|
{{~#if this.isExternalService}}
|
|
55
55
|
{{~#if @../first}}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
|
|
3
3
|
<div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
|
|
4
4
|
this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
|
|
5
|
-
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
5
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
6
6
|
"fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
|
|
7
7
|
{{~> components/external-service/components/external_service_data_policy ~}}
|
|
8
8
|
</div>
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
{{> components/content/copytext/components/radioplaylist }}
|
|
50
50
|
{{~/if}}
|
|
51
51
|
{{~#if this.isVoting}}
|
|
52
|
-
{{> components/content/copytext/components/voting
|
|
52
|
+
{{> components/content/copytext/components/voting }}
|
|
53
53
|
{{/if~}}
|
|
54
54
|
{{~#if this.isExternalService}}
|
|
55
55
|
{{~#if @../first}}
|
package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
|
|
3
3
|
<div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
|
|
4
4
|
this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
|
|
5
|
-
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
5
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
6
6
|
"fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
|
|
7
7
|
{{~> components/external-service/components/external_service_data_policy ~}}
|
|
8
8
|
</div>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.123.
|
|
9
|
+
"version": "1.123.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -107,10 +107,29 @@
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"isHeadline": true,
|
|
113
|
+
"text": "23Degrees"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"paragraphBoxItem": {
|
|
120
|
+
"isExternalService": true,
|
|
121
|
+
"toModel": {
|
|
122
|
+
"externalService": {
|
|
123
|
+
"@->jsoninclude": "external-service/external_service.inc.json",
|
|
124
|
+
"@->contentpath": "23degrees"
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
110
128
|
}
|
|
111
129
|
],
|
|
112
130
|
"dataPolicy": {
|
|
113
131
|
"serviceList": [
|
|
132
|
+
{ "key": "23degrees", "value": "23Degrees (Kommunalwahl 2026)" },
|
|
114
133
|
{ "key": "ard_mediathek", "value": "ARD Mediathek (Video)" },
|
|
115
134
|
{ "key": "arte_concert", "value": "Arte Concert" },
|
|
116
135
|
{ "key": "arte_concert_new", "value": "Arte Concert 2.0" },
|
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
{
|
|
2
|
+
"23degrees": {
|
|
3
|
+
"externalServiceConfig": {
|
|
4
|
+
"isWhitelisted": true,
|
|
5
|
+
"makeConfigurable": true,
|
|
6
|
+
"embedAsIFrame": false,
|
|
7
|
+
"externalServiceId": "23degrees",
|
|
8
|
+
"externalServiceEmbedType": "js",
|
|
9
|
+
"externalServiceName": "23degrees (Kommunalwahl 2026)"
|
|
10
|
+
},
|
|
11
|
+
"serviceUrl": "https://app.23degrees.io/embed/Qbk0sdqMq9V7oZj0-bar-horizontal-test-parametrisierung-and?filter=JTdCJTIyYTAlMjIlM0ElMjJTdWx6YSUyMiU3RA==",
|
|
12
|
+
"setResponsiveIframe": false,
|
|
13
|
+
"setTimedReloadIframe": false,
|
|
14
|
+
"setTimeForReload": ""
|
|
15
|
+
},
|
|
2
16
|
"360Grad": {
|
|
3
17
|
"externalServiceConfig": {
|
|
4
18
|
"isWhitelisted": true,
|
|
@@ -127,6 +127,15 @@
|
|
|
127
127
|
"@->contentpath": "Flourish"
|
|
128
128
|
}
|
|
129
129
|
},
|
|
130
|
+
"twentyThreeDegrees": {
|
|
131
|
+
"config": {
|
|
132
|
+
"useAsSnapshot": false
|
|
133
|
+
},
|
|
134
|
+
"args": {
|
|
135
|
+
"@->jsoninclude": "external-service/external_service.inc.json",
|
|
136
|
+
"@->contentpath": "23degrees"
|
|
137
|
+
}
|
|
138
|
+
},
|
|
130
139
|
"Giphy": {
|
|
131
140
|
"config": {
|
|
132
141
|
"useAsSnapshot": false
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
{{> components/content/copytext/components/radioplaylist }}
|
|
50
50
|
{{~/if}}
|
|
51
51
|
{{~#if this.isVoting}}
|
|
52
|
-
{{> components/content/copytext/components/voting
|
|
52
|
+
{{> components/content/copytext/components/voting }}
|
|
53
53
|
{{/if~}}
|
|
54
54
|
{{~#if this.isExternalService}}
|
|
55
55
|
{{~#if @../first}}
|
package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"TikTok"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@hessenschau/video/7497190033804283158","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@ratingmyfood.ffm/video/7488362181789158658","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Instagram"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"tiktok","value":"TikTok"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"TikTok"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@hessenschau/video/7497190033804283158","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"tiktok","externalServiceEmbedType":"js","externalServiceName":"TikTok"},"serviceUrl":"https://www.tiktok.com/@ratingmyfood.ffm/video/7488362181789158658","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Instagram"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"23Degrees"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum <em>dolor sit amet</em>, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"23degrees","externalServiceEmbedType":"js","externalServiceName":"23degrees (Kommunalwahl 2026)"},"serviceUrl":"https://app.23degrees.io/embed/Qbk0sdqMq9V7oZj0-bar-horizontal-test-parametrisierung-and?filter=JTdCJTIyYTAlMjIlM0ElMjJTdWx6YSUyMiU3RA==","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"23degrees","value":"23Degrees (Kommunalwahl 2026)"},{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"tiktok","value":"TikTok"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
loadScript,
|
|
10
10
|
removeScript,
|
|
11
11
|
replaceAnimated,
|
|
12
|
-
requestTimeout
|
|
12
|
+
requestTimeout,
|
|
13
13
|
} from 'hrQuery'
|
|
14
14
|
|
|
15
15
|
const ExternalService = function (context) {
|
|
@@ -36,7 +36,6 @@ const ExternalService = function (context) {
|
|
|
36
36
|
isExternalServiceLoaded = false,
|
|
37
37
|
tiktokOnPage = []
|
|
38
38
|
|
|
39
|
-
|
|
40
39
|
const testDOMElements = function () {
|
|
41
40
|
console.log(rootElement)
|
|
42
41
|
console.log(rootParent)
|
|
@@ -78,6 +77,9 @@ const ExternalService = function (context) {
|
|
|
78
77
|
switch (embedType) {
|
|
79
78
|
case 'js':
|
|
80
79
|
switch (id) {
|
|
80
|
+
case '23degrees':
|
|
81
|
+
createTwentyThreeDegreesEmbed()
|
|
82
|
+
break
|
|
81
83
|
case 'facebook-post':
|
|
82
84
|
createFacebookEmbed()
|
|
83
85
|
break
|
|
@@ -86,7 +88,7 @@ const ExternalService = function (context) {
|
|
|
86
88
|
break
|
|
87
89
|
case 'tiktok':
|
|
88
90
|
createTikTokEmbed()
|
|
89
|
-
break
|
|
91
|
+
break
|
|
90
92
|
case 'twitter':
|
|
91
93
|
createTwitterEmbed()
|
|
92
94
|
break
|
|
@@ -135,28 +137,16 @@ const ExternalService = function (context) {
|
|
|
135
137
|
gemeindewahlergebnis.createErgebnis()
|
|
136
138
|
}
|
|
137
139
|
const createWahlOMatEuwaEmbed = function () {
|
|
138
|
-
|
|
139
140
|
const divTag = document.createElement('div')
|
|
140
141
|
divTag.id = 'wahl-o-mat-europawahl-2024'
|
|
141
142
|
rootElement.insertBefore(divTag, null)
|
|
142
|
-
loadScript(
|
|
143
|
-
'wahl-o-mat-js',
|
|
144
|
-
'https://static.hr.de/wahl-o-mat/embed.js',
|
|
145
|
-
true
|
|
146
|
-
)
|
|
147
|
-
|
|
143
|
+
loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/embed.js', true)
|
|
148
144
|
}
|
|
149
145
|
const createWahlOMatButawaEmbed = function () {
|
|
150
|
-
|
|
151
146
|
const divTag = document.createElement('div')
|
|
152
147
|
divTag.id = 'wahl-o-mat-bundestagswahl-2025'
|
|
153
148
|
rootElement.insertBefore(divTag, null)
|
|
154
|
-
loadScript(
|
|
155
|
-
'wahl-o-mat-js',
|
|
156
|
-
'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js',
|
|
157
|
-
true
|
|
158
|
-
)
|
|
159
|
-
|
|
149
|
+
loadScript('wahl-o-mat-js', 'https://static.hr.de/wahl-o-mat/bundestagswahl/embed.js', true)
|
|
160
150
|
}
|
|
161
151
|
|
|
162
152
|
const createWahlEmbed = function () {
|
|
@@ -179,86 +169,100 @@ const ExternalService = function (context) {
|
|
|
179
169
|
}
|
|
180
170
|
|
|
181
171
|
const werWaehlteWenEmbed = function () {
|
|
182
|
-
let iframe = document.createElement('iframe')
|
|
183
|
-
let cleanUrl
|
|
184
|
-
const parts = embedCode.split('*')
|
|
172
|
+
let iframe = document.createElement('iframe')
|
|
173
|
+
let cleanUrl
|
|
174
|
+
const parts = embedCode.split('*')
|
|
185
175
|
if (parts.length === 2) {
|
|
186
|
-
const params = parts[1].split(' ')
|
|
187
|
-
cleanUrl = parts[0].trim()
|
|
176
|
+
const params = parts[1].split(' ')
|
|
177
|
+
cleanUrl = parts[0].trim()
|
|
188
178
|
for (const param of params) {
|
|
189
|
-
const [key, value] = param.split('=')
|
|
179
|
+
const [key, value] = param.split('=')
|
|
190
180
|
if (key === 'id') {
|
|
191
|
-
iframe.id = value
|
|
181
|
+
iframe.id = value
|
|
192
182
|
} else {
|
|
193
|
-
iframe.setAttribute(key, value)
|
|
183
|
+
iframe.setAttribute(key, value)
|
|
194
184
|
}
|
|
195
185
|
}
|
|
196
186
|
}
|
|
197
187
|
|
|
198
|
-
iframe.src = cleanUrl
|
|
199
|
-
iframe.style.width =
|
|
200
|
-
iframe.style.border =
|
|
188
|
+
iframe.src = cleanUrl
|
|
189
|
+
iframe.style.width = '100%'
|
|
190
|
+
iframe.style.border = '0'
|
|
201
191
|
if (lazyLoad) {
|
|
202
|
-
iframe.loading =
|
|
192
|
+
iframe.loading = 'lazy'
|
|
203
193
|
}
|
|
204
|
-
rootElement.appendChild(iframe)
|
|
205
|
-
|
|
206
|
-
window.addEventListener(
|
|
207
|
-
if (
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
194
|
+
rootElement.appendChild(iframe)
|
|
195
|
+
|
|
196
|
+
window.addEventListener('message', function (e) {
|
|
197
|
+
if (
|
|
198
|
+
e.data.contentUrl &&
|
|
199
|
+
e.data.contentUrl.includes('/wahl/embed/2025-02-23-BT-DE/wer-waehlte-wen/')
|
|
200
|
+
) {
|
|
201
|
+
let h = parseInt(e.data.height, 10) + 2
|
|
202
|
+
if (iframe.id === 'ts-embed-wer-waehlte-wen-2025-02-23-BT-DE') {
|
|
203
|
+
iframe.style.height = h + 'px'
|
|
211
204
|
}
|
|
212
205
|
}
|
|
213
|
-
})
|
|
206
|
+
})
|
|
214
207
|
}
|
|
215
|
-
|
|
208
|
+
|
|
216
209
|
const createUniqueID = function () {
|
|
217
|
-
console.log(
|
|
218
|
-
uniqueId = Math.random()
|
|
210
|
+
console.log('Erzeuge einzigartige ID')
|
|
211
|
+
uniqueId = Math.random()
|
|
212
|
+
.toString(36)
|
|
213
|
+
.replace(/[^a-z]+/g, '')
|
|
214
|
+
.substring(2, 10)
|
|
219
215
|
}
|
|
220
216
|
|
|
221
217
|
const getAspectRatioClass = function () {
|
|
222
218
|
switch (iFrameConfig.aspectRatio) {
|
|
223
219
|
case '16x9':
|
|
224
|
-
return
|
|
220
|
+
return 'ar-16-9'
|
|
225
221
|
case '16x7':
|
|
226
|
-
return
|
|
222
|
+
return 'ar-16-7'
|
|
227
223
|
case '4x3':
|
|
228
|
-
return
|
|
224
|
+
return 'ar-4-3'
|
|
229
225
|
case '100x27':
|
|
230
|
-
return
|
|
226
|
+
return 'ar-100-27'
|
|
231
227
|
case '100':
|
|
232
|
-
return
|
|
228
|
+
return 'ar-1-1'
|
|
233
229
|
case '9x16':
|
|
234
|
-
return
|
|
230
|
+
return 'ar-9-16'
|
|
235
231
|
case '7x16':
|
|
236
|
-
return
|
|
232
|
+
return 'ar-7-16'
|
|
237
233
|
default:
|
|
238
|
-
return
|
|
234
|
+
return 'ar-16-9'
|
|
239
235
|
}
|
|
240
236
|
}
|
|
241
237
|
|
|
242
238
|
const createDataWrapperEmbed = function () {
|
|
243
239
|
removeDatapolicyBox()
|
|
244
240
|
createUniqueID()
|
|
245
|
-
console.log(
|
|
241
|
+
console.log('UniqueID' + uniqueId)
|
|
246
242
|
if (iFrameConfig.noResponsiveIframe == 'true') {
|
|
247
|
-
|
|
248
243
|
//Klassisches Iframe mit AR-Wrapper oder fester Höhe
|
|
249
|
-
noResponsiveIframe = new DataWrapperNoResponsiveIframe(
|
|
244
|
+
noResponsiveIframe = new DataWrapperNoResponsiveIframe(
|
|
245
|
+
context,
|
|
246
|
+
iFrameConfig.aspectRatio,
|
|
247
|
+
iFrameConfig.fixedHeight,
|
|
248
|
+
uniqueId,
|
|
249
|
+
embedCode,
|
|
250
|
+
lazyLoad
|
|
251
|
+
)
|
|
250
252
|
noResponsiveIframe.createNoResponsiveIframe()
|
|
251
253
|
|
|
252
254
|
if (iFrameConfig.refreshContent == 'true') {
|
|
253
|
-
console.log(
|
|
254
|
-
contentRefresher = new DataWrapperContentRefresher(
|
|
255
|
+
console.log('contentRefresher anfügen')
|
|
256
|
+
contentRefresher = new DataWrapperContentRefresher(
|
|
257
|
+
context,
|
|
258
|
+
uniqueId,
|
|
259
|
+
iFrameConfig.refreshIntervall,
|
|
260
|
+
false
|
|
261
|
+
)
|
|
255
262
|
contentRefresher.createRefresher()
|
|
256
263
|
}
|
|
257
|
-
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
264
|
+
} else {
|
|
260
265
|
if (iFrameConfig.webcomponent == 'true') {
|
|
261
|
-
|
|
262
266
|
// Webcomponent
|
|
263
267
|
const divTag = document.createElement('div')
|
|
264
268
|
divTag.id = 'datawrapper-chart-' + uniqueId
|
|
@@ -278,13 +282,16 @@ const ExternalService = function (context) {
|
|
|
278
282
|
divTag.appendChild(noScriptTag)
|
|
279
283
|
|
|
280
284
|
if (iFrameConfig.refreshContent == 'true') {
|
|
281
|
-
console.log(
|
|
282
|
-
contentRefresher = new DataWrapperContentRefresher(
|
|
285
|
+
console.log('contentRefresher anfügen')
|
|
286
|
+
contentRefresher = new DataWrapperContentRefresher(
|
|
287
|
+
context,
|
|
288
|
+
uniqueId,
|
|
289
|
+
iFrameConfig.refreshIntervall,
|
|
290
|
+
true
|
|
291
|
+
)
|
|
283
292
|
contentRefresher.createRefresher()
|
|
284
293
|
}
|
|
285
|
-
}
|
|
286
|
-
else {
|
|
287
|
-
|
|
294
|
+
} else {
|
|
288
295
|
//Responsives Iframe
|
|
289
296
|
var iframe = document.createElement('iframe')
|
|
290
297
|
//Auflösen nach Tailwind-Klassen //dataWrapper-embed
|
|
@@ -297,7 +304,7 @@ const ExternalService = function (context) {
|
|
|
297
304
|
iframe.src = embedCode
|
|
298
305
|
iframe.id = 'datawrapper-chart-' + uniqueId
|
|
299
306
|
if (lazyLoad) {
|
|
300
|
-
iframe.loading =
|
|
307
|
+
iframe.loading = 'lazy'
|
|
301
308
|
}
|
|
302
309
|
rootElement.insertBefore(iframe, null)
|
|
303
310
|
|
|
@@ -307,14 +314,80 @@ const ExternalService = function (context) {
|
|
|
307
314
|
true
|
|
308
315
|
)
|
|
309
316
|
if (iFrameConfig.refreshContent == 'true') {
|
|
310
|
-
console.log(
|
|
311
|
-
contentRefresher = new DataWrapperContentRefresher(
|
|
317
|
+
console.log('contentRefresher anfügen')
|
|
318
|
+
contentRefresher = new DataWrapperContentRefresher(
|
|
319
|
+
context,
|
|
320
|
+
uniqueId,
|
|
321
|
+
iFrameConfig.refreshIntervall,
|
|
322
|
+
false
|
|
323
|
+
)
|
|
312
324
|
contentRefresher.createRefresher()
|
|
313
325
|
}
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
const createTwentyThreeDegreesEmbed = function () {
|
|
331
|
+
removeDatapolicyBox()
|
|
332
|
+
const foundMatchesForSlug = embedCode.match(/embed\/([^/?]+)/)
|
|
333
|
+
const slug =
|
|
334
|
+
foundMatchesForSlug && foundMatchesForSlug.length > 1 ? foundMatchesForSlug[1] : null
|
|
335
|
+
if (slug) {
|
|
336
|
+
const script = document.createElement('script')
|
|
337
|
+
script.src = `https://app.23degrees.io/services/public/embed-code/${slug}`
|
|
338
|
+
script.type = 'text/javascript'
|
|
339
|
+
|
|
340
|
+
const css = `
|
|
341
|
+
.responsive23-${slug} {
|
|
342
|
+
width: 100%;
|
|
343
|
+
padding-top: 100%;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
@media (max-width: 800px) {
|
|
347
|
+
.responsive23-${slug} {
|
|
348
|
+
padding-top: 80%;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
314
351
|
|
|
352
|
+
@media (max-width: 600px) {
|
|
353
|
+
.responsive23-${slug} {
|
|
354
|
+
padding-top: 90.91%;
|
|
355
|
+
}
|
|
315
356
|
}
|
|
316
357
|
|
|
358
|
+
@media (max-width: 480px) {
|
|
359
|
+
.responsive23-${slug} {
|
|
360
|
+
padding-top: 111.11%;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
317
363
|
|
|
364
|
+
@media (max-width: 360px) {
|
|
365
|
+
.responsive23-${slug} {
|
|
366
|
+
padding-top: 142.86%;
|
|
367
|
+
}
|
|
368
|
+
}`
|
|
369
|
+
const style = document.createElement('style')
|
|
370
|
+
style.textContent = css
|
|
371
|
+
|
|
372
|
+
const iFrame = document.createElement('iframe')
|
|
373
|
+
iFrame.src = embedCode
|
|
374
|
+
iFrame.style.position = 'absolute'
|
|
375
|
+
iFrame.style.top = '0'
|
|
376
|
+
iFrame.style.left = '0'
|
|
377
|
+
iFrame.style.width = '100%'
|
|
378
|
+
iFrame.style.height = '100%'
|
|
379
|
+
iFrame.style.border = '0'
|
|
380
|
+
iFrame.allowFullscreen = true
|
|
381
|
+
iFrame.title = '23degrees Embed'
|
|
382
|
+
const div = document.createElement('div')
|
|
383
|
+
div.className = `responsive23-${slug}`
|
|
384
|
+
div.id = `container23-${slug}`
|
|
385
|
+
div.style.position = 'relative'
|
|
386
|
+
div.appendChild(iFrame)
|
|
387
|
+
|
|
388
|
+
rootElement.appendChild(style)
|
|
389
|
+
rootElement.appendChild(div)
|
|
390
|
+
rootElement.appendChild(script)
|
|
318
391
|
}
|
|
319
392
|
}
|
|
320
393
|
|
|
@@ -382,21 +455,21 @@ const ExternalService = function (context) {
|
|
|
382
455
|
if (!document.getElementById('tiktok-js')) {
|
|
383
456
|
loadScript('tiktok-js', '//www.tiktok.com/embed.js', true)
|
|
384
457
|
}
|
|
385
|
-
const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}
|
|
386
|
-
const tiktokEmbedData = await fetch(tiktokEmbedDataUrl)
|
|
387
|
-
const tiktokEmbedDataJson = await tiktokEmbedData.json()
|
|
458
|
+
const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`
|
|
459
|
+
const tiktokEmbedData = await fetch(tiktokEmbedDataUrl)
|
|
460
|
+
const tiktokEmbedDataJson = await tiktokEmbedData.json()
|
|
388
461
|
replaceAnimated(rootElement, tiktokEmbedDataJson.html, false, reloadTikTokEmbed)
|
|
389
462
|
}
|
|
390
463
|
|
|
391
|
-
const reloadTikTokEmbed = function() {
|
|
392
|
-
if(!tiktokOnPage.length) {
|
|
393
|
-
const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]
|
|
394
|
-
tiktokOnPage = Array.from(document.querySelectorAll(selector)
|
|
464
|
+
const reloadTikTokEmbed = function () {
|
|
465
|
+
if (!tiktokOnPage.length) {
|
|
466
|
+
const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`
|
|
467
|
+
tiktokOnPage = Array.from(document.querySelectorAll(selector))
|
|
395
468
|
}
|
|
396
469
|
if (typeof tiktokEmbed !== 'undefined' && tiktokOnPage.length) {
|
|
397
|
-
tiktokEmbed.lib.render(tiktokOnPage)
|
|
470
|
+
tiktokEmbed.lib.render(tiktokOnPage)
|
|
398
471
|
} else {
|
|
399
|
-
reloadTikTokEmbed()
|
|
472
|
+
reloadTikTokEmbed()
|
|
400
473
|
}
|
|
401
474
|
}
|
|
402
475
|
|
|
@@ -429,16 +502,40 @@ const ExternalService = function (context) {
|
|
|
429
502
|
|
|
430
503
|
const loadIframe = function () {
|
|
431
504
|
console.log('load iframe ' + id)
|
|
432
|
-
const loadingAttribute = lazyLoad ? "loading='lazy'" :
|
|
433
|
-
iframe =
|
|
434
|
-
|
|
435
|
-
|
|
505
|
+
const loadingAttribute = lazyLoad ? "loading='lazy'" : ''
|
|
506
|
+
iframe =
|
|
507
|
+
"<iframe id='i_frame' " +
|
|
508
|
+
loadingAttribute +
|
|
509
|
+
" data-isloaded='0' src='" +
|
|
510
|
+
embedCode +
|
|
511
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
|
|
512
|
+
if (iFrameConfig && iFrameConfig.aspectRatio) {
|
|
513
|
+
iframe =
|
|
514
|
+
"<div class='!h-full'><div class='" +
|
|
515
|
+
getAspectRatioClass() +
|
|
516
|
+
"'><iframe id='i_frame' " +
|
|
517
|
+
loadingAttribute +
|
|
518
|
+
" data-isloaded='0' src='" +
|
|
519
|
+
embedCode +
|
|
520
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
|
|
436
521
|
//TODO Weiche Animation der Inhalte
|
|
437
522
|
} else {
|
|
438
|
-
if (iFrameConfig.fixedHeight) {
|
|
439
|
-
iframe =
|
|
523
|
+
if (iFrameConfig && iFrameConfig.fixedHeight) {
|
|
524
|
+
iframe =
|
|
525
|
+
"<div style='height:" +
|
|
526
|
+
iFrameConfig.fixedHeight +
|
|
527
|
+
"px'><iframe data-isloaded='0' " +
|
|
528
|
+
loadingAttribute +
|
|
529
|
+
" src='" +
|
|
530
|
+
embedCode +
|
|
531
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
|
|
440
532
|
} else {
|
|
441
|
-
iframe =
|
|
533
|
+
iframe =
|
|
534
|
+
"<div class='!h-full'><iframe data-isloaded='0' " +
|
|
535
|
+
loadingAttribute +
|
|
536
|
+
" src='" +
|
|
537
|
+
embedCode +
|
|
538
|
+
"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
|
|
442
539
|
}
|
|
443
540
|
}
|
|
444
541
|
replaceAnimated(rootElement, iframe, false)
|
|
@@ -447,29 +544,33 @@ const ExternalService = function (context) {
|
|
|
447
544
|
const initDataPolicy = function () {
|
|
448
545
|
if (dataPolicyCheck) {
|
|
449
546
|
acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
|
|
450
|
-
listen('click', handleDatapolicy, acceptButton)
|
|
547
|
+
acceptButton && listen('click', handleDatapolicy, acceptButton)
|
|
451
548
|
if (settingsCookie.isSettingsCookieExistent(id)) {
|
|
452
|
-
console.log(
|
|
549
|
+
console.log(
|
|
550
|
+
'Dienst ' +
|
|
551
|
+
id +
|
|
552
|
+
' ist im Cookie enthalten und hat den Wert ' +
|
|
553
|
+
settingsCookie.isSettingsCookieAccepted(id)
|
|
554
|
+
)
|
|
453
555
|
if (settingsCookie.isSettingsCookieAccepted(id)) {
|
|
454
|
-
console.log(
|
|
455
|
-
loadServiceWithDataPolicyButton()
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
dataPolicyBox.style.visibility = 'visible';
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
else {
|
|
463
|
-
console.log("Dienst " + id + " ist im Cookie nicht enthalten, prüfe daher den Default")
|
|
464
|
-
if (document.getElementById(id).getAttribute("data-whitelist") == "true") {
|
|
465
|
-
console.log("Ist per Default eingeschaltet")
|
|
466
|
-
console.log("Lade den Dienst")
|
|
467
|
-
loadServiceWithDataPolicyButton();
|
|
556
|
+
console.log('Lade den Dienst')
|
|
557
|
+
loadServiceWithDataPolicyButton()
|
|
558
|
+
} else {
|
|
559
|
+
console.log('Zeige Datapolicy-Box')
|
|
560
|
+
dataPolicyBox.style.visibility = 'visible'
|
|
468
561
|
}
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
562
|
+
} else {
|
|
563
|
+
console.log(
|
|
564
|
+
'Dienst ' + id + ' ist im Cookie nicht enthalten, prüfe daher den Default'
|
|
565
|
+
)
|
|
566
|
+
if (document.getElementById(id).getAttribute('data-whitelist') == 'true') {
|
|
567
|
+
console.log('Ist per Default eingeschaltet')
|
|
568
|
+
console.log('Lade den Dienst')
|
|
569
|
+
loadServiceWithDataPolicyButton()
|
|
570
|
+
} else {
|
|
571
|
+
console.log('Ist per Default ausgeschaltet')
|
|
572
|
+
console.log('Zeige Datapolicy-Box')
|
|
573
|
+
dataPolicyBox.style.visibility = 'visible'
|
|
473
574
|
}
|
|
474
575
|
}
|
|
475
576
|
listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
|
|
@@ -10,8 +10,6 @@ hbsTemplates['noDatapolicyCheck'] = handlebars.compile(`
|
|
|
10
10
|
{{> components/external-service/external_service_with_datapolicy_check }}
|
|
11
11
|
`)
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
13
|
const TemplatePageExternalService = (args) => {
|
|
16
14
|
return hbsTemplates['default']({ ...args })
|
|
17
15
|
}
|
|
@@ -34,7 +32,7 @@ export default {
|
|
|
34
32
|
iframeHeight: 400,
|
|
35
33
|
},
|
|
36
34
|
chromatic: {
|
|
37
|
-
disableSnapshot: true
|
|
35
|
+
disableSnapshot: true,
|
|
38
36
|
},
|
|
39
37
|
},
|
|
40
38
|
}
|
|
@@ -62,7 +60,7 @@ export const ExterneDiensteDatawrapperNoResponsiveFixedHeight = {
|
|
|
62
60
|
export const ExterneDiensteDatawrapperNoResponsiveAspectRatio = {
|
|
63
61
|
render: TemplatePageExternalService.bind({}),
|
|
64
62
|
name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Aspect Ratio)',
|
|
65
|
-
args: fixtures.Datawrapper_CDN_NoResponsiveAspectRatio.args
|
|
63
|
+
args: fixtures.Datawrapper_CDN_NoResponsiveAspectRatio.args,
|
|
66
64
|
}
|
|
67
65
|
export const ExterneDiensteDatawrapperContentRefresher = {
|
|
68
66
|
render: TemplatePageExternalService.bind({}),
|
|
@@ -75,6 +73,12 @@ export const WahlGemeindeErgebnis = {
|
|
|
75
73
|
args: fixtures.Wahl_Gemeinde_Ergebnis.args,
|
|
76
74
|
}
|
|
77
75
|
|
|
76
|
+
export const twentyThreeDegrees = {
|
|
77
|
+
render: TemplatePageExternalService.bind({}),
|
|
78
|
+
name: '23 Degrees (Kommunalwahl 2026)',
|
|
79
|
+
args: fixtures.twentyThreeDegrees.args,
|
|
80
|
+
}
|
|
81
|
+
|
|
78
82
|
export const Snapshot = {
|
|
79
83
|
render: snapshotTemplate.bind({}),
|
|
80
84
|
name: 'Snapshot',
|
|
@@ -82,5 +86,5 @@ export const Snapshot = {
|
|
|
82
86
|
args: fixtures,
|
|
83
87
|
parameters: {
|
|
84
88
|
chromatic: { disableSnapshot: false },
|
|
85
|
-
}
|
|
89
|
+
},
|
|
86
90
|
}
|
package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
|
|
3
3
|
<div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
|
|
4
4
|
this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
|
|
5
|
-
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
5
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
6
6
|
"fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
|
|
7
7
|
{{~> components/external-service/components/external_service_data_policy ~}}
|
|
8
8
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"ARTE_concert_new":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Datawrapper_CDN_NoResponsiveFixedHeightReload":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":true,"setTimeForReload":"300","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveFixedHeight":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveAspectRatio":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":"4x3"}},"Datawrapper_CDN":{"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Esri":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}},"Facebook":{"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Flourish":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Giphy":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Instagram":{"config":{"useAsSnapshot":true},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Twitter":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Vimeo":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube_360":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}},"Wahl_Gemeinde_Ergebnis":{"config":{"template":"noDatapolicyCheck","useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}
|
|
1
|
+
{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"ARTE_concert_new":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Datawrapper_CDN_NoResponsiveFixedHeightReload":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":true,"setTimeForReload":"300","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveFixedHeight":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveAspectRatio":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":"4x3"}},"Datawrapper_CDN":{"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Esri":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}},"Facebook":{"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Flourish":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"twentyThreeDegrees":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"23degrees","externalServiceEmbedType":"js","externalServiceName":"23degrees (Kommunalwahl 2026)"},"serviceUrl":"https://app.23degrees.io/embed/Qbk0sdqMq9V7oZj0-bar-horizontal-test-parametrisierung-and?filter=JTdCJTIyYTAlMjIlM0ElMjJTdWx6YSUyMiU3RA==","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Giphy":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Instagram":{"config":{"useAsSnapshot":true},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Twitter":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Vimeo":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube_360":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}},"Wahl_Gemeinde_Ergebnis":{"config":{"template":"noDatapolicyCheck","useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}
|