Instantly share code, notes, and snippets.

Embed
What would you like to do?
Work in the CMS using JQuery for display an International Popup warning
var Internationalisation = (function ($) {
var title, ctaText, ctaLink, continuteText, modalHTML, modalText;
var pageMask = $('#page-mask');
var init = function () {
makeRequest();
};
var makeRequest = function() {
$.ajax({
url: "/api/geolocation",
dataType: "json",
success: handleSuccess,
error: handleError
});
};
var handleError = function (err) {
console.warn('An geolocation error occured');
};
var handleSuccess = function (response) {
var popupDomIds = {
UK_REDIRECT_IE: 'ie',
IE_REDIRECT_UK: 'uk',
OVERSEAS_UK_SITE: 'overseas',
OVERSEAS_IE_SITE: 'overseas'
};
for (var popup in popupDomIds) {
if(response.displayIntPopup === popup) handlePopup(popup, popupDomIds[popup]);
}
};
var handlePopup = function (redirect, id) {
var modal = buildModal(id);
var configuredModal = configureModal(redirect, modal);
pageMask.after(configuredModal);
addEventListeners();
pageMask.addClass('display-it');
};
var buildModal = function (id) {
var modalContainer = $(document.createElement('section'))
.attr('id', 'international-popout')
.attr('class', 'international-popout newModal')[0];
buildModalText(id);
modalHTML = getModalHTML();
modalContainer.innerHTML = modalHTML;
return modalContainer;
};
var buildModalText = function (id) {
modalText = {
title: getTextValue(id, 'title'),
ctaText: getTextValue(id, 'cta-text'),
ctaLink: getTextValue(id, 'cta-link'),
continueText: getTextValue(id, 'continue-text')
};
};
var getTextValue = function(id, text) {
return $('#intpopup-' + id + '-' + text).val();
};
var configureModal = function(redirect, modal) {
displayConfig = getDisplayConfig(redirect);
for(var klass in displayConfig) {
$(modal).find('.' + klass).addClass(displayConfig[klass]);
if(klass === "secondCta" && displayConfig[klass] === "int-display-none") {
$(modal).find('.btn-cta').on('click', closeModal);
}
}
return modal;
};
var addEventListeners = function () {
$('.close-container').on('click', closeModal);
$('.secondCta').on('click', closeModal);
};
var removeEventListeners = function () {
$('.close-container').off('click', closeModal);
$('.secondCta').off('click', closeModal);
$('.btn-cta').off('click', closeModal);
};
var closeModal = function(e) {
$(e.currentTarget)
.closest('#international-popout')
.addClass('newModalHidden');
pageMask.removeClass('display-it');
removeEventListeners();
return false;
};
///////////// -- Objects -- /////////////////
var getDisplayConfig = function (redirect) {
var displayConfig = {
'UK_REDIRECT_IE' : {
btnCta: 'int-primary-colour',
secondCta: 'int-display',
interFlag: 'uk-flag',
interLogo: 'inter-uk-logo',
interNewWindow: 'int-display'
},
'IE_REDIRECT_UK': {
btnCta: 'int-secondary-colour',
secondCta: 'int-display',
interFlag: 'irish-flag',
interLogo: 'inter-ie-logo',
interNewWindow: 'int-display'
},
'OVERSEAS_IE_SITE': {
btnCta: 'int-secondary-colour',
secondCta: 'int-display-none',
interFlag: 'irish-flag',
interLogo: 'inter-ie-logo',
interNewWindow: 'int-display-none'
},
'OVERSEAS_UK_SITE': {
btnCta: 'int-primary-colour',
secondCta: 'int-display-none',
interFlag: 'uk-flag',
interLogo: 'inter-uk-logo',
interNewWindow: 'int-display-none'
}
};
return displayConfig[redirect];
};
var getModalHTML = function() {
return ['<header class="popout-header">',
'<section class="close-container">',
'<span class="inter-close"></span>',
'<button class="popout-close">Close',
'</button>',
'</section>',
'</header>',
'<section class="popout-main">',
'<article class="popout-image">',
'<span class="interFlag"></span>',
'<div class="interLogo"></img></div>',
'</article>',
'<article class="popout-main-text">',
'<h3 class="popout-message ft-fsalbert">' + modalText.title + '</h3>',
'</article>',
'<section class="popout-cta-container">',
'<a class="btn-cta btnCta" target="_blank" href="' + modalText.ctaLink + '">',
'<button class="popout-button ft-fsalbert"><span>' + modalText.ctaText + '</span>',
'<span class="interNewWindow"></span>',
'</button>',
'</a>',
'<button class="popout-button ft-fsalbert secondary-cta secondCta">',
'<a href="#">' + modalText.continueText + '</a>',
'</button>',
'</section>'].join('');
};
return {
init: init
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment