hr-design-system-handlebars 1.114.117 → 1.114.118

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 (19) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/assets/index.css +3 -3
  3. package/dist/assets/js/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js +4 -1
  4. package/dist/assets/js/components/external-service/externalServiceDs.feature.js +14 -6
  5. package/dist/views/components/content/copytext/components/externalservice.hbs +1 -1
  6. package/dist/views/components/content/copytext/copytext_body.hbs +66 -58
  7. package/dist/views/components/external-service/external_service.hbs +3 -3
  8. package/dist/views/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
  9. package/dist/views_static/components/content/copytext/components/externalservice.hbs +1 -1
  10. package/dist/views_static/components/content/copytext/copytext_body.hbs +66 -58
  11. package/dist/views_static/components/external-service/external_service.hbs +3 -3
  12. package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
  13. package/package.json +1 -1
  14. package/src/stories/views/components/content/copytext/components/externalservice.hbs +1 -1
  15. package/src/stories/views/components/content/copytext/copytext_body.hbs +66 -58
  16. package/src/stories/views/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js +4 -1
  17. package/src/stories/views/components/external-service/externalServiceDs.feature.js +14 -6
  18. package/src/stories/views/components/external-service/external_service.hbs +3 -3
  19. package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v1.114.118 (Thu Mar 06 2025)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - DPE-3524: Lazy Loading für Ext. Dienste [#1259](https://github.com/mumprod/hr-design-system-handlebars/pull/1259) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
6
+
7
+ #### Authors: 2
8
+
9
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
10
+ - selbaciri (saad.elbaciri@hr.de)
11
+
12
+ ---
13
+
1
14
  # v1.114.117 (Thu Mar 06 2025)
2
15
 
3
16
  #### 🐛 Bug Fix
@@ -3860,7 +3860,7 @@ article #commentList {
3860
3860
  border-bottom-color: var(--color-secondary-ds);
3861
3861
  }
3862
3862
  .counter-reset {
3863
- counter-reset: cnt1741255979082;
3863
+ counter-reset: cnt1741267255954;
3864
3864
  }
3865
3865
  .animate-delay-100 {
3866
3866
  --tw-animate-delay: 100ms;
@@ -4305,7 +4305,7 @@ html { scroll-behavior: smooth; }
4305
4305
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4306
4306
  }
4307
4307
  .-ordered {
4308
- counter-increment: cnt1741255979082 1;
4308
+ counter-increment: cnt1741267255954 1;
4309
4309
  }
4310
4310
  .-ordered::before {
4311
4311
  position: absolute;
@@ -4323,7 +4323,7 @@ html { scroll-behavior: smooth; }
4323
4323
  --tw-text-opacity: 1;
4324
4324
  color: rgba(0, 0, 0, 1);
4325
4325
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4326
- content: counter(cnt1741255979082);
4326
+ content: counter(cnt1741267255954);
4327
4327
  }
4328
4328
  /*! ****************************/
4329
4329
  /*! DataPolicy stuff */
@@ -1,4 +1,4 @@
1
- const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode) {
1
+ const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, isFirst) {
2
2
 
3
3
  const { element: rootElement } = context
4
4
  let aspectRatio = configAR
@@ -67,6 +67,9 @@ const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHe
67
67
  iframe.setAttribute('frameborder', '0')
68
68
  iframe.src = embedCode
69
69
  iframe.id = 'datawrapper-chart-' + uniqueId
70
+ if (!isFirst) {
71
+ iframe.loading = "lazy";
72
+ }
70
73
 
71
74
  div.appendChild(iframe)
72
75
  parentDiv.appendChild(div)
@@ -22,7 +22,8 @@ const ExternalService = function (context) {
22
22
  embedType = options.embedType,
23
23
  dataPolicyCheck = options.dataPolicyCheck || false,
24
24
  id = options.id,
25
- iFrameConfig = options.iFrameConfig
25
+ iFrameConfig = options.iFrameConfig,
26
+ isFirst = options.isFirst
26
27
  let acceptButton,
27
28
  acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
28
29
  let embedCode = options.embedCode,
@@ -192,6 +193,9 @@ const ExternalService = function (context) {
192
193
  iframe.src = cleanUrl;
193
194
  iframe.style.width = "100%";
194
195
  iframe.style.border = "0";
196
+ if (!isFirst) {
197
+ iframe.loading = "lazy";
198
+ }
195
199
  rootElement.appendChild(iframe);
196
200
 
197
201
  window.addEventListener("message", function (e) {
@@ -237,7 +241,7 @@ const ExternalService = function (context) {
237
241
  if (iFrameConfig.noResponsiveIframe == 'true') {
238
242
 
239
243
  //Klassisches Iframe mit AR-Wrapper oder fester Höhe
240
- noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
244
+ noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode, isFirst)
241
245
  noResponsiveIframe.createNoResponsiveIframe()
242
246
 
243
247
  if (iFrameConfig.refreshContent == 'true') {
@@ -287,6 +291,9 @@ const ExternalService = function (context) {
287
291
  iframe.setAttribute('frameborder', '0')
288
292
  iframe.src = embedCode
289
293
  iframe.id = 'datawrapper-chart-' + uniqueId
294
+ if (!isFirst) {
295
+ iframe.loading = "lazy";
296
+ }
290
297
  rootElement.insertBefore(iframe, null)
291
298
 
292
299
  loadScript(
@@ -395,15 +402,16 @@ const ExternalService = function (context) {
395
402
 
396
403
  const loadIframe = function () {
397
404
  console.log('load iframe ' + id)
398
- iframe = "<iframe id='i_frame' data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
405
+ const loadingAttribute = isFirst ? "" : "loading='lazy'";
406
+ iframe = "<iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
399
407
  if (iFrameConfig.aspectRatio) {
400
- iframe = "<div class='!h-full'><div class='" + getAspectRatioClass() + "'><iframe id='i_frame' data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
408
+ iframe = "<div class='!h-full'><div class='" + getAspectRatioClass() + "'><iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
401
409
  //TODO Weiche Animation der Inhalte
402
410
  } else {
403
411
  if (iFrameConfig.fixedHeight) {
404
- iframe = "<div style='height:" + iFrameConfig.fixedHeight + "px'><iframe data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
412
+ iframe = "<div style='height:" + iFrameConfig.fixedHeight + "px'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
405
413
  } else {
406
- iframe = "<div class='!h-full'><iframe data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
414
+ iframe = "<div class='!h-full'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
407
415
  }
408
416
  }
409
417
  replaceAnimated(rootElement, iframe, false)
@@ -1,5 +1,5 @@
1
1
  {{#with this.toModel.externalService}}
2
2
 
3
- {{> components/external-service/external_service }}
3
+ {{> components/external-service/external_service _isFirst=../_isFirst }}
4
4
 
5
5
  {{/with}}
@@ -2,64 +2,72 @@
2
2
  {{> components/content/copytext/components/headline }}
3
3
  {{/if}}
4
4
  {{#unless this.isInfoBox}}
5
- {{~#with this.paragraphBoxItem }}
6
- {{~#if this.isImage}}
7
- {{~> components/content/copytext/components/image/image _isWebview=../_isWebview _isTickerCopytext=../_isTickerCopytext}}
8
- {{/if~}}
9
- {{~#if this.isContentBox}}
10
- {{~> components/content/copytext/components/contentbox/contentbox _isWebview=../_isWebview ~}}
11
- {{/if~}}
12
- {{~#if this.isAccordion}}
13
- {{~> components/content/copytext/components/accordion/accordion ~}}
14
- {{/if~}}
15
- {{~#if this.isGallery}}
16
- {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
17
- {{/if~}}
18
- {{~#if this.isFileDownload}}
19
- {{> components/content/copytext/components/filedownload }}
20
- {{/if~}}
21
- {{~#if this.isMap}}
22
- {{> components/content/copytext/components/map }}
23
- {{/if~}}
24
- {{~#if this.isWebForm}}
25
- {{> components/forms/webform }}
26
- {{/if~}}
27
- {{~#if this.isNewsletter}}
28
- {{> components/newsletter/newsletter }}
29
- {{/if~}}
30
- {{~#if this.isAudioOnDemand}}
31
- {{> components/content/copytext/components/audio _isTickerCopytext=../_isTickerCopytext }}
32
- {{/if~}}
33
- {{~#if this.isAudioEventLivestream}}
34
- {{> components/content/copytext/components/audioeventlivestream _isTickerCopytext=../_isTickerCopytext }}
35
- {{/if~}}
36
- {{~#if this.isPodcastEpisode}}
37
- {{> components/content/copytext/components/podcastepisode }}
38
- {{/if~}}
39
- {{~#if this.isVideoOnDemand}}
40
- {{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
41
- {{/if~}}
42
- {{~#if this.isLivestream}}
43
- {{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
44
- {{/if~}}
45
- {{~#if this.isTweet}}
46
- {{> components/content/copytext/components/tweet }}
47
- {{~/if}}
48
- {{~#if this.isRadioPlaylist}}
49
- {{> components/content/copytext/components/radioplaylist }}
50
- {{~/if}}
51
- {{~#if this.isVoting}}
52
- {{> components/content/copytext/components/voting }}
53
- {{/if~}}
54
- {{~#if this.isExternalService}}
55
- {{> components/content/copytext/components/externalservice }}
56
- {{/if~}}
57
- {{~#if this.isContentNav}}
58
- {{#with this.toModel.contentNavigationTeaser}}
59
- {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
60
- {{/with}}
61
- {{/if~}}
62
- {{~/with}}
5
+ {{~#if @first~}}
6
+ {{~#with this.paragraphBoxItem }}
7
+ {{~#if this.isExternalService}}
8
+ {{> components/content/copytext/components/externalservice _isFirst=true }}
9
+ {{/if~}}
10
+ {{~/with}}
11
+ {{else}}
12
+ {{~#with this.paragraphBoxItem }}
13
+ {{~#if this.isImage}}
14
+ {{~> components/content/copytext/components/image/image _isWebview=../_isWebview _isTickerCopytext=../_isTickerCopytext}}
15
+ {{/if~}}
16
+ {{~#if this.isContentBox}}
17
+ {{~> components/content/copytext/components/contentbox/contentbox _isWebview=../_isWebview ~}}
18
+ {{/if~}}
19
+ {{~#if this.isAccordion}}
20
+ {{~> components/content/copytext/components/accordion/accordion ~}}
21
+ {{/if~}}
22
+ {{~#if this.isGallery}}
23
+ {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
24
+ {{/if~}}
25
+ {{~#if this.isFileDownload}}
26
+ {{> components/content/copytext/components/filedownload }}
27
+ {{/if~}}
28
+ {{~#if this.isMap}}
29
+ {{> components/content/copytext/components/map }}
30
+ {{/if~}}
31
+ {{~#if this.isWebForm}}
32
+ {{> components/forms/webform }}
33
+ {{/if~}}
34
+ {{~#if this.isNewsletter}}
35
+ {{> components/newsletter/newsletter }}
36
+ {{/if~}}
37
+ {{~#if this.isAudioOnDemand}}
38
+ {{> components/content/copytext/components/audio _isTickerCopytext=../_isTickerCopytext }}
39
+ {{/if~}}
40
+ {{~#if this.isAudioEventLivestream}}
41
+ {{> components/content/copytext/components/audioeventlivestream _isTickerCopytext=../_isTickerCopytext }}
42
+ {{/if~}}
43
+ {{~#if this.isPodcastEpisode}}
44
+ {{> components/content/copytext/components/podcastepisode }}
45
+ {{/if~}}
46
+ {{~#if this.isVideoOnDemand}}
47
+ {{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
48
+ {{/if~}}
49
+ {{~#if this.isLivestream}}
50
+ {{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
51
+ {{/if~}}
52
+ {{~#if this.isTweet}}
53
+ {{> components/content/copytext/components/tweet }}
54
+ {{~/if}}
55
+ {{~#if this.isRadioPlaylist}}
56
+ {{> components/content/copytext/components/radioplaylist }}
57
+ {{~/if}}
58
+ {{~#if this.isVoting}}
59
+ {{> components/content/copytext/components/voting }}
60
+ {{/if~}}
61
+ {{~#if this.isExternalService}}
62
+ {{> components/content/copytext/components/externalservice _isFirst=false }}
63
+ {{/if~}}
64
+ {{~#if this.isContentNav}}
65
+ {{#with this.toModel.contentNavigationTeaser}}
66
+ {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
67
+ {{/with}}
68
+ {{/if~}}
69
+ {{~/with}}
70
+ {{/if}}
63
71
  {{/unless}}
64
72
 
65
73
  {{~#with this.paragraphTeaserItem }}
@@ -1,6 +1,6 @@
1
1
  {{#if this.externalServiceConfig.makeConfigurable}}
2
2
  <!-- Embedding via JS with DataPolicyCheck-->
3
- {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
3
+ {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser _isFirst=_isFirst}}
4
4
 
5
5
  {{else}}
6
6
 
@@ -11,13 +11,13 @@
11
11
  <!-- Embedding via Iframe -->
12
12
  <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
13
13
  {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
14
- <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
14
+ <iframe {{#unless _isFirst}} loading='lazy' {{/unless}} frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
15
15
  {{#unless this.fixedHeight}}</div>{{/unless}}
16
16
  </div>
17
17
  {{else}}
18
18
  <!-- Embedding via JS without DataPolicyCheck-->
19
19
  <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
20
- data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
20
+ data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","isFirst":{{_isFirst}},"dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
21
21
  </div>
22
22
  {{/if}}
23
23
  {{~> components/external-service/components/external_service_caption ~}}
@@ -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}}","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}}","isFirst":{{_isFirst}},"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,5 +1,5 @@
1
1
  {{#with this.toModel.externalService}}
2
2
 
3
- {{> components/external-service/external_service }}
3
+ {{> components/external-service/external_service _isFirst=../_isFirst }}
4
4
 
5
5
  {{/with}}
@@ -2,64 +2,72 @@
2
2
  {{> components/content/copytext/components/headline }}
3
3
  {{/if}}
4
4
  {{#unless this.isInfoBox}}
5
- {{~#with this.paragraphBoxItem }}
6
- {{~#if this.isImage}}
7
- {{~> components/content/copytext/components/image/image _isWebview=../_isWebview _isTickerCopytext=../_isTickerCopytext}}
8
- {{/if~}}
9
- {{~#if this.isContentBox}}
10
- {{~> components/content/copytext/components/contentbox/contentbox _isWebview=../_isWebview ~}}
11
- {{/if~}}
12
- {{~#if this.isAccordion}}
13
- {{~> components/content/copytext/components/accordion/accordion ~}}
14
- {{/if~}}
15
- {{~#if this.isGallery}}
16
- {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
17
- {{/if~}}
18
- {{~#if this.isFileDownload}}
19
- {{> components/content/copytext/components/filedownload }}
20
- {{/if~}}
21
- {{~#if this.isMap}}
22
- {{> components/content/copytext/components/map }}
23
- {{/if~}}
24
- {{~#if this.isWebForm}}
25
- {{> components/forms/webform }}
26
- {{/if~}}
27
- {{~#if this.isNewsletter}}
28
- {{> components/newsletter/newsletter }}
29
- {{/if~}}
30
- {{~#if this.isAudioOnDemand}}
31
- {{> components/content/copytext/components/audio _isTickerCopytext=../_isTickerCopytext }}
32
- {{/if~}}
33
- {{~#if this.isAudioEventLivestream}}
34
- {{> components/content/copytext/components/audioeventlivestream _isTickerCopytext=../_isTickerCopytext }}
35
- {{/if~}}
36
- {{~#if this.isPodcastEpisode}}
37
- {{> components/content/copytext/components/podcastepisode }}
38
- {{/if~}}
39
- {{~#if this.isVideoOnDemand}}
40
- {{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
41
- {{/if~}}
42
- {{~#if this.isLivestream}}
43
- {{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
44
- {{/if~}}
45
- {{~#if this.isTweet}}
46
- {{> components/content/copytext/components/tweet }}
47
- {{~/if}}
48
- {{~#if this.isRadioPlaylist}}
49
- {{> components/content/copytext/components/radioplaylist }}
50
- {{~/if}}
51
- {{~#if this.isVoting}}
52
- {{> components/content/copytext/components/voting }}
53
- {{/if~}}
54
- {{~#if this.isExternalService}}
55
- {{> components/content/copytext/components/externalservice }}
56
- {{/if~}}
57
- {{~#if this.isContentNav}}
58
- {{#with this.toModel.contentNavigationTeaser}}
59
- {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
60
- {{/with}}
61
- {{/if~}}
62
- {{~/with}}
5
+ {{~#if @first~}}
6
+ {{~#with this.paragraphBoxItem }}
7
+ {{~#if this.isExternalService}}
8
+ {{> components/content/copytext/components/externalservice _isFirst=true }}
9
+ {{/if~}}
10
+ {{~/with}}
11
+ {{else}}
12
+ {{~#with this.paragraphBoxItem }}
13
+ {{~#if this.isImage}}
14
+ {{~> components/content/copytext/components/image/image _isWebview=../_isWebview _isTickerCopytext=../_isTickerCopytext}}
15
+ {{/if~}}
16
+ {{~#if this.isContentBox}}
17
+ {{~> components/content/copytext/components/contentbox/contentbox _isWebview=../_isWebview ~}}
18
+ {{/if~}}
19
+ {{~#if this.isAccordion}}
20
+ {{~> components/content/copytext/components/accordion/accordion ~}}
21
+ {{/if~}}
22
+ {{~#if this.isGallery}}
23
+ {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
24
+ {{/if~}}
25
+ {{~#if this.isFileDownload}}
26
+ {{> components/content/copytext/components/filedownload }}
27
+ {{/if~}}
28
+ {{~#if this.isMap}}
29
+ {{> components/content/copytext/components/map }}
30
+ {{/if~}}
31
+ {{~#if this.isWebForm}}
32
+ {{> components/forms/webform }}
33
+ {{/if~}}
34
+ {{~#if this.isNewsletter}}
35
+ {{> components/newsletter/newsletter }}
36
+ {{/if~}}
37
+ {{~#if this.isAudioOnDemand}}
38
+ {{> components/content/copytext/components/audio _isTickerCopytext=../_isTickerCopytext }}
39
+ {{/if~}}
40
+ {{~#if this.isAudioEventLivestream}}
41
+ {{> components/content/copytext/components/audioeventlivestream _isTickerCopytext=../_isTickerCopytext }}
42
+ {{/if~}}
43
+ {{~#if this.isPodcastEpisode}}
44
+ {{> components/content/copytext/components/podcastepisode }}
45
+ {{/if~}}
46
+ {{~#if this.isVideoOnDemand}}
47
+ {{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
48
+ {{/if~}}
49
+ {{~#if this.isLivestream}}
50
+ {{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
51
+ {{/if~}}
52
+ {{~#if this.isTweet}}
53
+ {{> components/content/copytext/components/tweet }}
54
+ {{~/if}}
55
+ {{~#if this.isRadioPlaylist}}
56
+ {{> components/content/copytext/components/radioplaylist }}
57
+ {{~/if}}
58
+ {{~#if this.isVoting}}
59
+ {{> components/content/copytext/components/voting }}
60
+ {{/if~}}
61
+ {{~#if this.isExternalService}}
62
+ {{> components/content/copytext/components/externalservice _isFirst=false }}
63
+ {{/if~}}
64
+ {{~#if this.isContentNav}}
65
+ {{#with this.toModel.contentNavigationTeaser}}
66
+ {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
67
+ {{/with}}
68
+ {{/if~}}
69
+ {{~/with}}
70
+ {{/if}}
63
71
  {{/unless}}
64
72
 
65
73
  {{~#with this.paragraphTeaserItem }}
@@ -1,6 +1,6 @@
1
1
  {{#if this.externalServiceConfig.makeConfigurable}}
2
2
  <!-- Embedding via JS with DataPolicyCheck-->
3
- {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
3
+ {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser _isFirst=_isFirst}}
4
4
 
5
5
  {{else}}
6
6
 
@@ -11,13 +11,13 @@
11
11
  <!-- Embedding via Iframe -->
12
12
  <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
13
13
  {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
14
- <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
14
+ <iframe {{#unless _isFirst}} loading='lazy' {{/unless}} frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
15
15
  {{#unless this.fixedHeight}}</div>{{/unless}}
16
16
  </div>
17
17
  {{else}}
18
18
  <!-- Embedding via JS without DataPolicyCheck-->
19
19
  <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
20
- data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
20
+ data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","isFirst":{{_isFirst}},"dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
21
21
  </div>
22
22
  {{/if}}
23
23
  {{~> components/external-service/components/external_service_caption ~}}
@@ -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}}","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}}","isFirst":{{_isFirst}},"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.114.117",
9
+ "version": "1.114.118",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
@@ -1,5 +1,5 @@
1
1
  {{#with this.toModel.externalService}}
2
2
 
3
- {{> components/external-service/external_service }}
3
+ {{> components/external-service/external_service _isFirst=../_isFirst }}
4
4
 
5
5
  {{/with}}
@@ -2,64 +2,72 @@
2
2
  {{> components/content/copytext/components/headline }}
3
3
  {{/if}}
4
4
  {{#unless this.isInfoBox}}
5
- {{~#with this.paragraphBoxItem }}
6
- {{~#if this.isImage}}
7
- {{~> components/content/copytext/components/image/image _isWebview=../_isWebview _isTickerCopytext=../_isTickerCopytext}}
8
- {{/if~}}
9
- {{~#if this.isContentBox}}
10
- {{~> components/content/copytext/components/contentbox/contentbox _isWebview=../_isWebview ~}}
11
- {{/if~}}
12
- {{~#if this.isAccordion}}
13
- {{~> components/content/copytext/components/accordion/accordion ~}}
14
- {{/if~}}
15
- {{~#if this.isGallery}}
16
- {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
17
- {{/if~}}
18
- {{~#if this.isFileDownload}}
19
- {{> components/content/copytext/components/filedownload }}
20
- {{/if~}}
21
- {{~#if this.isMap}}
22
- {{> components/content/copytext/components/map }}
23
- {{/if~}}
24
- {{~#if this.isWebForm}}
25
- {{> components/forms/webform }}
26
- {{/if~}}
27
- {{~#if this.isNewsletter}}
28
- {{> components/newsletter/newsletter }}
29
- {{/if~}}
30
- {{~#if this.isAudioOnDemand}}
31
- {{> components/content/copytext/components/audio _isTickerCopytext=../_isTickerCopytext }}
32
- {{/if~}}
33
- {{~#if this.isAudioEventLivestream}}
34
- {{> components/content/copytext/components/audioeventlivestream _isTickerCopytext=../_isTickerCopytext }}
35
- {{/if~}}
36
- {{~#if this.isPodcastEpisode}}
37
- {{> components/content/copytext/components/podcastepisode }}
38
- {{/if~}}
39
- {{~#if this.isVideoOnDemand}}
40
- {{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
41
- {{/if~}}
42
- {{~#if this.isLivestream}}
43
- {{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
44
- {{/if~}}
45
- {{~#if this.isTweet}}
46
- {{> components/content/copytext/components/tweet }}
47
- {{~/if}}
48
- {{~#if this.isRadioPlaylist}}
49
- {{> components/content/copytext/components/radioplaylist }}
50
- {{~/if}}
51
- {{~#if this.isVoting}}
52
- {{> components/content/copytext/components/voting }}
53
- {{/if~}}
54
- {{~#if this.isExternalService}}
55
- {{> components/content/copytext/components/externalservice }}
56
- {{/if~}}
57
- {{~#if this.isContentNav}}
58
- {{#with this.toModel.contentNavigationTeaser}}
59
- {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
60
- {{/with}}
61
- {{/if~}}
62
- {{~/with}}
5
+ {{~#if @first~}}
6
+ {{~#with this.paragraphBoxItem }}
7
+ {{~#if this.isExternalService}}
8
+ {{> components/content/copytext/components/externalservice _isFirst=true }}
9
+ {{/if~}}
10
+ {{~/with}}
11
+ {{else}}
12
+ {{~#with this.paragraphBoxItem }}
13
+ {{~#if this.isImage}}
14
+ {{~> components/content/copytext/components/image/image _isWebview=../_isWebview _isTickerCopytext=../_isTickerCopytext}}
15
+ {{/if~}}
16
+ {{~#if this.isContentBox}}
17
+ {{~> components/content/copytext/components/contentbox/contentbox _isWebview=../_isWebview ~}}
18
+ {{/if~}}
19
+ {{~#if this.isAccordion}}
20
+ {{~> components/content/copytext/components/accordion/accordion ~}}
21
+ {{/if~}}
22
+ {{~#if this.isGallery}}
23
+ {{> components/content/copytext/components/gallery/gallery _isTickerCopytext=../_isTickerCopytext }}
24
+ {{/if~}}
25
+ {{~#if this.isFileDownload}}
26
+ {{> components/content/copytext/components/filedownload }}
27
+ {{/if~}}
28
+ {{~#if this.isMap}}
29
+ {{> components/content/copytext/components/map }}
30
+ {{/if~}}
31
+ {{~#if this.isWebForm}}
32
+ {{> components/forms/webform }}
33
+ {{/if~}}
34
+ {{~#if this.isNewsletter}}
35
+ {{> components/newsletter/newsletter }}
36
+ {{/if~}}
37
+ {{~#if this.isAudioOnDemand}}
38
+ {{> components/content/copytext/components/audio _isTickerCopytext=../_isTickerCopytext }}
39
+ {{/if~}}
40
+ {{~#if this.isAudioEventLivestream}}
41
+ {{> components/content/copytext/components/audioeventlivestream _isTickerCopytext=../_isTickerCopytext }}
42
+ {{/if~}}
43
+ {{~#if this.isPodcastEpisode}}
44
+ {{> components/content/copytext/components/podcastepisode }}
45
+ {{/if~}}
46
+ {{~#if this.isVideoOnDemand}}
47
+ {{> components/content/copytext/components/video/video _isTickerCopytext=../_isTickerCopytext }}
48
+ {{/if~}}
49
+ {{~#if this.isLivestream}}
50
+ {{> components/content/copytext/components/videolivestream _isTickerCopytext=../_isTickerCopytext }}
51
+ {{/if~}}
52
+ {{~#if this.isTweet}}
53
+ {{> components/content/copytext/components/tweet }}
54
+ {{~/if}}
55
+ {{~#if this.isRadioPlaylist}}
56
+ {{> components/content/copytext/components/radioplaylist }}
57
+ {{~/if}}
58
+ {{~#if this.isVoting}}
59
+ {{> components/content/copytext/components/voting }}
60
+ {{/if~}}
61
+ {{~#if this.isExternalService}}
62
+ {{> components/content/copytext/components/externalservice _isFirst=false }}
63
+ {{/if~}}
64
+ {{~#if this.isContentNav}}
65
+ {{#with this.toModel.contentNavigationTeaser}}
66
+ {{~> components/teaser/content_nav/teaser_content_nav _isCopytext=true ~}}
67
+ {{/with}}
68
+ {{/if~}}
69
+ {{~/with}}
70
+ {{/if}}
63
71
  {{/unless}}
64
72
 
65
73
  {{~#with this.paragraphTeaserItem }}
@@ -1,4 +1,4 @@
1
- const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode) {
1
+ const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, isFirst) {
2
2
 
3
3
  const { element: rootElement } = context
4
4
  let aspectRatio = configAR
@@ -67,6 +67,9 @@ const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHe
67
67
  iframe.setAttribute('frameborder', '0')
68
68
  iframe.src = embedCode
69
69
  iframe.id = 'datawrapper-chart-' + uniqueId
70
+ if (!isFirst) {
71
+ iframe.loading = "lazy";
72
+ }
70
73
 
71
74
  div.appendChild(iframe)
72
75
  parentDiv.appendChild(div)
@@ -22,7 +22,8 @@ const ExternalService = function (context) {
22
22
  embedType = options.embedType,
23
23
  dataPolicyCheck = options.dataPolicyCheck || false,
24
24
  id = options.id,
25
- iFrameConfig = options.iFrameConfig
25
+ iFrameConfig = options.iFrameConfig,
26
+ isFirst = options.isFirst
26
27
  let acceptButton,
27
28
  acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
28
29
  let embedCode = options.embedCode,
@@ -192,6 +193,9 @@ const ExternalService = function (context) {
192
193
  iframe.src = cleanUrl;
193
194
  iframe.style.width = "100%";
194
195
  iframe.style.border = "0";
196
+ if (!isFirst) {
197
+ iframe.loading = "lazy";
198
+ }
195
199
  rootElement.appendChild(iframe);
196
200
 
197
201
  window.addEventListener("message", function (e) {
@@ -237,7 +241,7 @@ const ExternalService = function (context) {
237
241
  if (iFrameConfig.noResponsiveIframe == 'true') {
238
242
 
239
243
  //Klassisches Iframe mit AR-Wrapper oder fester Höhe
240
- noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
244
+ noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode, isFirst)
241
245
  noResponsiveIframe.createNoResponsiveIframe()
242
246
 
243
247
  if (iFrameConfig.refreshContent == 'true') {
@@ -287,6 +291,9 @@ const ExternalService = function (context) {
287
291
  iframe.setAttribute('frameborder', '0')
288
292
  iframe.src = embedCode
289
293
  iframe.id = 'datawrapper-chart-' + uniqueId
294
+ if (!isFirst) {
295
+ iframe.loading = "lazy";
296
+ }
290
297
  rootElement.insertBefore(iframe, null)
291
298
 
292
299
  loadScript(
@@ -395,15 +402,16 @@ const ExternalService = function (context) {
395
402
 
396
403
  const loadIframe = function () {
397
404
  console.log('load iframe ' + id)
398
- iframe = "<iframe id='i_frame' data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
405
+ const loadingAttribute = isFirst ? "" : "loading='lazy'";
406
+ iframe = "<iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
399
407
  if (iFrameConfig.aspectRatio) {
400
- iframe = "<div class='!h-full'><div class='" + getAspectRatioClass() + "'><iframe id='i_frame' data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
408
+ iframe = "<div class='!h-full'><div class='" + getAspectRatioClass() + "'><iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
401
409
  //TODO Weiche Animation der Inhalte
402
410
  } else {
403
411
  if (iFrameConfig.fixedHeight) {
404
- iframe = "<div style='height:" + iFrameConfig.fixedHeight + "px'><iframe data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
412
+ iframe = "<div style='height:" + iFrameConfig.fixedHeight + "px'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
405
413
  } else {
406
- iframe = "<div class='!h-full'><iframe data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
414
+ iframe = "<div class='!h-full'><iframe data-isloaded='0' "+ loadingAttribute +" src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
407
415
  }
408
416
  }
409
417
  replaceAnimated(rootElement, iframe, false)
@@ -1,6 +1,6 @@
1
1
  {{#if this.externalServiceConfig.makeConfigurable}}
2
2
  <!-- Embedding via JS with DataPolicyCheck-->
3
- {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser}}
3
+ {{> components/external-service/external_service_with_datapolicy_check _isTeaser=_isTeaser _isFirst=_isFirst}}
4
4
 
5
5
  {{else}}
6
6
 
@@ -11,13 +11,13 @@
11
11
  <!-- Embedding via Iframe -->
12
12
  <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
13
13
  {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
14
- <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
14
+ <iframe {{#unless _isFirst}} loading='lazy' {{/unless}} frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
15
15
  {{#unless this.fixedHeight}}</div>{{/unless}}
16
16
  </div>
17
17
  {{else}}
18
18
  <!-- Embedding via JS without DataPolicyCheck-->
19
19
  <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
20
- data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
20
+ data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","isFirst":{{_isFirst}},"dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
21
21
  </div>
22
22
  {{/if}}
23
23
  {{~> components/external-service/components/external_service_caption ~}}
@@ -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}}","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}}","isFirst":{{_isFirst}},"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>