covid-modal.js

var modal = {}
modal.init = function () {
    var brandColor = window.location.host.indexOf('asics') > 0 ? '#001e63' : '#000',
        langLocale = document.documentElement.getAttribute('lang') || 'en-us';
    this.modalContent = modalContent[langLocale];
    this.styles = 'body.modal-active { height: 100vh; overflow: hidden; } .tealium-modal { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 100; opacity: 0; transition: opacity 0.3s; } .tealium-modal-content { position: fixed; top: 0; right: 0; left: 0; box-sizing: border-box; width: 350px; margin: 200px auto 0; padding: 20px; background: white; color:' + brandColor + '; z-index: 101; } .tealium-modal .dismiss { position: absolute; right: 10px; top: 10px; height: 40px; width: 40px; padding: 0; background: transparent; border: 0; font-size: 30px; color:' + brandColor + '; } .tealium-modal h1 { margin: 25px 0 15px; font-family: Graphik Semibold, sans-serif; font-size: 20px; line-height: 24px; text-transform: none; } .tealium-modal p { margin: 15px 0; font-family: Graphik Regular,sans-serif; font-size: 14px; line-height: 21px; } @media (min-width: 768px) { .tealium-modal-content { width: 600px; padding: 40px; } .tealium-modal h1 { margin: 0 0 15px 0; font-size: 30px; line-height: 36px; } }';
    modal.injectStyles();
    modal.launch();
    modal.events();
}
modal.launch = function () {
    var modalParent = document.createElement('div');
    modalParent.className = 'tealium-modal js-covid-modal';
    var modalContent = document.createElement('div');
    modalContent.setAttribute('role', 'dialog');
    modalContent.className = 'tealium-modal-content';
    var button = document.createElement('button');
    button.innerHTML = '×';
    button.className = 'dismiss js-covid-dismiss';
    button.focus();
    var header = document.createElement('h1');
    header.innerText = this.modalContent.header;
    var body = document.createElement('p');
    body.innerText = this.modalContent.body;
    var footer = document.createElement('p');
    footer.innerText = this.modalContent.footer;
    modalContent.appendChild(button);
    modalContent.appendChild(header);
    modalContent.appendChild(body);
    modalContent.appendChild(footer);
    modalParent.appendChild(modalContent);
    document.body.appendChild(modalParent);
    setTimeout(function () {
        modalParent.style.opacity = '1';
    }, 1);
    document.body.classList.add('modal-active');
}
modal.injectStyles = function () {
    var modalStyles = document.createElement('style');
    modalStyles.textContent = modal.styles;
    document.body.appendChild(modalStyles);
}
modal.dismiss = function () {
    var dismiss = document.querySelector('.js-covid-modal');
    document.body.classList.remove('modal-active');
    dismiss.remove();
}
modal.events = function () {
    var dismiss = document.querySelector('.js-covid-dismiss');
    dismiss.addEventListener('click', modal.dismiss);
}
var modalContent = {
    'en-us': {
        header: 'US: In response to COVID-19',
        body: 'US: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'US: Thank you for your continued loyalty and patience during this time.'
    },
    'en-nl': {
        header: 'NL: In response to COVID-19',
        body: 'NL: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'NL: Thank you for your continued loyalty and patience during this time.'
    },
    'nl-nl': {
        header: 'NL: In response to COVID-19',
        body: 'NL: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'NL: Thank you for your continued loyalty and patience during this time.'
    },
    'de-de': {
        header: 'DE: In response to COVID-19',
        body: 'DE: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'DE: Thank you for your continued loyalty and patience during this time.'
    },
    'fr-fr': {
        header: 'FR: In response to COVID-19',
        body: 'FR: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'FR: Thank you for your continued loyalty and patience during this time.'
    },
    'es-es': {
        header: 'ES: In response to COVID-19',
        body: 'ES: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'ES: Thank you for your continued loyalty and patience during this time.'
    },
    'en-ie': {
        header: 'IE: In response to COVID-19',
        body: 'IE: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'IE: Thank you for your continued loyalty and patience during this time.'
    },
    'pt-pt': {
        header: 'PT: In response to COVID-19',
        body: 'PT: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'PT: Thank you for your continued loyalty and patience during this time.'
    },
    'en-gb': {
        header: 'GB: In response to COVID-19',
        body: 'GB: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'GB: Thank you for your continued loyalty and patience during this time.'
    },
    'en-dk': {
        header: 'DK: In response to COVID-19',
        body: 'DK: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'DK: Thank you for your continued loyalty and patience during this time.'
    },
    'nl-be': {
        header: 'BE: In response to COVID-19',
        body: 'BE: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'BE: Thank you for your continued loyalty and patience during this time.'
    },
    'de-at': {
        header: 'AT: In response to COVID-19',
        body: 'AT: To protect our community and ASICS employees, we have temporarily shut down all operations in certain areas of Europe, including orders on our website. We will keep you updated with any new information.',
        footer: 'AT: Thank you for your continued loyalty and patience during this time.'
    }
}

if (document.cookie.replace(/(?:(?:^|.*;\s*)covidmodal\s*\=\s*([^;]*).*$)|^.*$/, '$1') !== 'true' || window.location.search.indexOf('covid') > 0) {
    modal.init();
    document.cookie = 'covidmodal=true; path=/; max-age=86400;';
}