hr-design-system-handlebars 1.114.42 → 1.114.44
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 +24 -0
- package/dist/assets/index.css +3 -3
- package/dist/assets/js/components/newsletter/js/newNewsletterDs.feature.js +88 -0
- package/dist/assets/js/components/newsletter/js/newsletterDs.feature.js +22 -0
- package/dist/views/components/newsletter/components/new_newsletter_form.hbs +14 -17
- package/dist/views/components/newsletter/components/newsletter_form.hbs +61 -0
- package/dist/views/components/newsletter/newsletter.hbs +14 -14
- package/dist/views_static/components/newsletter/components/new_newsletter_form.hbs +14 -17
- package/dist/views_static/components/newsletter/components/newsletter_form.hbs +61 -0
- package/dist/views_static/components/newsletter/newsletter.hbs +14 -14
- package/package.json +1 -1
- package/src/assets/brand/_default/conf/locatags.json +14 -1
- package/src/stories/views/components/newsletter/components/new_newsletter_form.hbs +14 -17
- package/src/stories/views/components/newsletter/components/newsletter_form.hbs +61 -0
- package/src/stories/views/components/newsletter/fixtures/new_newsletter.json +15 -0
- package/src/stories/views/components/newsletter/fixtures/newsletter.json +12 -44
- package/src/stories/views/components/newsletter/js/newNewsletterDs.feature.js +88 -0
- package/src/stories/views/components/newsletter/js/newsletterDs.feature.js +22 -0
- package/src/stories/views/components/newsletter/newsletter.hbs +14 -14
- package/src/stories/views/components/newsletter/newsletter.stories.js +21 -5
- package/src/stories/views/components/newsletter/components/newsletter_form.hbs.DEPRECATED +0 -106
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.114.44 (Fri Dec 13 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Newsletter form test for delivery [#1193](https://github.com/mumprod/hr-design-system-handlebars/pull/1193) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.114.43 (Fri Dec 13 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Dpe 3415 b [#1192](https://github.com/mumprod/hr-design-system-handlebars/pull/1192) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.114.42 (Wed Dec 11 2024)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -3713,7 +3713,7 @@ article #commentList {
|
|
|
3713
3713
|
border-bottom-color: var(--color-secondary-ds);
|
|
3714
3714
|
}
|
|
3715
3715
|
.counter-reset {
|
|
3716
|
-
counter-reset:
|
|
3716
|
+
counter-reset: cnt1734094680526;
|
|
3717
3717
|
}
|
|
3718
3718
|
html { scroll-behavior: smooth; }
|
|
3719
3719
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
@@ -4128,7 +4128,7 @@ html { scroll-behavior: smooth; }
|
|
|
4128
4128
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4129
4129
|
}
|
|
4130
4130
|
.-ordered {
|
|
4131
|
-
counter-increment:
|
|
4131
|
+
counter-increment: cnt1734094680526 1;
|
|
4132
4132
|
}
|
|
4133
4133
|
.-ordered::before {
|
|
4134
4134
|
position: absolute;
|
|
@@ -4146,7 +4146,7 @@ html { scroll-behavior: smooth; }
|
|
|
4146
4146
|
--tw-text-opacity: 1;
|
|
4147
4147
|
color: rgba(0, 0, 0, 1);
|
|
4148
4148
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4149
|
-
content: counter(
|
|
4149
|
+
content: counter(cnt1734094680526);
|
|
4150
4150
|
}
|
|
4151
4151
|
/*! ****************************/
|
|
4152
4152
|
/*! DataPolicy stuff */
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { hr$, listen, replaceAnimated } from 'hrQuery'
|
|
2
|
+
import { uxAction } from 'base/tracking/pianoHelper.subfeature'
|
|
3
|
+
|
|
4
|
+
const Newsletter = function (context) {
|
|
5
|
+
'use strict'
|
|
6
|
+
const { element: rootElement } = context,
|
|
7
|
+
actionUrl = rootElement && rootElement.getAttribute('action'),
|
|
8
|
+
formWrapper = rootElement.parentNode,
|
|
9
|
+
options = context.options,
|
|
10
|
+
trackingInformations = options.trackingInformations
|
|
11
|
+
|
|
12
|
+
async function postData() {
|
|
13
|
+
const formData = new FormData(rootElement)
|
|
14
|
+
// use timestamp in seconds because the newsletter tool cannot handle milliseconds
|
|
15
|
+
formData.set('confirm-data-protection', Math.ceil(Date.now() / 1000))
|
|
16
|
+
|
|
17
|
+
const response = await fetch(actionUrl, {
|
|
18
|
+
method: 'POST',
|
|
19
|
+
body: formData,
|
|
20
|
+
})
|
|
21
|
+
return response
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const handleSubmit = function (event) {
|
|
25
|
+
uxAction(trackingInformations)
|
|
26
|
+
event.preventDefault()
|
|
27
|
+
postData()
|
|
28
|
+
.then((response) => {
|
|
29
|
+
if (!response.ok) {
|
|
30
|
+
throw new Error('Netzwerk- oder Serverfehler')
|
|
31
|
+
}
|
|
32
|
+
return response.json()
|
|
33
|
+
})
|
|
34
|
+
.then((responseStatus) => {
|
|
35
|
+
switch (responseStatus.status) {
|
|
36
|
+
case 'success':
|
|
37
|
+
replaceAnimated(
|
|
38
|
+
formWrapper,
|
|
39
|
+
hr$('.js-successMessage', rootElement)[0].innerHTML,
|
|
40
|
+
true,
|
|
41
|
+
() => {
|
|
42
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
43
|
+
},
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
case 'no_valid_newsletters':
|
|
47
|
+
replaceAnimated(
|
|
48
|
+
formWrapper,
|
|
49
|
+
hr$('.js-alreadyRegisteredMessage', rootElement)[0].innerHTML,
|
|
50
|
+
true,
|
|
51
|
+
() => {
|
|
52
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
53
|
+
},
|
|
54
|
+
)
|
|
55
|
+
break
|
|
56
|
+
default:
|
|
57
|
+
replaceAnimated(
|
|
58
|
+
formWrapper,
|
|
59
|
+
hr$('.js-errorMessage', rootElement)[0].innerHTML,
|
|
60
|
+
true,
|
|
61
|
+
() => {
|
|
62
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
63
|
+
},
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
.catch((error) => {
|
|
68
|
+
console.error('Beim Ausführen des Fetch ist ein Fehler aufgetreten.', error)
|
|
69
|
+
replaceAnimated(
|
|
70
|
+
formWrapper,
|
|
71
|
+
hr$('.js-errorMessage', rootElement)[0].innerHTML,
|
|
72
|
+
true,
|
|
73
|
+
() => {
|
|
74
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
75
|
+
},
|
|
76
|
+
)
|
|
77
|
+
})
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const handleFormReload = function (event) {
|
|
81
|
+
event.preventDefault()
|
|
82
|
+
replaceAnimated(formWrapper, rootElement.outerHTML, true)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
listen('submit', handleSubmit, rootElement)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default Newsletter
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { hr$ } from 'hrQuery'
|
|
2
|
+
|
|
3
|
+
const Newsletter = function (context) {
|
|
4
|
+
'use strict'
|
|
5
|
+
|
|
6
|
+
const { element: rootElement } = context,
|
|
7
|
+
subscribeRadio = hr$('.js-newsletter-subscribe', rootElement)[0],
|
|
8
|
+
unsubscribeRadio = hr$('.js-newsletter-unsubscribe', rootElement)[0]
|
|
9
|
+
|
|
10
|
+
if (subscribeRadio && unsubscribeRadio) {
|
|
11
|
+
subscribeRadio.onclick = function () {
|
|
12
|
+
subscribeRadio.checked = true
|
|
13
|
+
unsubscribeRadio.checked = false
|
|
14
|
+
}
|
|
15
|
+
unsubscribeRadio.onclick = function () {
|
|
16
|
+
subscribeRadio.checked = false
|
|
17
|
+
unsubscribeRadio.checked = true
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default Newsletter
|
|
@@ -1,37 +1,31 @@
|
|
|
1
|
-
<
|
|
2
|
-
"
|
|
3
|
-
|
|
1
|
+
<div class="js-newsletterFormWrapper">
|
|
2
|
+
<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter-ds='{
|
|
3
|
+
"trackingInformations": {{this.trackingInformations}} }' action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
|
|
4
4
|
|
|
5
|
-
<div class="c-form__row -expanded">
|
|
6
5
|
{{~> components/forms/components/input
|
|
7
6
|
_type="email"
|
|
8
|
-
_isEmail=
|
|
7
|
+
_isEmail=true
|
|
9
8
|
_name="email"
|
|
10
9
|
_label="E-Mail"
|
|
11
10
|
_labelClass="hide"
|
|
12
11
|
_description=""
|
|
13
|
-
|
|
14
|
-
_tabindex=(if this.isHidden "-1")
|
|
15
|
-
_required="true"
|
|
12
|
+
_required=true
|
|
16
13
|
_maxLength="140"
|
|
17
14
|
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
18
15
|
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
19
16
|
_formId=../_formId
|
|
20
17
|
}}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<div class="c-form__row">
|
|
18
|
+
|
|
24
19
|
{{~> components/forms/components/choice
|
|
25
|
-
_inGroup=
|
|
20
|
+
_inGroup=false
|
|
26
21
|
_type="checkbox"
|
|
27
22
|
_name="checkbox"
|
|
28
23
|
_label=(loca "accept_data_privacy_regulation_link")
|
|
29
|
-
_description="
|
|
30
|
-
_required=
|
|
24
|
+
_description=""
|
|
25
|
+
_required=true
|
|
31
26
|
_errorMandatory="Bitte wählen Sie dieses Pflichtfeld aus"
|
|
32
27
|
}}
|
|
33
|
-
|
|
34
|
-
</div>
|
|
28
|
+
|
|
35
29
|
|
|
36
30
|
{{~> components/forms/components/controls }}
|
|
37
31
|
|
|
@@ -40,12 +34,14 @@
|
|
|
40
34
|
_name="newsletter"
|
|
41
35
|
_type="hidden"
|
|
42
36
|
_value=this.mailingList
|
|
37
|
+
_wrapperClass="hidden"
|
|
43
38
|
_hasLabel=false
|
|
44
39
|
}}
|
|
45
40
|
|
|
46
41
|
{{~>components/forms/components/input
|
|
47
42
|
_name="newsletter-type"
|
|
48
43
|
_type="hidden"
|
|
44
|
+
_wrapperClass="hidden"
|
|
49
45
|
_value="html"
|
|
50
46
|
_hasLabel=false
|
|
51
47
|
}}
|
|
@@ -59,4 +55,5 @@
|
|
|
59
55
|
<script type="text/html" class="js-alreadyRegisteredMessage">
|
|
60
56
|
{{{include "components/newsletter/components/newsletter_already_registered" }}}
|
|
61
57
|
</script>
|
|
62
|
-
</form>
|
|
58
|
+
</form>
|
|
59
|
+
</div>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
|
|
2
|
+
action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
|
|
3
|
+
accept-charset="utf-8">
|
|
4
|
+
|
|
5
|
+
{{~> components/forms/components/input
|
|
6
|
+
_type="email"
|
|
7
|
+
_isEmail="true"
|
|
8
|
+
_name="email"
|
|
9
|
+
_label="E-Mail"
|
|
10
|
+
_labelClass="hide"
|
|
11
|
+
_description=""
|
|
12
|
+
_required="true"
|
|
13
|
+
_maxLength="140"
|
|
14
|
+
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
15
|
+
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
16
|
+
_formId=../_formId
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
{{> components/forms/components/choiceGroup
|
|
20
|
+
_name="Registrierung"
|
|
21
|
+
_required=true
|
|
22
|
+
_inputClass=""
|
|
23
|
+
_type="radio"
|
|
24
|
+
_locaKey="newsletter_subscribe_text"
|
|
25
|
+
_inGroup=true
|
|
26
|
+
_isHorizontalLayout=true
|
|
27
|
+
_multipleChoice=false
|
|
28
|
+
_formId=../_formId
|
|
29
|
+
_items=this.items
|
|
30
|
+
}}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
{{~> components/forms/components/controls }}
|
|
34
|
+
|
|
35
|
+
{{~> components/forms/components/input
|
|
36
|
+
_formField=this.formData.INXMAIL_HTTP_REDIRECT
|
|
37
|
+
_name="INXMAIL_HTTP_REDIRECT"
|
|
38
|
+
_type="hidden"
|
|
39
|
+
_wrapperClass="hidden"
|
|
40
|
+
_value=this.successLink
|
|
41
|
+
_hasLabel=false
|
|
42
|
+
}}
|
|
43
|
+
|
|
44
|
+
{{~>components/forms/components/input
|
|
45
|
+
_formField=this.formData.INXMAIL_HTTP_REDIRECT_ERROR
|
|
46
|
+
_name="INXMAIL_HTTP_REDIRECT_ERROR"
|
|
47
|
+
_type="hidden"
|
|
48
|
+
_wrapperClass="hidden"
|
|
49
|
+
_value=this.errorLink
|
|
50
|
+
_hasLabel=false
|
|
51
|
+
}}
|
|
52
|
+
|
|
53
|
+
{{~> components/forms/components/input
|
|
54
|
+
_formField=this.formData.backlink
|
|
55
|
+
_name="backlink"
|
|
56
|
+
_type="hidden"
|
|
57
|
+
_wrapperClass="hidden"
|
|
58
|
+
_value=this.backlinkUuid
|
|
59
|
+
_hasLabel=false
|
|
60
|
+
}}
|
|
61
|
+
</form>
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
{{#
|
|
2
|
-
<div id="{{this.uuid}}" class="{{_addClass}}
|
|
1
|
+
{{#if this.useNewNewsletter}}
|
|
2
|
+
<div id="{{this.uuid}}" class="{{_addClass}} ">
|
|
3
3
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
|
|
4
4
|
<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
|
|
5
5
|
{{this.title}}
|
|
6
6
|
</h3>
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
{{#if this.description}}
|
|
8
|
+
<p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
|
|
9
|
+
{{{this.description}}}
|
|
10
|
+
</p>
|
|
11
|
+
{{/if}}
|
|
12
|
+
<div class="mt-4 text-base js-formWrapper font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
|
|
13
|
+
{{> components/newsletter/components/new_newsletter_form}}
|
|
9
14
|
</div>
|
|
10
15
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
|
|
11
16
|
</div>
|
|
12
17
|
{{else}}
|
|
13
|
-
<div id="{{this.uuid}}" class="{{_addClass}} ">
|
|
18
|
+
<div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
|
|
14
19
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
|
|
15
20
|
<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
|
|
16
21
|
{{this.title}}
|
|
17
22
|
</h3>
|
|
18
|
-
|
|
19
|
-
<div class="c-form__row">
|
|
20
|
-
<div class="c-form__label">
|
|
21
|
-
{{{this.description}}}
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
{{/if}}
|
|
23
|
+
|
|
25
24
|
<div class="js-formWrapper">
|
|
26
|
-
{{> components/newsletter/components/
|
|
25
|
+
{{> components/newsletter/components/newsletter_form}}
|
|
27
26
|
</div>
|
|
27
|
+
|
|
28
28
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
|
|
29
29
|
</div>
|
|
30
|
-
{{/
|
|
30
|
+
{{/if}}
|
|
@@ -1,37 +1,31 @@
|
|
|
1
|
-
<
|
|
2
|
-
"
|
|
3
|
-
|
|
1
|
+
<div class="js-newsletterFormWrapper">
|
|
2
|
+
<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter-ds='{
|
|
3
|
+
"trackingInformations": {{this.trackingInformations}} }' action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
|
|
4
4
|
|
|
5
|
-
<div class="c-form__row -expanded">
|
|
6
5
|
{{~> components/forms/components/input
|
|
7
6
|
_type="email"
|
|
8
|
-
_isEmail=
|
|
7
|
+
_isEmail=true
|
|
9
8
|
_name="email"
|
|
10
9
|
_label="E-Mail"
|
|
11
10
|
_labelClass="hide"
|
|
12
11
|
_description=""
|
|
13
|
-
|
|
14
|
-
_tabindex=(if this.isHidden "-1")
|
|
15
|
-
_required="true"
|
|
12
|
+
_required=true
|
|
16
13
|
_maxLength="140"
|
|
17
14
|
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
18
15
|
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
19
16
|
_formId=../_formId
|
|
20
17
|
}}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<div class="c-form__row">
|
|
18
|
+
|
|
24
19
|
{{~> components/forms/components/choice
|
|
25
|
-
_inGroup=
|
|
20
|
+
_inGroup=false
|
|
26
21
|
_type="checkbox"
|
|
27
22
|
_name="checkbox"
|
|
28
23
|
_label=(loca "accept_data_privacy_regulation_link")
|
|
29
|
-
_description="
|
|
30
|
-
_required=
|
|
24
|
+
_description=""
|
|
25
|
+
_required=true
|
|
31
26
|
_errorMandatory="Bitte wählen Sie dieses Pflichtfeld aus"
|
|
32
27
|
}}
|
|
33
|
-
|
|
34
|
-
</div>
|
|
28
|
+
|
|
35
29
|
|
|
36
30
|
{{~> components/forms/components/controls }}
|
|
37
31
|
|
|
@@ -40,12 +34,14 @@
|
|
|
40
34
|
_name="newsletter"
|
|
41
35
|
_type="hidden"
|
|
42
36
|
_value=this.mailingList
|
|
37
|
+
_wrapperClass="hidden"
|
|
43
38
|
_hasLabel=false
|
|
44
39
|
}}
|
|
45
40
|
|
|
46
41
|
{{~>components/forms/components/input
|
|
47
42
|
_name="newsletter-type"
|
|
48
43
|
_type="hidden"
|
|
44
|
+
_wrapperClass="hidden"
|
|
49
45
|
_value="html"
|
|
50
46
|
_hasLabel=false
|
|
51
47
|
}}
|
|
@@ -59,4 +55,5 @@
|
|
|
59
55
|
<script type="text/html" class="js-alreadyRegisteredMessage">
|
|
60
56
|
{{{include "components/newsletter/components/newsletter_already_registered" }}}
|
|
61
57
|
</script>
|
|
62
|
-
</form>
|
|
58
|
+
</form>
|
|
59
|
+
</div>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
|
|
2
|
+
action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
|
|
3
|
+
accept-charset="utf-8">
|
|
4
|
+
|
|
5
|
+
{{~> components/forms/components/input
|
|
6
|
+
_type="email"
|
|
7
|
+
_isEmail="true"
|
|
8
|
+
_name="email"
|
|
9
|
+
_label="E-Mail"
|
|
10
|
+
_labelClass="hide"
|
|
11
|
+
_description=""
|
|
12
|
+
_required="true"
|
|
13
|
+
_maxLength="140"
|
|
14
|
+
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
15
|
+
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
16
|
+
_formId=../_formId
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
{{> components/forms/components/choiceGroup
|
|
20
|
+
_name="Registrierung"
|
|
21
|
+
_required=true
|
|
22
|
+
_inputClass=""
|
|
23
|
+
_type="radio"
|
|
24
|
+
_locaKey="newsletter_subscribe_text"
|
|
25
|
+
_inGroup=true
|
|
26
|
+
_isHorizontalLayout=true
|
|
27
|
+
_multipleChoice=false
|
|
28
|
+
_formId=../_formId
|
|
29
|
+
_items=this.items
|
|
30
|
+
}}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
{{~> components/forms/components/controls }}
|
|
34
|
+
|
|
35
|
+
{{~> components/forms/components/input
|
|
36
|
+
_formField=this.formData.INXMAIL_HTTP_REDIRECT
|
|
37
|
+
_name="INXMAIL_HTTP_REDIRECT"
|
|
38
|
+
_type="hidden"
|
|
39
|
+
_wrapperClass="hidden"
|
|
40
|
+
_value=this.successLink
|
|
41
|
+
_hasLabel=false
|
|
42
|
+
}}
|
|
43
|
+
|
|
44
|
+
{{~>components/forms/components/input
|
|
45
|
+
_formField=this.formData.INXMAIL_HTTP_REDIRECT_ERROR
|
|
46
|
+
_name="INXMAIL_HTTP_REDIRECT_ERROR"
|
|
47
|
+
_type="hidden"
|
|
48
|
+
_wrapperClass="hidden"
|
|
49
|
+
_value=this.errorLink
|
|
50
|
+
_hasLabel=false
|
|
51
|
+
}}
|
|
52
|
+
|
|
53
|
+
{{~> components/forms/components/input
|
|
54
|
+
_formField=this.formData.backlink
|
|
55
|
+
_name="backlink"
|
|
56
|
+
_type="hidden"
|
|
57
|
+
_wrapperClass="hidden"
|
|
58
|
+
_value=this.backlinkUuid
|
|
59
|
+
_hasLabel=false
|
|
60
|
+
}}
|
|
61
|
+
</form>
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
{{#
|
|
2
|
-
<div id="{{this.uuid}}" class="{{_addClass}}
|
|
1
|
+
{{#if this.useNewNewsletter}}
|
|
2
|
+
<div id="{{this.uuid}}" class="{{_addClass}} ">
|
|
3
3
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
|
|
4
4
|
<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
|
|
5
5
|
{{this.title}}
|
|
6
6
|
</h3>
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
{{#if this.description}}
|
|
8
|
+
<p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
|
|
9
|
+
{{{this.description}}}
|
|
10
|
+
</p>
|
|
11
|
+
{{/if}}
|
|
12
|
+
<div class="mt-4 text-base js-formWrapper font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
|
|
13
|
+
{{> components/newsletter/components/new_newsletter_form}}
|
|
9
14
|
</div>
|
|
10
15
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
|
|
11
16
|
</div>
|
|
12
17
|
{{else}}
|
|
13
|
-
<div id="{{this.uuid}}" class="{{_addClass}} ">
|
|
18
|
+
<div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
|
|
14
19
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
|
|
15
20
|
<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
|
|
16
21
|
{{this.title}}
|
|
17
22
|
</h3>
|
|
18
|
-
|
|
19
|
-
<div class="c-form__row">
|
|
20
|
-
<div class="c-form__label">
|
|
21
|
-
{{{this.description}}}
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
{{/if}}
|
|
23
|
+
|
|
25
24
|
<div class="js-formWrapper">
|
|
26
|
-
{{> components/newsletter/components/
|
|
25
|
+
{{> components/newsletter/components/newsletter_form}}
|
|
27
26
|
</div>
|
|
27
|
+
|
|
28
28
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
|
|
29
29
|
</div>
|
|
30
|
-
{{/
|
|
30
|
+
{{/if}}
|
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.44",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"mediaplayer_play_button_alpine_click": "avStart = !avStart; $dispatch('player_start',{playerId: {0}})",
|
|
18
18
|
"comment_anchor_1": "zu den ",
|
|
19
19
|
"comment_anchor_2": " Kommentaren des Artikels springen",
|
|
20
|
-
"comment_label_text": "Kommentar",
|
|
20
|
+
"comment_label_text": "Kommentar",
|
|
21
21
|
"comment_label_text_many": "Kommentare",
|
|
22
22
|
"copyright_source": "Quelle:",
|
|
23
23
|
"copyright_symbol": "© {0}",
|
|
@@ -121,6 +121,19 @@
|
|
|
121
121
|
"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
|
|
122
122
|
"modal_user_consent_label_cancel": "Abbrechen",
|
|
123
123
|
"modal_user_consent_label_ok": "Zur externen Internetseite",
|
|
124
|
+
"newsletter_email": "E-Mail",
|
|
125
|
+
"newsletter_form_back": "Zurück zum Formular",
|
|
126
|
+
"newsletter_subscribe": "Anmelden",
|
|
127
|
+
"newsletter_subscribe_text": "Bitte auswählen:",
|
|
128
|
+
"newsletter_text_error": "Aufgrund eines technischen Fehlers können wir derzeit Ihre Anfrage nicht bearbeiten. Bitte versuchen Sie es zu einem späteren Zeitpunkt noch einmal.",
|
|
129
|
+
"newsletter_text_already_registered": "Sollten Sie ihr Abonnement kündigen oder verwalten wollen, können Sie dies <a href=\"https://hessenschau-nl.sr.de/newsletter-login.php\" class=\"{nuc https://hessenschau-nl.sr.de/newsletter-login.php nuc}link unbreakable\" target=\"_blank\"><span class=\"unbreakable\">hier<svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a> tun.",
|
|
130
|
+
"newsletter_text_registered": "In Zukunft erhalten Sie regelmäßig Mails mit aktuellen Informationen rund um unseren Sender.<br><br>Außerdem bekommen Sie umgehend den zurzeit aktuellen Newsletter zugeschickt.",
|
|
131
|
+
"newsletter_text_success": "Sie erhalten in wenigen Minuten eine E-Mail an die von Ihnen angegebene Adresse. Erst nach einem Klick auf den darin enthaltenen Bestätigungslink erhalten Sie unseren Newsletter.",
|
|
132
|
+
"newsletter_title_error": "Das hat leider nicht geklappt!",
|
|
133
|
+
"newsletter_title_already_registered": "Sie haben den Newsletter bereits abonniert.",
|
|
134
|
+
"newsletter_title_registered": "Sie haben sich erfolgreich für den Newsletter angemeldet.",
|
|
135
|
+
"newsletter_title_success": "Vielen Dank für Ihre Anmeldung.",
|
|
136
|
+
"newsletter_unsubscribe": "Abmelden",
|
|
124
137
|
"poster_copyright": "Bild © {0}",
|
|
125
138
|
"search_input_aria_submit": "Suche starten",
|
|
126
139
|
"search_input_placeholder": "Ort oder Thema suchen",
|
|
@@ -1,37 +1,31 @@
|
|
|
1
|
-
<
|
|
2
|
-
"
|
|
3
|
-
|
|
1
|
+
<div class="js-newsletterFormWrapper">
|
|
2
|
+
<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter-ds='{
|
|
3
|
+
"trackingInformations": {{this.trackingInformations}} }' action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
|
|
4
4
|
|
|
5
|
-
<div class="c-form__row -expanded">
|
|
6
5
|
{{~> components/forms/components/input
|
|
7
6
|
_type="email"
|
|
8
|
-
_isEmail=
|
|
7
|
+
_isEmail=true
|
|
9
8
|
_name="email"
|
|
10
9
|
_label="E-Mail"
|
|
11
10
|
_labelClass="hide"
|
|
12
11
|
_description=""
|
|
13
|
-
|
|
14
|
-
_tabindex=(if this.isHidden "-1")
|
|
15
|
-
_required="true"
|
|
12
|
+
_required=true
|
|
16
13
|
_maxLength="140"
|
|
17
14
|
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
18
15
|
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
19
16
|
_formId=../_formId
|
|
20
17
|
}}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<div class="c-form__row">
|
|
18
|
+
|
|
24
19
|
{{~> components/forms/components/choice
|
|
25
|
-
_inGroup=
|
|
20
|
+
_inGroup=false
|
|
26
21
|
_type="checkbox"
|
|
27
22
|
_name="checkbox"
|
|
28
23
|
_label=(loca "accept_data_privacy_regulation_link")
|
|
29
|
-
_description="
|
|
30
|
-
_required=
|
|
24
|
+
_description=""
|
|
25
|
+
_required=true
|
|
31
26
|
_errorMandatory="Bitte wählen Sie dieses Pflichtfeld aus"
|
|
32
27
|
}}
|
|
33
|
-
|
|
34
|
-
</div>
|
|
28
|
+
|
|
35
29
|
|
|
36
30
|
{{~> components/forms/components/controls }}
|
|
37
31
|
|
|
@@ -40,12 +34,14 @@
|
|
|
40
34
|
_name="newsletter"
|
|
41
35
|
_type="hidden"
|
|
42
36
|
_value=this.mailingList
|
|
37
|
+
_wrapperClass="hidden"
|
|
43
38
|
_hasLabel=false
|
|
44
39
|
}}
|
|
45
40
|
|
|
46
41
|
{{~>components/forms/components/input
|
|
47
42
|
_name="newsletter-type"
|
|
48
43
|
_type="hidden"
|
|
44
|
+
_wrapperClass="hidden"
|
|
49
45
|
_value="html"
|
|
50
46
|
_hasLabel=false
|
|
51
47
|
}}
|
|
@@ -59,4 +55,5 @@
|
|
|
59
55
|
<script type="text/html" class="js-alreadyRegisteredMessage">
|
|
60
56
|
{{{include "components/newsletter/components/newsletter_already_registered" }}}
|
|
61
57
|
</script>
|
|
62
|
-
</form>
|
|
58
|
+
</form>
|
|
59
|
+
</div>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
|
|
2
|
+
action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
|
|
3
|
+
accept-charset="utf-8">
|
|
4
|
+
|
|
5
|
+
{{~> components/forms/components/input
|
|
6
|
+
_type="email"
|
|
7
|
+
_isEmail="true"
|
|
8
|
+
_name="email"
|
|
9
|
+
_label="E-Mail"
|
|
10
|
+
_labelClass="hide"
|
|
11
|
+
_description=""
|
|
12
|
+
_required="true"
|
|
13
|
+
_maxLength="140"
|
|
14
|
+
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
15
|
+
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
16
|
+
_formId=../_formId
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
{{> components/forms/components/choiceGroup
|
|
20
|
+
_name="Registrierung"
|
|
21
|
+
_required=true
|
|
22
|
+
_inputClass=""
|
|
23
|
+
_type="radio"
|
|
24
|
+
_locaKey="newsletter_subscribe_text"
|
|
25
|
+
_inGroup=true
|
|
26
|
+
_isHorizontalLayout=true
|
|
27
|
+
_multipleChoice=false
|
|
28
|
+
_formId=../_formId
|
|
29
|
+
_items=this.items
|
|
30
|
+
}}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
{{~> components/forms/components/controls }}
|
|
34
|
+
|
|
35
|
+
{{~> components/forms/components/input
|
|
36
|
+
_formField=this.formData.INXMAIL_HTTP_REDIRECT
|
|
37
|
+
_name="INXMAIL_HTTP_REDIRECT"
|
|
38
|
+
_type="hidden"
|
|
39
|
+
_wrapperClass="hidden"
|
|
40
|
+
_value=this.successLink
|
|
41
|
+
_hasLabel=false
|
|
42
|
+
}}
|
|
43
|
+
|
|
44
|
+
{{~>components/forms/components/input
|
|
45
|
+
_formField=this.formData.INXMAIL_HTTP_REDIRECT_ERROR
|
|
46
|
+
_name="INXMAIL_HTTP_REDIRECT_ERROR"
|
|
47
|
+
_type="hidden"
|
|
48
|
+
_wrapperClass="hidden"
|
|
49
|
+
_value=this.errorLink
|
|
50
|
+
_hasLabel=false
|
|
51
|
+
}}
|
|
52
|
+
|
|
53
|
+
{{~> components/forms/components/input
|
|
54
|
+
_formField=this.formData.backlink
|
|
55
|
+
_name="backlink"
|
|
56
|
+
_type="hidden"
|
|
57
|
+
_wrapperClass="hidden"
|
|
58
|
+
_value=this.backlinkUuid
|
|
59
|
+
_hasLabel=false
|
|
60
|
+
}}
|
|
61
|
+
</form>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"useNewNewsletter":true,
|
|
3
|
+
"title":"hessenschau update - Der Newsletter für Hessen",
|
|
4
|
+
"description":"Hier können Sie sich für das hessenschau update anmelden. Der Newsletter wird Ihnen von Montag bis Freitag kostenlos und unverbindlich zugestellt. Wenn Sie sich in unseren Verteiler eintragen, erhalten Sie eine E-Mail mit der Bitte, Ihre Aufnahme noch einmal zu bestätigen. Sie können den Newsletter jederzeit wieder abbestellen." ,
|
|
5
|
+
"items":[
|
|
6
|
+
{"value":"","label":"Anmelden","title":"Anmelden","name":"Registrierung","isSelected":false},
|
|
7
|
+
{"value":"","label":"Abmelden","title":"Abmelden","name":"Registrierung","isSelected":false}
|
|
8
|
+
],
|
|
9
|
+
"successLink":"Link wenn erfolgreich",
|
|
10
|
+
"errorLink": "Link wenn Fehler",
|
|
11
|
+
"backlinkUuid": "Backlink mit UUID (altes Voting)",
|
|
12
|
+
"mailingList":"E-Mail-Liste",
|
|
13
|
+
"trackingInformations":"Tracking",
|
|
14
|
+
"isHidden":true
|
|
15
|
+
}
|
|
@@ -1,46 +1,14 @@
|
|
|
1
1
|
{
|
|
2
|
-
"useNewNewsletter":
|
|
2
|
+
"useNewNewsletter":false,
|
|
3
3
|
"title":"hessenschau update - Der Newsletter für Hessen",
|
|
4
|
-
"description":"Hier können Sie sich für das hessenschau update anmelden. Der Newsletter wird Ihnen von Montag bis Freitag kostenlos und unverbindlich zugestellt. Wenn Sie sich in unseren Verteiler eintragen, erhalten Sie eine E-Mail mit der Bitte, Ihre Aufnahme noch einmal zu bestätigen. Sie können den Newsletter jederzeit wieder ",
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"defaultValue":"",
|
|
16
|
-
"isHidden":false,
|
|
17
|
-
"isRequired":true,
|
|
18
|
-
"maxLength":"140"
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
"isGrouped":false,
|
|
22
|
-
"type":{
|
|
23
|
-
"isChoice":true,
|
|
24
|
-
"asString":"checkbox"
|
|
25
|
-
},
|
|
26
|
-
"name":"checkbox",
|
|
27
|
-
"label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.",
|
|
28
|
-
"isMeta":false,
|
|
29
|
-
"description":"Das ist der Beschreibungstext von Checkbox",
|
|
30
|
-
"isRequired":true
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"isGrouped":false,
|
|
34
|
-
"type":{
|
|
35
|
-
"isChoice":true,
|
|
36
|
-
"asString":"checkbox"
|
|
37
|
-
},
|
|
38
|
-
"name":"checkbox",
|
|
39
|
-
"label":"",
|
|
40
|
-
"isMeta":false,
|
|
41
|
-
"description":"Das ist der Beschreibungstext von Checkbox",
|
|
42
|
-
"isRequired":true
|
|
43
|
-
}
|
|
44
|
-
]
|
|
45
|
-
|
|
46
|
-
}
|
|
4
|
+
"description":"Hier können Sie sich für das hessenschau update anmelden. Der Newsletter wird Ihnen von Montag bis Freitag kostenlos und unverbindlich zugestellt. Wenn Sie sich in unseren Verteiler eintragen, erhalten Sie eine E-Mail mit der Bitte, Ihre Aufnahme noch einmal zu bestätigen. Sie können den Newsletter jederzeit wieder abbestellen." ,
|
|
5
|
+
"items":[
|
|
6
|
+
{"value":"","label":"Anmelden","title":"Anmelden","name":"Registrierung","isSelected":false},
|
|
7
|
+
{"value":"","label":"Abmelden","title":"Abmelden","name":"Registrierung","isSelected":false}
|
|
8
|
+
],
|
|
9
|
+
"successLink":"Link wenn erfolgreich",
|
|
10
|
+
"errorLink": "Link wenn Fehler",
|
|
11
|
+
"backlinkUuid": "Backlink mit UUID (altes Voting)",
|
|
12
|
+
"mailingList":"E-Mail-Liste",
|
|
13
|
+
"trackingInformations":"Tracking"
|
|
14
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { hr$, listen, replaceAnimated } from 'hrQuery'
|
|
2
|
+
import { uxAction } from 'base/tracking/pianoHelper.subfeature'
|
|
3
|
+
|
|
4
|
+
const Newsletter = function (context) {
|
|
5
|
+
'use strict'
|
|
6
|
+
const { element: rootElement } = context,
|
|
7
|
+
actionUrl = rootElement && rootElement.getAttribute('action'),
|
|
8
|
+
formWrapper = rootElement.parentNode,
|
|
9
|
+
options = context.options,
|
|
10
|
+
trackingInformations = options.trackingInformations
|
|
11
|
+
|
|
12
|
+
async function postData() {
|
|
13
|
+
const formData = new FormData(rootElement)
|
|
14
|
+
// use timestamp in seconds because the newsletter tool cannot handle milliseconds
|
|
15
|
+
formData.set('confirm-data-protection', Math.ceil(Date.now() / 1000))
|
|
16
|
+
|
|
17
|
+
const response = await fetch(actionUrl, {
|
|
18
|
+
method: 'POST',
|
|
19
|
+
body: formData,
|
|
20
|
+
})
|
|
21
|
+
return response
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const handleSubmit = function (event) {
|
|
25
|
+
uxAction(trackingInformations)
|
|
26
|
+
event.preventDefault()
|
|
27
|
+
postData()
|
|
28
|
+
.then((response) => {
|
|
29
|
+
if (!response.ok) {
|
|
30
|
+
throw new Error('Netzwerk- oder Serverfehler')
|
|
31
|
+
}
|
|
32
|
+
return response.json()
|
|
33
|
+
})
|
|
34
|
+
.then((responseStatus) => {
|
|
35
|
+
switch (responseStatus.status) {
|
|
36
|
+
case 'success':
|
|
37
|
+
replaceAnimated(
|
|
38
|
+
formWrapper,
|
|
39
|
+
hr$('.js-successMessage', rootElement)[0].innerHTML,
|
|
40
|
+
true,
|
|
41
|
+
() => {
|
|
42
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
43
|
+
},
|
|
44
|
+
)
|
|
45
|
+
break
|
|
46
|
+
case 'no_valid_newsletters':
|
|
47
|
+
replaceAnimated(
|
|
48
|
+
formWrapper,
|
|
49
|
+
hr$('.js-alreadyRegisteredMessage', rootElement)[0].innerHTML,
|
|
50
|
+
true,
|
|
51
|
+
() => {
|
|
52
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
53
|
+
},
|
|
54
|
+
)
|
|
55
|
+
break
|
|
56
|
+
default:
|
|
57
|
+
replaceAnimated(
|
|
58
|
+
formWrapper,
|
|
59
|
+
hr$('.js-errorMessage', rootElement)[0].innerHTML,
|
|
60
|
+
true,
|
|
61
|
+
() => {
|
|
62
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
63
|
+
},
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
.catch((error) => {
|
|
68
|
+
console.error('Beim Ausführen des Fetch ist ein Fehler aufgetreten.', error)
|
|
69
|
+
replaceAnimated(
|
|
70
|
+
formWrapper,
|
|
71
|
+
hr$('.js-errorMessage', rootElement)[0].innerHTML,
|
|
72
|
+
true,
|
|
73
|
+
() => {
|
|
74
|
+
listen('click', handleFormReload, hr$('.js-formReload')[0])
|
|
75
|
+
},
|
|
76
|
+
)
|
|
77
|
+
})
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const handleFormReload = function (event) {
|
|
81
|
+
event.preventDefault()
|
|
82
|
+
replaceAnimated(formWrapper, rootElement.outerHTML, true)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
listen('submit', handleSubmit, rootElement)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default Newsletter
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { hr$ } from 'hrQuery'
|
|
2
|
+
|
|
3
|
+
const Newsletter = function (context) {
|
|
4
|
+
'use strict'
|
|
5
|
+
|
|
6
|
+
const { element: rootElement } = context,
|
|
7
|
+
subscribeRadio = hr$('.js-newsletter-subscribe', rootElement)[0],
|
|
8
|
+
unsubscribeRadio = hr$('.js-newsletter-unsubscribe', rootElement)[0]
|
|
9
|
+
|
|
10
|
+
if (subscribeRadio && unsubscribeRadio) {
|
|
11
|
+
subscribeRadio.onclick = function () {
|
|
12
|
+
subscribeRadio.checked = true
|
|
13
|
+
unsubscribeRadio.checked = false
|
|
14
|
+
}
|
|
15
|
+
unsubscribeRadio.onclick = function () {
|
|
16
|
+
subscribeRadio.checked = false
|
|
17
|
+
unsubscribeRadio.checked = true
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default Newsletter
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
{{#
|
|
2
|
-
<div id="{{this.uuid}}" class="{{_addClass}}
|
|
1
|
+
{{#if this.useNewNewsletter}}
|
|
2
|
+
<div id="{{this.uuid}}" class="{{_addClass}} ">
|
|
3
3
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
|
|
4
4
|
<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
|
|
5
5
|
{{this.title}}
|
|
6
6
|
</h3>
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
{{#if this.description}}
|
|
8
|
+
<p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
|
|
9
|
+
{{{this.description}}}
|
|
10
|
+
</p>
|
|
11
|
+
{{/if}}
|
|
12
|
+
<div class="mt-4 text-base js-formWrapper font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
|
|
13
|
+
{{> components/newsletter/components/new_newsletter_form}}
|
|
9
14
|
</div>
|
|
10
15
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
|
|
11
16
|
</div>
|
|
12
17
|
{{else}}
|
|
13
|
-
<div id="{{this.uuid}}" class="{{_addClass}} ">
|
|
18
|
+
<div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
|
|
14
19
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
|
|
15
20
|
<h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
|
|
16
21
|
{{this.title}}
|
|
17
22
|
</h3>
|
|
18
|
-
|
|
19
|
-
<div class="c-form__row">
|
|
20
|
-
<div class="c-form__label">
|
|
21
|
-
{{{this.description}}}
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
{{/if}}
|
|
23
|
+
|
|
25
24
|
<div class="js-formWrapper">
|
|
26
|
-
{{> components/newsletter/components/
|
|
25
|
+
{{> components/newsletter/components/newsletter_form}}
|
|
27
26
|
</div>
|
|
27
|
+
|
|
28
28
|
{{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
|
|
29
29
|
</div>
|
|
30
|
-
{{/
|
|
30
|
+
{{/if}}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import NewNewsletterJson from './fixtures/new_newsletter.json'
|
|
2
|
+
import OldNewsletterJson from './fixtures/newsletter.json'
|
|
2
3
|
|
|
3
4
|
const handlebars = require('hrHandlebars')
|
|
4
5
|
|
|
@@ -14,7 +15,16 @@ export default {
|
|
|
14
15
|
},
|
|
15
16
|
],
|
|
16
17
|
}
|
|
17
|
-
const
|
|
18
|
+
const TemplateNewsletterNew = (args) => {
|
|
19
|
+
let hbsTemplate = handlebars.compile(`
|
|
20
|
+
{{#>components/forms/components/backgroundBox }}
|
|
21
|
+
{{> components/newsletter/newsletter }}
|
|
22
|
+
{{/components/forms/components/backgroundBox }}
|
|
23
|
+
`)
|
|
24
|
+
return hbsTemplate({ ...args })
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const TemplateNewsletterOld = (args) => {
|
|
18
28
|
let hbsTemplate = handlebars.compile(`
|
|
19
29
|
{{#>components/forms/components/backgroundBox }}
|
|
20
30
|
{{> components/newsletter/newsletter }}
|
|
@@ -24,9 +34,15 @@ const Template = (args) => {
|
|
|
24
34
|
}
|
|
25
35
|
|
|
26
36
|
export const Default = {
|
|
27
|
-
render:
|
|
28
|
-
name: 'Newsletter',
|
|
29
|
-
args:
|
|
37
|
+
render: TemplateNewsletterNew.bind({}),
|
|
38
|
+
name: 'Neuer Newsletter',
|
|
39
|
+
args: NewNewsletterJson,
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export const Newsletter_old = {
|
|
43
|
+
render: TemplateNewsletterOld.bind({}),
|
|
44
|
+
name: 'Alter Newsletter',
|
|
45
|
+
args: OldNewsletterJson,
|
|
30
46
|
}
|
|
31
47
|
|
|
32
48
|
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
|
|
2
|
-
action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
|
|
3
|
-
accept-charset="utf-8">
|
|
4
|
-
|
|
5
|
-
{{#if this.description}}
|
|
6
|
-
<div class="c-form__row">
|
|
7
|
-
<div class="c-form__label">
|
|
8
|
-
{{{this.description}}}
|
|
9
|
-
</div>
|
|
10
|
-
</div>
|
|
11
|
-
{{/if}}
|
|
12
|
-
|
|
13
|
-
<div class="c-form__row -expanded">
|
|
14
|
-
{{~> components/forms/components/input
|
|
15
|
-
_type="email"
|
|
16
|
-
_isEmail="true"
|
|
17
|
-
_name="email"
|
|
18
|
-
_label="E-Mail"
|
|
19
|
-
_labelClass="hide"
|
|
20
|
-
_description=""
|
|
21
|
-
_wrapperClass=(if this.isHidden "hidden")
|
|
22
|
-
_tabindex=(if this.isHidden "-1")
|
|
23
|
-
_required="true"
|
|
24
|
-
_maxLength="140"
|
|
25
|
-
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
26
|
-
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
27
|
-
_formId=../_formId
|
|
28
|
-
}}
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<div class="c-form__row -hasLegend">
|
|
32
|
-
<fieldset class="c-form__field-set">
|
|
33
|
-
<legend class="c-form__legend">{{loca "newsletter_subscribe_text"}}</legend>
|
|
34
|
-
<div class="c-form__row -options">
|
|
35
|
-
<div class="c-form__options">
|
|
36
|
-
<div class="c-form__options__wrapper">
|
|
37
|
-
<div class="c-form__option">
|
|
38
|
-
{{> components/forms/components/choice
|
|
39
|
-
_name="INXMAIL_SUBSCRIPTION"
|
|
40
|
-
_inputClass="js-newsletter-subscribe"
|
|
41
|
-
_type="checkbox"
|
|
42
|
-
_locaKey="newsletter_subscribe"
|
|
43
|
-
_selected=true
|
|
44
|
-
_value=this.mailingList
|
|
45
|
-
_inGroup=true
|
|
46
|
-
_radioCheckbox=true
|
|
47
|
-
}}
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div class="c-form__option">
|
|
51
|
-
{{> components/forms/components/choice
|
|
52
|
-
_name="INXMAIL_UNSUBSCRIPTION"
|
|
53
|
-
_inputClass="js-newsletter-unsubscribe"
|
|
54
|
-
_type="checkbox"
|
|
55
|
-
_locaKey="newsletter_unsubscribe"
|
|
56
|
-
_value=this.mailingList
|
|
57
|
-
_inGroup=true
|
|
58
|
-
_radioCheckbox=true
|
|
59
|
-
}}
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</fieldset>
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
<div class="c-form__row">
|
|
68
|
-
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
{{~> components/forms/components/controls }}
|
|
72
|
-
|
|
73
|
-
{{~> components/forms/components/input
|
|
74
|
-
_formField=this.formData.message
|
|
75
|
-
_labelClass="hideCompletely"
|
|
76
|
-
_locaKey="comment_label_message"
|
|
77
|
-
_inputClass="commentForm__message hide"
|
|
78
|
-
_name="message"
|
|
79
|
-
_type="text"
|
|
80
|
-
_maxLength="140"
|
|
81
|
-
}}
|
|
82
|
-
|
|
83
|
-
{{~> components/forms/components/input
|
|
84
|
-
_formField=this.formData.INXMAIL_HTTP_REDIRECT
|
|
85
|
-
_name="INXMAIL_HTTP_REDIRECT"
|
|
86
|
-
_type="hidden"
|
|
87
|
-
_value=this.successLink
|
|
88
|
-
_hasLabel=false
|
|
89
|
-
}}
|
|
90
|
-
|
|
91
|
-
{{~>components/forms/components/input
|
|
92
|
-
_formField=this.formData.INXMAIL_HTTP_REDIRECT_ERROR
|
|
93
|
-
_name="INXMAIL_HTTP_REDIRECT_ERROR"
|
|
94
|
-
_type="hidden"
|
|
95
|
-
_value=this.errorLink
|
|
96
|
-
_hasLabel=false
|
|
97
|
-
}}
|
|
98
|
-
|
|
99
|
-
{{~> components/forms/components/input
|
|
100
|
-
_formField=this.formData.backlink
|
|
101
|
-
_name="backlink"
|
|
102
|
-
_type="hidden"
|
|
103
|
-
_value=this.backlinkUuid
|
|
104
|
-
_hasLabel=false
|
|
105
|
-
}}
|
|
106
|
-
</form>
|