hr-design-system-handlebars 1.125.1 β 1.126.1
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 +28 -0
- package/dist/assets/index.css +9 -3
- package/dist/assets/js/alpine.js +15 -8
- package/dist/assets/js/base/tracking/pianoHelper.subfeature.js +32 -16
- package/dist/assets/js/components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js +28 -0
- package/dist/views/components/page/story/story_article.hbs +36 -33
- package/dist/views/components/scroll_depth_measurement/scroll_depth_measurement.hbs +7 -0
- package/dist/views_static/components/page/story/story_article.hbs +36 -33
- package/dist/views_static/components/scroll_depth_measurement/scroll_depth_measurement.hbs +7 -0
- package/package.json +13 -13
- package/src/assets/js/alpine.js +15 -8
- package/src/stories/views/base/tracking/pianoHelper.subfeature.js +32 -16
- package/src/stories/views/components/page/story/story_article.hbs +36 -33
- package/src/stories/views/components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js +28 -0
- package/src/stories/views/components/scroll_depth_measurement/scroll_depth_measurement.hbs +7 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
# v1.126.1 (Fri Dec 19 2025)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- :sparkles: Add hr_sophora_id to data send by page.scroll event [#1334](https://github.com/mumprod/hr-design-system-handlebars/pull/1334) ([@szuelch](https://github.com/szuelch))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@szuelch](https://github.com/szuelch)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.126.0 (Fri Dec 19 2025)
|
|
14
|
+
|
|
15
|
+
#### π Enhancement
|
|
16
|
+
|
|
17
|
+
- Feature/dpe 3470 [#1333](https://github.com/mumprod/hr-design-system-handlebars/pull/1333) ([@szuelch](https://github.com/szuelch))
|
|
18
|
+
|
|
19
|
+
#### π© Dependency Updates
|
|
20
|
+
|
|
21
|
+
- :arrow_up: Upgrade storybook to latest patch version 8.6.15 to secure⦠[#1332](https://github.com/mumprod/hr-design-system-handlebars/pull/1332) ([@szuelch](https://github.com/szuelch))
|
|
22
|
+
|
|
23
|
+
#### Authors: 1
|
|
24
|
+
|
|
25
|
+
- [@szuelch](https://github.com/szuelch)
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
1
29
|
# v1.125.1 (Wed Dec 17 2025)
|
|
2
30
|
|
|
3
31
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1726,6 +1726,9 @@ article #commentList {
|
|
|
1726
1726
|
.h-1 {
|
|
1727
1727
|
height: 0.25rem;
|
|
1728
1728
|
}
|
|
1729
|
+
.h-1\/4 {
|
|
1730
|
+
height: 25%;
|
|
1731
|
+
}
|
|
1729
1732
|
.h-10 {
|
|
1730
1733
|
height: 2.5rem;
|
|
1731
1734
|
}
|
|
@@ -1805,6 +1808,9 @@ article #commentList {
|
|
|
1805
1808
|
height: -moz-max-content;
|
|
1806
1809
|
height: max-content;
|
|
1807
1810
|
}
|
|
1811
|
+
.h-px {
|
|
1812
|
+
height: 1px;
|
|
1813
|
+
}
|
|
1808
1814
|
.h-screen {
|
|
1809
1815
|
height: 100vh;
|
|
1810
1816
|
}
|
|
@@ -3909,7 +3915,7 @@ article #commentList {
|
|
|
3909
3915
|
border-bottom-color: var(--color-secondary-ds);
|
|
3910
3916
|
}
|
|
3911
3917
|
.counter-reset {
|
|
3912
|
-
counter-reset:
|
|
3918
|
+
counter-reset: cnt1766157244936;
|
|
3913
3919
|
}
|
|
3914
3920
|
.animate-delay-100 {
|
|
3915
3921
|
--tw-animate-delay: 100ms;
|
|
@@ -4370,7 +4376,7 @@ html { scroll-behavior: smooth; }
|
|
|
4370
4376
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4371
4377
|
}
|
|
4372
4378
|
.-ordered {
|
|
4373
|
-
counter-increment:
|
|
4379
|
+
counter-increment: cnt1766157244936 1;
|
|
4374
4380
|
}
|
|
4375
4381
|
.-ordered::before {
|
|
4376
4382
|
position: absolute;
|
|
@@ -4388,7 +4394,7 @@ html { scroll-behavior: smooth; }
|
|
|
4388
4394
|
--tw-text-opacity: 1;
|
|
4389
4395
|
color: rgba(0, 0, 0, 1);
|
|
4390
4396
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4391
|
-
content: counter(
|
|
4397
|
+
content: counter(cnt1766157244936);
|
|
4392
4398
|
}
|
|
4393
4399
|
/*! ****************************/
|
|
4394
4400
|
/*! DataPolicy stuff */
|
package/dist/assets/js/alpine.js
CHANGED
|
@@ -19,11 +19,18 @@ AsyncAlpine.init(Alpine)
|
|
|
19
19
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
20
20
|
)
|
|
21
21
|
.data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
|
|
22
|
-
.data('socialSharingHandler', ()=>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
.data('
|
|
26
|
-
.data('
|
|
22
|
+
.data('socialSharingHandler', () =>
|
|
23
|
+
import('components/social_sharing/socialSharingHandler.alpine.js')
|
|
24
|
+
)
|
|
25
|
+
.data('inputHandler', () => import('components/forms/js/inputHandler.alpine.js'))
|
|
26
|
+
.data('contactForm', () => import('components/forms/js/contactForm.alpine.js'))
|
|
27
|
+
.data('newsletterForm', () => import('components/newsletter/js/newsletterForm.alpine.js'))
|
|
28
|
+
.data('gallerySlider', () =>
|
|
29
|
+
import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js')
|
|
30
|
+
)
|
|
31
|
+
.data('measureScrollDepth', () =>
|
|
32
|
+
import('components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js')
|
|
33
|
+
)
|
|
27
34
|
.start()
|
|
28
35
|
|
|
29
36
|
window.Alpine = Alpine
|
|
@@ -51,15 +58,15 @@ Alpine.store('sectionNavIsVisible', false)
|
|
|
51
58
|
Alpine.store('sharingIsVisible', false)
|
|
52
59
|
Alpine.store('sharingIsOpen', {
|
|
53
60
|
metadatabox: false,
|
|
54
|
-
mobilesticky: false
|
|
61
|
+
mobilesticky: false,
|
|
55
62
|
})
|
|
56
63
|
Alpine.store('sharingBottomPos', {
|
|
57
|
-
current: '0'
|
|
64
|
+
current: '0',
|
|
58
65
|
})
|
|
59
66
|
Alpine.store('forms', {
|
|
60
67
|
submissionAttempted: [],
|
|
61
68
|
serverErrorFields: [{}],
|
|
62
|
-
errorMessages: [{}]
|
|
69
|
+
errorMessages: [{}],
|
|
63
70
|
})
|
|
64
71
|
// Initialization of data handlers
|
|
65
72
|
Alpine.data('mainNavigationHandler', mainNavigationHandler)
|
|
@@ -1,38 +1,54 @@
|
|
|
1
|
-
import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
|
|
1
|
+
import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
|
|
2
2
|
|
|
3
|
-
const pianoErrorSecondLevelId = 99
|
|
3
|
+
const pianoErrorSecondLevelId = 99
|
|
4
4
|
|
|
5
5
|
const isTrackingAllowed = () => {
|
|
6
|
-
const settingsCookie = new SettingsCookie()
|
|
7
|
-
return
|
|
8
|
-
|
|
6
|
+
const settingsCookie = new SettingsCookie()
|
|
7
|
+
return (
|
|
8
|
+
!settingsCookie.isSettingsCookieExistent('ati') ||
|
|
9
|
+
settingsCookie.isSettingsCookieAccepted('ati')
|
|
10
|
+
)
|
|
11
|
+
}
|
|
9
12
|
|
|
10
13
|
const sendEvent = (eventType, event) => {
|
|
11
14
|
if (typeof pa !== 'undefined' && pa !== undefined && isTrackingAllowed()) {
|
|
12
|
-
pa.sendEvent(eventType, event)
|
|
15
|
+
pa.sendEvent(eventType, event)
|
|
13
16
|
}
|
|
14
|
-
}
|
|
17
|
+
}
|
|
15
18
|
|
|
16
19
|
const getDefaultEvent = (label, secondLevelId) => {
|
|
17
20
|
return {
|
|
18
21
|
click: label,
|
|
19
|
-
site_level2_id: determineSecondLevelId(secondLevelId)
|
|
22
|
+
site_level2_id: determineSecondLevelId(secondLevelId),
|
|
20
23
|
}
|
|
21
|
-
}
|
|
24
|
+
}
|
|
22
25
|
|
|
23
26
|
const determineSecondLevelId = (secondLevelId) => {
|
|
24
27
|
return secondLevelId !== undefined
|
|
25
28
|
? secondLevelId
|
|
26
|
-
: undefined !== pageDisplayConfig
|
|
27
|
-
|
|
29
|
+
: undefined !== pageDisplayConfig
|
|
30
|
+
? pageDisplayConfig.site_level2_id
|
|
31
|
+
: pianoErrorSecondLevelId
|
|
32
|
+
}
|
|
28
33
|
|
|
29
|
-
const uxAction = (label, secondLevelId) =>
|
|
34
|
+
const uxAction = (label, secondLevelId) =>
|
|
35
|
+
sendEvent('click.action', getDefaultEvent(label, secondLevelId))
|
|
30
36
|
|
|
31
|
-
const uxNavigation = (label, secondLevelId) =>
|
|
37
|
+
const uxNavigation = (label, secondLevelId) =>
|
|
38
|
+
sendEvent('click.navigation', getDefaultEvent(label, secondLevelId))
|
|
32
39
|
|
|
33
|
-
const pi = () => sendEvent('page.display', pageDisplayConfig)
|
|
40
|
+
const pi = () => sendEvent('page.display', pageDisplayConfig)
|
|
34
41
|
|
|
35
|
-
const download = (label, secondLevelId) =>
|
|
42
|
+
const download = (label, secondLevelId) =>
|
|
43
|
+
sendEvent('click.download', getDefaultEvent(label, secondLevelId))
|
|
36
44
|
|
|
45
|
+
const scrollDepth = (depth) => {
|
|
46
|
+
sendEvent('page.scroll', {
|
|
47
|
+
scroll_depth: depth,
|
|
48
|
+
page: undefined !== pageDisplayConfig ? pageDisplayConfig.page : 'unknown',
|
|
49
|
+
hr_sophora_id:
|
|
50
|
+
undefined !== pageDisplayConfig ? pageDisplayConfig.hr_sophora_id : 'unknown',
|
|
51
|
+
})
|
|
52
|
+
}
|
|
37
53
|
|
|
38
|
-
export { isTrackingAllowed, uxAction, uxNavigation, pi, download }
|
|
54
|
+
export { isTrackingAllowed, uxAction, uxNavigation, pi, download, scrollDepth }
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { scrollDepth } from 'base/tracking/pianoHelper.subfeature'
|
|
2
|
+
export default function measureScrollDepth() {
|
|
3
|
+
let fired = {}
|
|
4
|
+
function handleIntersect(entries) {
|
|
5
|
+
entries.forEach((entry) => {
|
|
6
|
+
if (entry.isIntersecting && !fired[entry.target.dataset.scrollDepth]) {
|
|
7
|
+
fired[entry.target.dataset.scrollDepth] = true
|
|
8
|
+
scrollDepth(entry.target.dataset.scrollDepth)
|
|
9
|
+
}
|
|
10
|
+
})
|
|
11
|
+
}
|
|
12
|
+
return {
|
|
13
|
+
scrollDepthContainer0: this.$refs.scroll_depth_0,
|
|
14
|
+
scrollDepthContainer25: this.$refs.scroll_depth_25,
|
|
15
|
+
scrollDepthContainer50: this.$refs.scroll_depth_50,
|
|
16
|
+
scrollDepthContainer75: this.$refs.scroll_depth_75,
|
|
17
|
+
scrollDepthContainer100: this.$refs.scroll_depth_100,
|
|
18
|
+
|
|
19
|
+
init() {
|
|
20
|
+
const observer = new IntersectionObserver(handleIntersect)
|
|
21
|
+
observer.observe(this.scrollDepthContainer0)
|
|
22
|
+
observer.observe(this.scrollDepthContainer25)
|
|
23
|
+
observer.observe(this.scrollDepthContainer50)
|
|
24
|
+
observer.observe(this.scrollDepthContainer75)
|
|
25
|
+
observer.observe(this.scrollDepthContainer100)
|
|
26
|
+
},
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
{{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
|
|
2
|
-
|
|
3
|
-
{{> components/page/base/page_header}}
|
|
4
|
-
|
|
5
|
-
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
6
|
-
|
|
7
|
-
{{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=../../_webview-adjust_context}}
|
|
8
2
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
3
|
+
<div class="article-full-width grid grid-article relative">
|
|
4
|
+
{{> components/scroll_depth_measurement/scroll_depth_measurement}}
|
|
5
|
+
|
|
6
|
+
{{> components/page/base/page_header}}
|
|
7
|
+
|
|
8
|
+
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
9
|
+
|
|
10
|
+
{{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=../../_webview-adjust_context}}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
{{#unless this.displayPageLead.isFalse}}
|
|
14
|
+
{{#with this.teaseritemDS }}
|
|
15
|
+
{{#if this.isImage}}
|
|
16
|
+
{{> components/content/copytext/components/image/figure
|
|
17
|
+
_cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
|
|
18
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
19
|
+
_type="story"
|
|
20
|
+
_variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
|
|
21
|
+
_pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
|
|
22
|
+
_isWebview=../../../_webview-adjust_context
|
|
23
|
+
_noDelay=true}}
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{#if this.isVideoOnDemand}}
|
|
26
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{#if this.isLivestream}}
|
|
29
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
|
|
30
|
+
{{/if}}
|
|
31
|
+
{{/with}}
|
|
32
|
+
{{/unless}}
|
|
33
|
+
|
|
34
|
+
{{#unless ../../_webview-adjust_context}}
|
|
35
|
+
{{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
|
|
36
|
+
{{/unless}}
|
|
37
|
+
{{~> components/content/copytext/copytext _isWebview=../../_webview-adjust_context ~}}
|
|
38
|
+
</div>
|
|
36
39
|
{{~> components/content/content_footer/content_footer
|
|
37
40
|
_showDate=this.hasDwellTime
|
|
38
41
|
_date=this.documentPublicationDate
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
|
|
2
|
+
<div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
|
|
3
|
+
<div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
|
|
4
|
+
<div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>
|
|
5
|
+
<div data-scroll-depth="75%" x-ref="scroll_depth_75" class="w-full h-1/4"></div>
|
|
6
|
+
<div data-scroll-depth="100%" x-ref="scroll_depth_100" class="w-full h-px"></div>
|
|
7
|
+
</div>
|
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
{{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
|
|
2
|
-
|
|
3
|
-
{{> components/page/base/page_header}}
|
|
4
|
-
|
|
5
|
-
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
6
|
-
|
|
7
|
-
{{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview}}
|
|
8
2
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
3
|
+
<div class="article-full-width grid grid-article relative">
|
|
4
|
+
{{> components/scroll_depth_measurement/scroll_depth_measurement}}
|
|
5
|
+
|
|
6
|
+
{{> components/page/base/page_header}}
|
|
7
|
+
|
|
8
|
+
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
9
|
+
|
|
10
|
+
{{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview}}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
{{#unless this.displayPageLead.isFalse}}
|
|
14
|
+
{{#with this.teaseritemDS }}
|
|
15
|
+
{{#if this.isImage}}
|
|
16
|
+
{{> components/content/copytext/components/image/figure
|
|
17
|
+
_cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
|
|
18
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
19
|
+
_type="story"
|
|
20
|
+
_variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
|
|
21
|
+
_pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
|
|
22
|
+
_isWebview=../_webview
|
|
23
|
+
_noDelay=true}}
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{#if this.isVideoOnDemand}}
|
|
26
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{#if this.isLivestream}}
|
|
29
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
|
|
30
|
+
{{/if}}
|
|
31
|
+
{{/with}}
|
|
32
|
+
{{/unless}}
|
|
33
|
+
|
|
34
|
+
{{#unless _webview}}
|
|
35
|
+
{{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
|
|
36
|
+
{{/unless}}
|
|
37
|
+
{{~> components/content/copytext/copytext _isWebview=_webview ~}}
|
|
38
|
+
</div>
|
|
36
39
|
{{~> components/content/content_footer/content_footer
|
|
37
40
|
_showDate=this.hasDwellTime
|
|
38
41
|
_date=this.documentPublicationDate
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
|
|
2
|
+
<div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
|
|
3
|
+
<div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
|
|
4
|
+
<div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>
|
|
5
|
+
<div data-scroll-depth="75%" x-ref="scroll_depth_75" class="w-full h-1/4"></div>
|
|
6
|
+
<div data-scroll-depth="100%" x-ref="scroll_depth_100" class="w-full h-px"></div>
|
|
7
|
+
</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.
|
|
9
|
+
"version": "1.126.1",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -44,22 +44,22 @@
|
|
|
44
44
|
"@babel/core": "^7.12.10",
|
|
45
45
|
"@babel/preset-env": "^7.21.4",
|
|
46
46
|
"@chromatic-com/storybook": "1",
|
|
47
|
-
"@storybook/addon-a11y": "
|
|
48
|
-
"@storybook/addon-actions": "
|
|
47
|
+
"@storybook/addon-a11y": "8.6.15",
|
|
48
|
+
"@storybook/addon-actions": "8.6.15",
|
|
49
49
|
"@storybook/addon-console": "^3.0.0",
|
|
50
|
-
"@storybook/addon-essentials": "
|
|
51
|
-
"@storybook/addon-interactions": "
|
|
52
|
-
"@storybook/addon-links": "
|
|
50
|
+
"@storybook/addon-essentials": "8.6.15",
|
|
51
|
+
"@storybook/addon-interactions": "8.6.15",
|
|
52
|
+
"@storybook/addon-links": "8.6.15",
|
|
53
53
|
"@storybook/addon-styling-webpack": "1.0.0",
|
|
54
|
-
"@storybook/addon-themes": "
|
|
54
|
+
"@storybook/addon-themes": "8.6.15",
|
|
55
55
|
"@storybook/addon-webpack5-compiler-babel": "3.0.3",
|
|
56
56
|
"@storybook/addon-webpack5-compiler-swc": "1.0.4",
|
|
57
|
-
"@storybook/blocks": "
|
|
58
|
-
"@storybook/html": "
|
|
59
|
-
"@storybook/html-webpack5": "
|
|
60
|
-
"@storybook/test": "
|
|
57
|
+
"@storybook/blocks": "8.6.15",
|
|
58
|
+
"@storybook/html": "8.6.15",
|
|
59
|
+
"@storybook/html-webpack5": "8.6.15",
|
|
60
|
+
"@storybook/test": "8.6.15",
|
|
61
61
|
"@storybook/test-runner": "^0.19.1",
|
|
62
|
-
"@storybook/theming": "
|
|
62
|
+
"@storybook/theming": "8.6.15",
|
|
63
63
|
"auto": "^11.0.5",
|
|
64
64
|
"autoprefixer": "^10.4.2",
|
|
65
65
|
"babel-loader": "^8.2.2",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"raw-loader": "^4.0.2",
|
|
102
102
|
"remark-gfm": "^4.0.0",
|
|
103
103
|
"rimraf": "^3.0.2",
|
|
104
|
-
"storybook": "
|
|
104
|
+
"storybook": "8.6.15",
|
|
105
105
|
"storybook-addon-fetch-mock": "^2.0.1",
|
|
106
106
|
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
107
107
|
"style-loader": "^4.0.0",
|
package/src/assets/js/alpine.js
CHANGED
|
@@ -19,11 +19,18 @@ AsyncAlpine.init(Alpine)
|
|
|
19
19
|
import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
|
|
20
20
|
)
|
|
21
21
|
.data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
|
|
22
|
-
.data('socialSharingHandler', ()=>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
.data('
|
|
26
|
-
.data('
|
|
22
|
+
.data('socialSharingHandler', () =>
|
|
23
|
+
import('components/social_sharing/socialSharingHandler.alpine.js')
|
|
24
|
+
)
|
|
25
|
+
.data('inputHandler', () => import('components/forms/js/inputHandler.alpine.js'))
|
|
26
|
+
.data('contactForm', () => import('components/forms/js/contactForm.alpine.js'))
|
|
27
|
+
.data('newsletterForm', () => import('components/newsletter/js/newsletterForm.alpine.js'))
|
|
28
|
+
.data('gallerySlider', () =>
|
|
29
|
+
import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js')
|
|
30
|
+
)
|
|
31
|
+
.data('measureScrollDepth', () =>
|
|
32
|
+
import('components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js')
|
|
33
|
+
)
|
|
27
34
|
.start()
|
|
28
35
|
|
|
29
36
|
window.Alpine = Alpine
|
|
@@ -51,15 +58,15 @@ Alpine.store('sectionNavIsVisible', false)
|
|
|
51
58
|
Alpine.store('sharingIsVisible', false)
|
|
52
59
|
Alpine.store('sharingIsOpen', {
|
|
53
60
|
metadatabox: false,
|
|
54
|
-
mobilesticky: false
|
|
61
|
+
mobilesticky: false,
|
|
55
62
|
})
|
|
56
63
|
Alpine.store('sharingBottomPos', {
|
|
57
|
-
current: '0'
|
|
64
|
+
current: '0',
|
|
58
65
|
})
|
|
59
66
|
Alpine.store('forms', {
|
|
60
67
|
submissionAttempted: [],
|
|
61
68
|
serverErrorFields: [{}],
|
|
62
|
-
errorMessages: [{}]
|
|
69
|
+
errorMessages: [{}],
|
|
63
70
|
})
|
|
64
71
|
// Initialization of data handlers
|
|
65
72
|
Alpine.data('mainNavigationHandler', mainNavigationHandler)
|
|
@@ -1,38 +1,54 @@
|
|
|
1
|
-
import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
|
|
1
|
+
import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
|
|
2
2
|
|
|
3
|
-
const pianoErrorSecondLevelId = 99
|
|
3
|
+
const pianoErrorSecondLevelId = 99
|
|
4
4
|
|
|
5
5
|
const isTrackingAllowed = () => {
|
|
6
|
-
const settingsCookie = new SettingsCookie()
|
|
7
|
-
return
|
|
8
|
-
|
|
6
|
+
const settingsCookie = new SettingsCookie()
|
|
7
|
+
return (
|
|
8
|
+
!settingsCookie.isSettingsCookieExistent('ati') ||
|
|
9
|
+
settingsCookie.isSettingsCookieAccepted('ati')
|
|
10
|
+
)
|
|
11
|
+
}
|
|
9
12
|
|
|
10
13
|
const sendEvent = (eventType, event) => {
|
|
11
14
|
if (typeof pa !== 'undefined' && pa !== undefined && isTrackingAllowed()) {
|
|
12
|
-
pa.sendEvent(eventType, event)
|
|
15
|
+
pa.sendEvent(eventType, event)
|
|
13
16
|
}
|
|
14
|
-
}
|
|
17
|
+
}
|
|
15
18
|
|
|
16
19
|
const getDefaultEvent = (label, secondLevelId) => {
|
|
17
20
|
return {
|
|
18
21
|
click: label,
|
|
19
|
-
site_level2_id: determineSecondLevelId(secondLevelId)
|
|
22
|
+
site_level2_id: determineSecondLevelId(secondLevelId),
|
|
20
23
|
}
|
|
21
|
-
}
|
|
24
|
+
}
|
|
22
25
|
|
|
23
26
|
const determineSecondLevelId = (secondLevelId) => {
|
|
24
27
|
return secondLevelId !== undefined
|
|
25
28
|
? secondLevelId
|
|
26
|
-
: undefined !== pageDisplayConfig
|
|
27
|
-
|
|
29
|
+
: undefined !== pageDisplayConfig
|
|
30
|
+
? pageDisplayConfig.site_level2_id
|
|
31
|
+
: pianoErrorSecondLevelId
|
|
32
|
+
}
|
|
28
33
|
|
|
29
|
-
const uxAction = (label, secondLevelId) =>
|
|
34
|
+
const uxAction = (label, secondLevelId) =>
|
|
35
|
+
sendEvent('click.action', getDefaultEvent(label, secondLevelId))
|
|
30
36
|
|
|
31
|
-
const uxNavigation = (label, secondLevelId) =>
|
|
37
|
+
const uxNavigation = (label, secondLevelId) =>
|
|
38
|
+
sendEvent('click.navigation', getDefaultEvent(label, secondLevelId))
|
|
32
39
|
|
|
33
|
-
const pi = () => sendEvent('page.display', pageDisplayConfig)
|
|
40
|
+
const pi = () => sendEvent('page.display', pageDisplayConfig)
|
|
34
41
|
|
|
35
|
-
const download = (label, secondLevelId) =>
|
|
42
|
+
const download = (label, secondLevelId) =>
|
|
43
|
+
sendEvent('click.download', getDefaultEvent(label, secondLevelId))
|
|
36
44
|
|
|
45
|
+
const scrollDepth = (depth) => {
|
|
46
|
+
sendEvent('page.scroll', {
|
|
47
|
+
scroll_depth: depth,
|
|
48
|
+
page: undefined !== pageDisplayConfig ? pageDisplayConfig.page : 'unknown',
|
|
49
|
+
hr_sophora_id:
|
|
50
|
+
undefined !== pageDisplayConfig ? pageDisplayConfig.hr_sophora_id : 'unknown',
|
|
51
|
+
})
|
|
52
|
+
}
|
|
37
53
|
|
|
38
|
-
export { isTrackingAllowed, uxAction, uxNavigation, pi, download }
|
|
54
|
+
export { isTrackingAllowed, uxAction, uxNavigation, pi, download, scrollDepth }
|
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
{{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
|
|
2
|
-
|
|
3
|
-
{{> components/page/base/page_header}}
|
|
4
|
-
|
|
5
|
-
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
6
|
-
|
|
7
|
-
{{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview-adjust_context}}
|
|
8
2
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
3
|
+
<div class="article-full-width grid grid-article relative">
|
|
4
|
+
{{> components/scroll_depth_measurement/scroll_depth_measurement}}
|
|
5
|
+
|
|
6
|
+
{{> components/page/base/page_header}}
|
|
7
|
+
|
|
8
|
+
{{> components/page/components/shorttext _text=this.shorttext }}
|
|
9
|
+
|
|
10
|
+
{{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview-adjust_context}}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
{{#unless this.displayPageLead.isFalse}}
|
|
14
|
+
{{#with this.teaseritemDS }}
|
|
15
|
+
{{#if this.isImage}}
|
|
16
|
+
{{> components/content/copytext/components/image/figure
|
|
17
|
+
_cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
|
|
18
|
+
_cssClassCaption="mx-5 md:mx-0"
|
|
19
|
+
_type="story"
|
|
20
|
+
_variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
|
|
21
|
+
_pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
|
|
22
|
+
_isWebview=../_webview-adjust_context
|
|
23
|
+
_noDelay=true}}
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{#if this.isVideoOnDemand}}
|
|
26
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{#if this.isLivestream}}
|
|
29
|
+
{{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
|
|
30
|
+
{{/if}}
|
|
31
|
+
{{/with}}
|
|
32
|
+
{{/unless}}
|
|
33
|
+
|
|
34
|
+
{{#unless _webview-adjust_context}}
|
|
35
|
+
{{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
|
|
36
|
+
{{/unless}}
|
|
37
|
+
{{~> components/content/copytext/copytext _isWebview=_webview-adjust_context ~}}
|
|
38
|
+
</div>
|
|
36
39
|
{{~> components/content/content_footer/content_footer
|
|
37
40
|
_showDate=this.hasDwellTime
|
|
38
41
|
_date=this.documentPublicationDate
|
package/src/stories/views/components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { scrollDepth } from 'base/tracking/pianoHelper.subfeature'
|
|
2
|
+
export default function measureScrollDepth() {
|
|
3
|
+
let fired = {}
|
|
4
|
+
function handleIntersect(entries) {
|
|
5
|
+
entries.forEach((entry) => {
|
|
6
|
+
if (entry.isIntersecting && !fired[entry.target.dataset.scrollDepth]) {
|
|
7
|
+
fired[entry.target.dataset.scrollDepth] = true
|
|
8
|
+
scrollDepth(entry.target.dataset.scrollDepth)
|
|
9
|
+
}
|
|
10
|
+
})
|
|
11
|
+
}
|
|
12
|
+
return {
|
|
13
|
+
scrollDepthContainer0: this.$refs.scroll_depth_0,
|
|
14
|
+
scrollDepthContainer25: this.$refs.scroll_depth_25,
|
|
15
|
+
scrollDepthContainer50: this.$refs.scroll_depth_50,
|
|
16
|
+
scrollDepthContainer75: this.$refs.scroll_depth_75,
|
|
17
|
+
scrollDepthContainer100: this.$refs.scroll_depth_100,
|
|
18
|
+
|
|
19
|
+
init() {
|
|
20
|
+
const observer = new IntersectionObserver(handleIntersect)
|
|
21
|
+
observer.observe(this.scrollDepthContainer0)
|
|
22
|
+
observer.observe(this.scrollDepthContainer25)
|
|
23
|
+
observer.observe(this.scrollDepthContainer50)
|
|
24
|
+
observer.observe(this.scrollDepthContainer75)
|
|
25
|
+
observer.observe(this.scrollDepthContainer100)
|
|
26
|
+
},
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
|
|
2
|
+
<div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
|
|
3
|
+
<div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
|
|
4
|
+
<div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>
|
|
5
|
+
<div data-scroll-depth="75%" x-ref="scroll_depth_75" class="w-full h-1/4"></div>
|
|
6
|
+
<div data-scroll-depth="100%" x-ref="scroll_depth_100" class="w-full h-px"></div>
|
|
7
|
+
</div>
|