Created
March 22, 2019 18:03
-
-
Save yongzhihuang/ce7ef2b6f94b5026725e33d8d31d71c4 to your computer and use it in GitHub Desktop.
growler_mobile_4-article
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('https://www.newyorker.com/fonts/Graphik-Medium.eot'); | |
src: url('https://www.newyorker.com/fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'), url('https://www.newyorker.com/fonts/Graphik-Medium.woff2') format('woff2'), url('https://www.newyorker.com/fonts/Graphik-Medium.woff') format('woff'); | |
} | |
@font-face { | |
font-family: "Adobe Caslon"; | |
font-style: normal; | |
font-weight: normal; | |
src: url('https://www.newyorker.com/fonts/AdobeCaslonPro-Regular.woff2') format('woff2'), url('https://www.newyorker.com/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; | |
line-height: 50px; | |
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-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; | |
} | |
@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>You are reading your last free article this month. <br /><span class="save-text"> Get 12 weeks for just $12.</span> | |
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank" class="subscribe-cta"> Subscribe now.</a> | |
</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, plus a free tote.</span> | |
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank" class="subscribe-cta">Subscribe Now</a> | |
</div> | |
<div id="cta"><span>Collapse</span></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'); | |
// Constants | |
var CTA_MESSAGE = { | |
collapsed: 'Expand', | |
expanded: ctaMsg.innerHTML, | |
} | |
var GROWLER_HEIGHT = { | |
collapsed: '65px', | |
expanded: '275px', | |
waitTime: 500 | |
}; | |
// ANALYTICS | |
try { | |
window.top.dataLayer.push({'event': 'growler impression'}); | |
} 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; | |
}; | |
// Bind Events | |
cta.addEventListener('click', toggle); | |
growler.addEventListener('click', toggle); | |
growler.querySelectorAll('a').forEach(function (link) { | |
link.addEventListener('click', linkNoBubble); | |
}); | |
frameToggle(true); | |
console.log('***GROWLER_WORKING_WITH_FRAME_UPDATER***'); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment