Last active
May 30, 2019 16:53
-
-
Save yongzhihuang/737a4e4d8b3da37fcf1f28474279b0ff to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>TNY Growler</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1.0,width=device-width"> | |
<style> | |
@font-face { | |
font-family: "Graphik Web"; | |
font-stretch: normal; | |
font-style: normal; | |
font-weight: 500; | |
src: url('/fonts/Graphik-Medium.eot'); | |
src: url('/fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'), url('/fonts/Graphik-Medium.woff2') format('woff2'), url('/fonts/Graphik-Medium.woff') format('woff'); | |
} | |
@font-face { | |
font-family: "Adobe Caslon"; | |
font-style: normal; | |
font-weight: normal; | |
src: url('/fonts/AdobeCaslonPro-Regular.woff2') format('woff2'), url('/fonts/AdobeCaslonPro-Regular.woff') format('woff'); | |
} | |
body, | |
html { | |
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 14px; | |
font-weight: 500; | |
line-height: 1.57; | |
height: 100%; | |
width: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
#growler-wrapper { | |
background: #333; | |
bottom: 0; | |
color: #fff; | |
height: 65px; | |
left: 0; | |
min-width: 320px !important; | |
position: absolute; | |
width: 100%; | |
z-index: 1; | |
transition: height 0.5s ease-in-out; | |
overflow: hidden; | |
} | |
#growler-wrapper.expanded { | |
height: 240px; | |
} | |
#growler-wrapper:not(.expanded) .expanded-msg { | |
display: none; | |
} | |
.collapsed-msg { | |
display: table; | |
height: 50px; | |
padding-top: 5px; | |
width: 100%; | |
} | |
.collapsed-msg > span { | |
display: table-cell; | |
padding: 0 148px; | |
text-align: center; | |
vertical-align: middle; | |
} | |
.expanded-msg { | |
background: url('/images/CM/growler/group-7@2x.png') 177px 8px no-repeat; | |
background-size: 163px 142px; | |
font-family: "Adobe Caslon", Georgia, "Times New Roman", Times, serif; | |
font-size: 20px; | |
font-weight: normal; | |
height: 165px; | |
line-height: 1.3; | |
padding: 25px 34px 0 392px; | |
} | |
#cta { | |
top: 0; | |
color: #fff; | |
height: 50px; | |
font-size: 13px; | |
padding-top: 15px; | |
position: absolute; | |
right: 30px; | |
z-index: 999; | |
} | |
#cta::after { | |
background-size: 100%; | |
background: url('/images/svg/arrow-white.svg') top left no-repeat; | |
content: ''; | |
display: inline-block; | |
height: 10px; | |
margin-left: 15px; | |
transform: rotate(90deg); | |
transform-origin: center; | |
transition: transform 0.5s ease-in-out; | |
vertical-align: baseline; | |
width: 18px; | |
} | |
#growler-wrapper.expanded #cta::after { | |
transform: rotate(180deg); | |
} | |
.expanded-msg > span:not(.header) { | |
display: inline-block; | |
margin-right: 95px; | |
padding-bottom: 1.3em; | |
} | |
.header { | |
display: block; | |
font-weight: normal; | |
font-family: "Adobe Caslon", Georgia, "Times New Roman", Times, serif; | |
font-size: 40px; | |
line-height: 1.13; | |
margin-bottom: 5px; | |
} | |
.strike-through { | |
text-decoration: line-through; | |
} | |
.collapsed-msg a.subscribe-cta { | |
color: #fff; | |
text-decoration: underline; | |
} | |
.expanded-msg > a.subscribe-cta { | |
background: #087cc3; | |
color: #fff; | |
display: inline-block; | |
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 13px; | |
height: 48px; | |
line-height: 48px; | |
text-align: center; | |
text-decoration: none; | |
width: 255px; | |
border-radius: 2px; | |
position: relative; | |
bottom: 1.3em; | |
} | |
.hide { | |
display: none; | |
} | |
.hidden-cta::after { | |
display: none !important; | |
} | |
.close { | |
height: 24px; | |
width: auto; | |
background: none; | |
border: none; | |
position: relative; | |
vertical-align: middle; | |
top: 0px; | |
margin-left: 12px; | |
} | |
.close::before { | |
background-color: #dddddd; | |
content: ' '; | |
height: 24px; | |
position: absolute; | |
top: 0; | |
width: 1px; | |
transform: rotate(45deg); | |
} | |
.close::after { | |
background-color: #dddddd; | |
content: ' '; | |
height: 24px; | |
position: absolute; | |
top: 0; | |
width: 1px; | |
transform: rotate(-45deg); | |
} | |
.hide-with-animation { | |
visibility: hidden; | |
opacity: 0; | |
transition: visibility 1s, opacity 0.5s linear !important; | |
} | |
@media screen and (max-width: 768px) { | |
.collapsed-msg > span { | |
text-align: left; | |
padding: 0 20px; | |
} | |
.expanded-msg { | |
padding: 25px 5px 0 300px; | |
background-position: 96px 8px; | |
font-size: 19px; | |
} | |
#cta { | |
right: 15px; | |
} | |
#cta span { | |
display: none; | |
} | |
#cta::before { | |
display: inline-block; | |
content: ''; | |
width: 1px; | |
height: 36px; | |
background: #737373; | |
vertical-align: middle; | |
} | |
#cta::after { | |
width: 14px; | |
height: 8px; | |
vertical-align: middle; | |
} | |
.expanded-msg > span:not(.header) { | |
padding-bottom: 15px; | |
} | |
.header { | |
font-size: 32px; | |
} | |
.expanded-msg > a.subscribe-cta { | |
bottom: 0; | |
} | |
} | |
@media screen and (max-width: 600px) { | |
body, html { | |
font-size: 13px; | |
} | |
#growler-wrapper.expanded { | |
height: 275px; | |
} | |
.collapsed-msg > span { | |
padding: 0 60px 0 15px; | |
} | |
.expanded-msg { | |
background: none; | |
padding: 12px 32px 42px 32px; | |
height: 171px; | |
text-align: center; | |
} | |
.expanded-msg > span:not(.header) { | |
margin: 10px auto auto auto; | |
padding-bottom: 23px; | |
} | |
.expanded-msg > a.subscribe-cta { | |
display: block; | |
margin: auto; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div id="growler-wrapper" class=""> | |
<div class="collapsed-msg"> | |
<span>Get <em>The New Yorker</em> for $1 a week, <br /><span class="save-text">plus a free tote. <a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank" class="subscribe-cta">Subscribe Now</a></span> | |
</span> | |
</div> | |
<div class="expanded-msg"> | |
<span class="header">Go beyond the headlines.</span> | |
<span class="sales-copy">Get <em>The New Yorker</em> for $1 a week,</span> | |
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank" class="subscribe-cta">Subscribe Now</a> | |
</div> | |
<div id="cta"> | |
<span>Collapse</span> | |
<button class="close"></button> | |
</div> | |
</div> | |
<script> | |
(function (){ | |
var growlerFrame = window.frameElement; | |
var growler = document.getElementById('growler-wrapper'); | |
var collapsedMsgCta = growler.querySelector('.collapsed-msg .subscribe-cta'); | |
var saveText = growler.querySelector('.save-text'); | |
var cta = document.getElementById('cta'); | |
var ctaMsg = cta.querySelector('span'); | |
var growlerCloseBtn = document.querySelector('.close'); | |
// Constants | |
var CTA_MESSAGE = { | |
collapsed: 'Expand', | |
expanded: ctaMsg.innerHTML, | |
} | |
var GROWLER_HEIGHT = { | |
collapsed: '65px', | |
expanded: '275px', | |
waitTime: 500 | |
}; | |
var DISMISSABLE_PATHS = ['crossword']; | |
var GROWLER_HIDE_DEPTH = 70; | |
var ORDER_PAGE_URL = "%%CLICK_URL_UNESC%%%%DEST_URL%%"; | |
// ANALYTICS | |
try { | |
window.top.dataLayer.push({'event': 'growler impression','growler-barrier-text': 'You have 2 free articles left this month.'}); | |
} catch (e) { | |
console.error('Error in growler ad tracking calls', e); | |
} | |
// Methods | |
var toggle = function (e) { | |
e = !e ? undefined : e; | |
if (e) e.cancelBubble = true; | |
if (!growler.classList.contains('expanded')) { | |
growler.classList.add('expanded'); | |
ctaMsg.innerHTML = CTA_MESSAGE.expanded; | |
} else if (growler.classList.contains('expanded')) { | |
growler.classList.remove('expanded'); | |
ctaMsg.innerHTML = CTA_MESSAGE.collapsed; | |
} | |
msgToggle(); | |
frameToggle(); | |
}; | |
var msgToggle = function () { | |
if (growler.classList.contains('expanded')) { | |
collapsedMsgCta.classList.add('hide'); | |
saveText.classList.add('hide'); | |
} else { | |
collapsedMsgCta.classList.remove('hide'); | |
saveText.classList.remove('hide'); | |
} | |
}; | |
var frameToggle = function (init) { | |
if (!growlerFrame) return; | |
init = init || false; | |
var gfParent = growlerFrame.parentElement; | |
if (growler.classList.contains('expanded')) { | |
growlerFrame.style.setProperty('height', GROWLER_HEIGHT.expanded, 'important'); | |
gfParent.style.setProperty('height', GROWLER_HEIGHT.expanded, 'important'); | |
} else if (init) { | |
growlerFrame.style.setProperty('height', GROWLER_HEIGHT.collapsed, 'important'); | |
gfParent.style.setProperty('height', GROWLER_HEIGHT.collapsed, 'important'); | |
} else { | |
// Wait for animation to finish | |
var cllpsTime = setTimeout(function () { | |
growlerFrame.style.setProperty('height', GROWLER_HEIGHT.collapsed, 'important'); | |
gfParent.style.setProperty('height', GROWLER_HEIGHT.collapsed, 'important'); | |
clearTimeout(cllpsTime); | |
}, GROWLER_HEIGHT.waitTime); | |
} | |
}; | |
var linkNoBubble = function (e) { | |
e.cancelBubble = true; | |
}; | |
function shouldUseDismissableGrowler() { | |
var locationPath = window.location.href.split('/'); | |
return locationPath[3] && DISMISSABLE_PATHS.indexOf(locationPath[3]) !== -1; | |
} | |
function hideGrowler() { | |
growler.classList.add("hide-with-animation"); | |
} | |
/* Hide Growler at X article depth */ | |
function hideGrowlerAtArticleDepth(e) { | |
var scrollPercent = getArticleBodyScrollPercent(); | |
if (scrollPercent >= GROWLER_HIDE_DEPTH) { | |
hideGrowler(); | |
window.top.removeEventListener('scroll', hideGrowlerAtArticleDepth); | |
} | |
} | |
function getArticleBodyScrollPercent() { | |
var documentElement = window.parent.document.documentElement; | |
var body = window.parent.document.body; | |
var articleBody = window.top.document.querySelector('#articleBody'); | |
if (articleBody && articleBody.scrollHeight > documentElement.clientHeight) { | |
// Distance in pxs between the article body and the body element | |
var articleBodyOffsetTop = Math.round(articleBody.getBoundingClientRect().top + documentElement.scrollTop); | |
return (documentElement.scrollTop - articleBodyOffsetTop || body.scrollTop - articleBodyOffsetTop) / (articleBody.scrollHeight - documentElement.clientHeight) * 100; | |
} | |
return null; | |
} | |
// Bind Events | |
if (shouldUseDismissableGrowler()) { | |
cta.classList.add('hidden-cta'); | |
cta.addEventListener('click', function() { | |
growler.style.display = "none"; | |
}); | |
} else { | |
if (growlerCloseBtn) { | |
growlerCloseBtn.style.display = 'none'; | |
} | |
} | |
growler.querySelectorAll('a').forEach(function (link) { | |
link.addEventListener('click', linkNoBubble); | |
}); | |
growler.addEventListener('click', function() { | |
window.top.document.location.href = ORDER_PAGE_URL; | |
}); | |
frameToggle(true); | |
window.top.addEventListener('scroll', hideGrowlerAtArticleDepth); | |
console.log('***GROWLER_WORKING_WITH_FRAME_UPDATER***'); | |
// ANALYTICS | |
try { | |
window.top.dataLayer.push({'event': 'growler impression','growler-barrier-text': 'You have 2 free articles left this month.'}); | |
} catch (e) { | |
console.error('Error in growler ad tracking calls', e); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment