Skip to content

Instantly share code, notes, and snippets.

@mlinderman

mlinderman/BA-Desktop interstitial

Created March 15, 2017 19:34
Show Gist options
  • Save mlinderman/1b24cb0d1b52e7489f39f2f5428ed053 to your computer and use it in GitHub Desktop.
Save mlinderman/1b24cb0d1b52e7489f39f2f5428ed053 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
BA-Desktop interstitial
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=0" />
<style>
/*font family*/
@font-face {
font-family: 'GraphikBACond-Medium';
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.eot');
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.eot?#iefix') format('embedded-opentype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.woff') format('woff'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.ttf') format('truetype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.svg#Graphik Cond Web') format('svg');
}
@font-face {
font-family: 'Graphik Web Light';
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-light.eot');
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-light.eot?#iefix') format('embedded-opentype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-light.woff') format('woff'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-light.ttf') format('truetype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-light.svg#Graphik Web') format('svg');
}
@font-face {
font-family: 'Graphik Web Medium';
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-medium.eot');
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-medium.eot?#iefix') format('embedded-opentype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-medium.woff') format('woff'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-medium.ttf') format('truetype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-medium.svg#Graphik Web') format('svg');
}
@font-face {
font-family: 'Graphik Web Regular';
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-regular.eot');
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-regular.eot?#iefix') format('embedded-opentype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-regular.woff') format('woff'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-regular.ttf') format('truetype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_web-regular.svg#Graphik Web') format('svg');
}
@font-face {
font-family: 'GraphikBACond-Regular';
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-regular.eot');
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-regular.eot?#iefix') format('embedded-opentype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-regular.woff') format('woff'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-regular.ttf') format('truetype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-regular.svg#Graphik Cond Web') format('svg');
}
@font-face {
font-family: 'GraphikBACond-Semibold';
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.eot');
src: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.eot?#iefix') format('embedded-opentype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.woff') format('woff'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.ttf') format('truetype'),
url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/fonts/graphik_ba_cond-medium.svg#Graphik Cond Web') format('svg');
}
/* RESET */
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
html, body {
height: 100%;
}
body {
margin: 0px;
color: #555;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #252525;
background-color: rgba(37, 37, 37, .8);
}
button, html input {
cursor: pointer;
}
p {
margin: 0 0 20px;
}
/* LAYOUT */
.wrapper {
font-size: 0;
text-align: center;
display: table;
width: 100%;
height: 100%;
}
.centered {
font-size: 16px;
display: inline-block;
vertical-align: middle;
margin-top: 15vh;
min-width: 320px;
text-align: center;
background-image: url('http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/i/newsletter/newsletter_overlay_img@2x.jpg');
-webkit-background-size: contain;
background-size: cover;
position: relative;
}
.content {
display: inline-block;
float: left;
margin: 0;
max-width: 50%;
vertical-align: middle;
}
.content.center-wrapper {
align-items: center;
padding: 34px 34px 40px;
height: 370px;
width: 515px;
position: absolute;
left: 0;
margin: 0 auto;
right: 0;
top: 25px;
background-color: #fff;
max-width: none;;
}
.content .ad-logo {
height: 88px;
width: 154px;
}
img.ba-logo {
margin-bottom: 28px;
}
.step1, .step2 {
background-color: #fff;
max-width: 368px;
}
.step1 .title{
text-align: center;
font-family: GraphikBACond-Medium,Helvetica,Arial,sans-serif;
font-weight: 400;
letter-spacing: .02em;
font-size: 36px;
line-height: 1.12em;
margin: 0;
}
.step1 .sub-title{
font-family: 'Graphik Web Light',Helvetica,Arial,sans-serif;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 4px 0 40px;
line-height: 1.65em;
}
.form {
display: inline-block;
vertical-align: middle;
}
/* HELPERS */
.hide {
display: none;
}
.intro {
margin: 10px 0 0 0;
font-size: 18px;
line-height: 24px;
color: #000;
letter-spacing: .01em;
font-family: 'adelle-sans', 'Helvetica Neue', helvetica, arial, sans-serif;
font-weight: 300;
text-align: center;
}
.error {
font-family: 'adelle-sans', 'Helvetica Neue', helvetica, arial, sans-serif;
font-weight: 300;
font-size: 18px;
color: #FF0000;
text-align: center;
letter-spacing: .04em;
margin: 20px 0 0;
display: block;
}
.error.hide{
display: none;
}
.input {
-webkit-appearance: none;
border: 1px solid #ddd;
height:50px;
margin: 20px 0 10px;
width: 100%;
font-family: 'adelle-sans', 'Helvetica Neue', helvetica, arial, sans-serif;
font-weight: 300;
font-size: 18px;
color: #888;
text-align: center;
letter-spacing: .04em;
outline: none;
}
.btn-submit,
.btn-home {
font-size: 11px;
font-family: 'Graphik Web Medium',Helvetica,Arial,sans-serif;
width: 95px;
height: 39px;
margin: 0;
background-color: #fae229;
border: 0;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
.btn-submit:hover{
background-color: #fff200;
}
.btn-home:hover,
.btn-home:active,
.btn-home:visited {
width: auto;
padding: 15px 30px;
text-decoration: none;
color: #fff;
}
.btn-close {
background: url('https://cns.condenastdigital.com/services/ads/creative-assets/conde-house/newsletter-signups/arch-digest/close-wht.svg');
cursor: pointer;
height: 20px;
position: absolute;
top: 0;
right: -30px;
z-index: 200;
width: 20px;
}
a,
a:hover,
a:active,
a:visited {
color: #555;
}
.label {
display: inline-block;
text-indent: -9999em;
}
.thank-title {
text-align: center;
font-family: GraphikBACond-Medium,Helvetica,Arial,sans-serif;
font-weight: 400;
letter-spacing: .02em;
font-size: 36px;
line-height: 1.12em;
margin: 0;
}
.thank-descrip{
font-family: 'Graphik Web Light',Helvetica,Arial,sans-serif;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 4px 0 40px;
line-height: 1.65em;
}
.legal {
font-size: 12px;
line-height: 20px;
color: #888;
font-family: 'adelle-sans', 'Helvetica Neue', helvetica, arial, sans-serif;
font-weight: 400;
bottom: 0;
right: 45px;
margin-bottom: 10px;
margin-top: 20px;
}
.side-image img {
width: 330px;
height: 419px;
}
#email {
box-sizing: border-box;
padding-top: 0;
padding-bottom: 0;
background-color: transparent;
color: #333;
border: 0;
padding-left: 15px;
padding-right: 10px;
border-right: 0;
height: 39px;
text-transform: uppercase;
position: absolute;
font-family: 'Graphik Web Medium',Helvetica,Arial,sans-serif;
font-size: 11px;
letter-spacing: .04em;
left: 0;
width: 270px;
float: left;
margin-right: 0;
display: inline-block;
margin-top: 0;
text-align: left;
}
.submit-container {
position: relative;
height: 41px;
border: 1px solid #ccc;
}
/* Mobile */
@media only screen and (max-device-width: 767px) {
.centered {
margin-top: 0;
width: 160px;
height: 480px;
background-image: none;
background-color: #fff;
}
.content {
width: 100%;
height: auto;
}
.content.side-image {
display: none;
}
.content.center-wrapper {
max-width: none;
width: 100%;
}
.legal {
right: 25px;
}
.btn-close {
background: url('https://cns.condenastdigital.com/services/ads/creative-assets/conde-house/newsletter-signups/arch-digest/close.svg');
right: 10px;
top: 10px;
}
}
/* Tablet */
@media only screen and (min-device-width: 768px) {
.centered {
width: 680px;
height: 419px;
}
.content {
margin: 0;
}
}
</style>
</head>
<body>
<img src="%%VIEW_URL_UNESC%%" style="display:none;" height="1" with="1">
<div class="wrapper center-wrapper open">
<div class="centered">
<span class="btn-close" aria-label="Close modal overlay" tabindex="7"><span class="label">Close</span></span>
<div class="content center-wrapper">
<form
method="POST"
class="form"
onsubmit="return validateStep1()"
action="https://user-service.condenastdigital.com/open/newsletter/entries">
<img class="ba-logo" src="http://www.bonappetit.com/wp-content/themes/bonappetit-2.0.0/i/newsletter/logo@2x.png" width="135" height="29">
<section class="step1">
<h3 class="title">What We're Cooking Today</h3>
<h4 class="sub-title">Get the best recipes, tips, and test kitchen advice delivered to your inbox daily</h4>
<div class="submit-container">
<input class="input email" type="email" value="" placeholder="Enter your email" id="email" tabindex="1">
<button type="button" class="btn-submit btn-email" tabindex="2">Submit</button>
</div>
<span class="error hide">PLEASE ENTER A VALID ADDRESS</span>
<p class="legal">
Will be used in accordance with our&nbsp;
<a href="http://www.condenast.com/privacy-policy#privacypolicy">Privacy Policy</a>
</p>
</section>
<section class="step2 hide">
<h1 class="thank-title">Thank You!</h1>
<p class="thank-descrip">
You should start receiving your
<br/>
BA newsletter in a couple of days
</p>
</section>
</form>
</div><!-- content -->
</div><!-- container -->
</div><!-- wrapper -->
<script>
(function init(w, d){
'use strict';
// Various globally available static variables
var CLICK_URL = '%%CLICK_URL_UNESC%%';
var ENDPOINT_STAG ='https://stag-user-service.condenastdigital.com/open/newsletter/entries';
var ENDPOINT_PROD ='https://user-service.condenastdigital.com/open/newsletter/entries';
var KEY_STAG = 'oDnUOd8GHhyszFqIOJ03U4vfWXs=';
var KEY_PROD = 'eGGOLJyWhmJg+gMNQmFAYka9OL0=';
var FORMNAME = 'ustk_BNA_NewsletterOverlay';
var SITECODE = 'BNA';
var SOURCECODE = 'newsletteroverlay';
var NEWSLETTERID = [5159];
var MODAL = w.parent.document.querySelector(
'iframe') || d.body;
var EMAIL = d.querySelector('.email');
var STEP1 = d.querySelector('.step1');
var STEP2 = d.querySelector('.step2');
var ERROR_EMAIL = d.querySelector('.step1 .error');
var TIMER;
var setImage = function () {
var IMAGES = [
'NWSLTTR-POPUP-1.jpg',
'NWSLTTR-POPUP-2.jpg',
'NWSLTTR-POPUP-3.jpg',
'NWSLTTR-POPUP-4.jpg',
'NWSLTTR-POPUP-5.jpg'
];
var imageSource = IMAGES[Math.floor(Math.random() * IMAGES.length)];
var svnPath = 'https://cns.condenastdigital.com/services/ads/creative-assets/conde-house/newsletter-signups/arch-digest/';
document.getElementById('side-image').src = svnPath + imageSource;
};
/**
* ## hide
* Add the hide class to an element.
*
* * **el** - A DOM element selector.
*/
var hide = function(el) {
el.className = el.className + ' hide';
};
/**
* ## show
* Remove the hide class from an element.
*
* * **el** - A DOM element selector.
*/
var show = function(el) {
var re = new RegExp('(?:^|\\s)' + 'hide' + '(?!\\S)');
el.className = el.className.replace(re, '');
};
/**
* ## stop
* Prevent the event of the backdrop click from bubbling up through the form.
*
* * **e** - The event triggered.
*/
var stop = function(e) {
e.stopPropagation();
};
/**
* ## inputEmail
* Trigger the validation step if enter is pressed.
*
* * **e** - The event triggered.
*/
var keyPress= function(e) {
if (e.which === 13) {
e.preventDefault();
validateStep1();
}
return false;
};
/**
* ## attach
* Bind events to DOM elements.
*/
var attach = function() {
d.querySelector('.wrapper').addEventListener('click', closeWindow);
d.querySelector('.btn-close').addEventListener('click', closeWindow);
d.querySelector('.centered').addEventListener('click', stop);
d.querySelector('.btn-email').addEventListener('click', validateStep1);
d.querySelector('#email').addEventListener('keypress', keyPress);
// d.querySelector('.btn-home').addEventListener('click', getHome);
};
/**
* ## isValidEmail
* Check if the email is formatted properly.
*/
var isValidEmail = function() {
var re = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
return re.test(document.getElementById('email').value);
};
/**
* ## validateStep1
* Try to submit the form. Has 2 possible outcomes.
*/
var validateStep1 = function() {
if (isValidEmail()) {
hide(STEP1);
show(STEP2);
subscribe();
injectClickImage(CLICK_URL);
setNewsletterCookie();
TIMER = setTimeout(closeWindow, 5000);
return false;
}
show(ERROR_EMAIL);
return false;
};
/**
* ## isProd
* Test if we are on production environment. All others point to staging.
*/
var isProd = function() {
return w.location.hostname.indexOf('www.bonappetit.com') === 0;
};
/**
* ## data
* An object that is passed to the endpoint with all the NL info we need.
*/
var data = {
'newsletterSubscriptionsRequest': {
'@email': '',
'entryContext': {
'@formName': FORMNAME,
'@siteCode': SITECODE,
'@sourceCode': SOURCECODE
},
'newsletterSubscriptions': {
'newsletterSubscription': [
{
'@newsletterId': NEWSLETTERID[0],
'@subscribe': 'true'
}
]
}
}
};
var populateData = function () {
var target = data.newsletterSubscriptionsRequest.newsletterSubscriptions.newsletterSubscription;
NEWSLETTERID.map( function(i) {
target.push({'@newsletterId': i, '@subscribe': true});
});
};
/**
* ## injectClickImage
* When we have a success message we will inject a "clicked" pixel tracker.
*/
var injectClickImage = function(url) {
var img = document.createElement('img');
img.src = url + '#';
img.height = 1;
img.width = 1;
img.style.visibility = 'hidden';
d.body.appendChild(img);
};
/**
* ## subscribe
* Send the data to the endpoint triggering GUI changes.
*/
var subscribe = function() {
console.log('subscribe');
var url = isProd() ? ENDPOINT_PROD : ENDPOINT_STAG;
var key = isProd() ? KEY_PROD : KEY_STAG;
data.newsletterSubscriptionsRequest['@email'] = EMAIL.value;
w.parent.jQuery.ajax({
url: url,
type: 'POST',
dataType: 'JSON',
contentType: 'application/json',
data: JSON.stringify(data),
headers: {
accept: 'application/json;ver=1.0',
key: key
}
});
// closes the keyboard
d.activeElement.blur();
};
/**
* ## closeWindow
* Close the modal window.
*/
var closeWindow = function() {
if (w.parent.jQuery) {
w.parent.jQuery(MODAL).fadeOut();
w.parent.jQuery(MODAL).hide(1000);
} else {
MODAL.style.opacity = 0;
}
releaseBody();
clearTimeout(TIMER);
};
/**
* ## holdBody
* Hold the outer body in place to prevent scrolling.
*/
var holdBody = function() {
w.parent.document.body.style.overflow = 'hidden';
w.parent.document.body.style.position = 'fixed';
};
/**
* ## getHome
* Redirect to home after releasing the body..
*/
var getHome = function() {
releaseBody();
w.parent.location.href = document.location.hostname;
};
/**
* ## releaseBody
* Release the outer body to allow scrolling.
*/
var releaseBody = function() {
w.parent.document.body.style.overflow = 'auto';
w.parent.document.body.style.position = 'static';
};
/**
* ## setNewsletterCookie
* Set a cookie with the values of the newsletters that have been subscribed.
*/
var setNewsletterCookie = function() {
// get the current newsletter cookie values
var c = readCookie('atp_newsletter') ;
var cookie = c && c.split(',') || [];
// Compair 2 arrays of strings and return a merged unique array.
function pushUniques(i) {
var x = i.toString();
if(cookie.indexOf(x) === -1) {
cookie.push(x);
}
}
// popupate the new array.
NEWSLETTERID.map(pushUniques);
// return the new cookie.
return document.cookie = 'atp_newsletter=' + cookie.join(',') + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
}
/**
* ## setNewsletterCookie
* Set a cookie with the values of the newsletters that have been subscribed.
*@param {String} name The name of the cookie to read.
*/
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
/**
* ## show
* Show the modal.
*/
var dispModal = function() {
MODAL.style.position = 'fixed';
MODAL.style.height = '100%';
MODAL.style.width = '100%';
MODAL.style.left = 0;
MODAL.style.top = 0;
MODAL.style.zIndex = 6000000;
if (window.parent.jQuery) {
MODAL.style.display = 'none';
window.parent.jQuery(MODAL).fadeIn();
}
//populateData();
holdBody();
attach();
};
// Kick it all off.
dispModal();
})(window, document);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment