hr-design-system-handlebars 1.114.118 β 1.114.120
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 +6 -6
- package/dist/assets/js/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js +2 -2
- package/dist/assets/js/components/external-service/externalServiceDs.feature.js +5 -5
- package/dist/views/components/content/copytext/components/externalservice.hbs +1 -1
- package/dist/views/components/content/copytext/copytext_body.hbs +2 -2
- package/dist/views/components/external-service/external_service.hbs +3 -3
- package/dist/views/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
- package/dist/views/components/teaser/teaser_external_service.hbs +1 -1
- package/dist/views/components/teaser/ticker/teaser_ticker_timeline.hbs +7 -7
- package/dist/views_static/components/content/copytext/components/externalservice.hbs +1 -1
- package/dist/views_static/components/content/copytext/copytext_body.hbs +2 -2
- package/dist/views_static/components/external-service/external_service.hbs +3 -3
- package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
- package/dist/views_static/components/teaser/teaser_external_service.hbs +1 -1
- package/dist/views_static/components/teaser/ticker/teaser_ticker_timeline.hbs +7 -7
- package/package.json +1 -1
- package/src/stories/views/components/content/copytext/components/externalservice.hbs +1 -1
- package/src/stories/views/components/content/copytext/copytext_body.hbs +2 -2
- package/src/stories/views/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js +2 -2
- package/src/stories/views/components/external-service/externalServiceDs.feature.js +5 -5
- package/src/stories/views/components/external-service/external_service.hbs +3 -3
- package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs +1 -1
- package/src/stories/views/components/teaser/teaser_external_service.hbs +1 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.hbs +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v1.114.120 (Fri Mar 07 2025)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- adapt ticker-timeline to tickerpage [#1261](https://github.com/mumprod/hr-design-system-handlebars/pull/1261) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.114.119 (Fri Mar 07 2025)
|
|
14
|
+
|
|
15
|
+
#### π Bug Fix
|
|
16
|
+
|
|
17
|
+
- change _isFirst to _loadLazy & set _LoadLazy in Teaser to false [#1260](https://github.com/mumprod/hr-design-system-handlebars/pull/1260) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
|
|
18
|
+
|
|
19
|
+
#### Authors: 2
|
|
20
|
+
|
|
21
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
22
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v1.114.118 (Thu Mar 06 2025)
|
|
2
27
|
|
|
3
28
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -3339,6 +3339,9 @@ article #commentList {
|
|
|
3339
3339
|
font-size: 2.125rem;
|
|
3340
3340
|
line-height: 2.375rem;
|
|
3341
3341
|
}
|
|
3342
|
+
.text-\[15px\] {
|
|
3343
|
+
font-size: 15px;
|
|
3344
|
+
}
|
|
3342
3345
|
.text-base {
|
|
3343
3346
|
font-size: 1rem;
|
|
3344
3347
|
line-height: 1.375rem;
|
|
@@ -3860,7 +3863,7 @@ article #commentList {
|
|
|
3860
3863
|
border-bottom-color: var(--color-secondary-ds);
|
|
3861
3864
|
}
|
|
3862
3865
|
.counter-reset {
|
|
3863
|
-
counter-reset:
|
|
3866
|
+
counter-reset: cnt1741368990511;
|
|
3864
3867
|
}
|
|
3865
3868
|
.animate-delay-100 {
|
|
3866
3869
|
--tw-animate-delay: 100ms;
|
|
@@ -4305,7 +4308,7 @@ html { scroll-behavior: smooth; }
|
|
|
4305
4308
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4306
4309
|
}
|
|
4307
4310
|
.-ordered {
|
|
4308
|
-
counter-increment:
|
|
4311
|
+
counter-increment: cnt1741368990511 1;
|
|
4309
4312
|
}
|
|
4310
4313
|
.-ordered::before {
|
|
4311
4314
|
position: absolute;
|
|
@@ -4323,7 +4326,7 @@ html { scroll-behavior: smooth; }
|
|
|
4323
4326
|
--tw-text-opacity: 1;
|
|
4324
4327
|
color: rgba(0, 0, 0, 1);
|
|
4325
4328
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4326
|
-
content: counter(
|
|
4329
|
+
content: counter(cnt1741368990511);
|
|
4327
4330
|
}
|
|
4328
4331
|
/*! ****************************/
|
|
4329
4332
|
/*! DataPolicy stuff */
|
|
@@ -9094,9 +9097,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
9094
9097
|
.\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1:has(+.-hideOnMobile) {
|
|
9095
9098
|
order: 1;
|
|
9096
9099
|
}
|
|
9097
|
-
.\[\&\:not\(\:last-child\)\]\:pb-5:not(:last-child) {
|
|
9098
|
-
padding-bottom: 1.25rem;
|
|
9099
|
-
}
|
|
9100
9100
|
@media(min-width:1170px) {
|
|
9101
9101
|
|
|
9102
9102
|
.\[\@media\(min-width\:1170px\)\]\:-mr-14 {
|
package/dist/assets/js/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode,
|
|
1
|
+
const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, lazyLoad) {
|
|
2
2
|
|
|
3
3
|
const { element: rootElement } = context
|
|
4
4
|
let aspectRatio = configAR
|
|
@@ -67,7 +67,7 @@ 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 (
|
|
70
|
+
if (lazyLoad) {
|
|
71
71
|
iframe.loading = "lazy";
|
|
72
72
|
}
|
|
73
73
|
|
|
@@ -23,7 +23,7 @@ const ExternalService = function (context) {
|
|
|
23
23
|
dataPolicyCheck = options.dataPolicyCheck || false,
|
|
24
24
|
id = options.id,
|
|
25
25
|
iFrameConfig = options.iFrameConfig,
|
|
26
|
-
|
|
26
|
+
lazyLoad = options.lazyLoad
|
|
27
27
|
let acceptButton,
|
|
28
28
|
acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
|
|
29
29
|
let embedCode = options.embedCode,
|
|
@@ -193,7 +193,7 @@ const ExternalService = function (context) {
|
|
|
193
193
|
iframe.src = cleanUrl;
|
|
194
194
|
iframe.style.width = "100%";
|
|
195
195
|
iframe.style.border = "0";
|
|
196
|
-
if (
|
|
196
|
+
if (lazyLoad) {
|
|
197
197
|
iframe.loading = "lazy";
|
|
198
198
|
}
|
|
199
199
|
rootElement.appendChild(iframe);
|
|
@@ -241,7 +241,7 @@ const ExternalService = function (context) {
|
|
|
241
241
|
if (iFrameConfig.noResponsiveIframe == 'true') {
|
|
242
242
|
|
|
243
243
|
//Klassisches Iframe mit AR-Wrapper oder fester HΓΆhe
|
|
244
|
-
noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode,
|
|
244
|
+
noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode, lazyLoad)
|
|
245
245
|
noResponsiveIframe.createNoResponsiveIframe()
|
|
246
246
|
|
|
247
247
|
if (iFrameConfig.refreshContent == 'true') {
|
|
@@ -291,7 +291,7 @@ const ExternalService = function (context) {
|
|
|
291
291
|
iframe.setAttribute('frameborder', '0')
|
|
292
292
|
iframe.src = embedCode
|
|
293
293
|
iframe.id = 'datawrapper-chart-' + uniqueId
|
|
294
|
-
if (
|
|
294
|
+
if (lazyLoad) {
|
|
295
295
|
iframe.loading = "lazy";
|
|
296
296
|
}
|
|
297
297
|
rootElement.insertBefore(iframe, null)
|
|
@@ -402,7 +402,7 @@ const ExternalService = function (context) {
|
|
|
402
402
|
|
|
403
403
|
const loadIframe = function () {
|
|
404
404
|
console.log('load iframe ' + id)
|
|
405
|
-
const loadingAttribute =
|
|
405
|
+
const loadingAttribute = lazyLoad ? "loading='lazy'" : "";
|
|
406
406
|
iframe = "<iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
|
|
407
407
|
if (iFrameConfig.aspectRatio) {
|
|
408
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>"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{{~#if @first~}}
|
|
6
6
|
{{~#with this.paragraphBoxItem }}
|
|
7
7
|
{{~#if this.isExternalService}}
|
|
8
|
-
{{> components/content/copytext/components/externalservice
|
|
8
|
+
{{> components/content/copytext/components/externalservice _lazyLoad=false }}
|
|
9
9
|
{{/if~}}
|
|
10
10
|
{{~/with}}
|
|
11
11
|
{{else}}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
{{> components/content/copytext/components/voting }}
|
|
60
60
|
{{/if~}}
|
|
61
61
|
{{~#if this.isExternalService}}
|
|
62
|
-
{{> components/content/copytext/components/externalservice
|
|
62
|
+
{{> components/content/copytext/components/externalservice _lazyLoad=true }}
|
|
63
63
|
{{/if~}}
|
|
64
64
|
{{~#if this.isContentNav}}
|
|
65
65
|
{{#with this.toModel.contentNavigationTeaser}}
|
|
@@ -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 _lazyLoad=_lazyLoad}}
|
|
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 {{#
|
|
14
|
+
<iframe {{#if _lazyLoad}} loading='lazy' {{/if}} 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}}","
|
|
20
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"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}}","
|
|
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~}}
|
|
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,6 +1,6 @@
|
|
|
1
1
|
<div class="grid-cols-12 col-span-12 px-5 sm:px-0{{~inline-switch this.teasersize '["50"]' '[" md:col-span-6",""]'}}">
|
|
2
2
|
|
|
3
|
-
{{> components/external-service/external_service _isTeaser="true"}}
|
|
3
|
+
{{> components/external-service/external_service _isTeaser="true" _lazyLoad=false}}
|
|
4
4
|
|
|
5
5
|
{{> components/teaser/components/teaser_featured_content _size=this.realTeaserSize}}
|
|
6
6
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{{~#with this.tickerItemResults ~}}
|
|
2
2
|
<ul class="{{#if ../_css}} {{../_css}}{{/if}} {{if ../this.isStandardTeaser ' pl-10 pr-5' ' pl-10 md:pl-5 pr-5 md:pr-0'}}">
|
|
3
3
|
{{~#each this~}}
|
|
4
|
-
<li class="relative h-auto [&:not(:last-child)]:pb-5">
|
|
4
|
+
<li class="relative h-auto {{#if ../../_isTickerpage}}[&:not(:last-child)]:pb-2{{else}}[&:not(:last-child)]:pb-5{{/if}}">
|
|
5
5
|
<div class="absolute h-full">
|
|
6
6
|
<div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -left-5"></div>
|
|
7
7
|
{{#unless @last}}
|
|
8
8
|
<div class="relative flex flex-col w-0 h-full timelineBorder -left-4">
|
|
9
|
-
<div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-
|
|
9
|
+
<div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-boulder{{/if}}"></div>
|
|
10
10
|
<div class="h-2"></div>
|
|
11
|
-
</div>
|
|
12
|
-
{{/unless}}
|
|
11
|
+
</div>
|
|
12
|
+
{{/unless}}
|
|
13
13
|
</div>
|
|
14
14
|
{{#unless this.hideDateTime}}
|
|
15
15
|
{{#with this.tickerItemDateTime~}}
|
|
16
|
-
<div class="text-xs{{#if ../../../_color}} text-{{../../../_color}}{{/if}}">
|
|
16
|
+
<div class="font-headingSerif {{#if ../../../_isTickerpage}}text-sm{{else}}text-xs{{/if}}{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion{{/if}}">
|
|
17
17
|
{{#if ../../../this.isMultiDay}}
|
|
18
18
|
{{this.broadcastDate }}
|
|
19
19
|
{{else}}
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
{{/if}}
|
|
26
26
|
</div>
|
|
27
27
|
{{~/with}}
|
|
28
|
-
{{/unless}}
|
|
29
|
-
<a class="{{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white text-base js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}}
|
|
28
|
+
{{/unless}}
|
|
29
|
+
<a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-[15px]{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>{{this.relevantTitle}}</a>
|
|
30
30
|
</li>
|
|
31
31
|
{{~/each~}}
|
|
32
32
|
</ul>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{{~#if @first~}}
|
|
6
6
|
{{~#with this.paragraphBoxItem }}
|
|
7
7
|
{{~#if this.isExternalService}}
|
|
8
|
-
{{> components/content/copytext/components/externalservice
|
|
8
|
+
{{> components/content/copytext/components/externalservice _lazyLoad=false }}
|
|
9
9
|
{{/if~}}
|
|
10
10
|
{{~/with}}
|
|
11
11
|
{{else}}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
{{> components/content/copytext/components/voting }}
|
|
60
60
|
{{/if~}}
|
|
61
61
|
{{~#if this.isExternalService}}
|
|
62
|
-
{{> components/content/copytext/components/externalservice
|
|
62
|
+
{{> components/content/copytext/components/externalservice _lazyLoad=true }}
|
|
63
63
|
{{/if~}}
|
|
64
64
|
{{~#if this.isContentNav}}
|
|
65
65
|
{{#with this.toModel.contentNavigationTeaser}}
|
|
@@ -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 _lazyLoad=_lazyLoad}}
|
|
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 {{#
|
|
14
|
+
<iframe {{#if _lazyLoad}} loading='lazy' {{/if}} 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}}","
|
|
20
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
|
|
21
21
|
</div>
|
|
22
22
|
{{/if}}
|
|
23
23
|
{{~> components/external-service/components/external_service_caption ~}}
|
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}}","
|
|
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~}}
|
|
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,6 +1,6 @@
|
|
|
1
1
|
<div class="grid-cols-12 col-span-12 px-5 sm:px-0{{~inline-switch this.teasersize '["50"]' '[" md:col-span-6",""]'}}">
|
|
2
2
|
|
|
3
|
-
{{> components/external-service/external_service _isTeaser="true"}}
|
|
3
|
+
{{> components/external-service/external_service _isTeaser="true" _lazyLoad=false}}
|
|
4
4
|
|
|
5
5
|
{{> components/teaser/components/teaser_featured_content _size=this.realTeaserSize}}
|
|
6
6
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{{~#with this.tickerItemResults ~}}
|
|
2
2
|
<ul class="{{#if ../_css}} {{../_css}}{{/if}} {{if ../this.isStandardTeaser ' pl-10 pr-5' ' pl-10 md:pl-5 pr-5 md:pr-0'}}">
|
|
3
3
|
{{~#each this~}}
|
|
4
|
-
<li class="relative h-auto [&:not(:last-child)]:pb-5">
|
|
4
|
+
<li class="relative h-auto {{#if ../../_isTickerpage}}[&:not(:last-child)]:pb-2{{else}}[&:not(:last-child)]:pb-5{{/if}}">
|
|
5
5
|
<div class="absolute h-full">
|
|
6
6
|
<div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -left-5"></div>
|
|
7
7
|
{{#unless @last}}
|
|
8
8
|
<div class="relative flex flex-col w-0 h-full timelineBorder -left-4">
|
|
9
|
-
<div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-
|
|
9
|
+
<div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-boulder{{/if}}"></div>
|
|
10
10
|
<div class="h-2"></div>
|
|
11
|
-
</div>
|
|
12
|
-
{{/unless}}
|
|
11
|
+
</div>
|
|
12
|
+
{{/unless}}
|
|
13
13
|
</div>
|
|
14
14
|
{{#unless this.hideDateTime}}
|
|
15
15
|
{{#with this.tickerItemDateTime~}}
|
|
16
|
-
<div class="text-xs{{#if ../../../_color}} text-{{../../../_color}}{{/if}}">
|
|
16
|
+
<div class="font-headingSerif {{#if ../../../_isTickerpage}}text-sm{{else}}text-xs{{/if}}{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion{{/if}}">
|
|
17
17
|
{{#if ../../../this.isMultiDay}}
|
|
18
18
|
{{this.broadcastDate }}
|
|
19
19
|
{{else}}
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
{{/if}}
|
|
26
26
|
</div>
|
|
27
27
|
{{~/with}}
|
|
28
|
-
{{/unless}}
|
|
29
|
-
<a class="{{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white text-base js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}}
|
|
28
|
+
{{/unless}}
|
|
29
|
+
<a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-[15px]{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>{{this.relevantTitle}}</a>
|
|
30
30
|
</li>
|
|
31
31
|
{{~/each~}}
|
|
32
32
|
</ul>
|
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.
|
|
9
|
+
"version": "1.114.120",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{{~#if @first~}}
|
|
6
6
|
{{~#with this.paragraphBoxItem }}
|
|
7
7
|
{{~#if this.isExternalService}}
|
|
8
|
-
{{> components/content/copytext/components/externalservice
|
|
8
|
+
{{> components/content/copytext/components/externalservice _lazyLoad=false }}
|
|
9
9
|
{{/if~}}
|
|
10
10
|
{{~/with}}
|
|
11
11
|
{{else}}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
{{> components/content/copytext/components/voting }}
|
|
60
60
|
{{/if~}}
|
|
61
61
|
{{~#if this.isExternalService}}
|
|
62
|
-
{{> components/content/copytext/components/externalservice
|
|
62
|
+
{{> components/content/copytext/components/externalservice _lazyLoad=true }}
|
|
63
63
|
{{/if~}}
|
|
64
64
|
{{~#if this.isContentNav}}
|
|
65
65
|
{{#with this.toModel.contentNavigationTeaser}}
|
package/src/stories/views/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode,
|
|
1
|
+
const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, lazyLoad) {
|
|
2
2
|
|
|
3
3
|
const { element: rootElement } = context
|
|
4
4
|
let aspectRatio = configAR
|
|
@@ -67,7 +67,7 @@ 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 (
|
|
70
|
+
if (lazyLoad) {
|
|
71
71
|
iframe.loading = "lazy";
|
|
72
72
|
}
|
|
73
73
|
|
|
@@ -23,7 +23,7 @@ const ExternalService = function (context) {
|
|
|
23
23
|
dataPolicyCheck = options.dataPolicyCheck || false,
|
|
24
24
|
id = options.id,
|
|
25
25
|
iFrameConfig = options.iFrameConfig,
|
|
26
|
-
|
|
26
|
+
lazyLoad = options.lazyLoad
|
|
27
27
|
let acceptButton,
|
|
28
28
|
acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
|
|
29
29
|
let embedCode = options.embedCode,
|
|
@@ -193,7 +193,7 @@ const ExternalService = function (context) {
|
|
|
193
193
|
iframe.src = cleanUrl;
|
|
194
194
|
iframe.style.width = "100%";
|
|
195
195
|
iframe.style.border = "0";
|
|
196
|
-
if (
|
|
196
|
+
if (lazyLoad) {
|
|
197
197
|
iframe.loading = "lazy";
|
|
198
198
|
}
|
|
199
199
|
rootElement.appendChild(iframe);
|
|
@@ -241,7 +241,7 @@ const ExternalService = function (context) {
|
|
|
241
241
|
if (iFrameConfig.noResponsiveIframe == 'true') {
|
|
242
242
|
|
|
243
243
|
//Klassisches Iframe mit AR-Wrapper oder fester HΓΆhe
|
|
244
|
-
noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode,
|
|
244
|
+
noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode, lazyLoad)
|
|
245
245
|
noResponsiveIframe.createNoResponsiveIframe()
|
|
246
246
|
|
|
247
247
|
if (iFrameConfig.refreshContent == 'true') {
|
|
@@ -291,7 +291,7 @@ const ExternalService = function (context) {
|
|
|
291
291
|
iframe.setAttribute('frameborder', '0')
|
|
292
292
|
iframe.src = embedCode
|
|
293
293
|
iframe.id = 'datawrapper-chart-' + uniqueId
|
|
294
|
-
if (
|
|
294
|
+
if (lazyLoad) {
|
|
295
295
|
iframe.loading = "lazy";
|
|
296
296
|
}
|
|
297
297
|
rootElement.insertBefore(iframe, null)
|
|
@@ -402,7 +402,7 @@ const ExternalService = function (context) {
|
|
|
402
402
|
|
|
403
403
|
const loadIframe = function () {
|
|
404
404
|
console.log('load iframe ' + id)
|
|
405
|
-
const loadingAttribute =
|
|
405
|
+
const loadingAttribute = lazyLoad ? "loading='lazy'" : "";
|
|
406
406
|
iframe = "<iframe id='i_frame' "+ loadingAttribute +" data-isloaded='0' src='" + embedCode + "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
|
|
407
407
|
if (iFrameConfig.aspectRatio) {
|
|
408
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>"
|
|
@@ -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 _lazyLoad=_lazyLoad}}
|
|
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 {{#
|
|
14
|
+
<iframe {{#if _lazyLoad}} loading='lazy' {{/if}} 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}}","
|
|
20
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{_lazyLoad}},"dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
|
|
21
21
|
</div>
|
|
22
22
|
{{/if}}
|
|
23
23
|
{{~> components/external-service/components/external_service_caption ~}}
|
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}}","
|
|
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~}}
|
|
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,6 +1,6 @@
|
|
|
1
1
|
<div class="grid-cols-12 col-span-12 px-5 sm:px-0{{~inline-switch this.teasersize '["50"]' '[" md:col-span-6",""]'}}">
|
|
2
2
|
|
|
3
|
-
{{> components/external-service/external_service _isTeaser="true"}}
|
|
3
|
+
{{> components/external-service/external_service _isTeaser="true" _lazyLoad=false}}
|
|
4
4
|
|
|
5
5
|
{{> components/teaser/components/teaser_featured_content _size=this.realTeaserSize}}
|
|
6
6
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{{~#with this.tickerItemResults ~}}
|
|
2
2
|
<ul class="{{#if ../_css}} {{../_css}}{{/if}} {{if ../this.isStandardTeaser ' pl-10 pr-5' ' pl-10 md:pl-5 pr-5 md:pr-0'}}">
|
|
3
3
|
{{~#each this~}}
|
|
4
|
-
<li class="relative h-auto [&:not(:last-child)]:pb-5">
|
|
4
|
+
<li class="relative h-auto {{#if ../../_isTickerpage}}[&:not(:last-child)]:pb-2{{else}}[&:not(:last-child)]:pb-5{{/if}}">
|
|
5
5
|
<div class="absolute h-full">
|
|
6
6
|
<div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -left-5"></div>
|
|
7
7
|
{{#unless @last}}
|
|
8
8
|
<div class="relative flex flex-col w-0 h-full timelineBorder -left-4">
|
|
9
|
-
<div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-
|
|
9
|
+
<div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-boulder{{/if}}"></div>
|
|
10
10
|
<div class="h-2"></div>
|
|
11
|
-
</div>
|
|
12
|
-
{{/unless}}
|
|
11
|
+
</div>
|
|
12
|
+
{{/unless}}
|
|
13
13
|
</div>
|
|
14
14
|
{{#unless this.hideDateTime}}
|
|
15
15
|
{{#with this.tickerItemDateTime~}}
|
|
16
|
-
<div class="text-xs{{#if ../../../_color}} text-{{../../../_color}}{{/if}}">
|
|
16
|
+
<div class="font-headingSerif {{#if ../../../_isTickerpage}}text-sm{{else}}text-xs{{/if}}{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion{{/if}}">
|
|
17
17
|
{{#if ../../../this.isMultiDay}}
|
|
18
18
|
{{this.broadcastDate }}
|
|
19
19
|
{{else}}
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
{{/if}}
|
|
26
26
|
</div>
|
|
27
27
|
{{~/with}}
|
|
28
|
-
{{/unless}}
|
|
29
|
-
<a class="{{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white text-base js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}}
|
|
28
|
+
{{/unless}}
|
|
29
|
+
<a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-[15px]{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>{{this.relevantTitle}}</a>
|
|
30
30
|
</li>
|
|
31
31
|
{{~/each~}}
|
|
32
32
|
</ul>
|