<div class="coming-soon ">
<header class="coming-soon__header">
<div class="logo coming-soon__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<div class="theme-switcher coming-soon__theme-switcher">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
</header>
<div class="coming-soon__lines">
<div class="coming-soon__text-line">
Coming
</div>
<div class="coming-soon__text-line">
Soon
</div>
</div>
<div class="coming-soon__newsletter-wrapper">
<div class="coming-soon__message">
Subscribe to our Newsletter and don’t miss out on latest Letters from Tartu news!
</div>
<form class="newsletter coming-soon__newsletter js-static-newsletter ">
<div class="newsletter__textfield-container">
<input type="text" name="name" value="" class="newsletter__textfield-static">
<div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="subscribe" name="subscribe" placeholder="Enter your email here">
<label class="textfield__label text-button " for="subscribe">
email
</label>
</div>
</div>
<button type="submit" class="button newsletter__button ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
<button type="submit" class="button button--icon newsletter__button newsletter__button--mobile ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
</span>
</span>
</button>
</div>
<span class="newsletter__error-message"></span>
</form>
</div>
</div>
<div class="coming-soon {{ modifier }} {{ class }}">
<header class="coming-soon__header">
{% include '@logo' with {class: "coming-soon__logo", data: data.logo} %}
{% include '@theme-switcher' with {class: "coming-soon__theme-switcher", data: data.themeSwitcher} %}
</header>
{% if data.lines %}
<div class="coming-soon__lines">
{% for line in data.lines %}
<div class="coming-soon__text-line">
{{ line.text }}
</div>
{% endfor %}
</div>
{% endif %}
{% if data.newsletter %}
<div class="coming-soon__newsletter-wrapper">
{% if data.newsletterMessage %}
<div class="coming-soon__message">
{{ data.newsletterMessage }}
</div>
{% endif %}
{% if data.thankYouMessage %}
<div class="coming-soon__thank-you">
{{ data.thankYouMessage }}
</div>
{% endif %}
{% include '@newsletter' with {class: "coming-soon__newsletter js-static-newsletter", data: data.newsletter} %}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"themeSwitcher": {
"palettes": [
{
"class": "beige"
},
{
"class": "gray"
},
{
"class": "yellow"
},
{
"class": "green"
},
{
"class": "dark"
}
]
},
"lines": [
{
"text": "Coming"
},
{
"text": "Soon"
}
],
"newsletterMessage": "Subscribe to our Newsletter and don’t miss out on latest Letters from Tartu news!",
"newsletter": {
"static": true,
"textfield": {
"label": "email",
"id": "subscribe",
"name": "subscribe",
"placeholder": "Enter your email here"
},
"button": {
"text": "subscribe"
},
"buttonMobile": {
"icon": "arrow-enter-bold"
}
}
}
}
.coming-soon {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.coming-soon__header {
position: fixed;
top: 0;
left: 0;
display: flex;
background-color: var(--color-background);
border-bottom: 1px solid var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: border-bottom-color, background-color;
min-height: 40px;
width: 100%;
z-index: map_get($zindex, header);
@include bp(sm-min) {
min-height: 60px;
}
}
.coming-soon__logo {
flex-grow: 1;
@include bp(md-min) {
box-shadow: -1px 0 0 0 var(--color-brand) inset;
transition: box-shadow $transition-duration $transition-easing;
@include gridcol('max-width', 5, $grid-cols-md);
@include gridcol('flex-basis', 5, $grid-cols-md);
}
}
.coming-soon__theme-switcher {
display: none;
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
pointer-events: none;
@include bp(md-min) {
display: flex;
}
}
.coming-soon__lines {
width: 100%;
font-size: $font-size-h1;
line-height: $font-line-height-h1;
padding-top: 136px;
@include bp(sm-min) {
padding-top: 132px;
font-size: 150px;
line-height: $font-line-height-h1-lg;
}
}
.coming-soon__text-line {
height: 88px;
box-shadow: 0 -1px 0 0 var(--color-brand) inset;
transition: box-shadow $transition-duration $transition-easing;
padding-left: 16px;
@include bp(sm-min) {
height: 175px;
padding-top: 24px;
padding-left: 88px;
}
}
.coming-soon__message {
font-size: $font-size-small;
line-height: $font-line-height-small;
padding-bottom: 16px;
@include bp(sm-min) {
font-size: $font-size-large-lg;
line-height: $font-line-height-large-lg;
padding-bottom: 28px;
}
.coming-soon--thank-you & {
display: none;
}
}
.coming-soon__thank-you {
display: none;
font-size: $font-size-small;
line-height: $font-line-height-small;
padding-bottom: 16px;
@include bp(sm-min) {
font-size: $font-size-large-lg;
line-height: $font-line-height-large-lg;
padding-bottom: 28px;
}
.coming-soon--thank-you & {
display: block;
}
}
.coming-soon__newsletter-wrapper {
display: flex;
flex-direction: column;
flex-basis: 100%;
max-width: 100%;
justify-content: flex-end;
padding: 64px 16px;
@include bp(sm-min) {
padding: 64px 90px;
}
@include bp(md-min) {
align-self: flex-end;
flex-basis: 50%;
max-width: 50%;
padding: 64px 90px 64px 0;
}
}
.coming-soon__newsletter {
.coming-soon--thank-you & {
display: none;
}
}
import './coming-soon.scss';
import Component from '@component';
import jqXHR = JQuery.jqXHR;
export interface ISubscribeResponse {
success: boolean;
message: string;
}
export default class ComingSoon extends Component {
static initSelector: string = '.coming-soon';
private newsletter: JQuery;
private wrapper: JQuery;
private emailField: JQuery;
private emailMessage: JQuery;
private emailError: JQuery;
private honeyPot: JQuery;
constructor(element: HTMLElement) {
super(element);
this.newsletter = this.element.find('.js-static-newsletter');
this.wrapper = this.newsletter.parent();
this.emailField = this.newsletter.find('input[name="subscribe"]');
this.honeyPot = this.newsletter.find('.newsletter__textfield-static');
this.init();
}
init(): void {
this.honeyPot.hide();
this.wrapper.append('<div class="coming-soon__thank-you h-hidden"></div>');
this.wrapper.append('<div class="coming-soon__result-error h-hidden"></div>');
this.emailMessage = this.wrapper.find('.coming-soon__thank-you');
this.emailError = this.wrapper.find('.coming-soon__result-error');
if (this.newsletter.length) {
this.newsletter.on('submit', this.submitNewsletter.bind(this));
}
}
submitNewsletter(event: JQuery.TriggeredEvent): void {
event.preventDefault();
if (this.honeyPot.val()) {
return;
}
if (!this.emailField.val()) {
// show error;
return;
}
this.emailMessage.addClass('h-hidden');
this.emailError.addClass('h-hidden');
// submit ajax
$.ajax({
data: { email: this.emailField.val() },
dataType: 'json',
method: 'post',
url: window.location.origin + window.location.pathname + 'inc/php/',
}).then((response: ISubscribeResponse) => {
if (response.success) {
this.newsletter.hide();
this.element.addClass('coming-soon--thank-you');
this.emailMessage.html(response.message).removeClass('h-hidden');
} else {
this.emailError.html(response.message).removeClass('h-hidden');
}
}).fail((error: jqXHR) => {
this.emailError.html(error.responseText).removeClass('h-hidden');
});
}
}
<div class="coming-soon coming-soon--thank-you ">
<header class="coming-soon__header">
<div class="logo coming-soon--thank-you coming-soon__logo">
<a href="#" class="logo__content logo__link">
<figure class="image coming-soon--thank-you logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<div class="theme-switcher coming-soon--thank-you coming-soon__theme-switcher">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
</header>
<div class="coming-soon__lines">
<div class="coming-soon__text-line">
Coming
</div>
<div class="coming-soon__text-line">
Soon
</div>
</div>
<div class="coming-soon__newsletter-wrapper">
<div class="coming-soon__message">
Subscribe to our Newsletter and don’t miss out on latest Letters from Tartu news!
</div>
<div class="coming-soon__thank-you">
Thank you for subscribing, we will keep you updated on Letters from Tartu!
</div>
<form class="newsletter coming-soon--thank-you coming-soon__newsletter js-static-newsletter ">
<div class="newsletter__textfield-container">
<input type="text" name="name" value="" class="newsletter__textfield-static">
<div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="subscribe" name="subscribe" placeholder="Enter your email here">
<label class="textfield__label text-button " for="subscribe">
email
</label>
</div>
</div>
<button type="submit" class="button coming-soon--thank-you newsletter__button ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
<button type="submit" class="button button--icon newsletter__button newsletter__button--mobile ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
</span>
</span>
</button>
</div>
<span class="newsletter__error-message"></span>
</form>
</div>
</div>
<div class="coming-soon {{ modifier }} {{ class }}">
<header class="coming-soon__header">
{% include '@logo' with {class: "coming-soon__logo", data: data.logo} %}
{% include '@theme-switcher' with {class: "coming-soon__theme-switcher", data: data.themeSwitcher} %}
</header>
{% if data.lines %}
<div class="coming-soon__lines">
{% for line in data.lines %}
<div class="coming-soon__text-line">
{{ line.text }}
</div>
{% endfor %}
</div>
{% endif %}
{% if data.newsletter %}
<div class="coming-soon__newsletter-wrapper">
{% if data.newsletterMessage %}
<div class="coming-soon__message">
{{ data.newsletterMessage }}
</div>
{% endif %}
{% if data.thankYouMessage %}
<div class="coming-soon__thank-you">
{{ data.thankYouMessage }}
</div>
{% endif %}
{% include '@newsletter' with {class: "coming-soon__newsletter js-static-newsletter", data: data.newsletter} %}
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"themeSwitcher": {
"palettes": [
{
"class": "beige"
},
{
"class": "gray"
},
{
"class": "yellow"
},
{
"class": "green"
},
{
"class": "dark"
}
]
},
"lines": [
{
"text": "Coming"
},
{
"text": "Soon"
}
],
"newsletterMessage": "Subscribe to our Newsletter and don’t miss out on latest Letters from Tartu news!",
"newsletter": {
"static": true,
"textfield": {
"label": "email",
"id": "subscribe",
"name": "subscribe",
"placeholder": "Enter your email here"
},
"button": {
"text": "subscribe"
},
"buttonMobile": {
"icon": "arrow-enter-bold"
}
},
"thankYouMessage": "Thank you for subscribing, we will keep you updated on Letters from Tartu!"
},
"modifier": "coming-soon--thank-you"
}
.coming-soon {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.coming-soon__header {
position: fixed;
top: 0;
left: 0;
display: flex;
background-color: var(--color-background);
border-bottom: 1px solid var(--color-brand);
transition: $transition-duration $transition-easing;
transition-property: border-bottom-color, background-color;
min-height: 40px;
width: 100%;
z-index: map_get($zindex, header);
@include bp(sm-min) {
min-height: 60px;
}
}
.coming-soon__logo {
flex-grow: 1;
@include bp(md-min) {
box-shadow: -1px 0 0 0 var(--color-brand) inset;
transition: box-shadow $transition-duration $transition-easing;
@include gridcol('max-width', 5, $grid-cols-md);
@include gridcol('flex-basis', 5, $grid-cols-md);
}
}
.coming-soon__theme-switcher {
display: none;
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
pointer-events: none;
@include bp(md-min) {
display: flex;
}
}
.coming-soon__lines {
width: 100%;
font-size: $font-size-h1;
line-height: $font-line-height-h1;
padding-top: 136px;
@include bp(sm-min) {
padding-top: 132px;
font-size: 150px;
line-height: $font-line-height-h1-lg;
}
}
.coming-soon__text-line {
height: 88px;
box-shadow: 0 -1px 0 0 var(--color-brand) inset;
transition: box-shadow $transition-duration $transition-easing;
padding-left: 16px;
@include bp(sm-min) {
height: 175px;
padding-top: 24px;
padding-left: 88px;
}
}
.coming-soon__message {
font-size: $font-size-small;
line-height: $font-line-height-small;
padding-bottom: 16px;
@include bp(sm-min) {
font-size: $font-size-large-lg;
line-height: $font-line-height-large-lg;
padding-bottom: 28px;
}
.coming-soon--thank-you & {
display: none;
}
}
.coming-soon__thank-you {
display: none;
font-size: $font-size-small;
line-height: $font-line-height-small;
padding-bottom: 16px;
@include bp(sm-min) {
font-size: $font-size-large-lg;
line-height: $font-line-height-large-lg;
padding-bottom: 28px;
}
.coming-soon--thank-you & {
display: block;
}
}
.coming-soon__newsletter-wrapper {
display: flex;
flex-direction: column;
flex-basis: 100%;
max-width: 100%;
justify-content: flex-end;
padding: 64px 16px;
@include bp(sm-min) {
padding: 64px 90px;
}
@include bp(md-min) {
align-self: flex-end;
flex-basis: 50%;
max-width: 50%;
padding: 64px 90px 64px 0;
}
}
.coming-soon__newsletter {
.coming-soon--thank-you & {
display: none;
}
}
import './coming-soon.scss';
import Component from '@component';
import jqXHR = JQuery.jqXHR;
export interface ISubscribeResponse {
success: boolean;
message: string;
}
export default class ComingSoon extends Component {
static initSelector: string = '.coming-soon';
private newsletter: JQuery;
private wrapper: JQuery;
private emailField: JQuery;
private emailMessage: JQuery;
private emailError: JQuery;
private honeyPot: JQuery;
constructor(element: HTMLElement) {
super(element);
this.newsletter = this.element.find('.js-static-newsletter');
this.wrapper = this.newsletter.parent();
this.emailField = this.newsletter.find('input[name="subscribe"]');
this.honeyPot = this.newsletter.find('.newsletter__textfield-static');
this.init();
}
init(): void {
this.honeyPot.hide();
this.wrapper.append('<div class="coming-soon__thank-you h-hidden"></div>');
this.wrapper.append('<div class="coming-soon__result-error h-hidden"></div>');
this.emailMessage = this.wrapper.find('.coming-soon__thank-you');
this.emailError = this.wrapper.find('.coming-soon__result-error');
if (this.newsletter.length) {
this.newsletter.on('submit', this.submitNewsletter.bind(this));
}
}
submitNewsletter(event: JQuery.TriggeredEvent): void {
event.preventDefault();
if (this.honeyPot.val()) {
return;
}
if (!this.emailField.val()) {
// show error;
return;
}
this.emailMessage.addClass('h-hidden');
this.emailError.addClass('h-hidden');
// submit ajax
$.ajax({
data: { email: this.emailField.val() },
dataType: 'json',
method: 'post',
url: window.location.origin + window.location.pathname + 'inc/php/',
}).then((response: ISubscribeResponse) => {
if (response.success) {
this.newsletter.hide();
this.element.addClass('coming-soon--thank-you');
this.emailMessage.html(response.message).removeClass('h-hidden');
} else {
this.emailError.html(response.message).removeClass('h-hidden');
}
}).fail((error: jqXHR) => {
this.emailError.html(error.responseText).removeClass('h-hidden');
});
}
}