hr-design-system-handlebars 1.114.140 → 1.114.142

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +3 -3
  3. package/dist/assets/js/components/external-service/externalServiceDs.feature.js +28 -1
  4. package/package.json +1 -1
  5. package/src/assets/fixtures/content/copytext/copytext_externalservice.json +4 -202
  6. package/src/assets/fixtures/external-service/external_service.inc.json +28 -0
  7. package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json +1 -1
  8. package/src/stories/views/components/external-service/externalServiceDs.feature.js +28 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v1.114.142 (Mon Jun 02 2025)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - fix bug in tiktok-embed [#1283](https://github.com/mumprod/hr-design-system-handlebars/pull/1283) ([@hanswurstsalat](https://github.com/hanswurstsalat))
6
+
7
+ #### Authors: 1
8
+
9
+ - Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
10
+
11
+ ---
12
+
13
+ # v1.114.141 (Fri May 30 2025)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - expand external-services to include TikTok-Videos [#1282](https://github.com/mumprod/hr-design-system-handlebars/pull/1282) ([@hanswurstsalat](https://github.com/hanswurstsalat))
18
+
19
+ #### Authors: 1
20
+
21
+ - Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
22
+
23
+ ---
24
+
1
25
  # v1.114.140 (Tue May 20 2025)
2
26
 
3
27
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -3888,7 +3888,7 @@ article #commentList {
3888
3888
  border-bottom-color: var(--color-secondary-ds);
3889
3889
  }
3890
3890
  .counter-reset {
3891
- counter-reset: cnt1747725600960;
3891
+ counter-reset: cnt1748885057228;
3892
3892
  }
3893
3893
  .animate-delay-100 {
3894
3894
  --tw-animate-delay: 100ms;
@@ -4349,7 +4349,7 @@ html { scroll-behavior: smooth; }
4349
4349
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4350
4350
  }
4351
4351
  .-ordered {
4352
- counter-increment: cnt1747725600960 1;
4352
+ counter-increment: cnt1748885057228 1;
4353
4353
  }
4354
4354
  .-ordered::before {
4355
4355
  position: absolute;
@@ -4367,7 +4367,7 @@ html { scroll-behavior: smooth; }
4367
4367
  --tw-text-opacity: 1;
4368
4368
  color: rgba(0, 0, 0, 1);
4369
4369
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4370
- content: counter(cnt1747725600960);
4370
+ content: counter(cnt1748885057228);
4371
4371
  }
4372
4372
  /*! ****************************/
4373
4373
  /*! DataPolicy stuff */
package/dist/assets/js/components/external-service/externalServiceDs.feature.js CHANGED
@@ -33,7 +33,9 @@ const ExternalService = function (context) {
33
33
  contentRefresher,
34
34
  gemeindewahlergebnis,
35
35
  uniqueId,
36
- isExternalServiceLoaded = false
36
+ isExternalServiceLoaded = false,
37
+ tiktokOnPage = []
38
+
37
39
 
38
40
  const testDOMElements = function () {
39
41
  console.log(rootElement)
@@ -82,6 +84,9 @@ const ExternalService = function (context) {
82
84
  case 'instagram':
83
85
  createInstagramEmbed()
84
86
  break
87
+ case 'tiktok':
88
+ createTikTokEmbed()
89
+ break
85
90
  case 'twitter':
86
91
  createTwitterEmbed()
87
92
  break
@@ -373,6 +378,28 @@ const ExternalService = function (context) {
373
378
  }, 250)
374
379
  }
375
380
 
381
+ async function createTikTokEmbed() {
382
+ if (!document.getElementById('tiktok-js')) {
383
+ loadScript('tiktok-js', '//www.tiktok.com/embed.js', true)
384
+ }
385
+ const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`;
386
+ const tiktokEmbedData = await fetch(tiktokEmbedDataUrl);
387
+ const tiktokEmbedDataJson = await tiktokEmbedData.json();
388
+ replaceAnimated(rootElement, tiktokEmbedDataJson.html, false, reloadTikTokEmbed)
389
+ }
390
+
391
+ const reloadTikTokEmbed = function() {
392
+ if(!tiktokOnPage.length) {
393
+ const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`;
394
+ tiktokOnPage = Array.from(document.querySelectorAll(selector),);
395
+ }
396
+ if (typeof tiktokEmbed !== 'undefined' && tiktokOnPage.length) {
397
+ tiktokEmbed.lib.render(tiktokOnPage);
398
+ } else {
399
+ reloadTikTokEmbed();
400
+ }
401
+ }
402
+
376
403
  const createTwitterEmbed = function () {
377
404
  loadScript('twitter-js', '//platform.twitter.com/widgets.js', true)
378
405
  embedExternalService(reloadTwitterWidget)
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.114.140",
9
+ "version": "1.114.142",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/fixtures/content/copytext/copytext_externalservice.json CHANGED
@@ -6,7 +6,7 @@
6
6
  },
7
7
  {
8
8
  "isHeadline": true,
9
- "text": "Wahl Gemeinde Ergebnis"
9
+ "text": "TikTok"
10
10
  },
11
11
  {
12
12
  "paragraphBoxItem": {
@@ -14,142 +14,18 @@
14
14
  "toModel": {
15
15
  "externalService": {
16
16
  "@->jsoninclude": "external-service/external_service.inc.json",
17
- "@->contentpath": "Wahl_Gemeinde_Ergebnis"
17
+ "@->contentpath": "TikTok"
18
18
  }
19
19
  }
20
20
  }
21
21
  },
22
- {
23
- "isHeadline": true,
24
- "text": "360Grad"
25
- },
26
- {
27
- "paragraphBoxItem": {
28
- "isExternalService": true,
29
- "toModel": {
30
- "externalService": {
31
- "@->jsoninclude": "external-service/external_service.inc.json",
32
- "@->contentpath": "360Grad"
33
- }
34
- }
35
- }
36
- },
37
- {
38
- "isHeadline": true,
39
- "text": "ARD-Mediathek (Video)"
40
- },
41
- {
42
- "paragraphBoxItem": {
43
- "isExternalService": true,
44
- "toModel": {
45
- "externalService": {
46
- "@->jsoninclude": "external-service/external_service.inc.json",
47
- "@->contentpath": "ARD_Mediathek_Video"
48
- }
49
- }
50
- }
51
- },
52
- {
53
- "isHeadline": true,
54
- "text": "ARTE Concert 2.0"
55
- },
56
- {
57
- "paragraphBoxItem": {
58
- "isExternalService": true,
59
- "toModel": {
60
- "externalService": {
61
- "@->jsoninclude": "external-service/external_service.inc.json",
62
- "@->contentpath": "ARTE_concert_new"
63
- }
64
- }
65
- }
66
- },
67
- {
68
- "isHeadline": true,
69
- "text": "Bundesliga Audiostream"
70
- },
71
- {
72
- "paragraphBoxItem": {
73
- "isExternalService": true,
74
- "toModel": {
75
- "externalService": {
76
- "@->jsoninclude": "external-service/external_service.inc.json",
77
- "@->contentpath": "Bundesliga_Audiostream"
78
- }
79
- }
80
- }
81
- },
82
- {
83
- "isHeadline": true,
84
- "text": "Datawrapper CDN"
85
- },
86
- {
87
- "paragraphBoxItem": {
88
- "isExternalService": true,
89
- "toModel": {
90
- "externalService": {
91
- "@->jsoninclude": "external-service/external_service.inc.json",
92
- "@->contentpath": "Datawrapper_CDN"
93
- }
94
- }
95
- }
96
- },
97
- {
98
- "isHeadline": true,
99
- "text": "Esri Karte"
100
- },
101
- {
102
- "paragraphBoxItem": {
103
- "isExternalService": true,
104
- "toModel": {
105
- "externalService": {
106
- "@->jsoninclude": "external-service/external_service.inc.json",
107
- "@->contentpath": "Esri"
108
- }
109
- }
110
- }
111
- },
112
- {
113
- "isHeadline": true,
114
- "text": "Facebook"
115
- },
116
- {
117
- "paragraphBoxItem": {
118
- "isExternalService": true,
119
- "toModel": {
120
- "externalService": {
121
- "@->jsoninclude": "external-service/external_service.inc.json",
122
- "@->contentpath": "Facebook"
123
- }
124
- }
125
- }
126
- },
127
- {
128
- "isHeadline": true,
129
- "text": "Flourish"
130
- },
131
- {
132
- "paragraphBoxItem": {
133
- "isExternalService": true,
134
- "toModel": {
135
- "externalService": {
136
- "@->jsoninclude": "external-service/external_service.inc.json",
137
- "@->contentpath": "Flourish"
138
- }
139
- }
140
- }
141
- },
142
- {
143
- "isHeadline": true,
144
- "text": "Giphy"
145
- },
146
22
  {
147
23
  "paragraphBoxItem": {
148
24
  "isExternalService": true,
149
25
  "toModel": {
150
26
  "externalService": {
151
27
  "@->jsoninclude": "external-service/external_service.inc.json",
152
- "@->contentpath": "Giphy"
28
+ "@->contentpath": "TikTok2"
153
29
  }
154
30
  }
155
31
  }
@@ -213,81 +89,6 @@
213
89
  }
