<div class="newsletter-form-container js-newsletter-form-container">
<div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
<svg class="icon icon--checkmark">
<use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
<div class="newsletter-confirmation__info">
<p>Thank you for signing up. We'll send you a welcome message shortly.</p>
<p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
</div>
</div>
<form class="newsletter-form js-newsletter-form">
<div class="newsletter-error visually-hidden js-newsletter-error">
<svg class="icon icon--error">
<use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
<span class="input-error">Please enter a valid email address.</span>
</div>
<div class="form-input">
<div class="validation js-validation">
<input type="email" name="email" id="email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
</div>
</div>
<button class="btn btn--base btn--cta js-newsletter-btn">
Sign Up
</button>
</form>
</div>
<div class="newsletter-form-container js-newsletter-form-container">
<div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
{{render '@icons--checkmark'}}
<div class="newsletter-confirmation__info">
<p>{{confirmationMessage}}</p>
<p class="newsletter-customize">{{customizeMessage}}<a href="#">{{customizeMessageLink}}</a>{{customizeMessageEnd}}</p>
</div>
</div>
<form class="newsletter-form js-newsletter-form">
<div class="newsletter-error visually-hidden js-newsletter-error">
{{render '@icons--error'}}
<span class="input-error">{{errorMessage}}</span>
</div>
{{render '@input--email' emailModifiers merge=true}}
{{render '@buttons--cta' buttonModifiers merge=true}}
</form>
</div>
{
"theatermania": true,
"emailModifiers": {
"label": null,
"class": "js-newsletter-input"
},
"buttonModifiers": {
"buttonValue": "Sign Up",
"class": "js-newsletter-btn"
},
"errorMessage": "Please enter a valid email address.",
"confirmationMessage": "Thank you for signing up. We'll send you a welcome message shortly.",
"customizeMessage": "You can ",
"customizeMessageLink": "customize your preferences ",
"customizeMessageEnd": "at any time."
}
/**
* @overview Mock interactions with the newsletter component.
* @module Newsletter.js
*/
const newsletters = document.querySelectorAll(`.js-newsletter-form-container`);
const headerNewsletterCopy = document.querySelector(`.js-newsletter-copy`);
const modalNewsletterCopy = document.querySelectorAll(`.js-newsletter-modal-copy`);
if (newsletters[0]) {
newsletters.forEach((newsletter) => {
const newsletterBtn = newsletter.querySelector(`.js-newsletter-btn`);
const confirmationMsg = newsletter.querySelector(`.js-newsletter-confirmation`);
const validationContainer = newsletter.querySelector(`.js-validation`);
const newsletterEmail = newsletter.querySelector(`.js-newsletter-input`);
const newsletterForm = newsletter.querySelector(`.js-newsletter-form`);
const errorMsg = newsletter.querySelector(`.js-newsletter-error`);
newsletterBtn.addEventListener(`click`, (e) => {
e.preventDefault();
// Display error message if field blank.
if (newsletterEmail.value.length === 0) {
validationContainer.classList.add(`validation--error`);
errorMsg.classList.remove(`visually-hidden`);
errorMsg.classList.add(`is-active`);
}
// Display success confirmation.
else {
newsletterForm.classList.add(`visually-hidden`);
confirmationMsg.classList.remove(`visually-hidden`);
confirmationMsg.classList.add(`is-active`);
if (e.target.closest(`.js-header-nav-list`)) {
headerNewsletterCopy.classList.add(`visually-hidden`);
}
if (e.target.closest(`.js-modal-overlay`)) {
modalNewsletterCopy.forEach((newsletter) => {
newsletter.classList.add(`visually-hidden`);
});
}
}
});
});
}
.newsletter-error {
margin-bottom: 1rem;
line-height: 1;
opacity: 0;
transform: translateY(10px);
transition: $transition;
&.is-active {
opacity: 1;
transform: translateY(0);
}
}
.input-error {
.newsletter-error & {
display: inline;
margin: 0;
}
}
.icon--error {
.newsletter-error & {
width: 1.25rem;
height: 1.3rem;
stroke: $color-error;
stroke-width: 4;
}
}
.newsletter-confirmation {
text-align: center;
&.is-active {
.icon--checkmark,
.newsletter-confirmation__info {
opacity: 1;
transform: translateY(0);
}
}
}
.newsletter-confirmation__info {
opacity: 0;
transform: translateY(10px);
transition: $transition;
}
.newsletter-customize {
font-size: $ms-neg-1;
}
.newsletter-form {
margin-top: 1rem;
}
.icon--checkmark {
.newsletter-confirmation & {
display: block;
margin: 0 auto;
border: 2px solid $color-success;
border-radius: 1.25rem;
stroke-width: 4;
stroke: $color-success;
opacity: 0;
transform: translateY(10px);
transition: $transition;
transition-delay: 0.15s;
}
.footer-nav & {
@include breakpoint($break-small) {
margin-left: 0;
}
@include breakpoint($break-xlarge) {
margin-left: auto;
}
}
}
There are no notes for this item.