214
90
  }
215
91
  }
216
- },
217
- {
218
- "isHeadline": true,
219
- "text": "Youtube 360°"
220
- },
221
- {
222
- "paragraphBoxItem": {
223
- "isExternalService": true,
224
- "toModel": {
225
- "externalService": {
226
- "@->jsoninclude": "external-service/external_service.inc.json",
227
- "@->contentpath": "Youtube_360"
228
- }
229
- }
230
- }
231
- },
232
- {
233
- "isHeadline": true,
234
- "text": "Statischer Dienst"
235
- },
236
- {
237
- "paragraphBoxItem": {
238
- "isExternalService": true,
239
- "toModel": {
240
- "externalService": {
241
- "@->jsoninclude": "external-service/external_service.inc.json",
242
- "@->contentpath": "Statischer_Dienst"
243
- }
244
- }
245
- }
246
- },
247
- {
248
- "isHeadline": true,
249
- "text": "Wahlmonitor"
250
- },
251
- {
252
- "paragraphBoxItem": {
253
- "isExternalService": true,
254
- "toModel": {
255
- "externalService": {
256
- "@->jsoninclude": "external-service/external_service.inc.json",
257
- "@->contentpath": "Wahlmonitor"
258
- }
259
- }
260
- }
261
- },
262
- {
263
- "isHeadline": true,
264
- "text": "Wahlkreiskarte"
265
- },
266
- {
267
- "paragraphBoxItem": {
268
- "isExternalService": true,
269
- "toModel": {
270
- "externalService": {
271
- "@->jsoninclude": "external-service/external_service.inc.json",
272
- "@->contentpath": "Wahlkreiskarte"
273
- }
274
- }
275
- }
276
- },
277
- {
278
- "isHeadline": true,
279
- "text": "Koalitionsrechner"
280
- },
281
- {
282
- "paragraphBoxItem": {
283
- "isExternalService": true,
284
- "toModel": {
285
- "externalService": {
286
- "@->jsoninclude": "external-service/external_service.inc.json",
287
- "@->contentpath": "Koalitionsrechner"
288
- }
289
- }
290
- }
291
92
  }
292
93
  ],
293
94
  "dataPolicy": {
@@ -301,6 +102,7 @@
301
102
  { "key": "flourish", "value": "Flourish (Datengrafik)" },
302
103
  { "key": "giphy", "value": "Giphy (animiertes GIF)" },
303
104
  { "key": "instagram", "value": "Instagram" },
105
+ { "key": "tiktok", "value": "TikTok" },
304
106
  { "key": "twitter-post", "value": "Twitter" },
305
107
  { "key": "vimeo", "value": "Vimeo (Video)" },
306
108
  { "key": "youtube", "value": "YouTube (Video)" },
package/src/assets/fixtures/external-service/external_service.inc.json CHANGED
@@ -147,6 +147,34 @@
147
147
  "setTimedReloadIframe": false,
148
148
  "setTimeForReload": ""
149
149
  },
150
+ "TikTok": {
151
+ "externalServiceConfig": {
152
+ "isWhitelisted": false,
153
+ "makeConfigurable": true,
154
+ "embedAsIFrame": false,
155
+ "externalServiceId": "tiktok",
156
+ "externalServiceEmbedType": "js",
157
+ "externalServiceName": "TikTok"
158
+ },
159
+ "serviceUrl": "https://www.tiktok.com/@hessenschau/video/7497190033804283158",
160
+ "setResponsiveIframe": false,
161
+ "setTimedReloadIframe": false,
162
+ "setTimeForReload": ""
163
+ },
164
+ "TikTok2": {
165
+ "externalServiceConfig": {
166
+ "isWhitelisted": false,
167
+ "makeConfigurable": true,
168
+ "embedAsIFrame": false,
169
+ "externalServiceId": "tiktok",
170
+ "externalServiceEmbedType": "js",
171
+ "externalServiceName": "TikTok"
172
+ },
173
+ "serviceUrl": "https://www.tiktok.com/@ratingmyfood.ffm/video/7488362181789158658",
174
+ "setResponsiveIframe": false,
175
+ "setTimedReloadIframe": false,
176
+ "setTimeForReload": ""
177
+ },
150
178
  "Twitter": {
151
179
  "externalServiceConfig": {
152
180
  "isWhitelisted": false,
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":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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":""}}}},{"isHeadline":true,"text":"Instagram"},{"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"},{"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"},{"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"},{"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":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"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'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","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":"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":""}}}},{"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":""}}}},{"isHeadline":true,"text":"Instagram"},{"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"},{"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"},{"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"},{"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)"}]}}
package/src/stories/views/components/external-service/externalServiceDs.feature.js CHANGED
@@ -33,7 +33,9 @@ const ExternalService = function (context) {
33
33
  contentRefresher,
34
34
  gemeindewahlergebnis,
35
35
  uniqueId,
36
- isExternalServiceLoaded = false
36
+ isExternalServiceLoaded = false,
37
+ tiktokOnPage = []
38
+
37
39
 
38
40
  const testDOMElements = function () {
39
41
  console.log(rootElement)
@@ -82,6 +84,9 @@ const ExternalService = function (context) {
82
84
  case 'instagram':
83
85
  createInstagramEmbed()
84
86
  break
87
+ case 'tiktok':
88
+ createTikTokEmbed()
89
+ break
85
90
  case 'twitter':
86
91
  createTwitterEmbed()
87
92
  break
@@ -373,6 +378,28 @@ const ExternalService = function (context) {
373
378
  }, 250)
374
379
  }
375
380
 
381
+ async function createTikTokEmbed() {
382
+ if (!document.getElementById('tiktok-js')) {
383
+ loadScript('tiktok-js', '//www.tiktok.com/embed.js', true)
384
+ }
385
+ const tiktokEmbedDataUrl = `https://www.tiktok.com/oembed?url=${options.embedCode}`;
386
+ const tiktokEmbedData = await fetch(tiktokEmbedDataUrl);
387
+ const tiktokEmbedDataJson = await tiktokEmbedData.json();
388
+ replaceAnimated(rootElement, tiktokEmbedDataJson.html, false, reloadTikTokEmbed)
389
+ }
390
+
391
+ const reloadTikTokEmbed = function() {
392
+ if(!tiktokOnPage.length) {
393
+ const selector = `blockquote.tiktok-embed[cite="${options.embedCode}"]`;
394
+ tiktokOnPage = Array.from(document.querySelectorAll(selector),);
395
+ }
396
+ if (typeof tiktokEmbed !== 'undefined' && tiktokOnPage.length) {
397
+ tiktokEmbed.lib.render(tiktokOnPage);
398
+ } else {
399
+ reloadTikTokEmbed();
400
+ }
401
+ }
402
+
376
403
  const createTwitterEmbed = function () {
377
404
  loadScript('twitter-js', '//platform.twitter.com/widgets.js', true)
378
405
  embedExternalService(reloadTwitterWidget)