samsjchi/jpmc-storyboard-201808.html

## jpmc-storyboard-201808.html
<html>

<head>
    <title><%= title="" %=""></%=></title>
    <meta name="ad.size" content="width=300,height=250">
    <style>
*{-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}body{margin:0;overflow:hidden;position:relative;width:100vw}.c-content{width:100%;max-width:95%;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif;border:1px solid #ddd;border-radius:2px;margin:0 auto;box-sizing:border-box}.c-content,.c-content__inner{position:relative;overflow:hidden}.c-content__inner{border-radius:2px;border:2px solid transparent}.c-bar{background:#4f4f4f;color:#fff;text-align:center;font-size:12px;padding:10px 20px;text-transform:uppercase}.c-slides-wrapper{width:100%;overflow:hidden}.swipe-wrap>li+li{position:absolute}.c-slides{padding:0;list-style-type:none}.c-slide,.c-slides{width:100%;overflow:hidden;position:relative;margin:0}.c-slide{height:0;background-position:50%;background-size:cover;padding:0 0 132.53333%;display:block}.c-slide video{position:absolute;width:100%;height:100%}.c-slide video.crop{width:230%;height:100%;left:-50%}.c-dots{position:absolute;left:50%;bottom:2em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;box-sizing:border-box;width:50%;margin:0 0 0 1em;margin-left:-25%;padding:0}.c-dots__dot{display:block;background:transparent;border:1px solid #ddd;border-radius:50%;height:.5em;width:.5em;outline:none}.c-dots__dot.is-active{background:#ddd}.c-dots__dot:hover{cursor:pointer}
</style>
</head>

<body>
     <div class="c-content">

      <div class="c-content__inner">
        <ul class="c-slides">
          <li>
            <div class="c-slide" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/advertising/jpmc-storyboard/slide-1-aug.jpg')"></div>
          </li>
          <li>
            <div class="c-slide" style="background-image: url('https://cdn.theatlantic.com/assets/media/files/advertising/jpmc-storyboard/slide-2-aug.jpg')"></div>
          </li>
          <li>
            <div class="c-slide" data-style="background-image: url('https://cdn.theatlantic.com/assets/media/files/advertising/jpmc-storyboard/slide-3-aug.jpg')"></div>
          </li>
          <li>
            <div class="c-slide" data-style="background-image: url('https://cdn.theatlantic.com/assets/media/files/advertising/jpmc-storyboard/slide-4-aug.jpg')"></div>
          </li>
          <li>
            <a href="%%CLICK_URL_UNESC%%https://ad.doubleclick.net/ddm/trackclk/N5762.117907.THEATLANTICMONTHLY/B20717574.214617584;dc_trk_aid=421447863;dc_trk_cid=105226626;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=" target="_blank">
              <div class="c-slide" data-style="background-image: url('https://cdn.theatlantic.com/assets/media/files/advertising/jpmc-storyboard/slide-5-aug.jpg')"></div>
            </a>
          </li>
        </ul>

        <ul class="c-dots"></ul>
      </div>
    </div>
    <script type="text/javascript" inline="">
"use strict";window.helpers=window.helpers||{},function(document,window,top,helpers){helpers.getViewability=function(){var clientRect=window.frameElement.getBoundingClientRect(),height=clientRect.height,elTop=clientRect.top,elBottom=clientRect.top+height,hiddenTop=Math.abs(Math.min(elTop,0)),hiddenBottom=Math.abs(Math.max(elBottom-top.innerHeight,0));return 100*(1-Math.min(hiddenTop+hiddenBottom,height)/height)}}(document,window,window.top,window.helpers);
</script>
    <script type="text/javascript" inline="">
"use strict";!function(document,window,top){function filterForIFrame(event){var id=event.slot.getSlotElementId();return top.document.getElementById(id).contains(window.frameElement)}var $=top.$;window.top.googletag.pubads().addEventListener("slotVisibilityChanged",function(event){filterForIFrame(event)&&$(window).trigger("slotVisibilityChanged",event)}),window.top.googletag.pubads().addEventListener("impressionViewable",function(event){filterForIFrame(event)&&$(window).trigger("impressionViewable",event)})}(document,window,window.top);
</script>
    <script type="text/javascript" inline="">
"use strict";var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target};!function(document,window,top){function loadPixel(src){var img=document.createElement("img");img.src=src,img.width=1,img.height=1,img.setAttribute("style","position: absolute; top: -1px; left: -1px; width:0; height:0; visibility:hidden;"),document.body.appendChild(img)}var $=top.$,gptAd=$(window.frameElement).closest("gpt-ad")[0];window.Analytics=function(options){this.options=options,this.interacted=!1,this.debug=!!top.location.search.match(/debug_custom_ads/),this._queue=[],this._recorded=[],this.bindEvents(),this.options.video&&this.bindVideoEvents(this.options.video),this.loadKeen(),this.device=function(){var ua=window.navigator.userAgent,w=window.screen.width,name="desktop";return w<1e3&&(name="tablet"),w<599&&(name="mobile"),ua.match(/iPad/)?name="tablet":ua.match(/iPhone/)?name="mobile":"desktop"===name&&ua.match("Android")&&(name="tablet"),name}(),window.KeenAsync.ready(function(){this.client=new window.KeenAsync({projectId:"58d28fc995cfc91c2b8e516e",writeKey:"C1F80F8637F4EE4B1272F54358B5517CC551ECA7296CEC2EC23FBD11AC31E1E70BD8527A1D945D9AB128B448FFC6C9BE185244996C6C5D9C82BD966F96506D3AC73E0A427FE8C7F466B6E2E5699DB82E9FF5AFA729CAC36ADE0DA096F936202F"}),this.executeQueue()}.bind(this))},window.Analytics.prototype.bindEvents=function(){function trackImpression(){setTimeout(function(){var metrics=window.performance.timing,init=window.performance.timing.fetchStart;self.record("impression",{perf_dom_interactive:metrics.domInteractive-init,perf_dom_complete:metrics.domComplete-init,perf_response:metrics.responseEnd-init,perf_load:metrics.loadEventEnd-init},!0)},250)}var self=this;window.performance.timing.loadEventEnd>0?trackImpression():$(window).on("load",trackImpression),$(window).one("impressionViewable",function(){self.record("viewable-impression",null,1)}),$(document).on("click",function(){self.record("click",null,!1,!0)}),$(gptAd).on("click",function(){self.record("click",null,!1,!0)}),$(document).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(gptAd).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(document).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(gptAd).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(document).on("submit",function(){self.record("form-submit",null,!1,!0)})},window.Analytics.prototype.executeQueue=function(){for(var i=0;i<this._queue.length;i++)this.record.apply(this,this._queue[i])},window.Analytics.prototype.loadKeen=function(){this.client=null,function(name,path,ctx){var latest,prev=!!window.Keen&&window.Keen;ctx[name]=ctx[name]||{ready:function(fn){var loaded,h=document.getElementsByTagName("head")[0],s=document.createElement("script"),w=window;s.onload=s.onerror=s.onreadystatechange=function(){if(!(s.readyState&&!/^c|loade/.test(s.readyState)||loaded)){if(s.onload=s.onreadystatechange=null,loaded=1,latest=w.Keen,prev)w.Keen=prev;else try{delete w.Keen}catch(e){w.Keen=void 0}ctx[name]=latest,ctx[name].ready(fn)}},s.async=1,s.src="https://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.1.3.min.js",h.parentNode.insertBefore(s,h)}}}("KeenAsync",0,window)},window.Analytics.prototype.record=function(name,data,unique,isInteraction){if(!this.client)return void this._queue.push(arguments);if(!(unique&&this._recorded.indexOf(name)>-1)){var isFirstInteraction=!1;isInteraction&&!this.interacted&&(isFirstInteraction=!0,this.interacted=!0),this._recorded.push(name);var pixelData=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,deviceCategory:this.device,deviceUserAgent:window.navigator.userAgent,gptCreativeId:gptAd.creativeId,gptCampaignId:gptAd.campaignId,gptLineItemId:gptAd.lineItemId,gptAdvertiserId:gptAd.advertiserId},this.options.extra||{},data||{}),params=[];for(var key in pixelData)pixelData[key]&&params.push(key+"="+encodeURIComponent(pixelData[key]));params=params.join("&");loadPixel("https://data-cdn.theatlantic.com/custom-ads.gif?"+params),data=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,device:{category:this.device,userAgent:window.navigator.userAgent},gpt:{creativeId:gptAd.creativeId,campaignId:gptAd.campaignId,lineItemId:gptAd.lineItemId,advertiserId:gptAd.advertiserId},extra:this.options.extra||{}},data||{}),this.debug&&(console.debug("Tracking:"),console.debug(data)),void 0===window.___browserSync___&&this.client.recordEvent("custom-ad-event",data)}},window.Analytics.prototype.bindVideoEvents=function(video){var self=this,$el=$(video.el,document);if(0!==$el.length){var getProgressData=function(e){return{sound:e.target.muted,filename:e.target.src}},getVersion=function(){var version="autoplay";return video.expandedCondition&&video.expandedCondition()&&(version="full"),version};$el.one("play",function(e){self.record("video-play",{filename:e.target.src})}),$el.on("stalled",function(e){self.record("video-stalled",{filename:e.target.src})}),$el.on("ended",function(e){self.record(getVersion()+"-video-progess-100",getProgressData(e),!0),$el.one("timeupdate",function(){self.record(getVersion()+"-video-loop",{filename:e.target.src})})}),$el.on("timeupdate",function(e){e.target.muted||self.record("video-unmuted",null,!0,!0);var position=Math.ceil(e.target.currentTime/e.target.duration*100);e.target.duration-e.target.currentTime<1&&(e.target._isLooping=!0);var version=getVersion(),data=getProgressData(e);100===position||position<e.target._isLooping?self.record(version+"-video-progess-100",data,!0):position>90?self.record(version+"-video-progess-90",data,!0):position>75?self.record(version+"-video-progess-75",data,!0):position>50?self.record(version+"-video-progess-50",data,!0):position>25&&self.record(version+"-video-progess-25",data,!0)})}}}(document,window,window.top);
</script>
    <script type="text/javascript" inline="">
"use strict";function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),Siema=function(){function Siema(options){var _this=this;_classCallCheck(this,Siema),this.config=Siema.mergeSettings(options),this.selector="string"==typeof this.config.selector?document.querySelector(this.config.selector):this.config.selector,this.selectorWidth=this.selector.getBoundingClientRect().width,this.innerElements=[].slice.call(this.selector.children),this.currentSlide=this.config.startIndex,this.transformProperty=Siema.webkitOrNot(),["resizeHandler","touchstartHandler","touchendHandler","touchmoveHandler","mousedownHandler","mouseupHandler","mouseleaveHandler","mousemoveHandler"].forEach(function(method){_this[method]=_this[method].bind(_this)}),this.init()}return _createClass(Siema,[{key:"init",value:function(){if(window.addEventListener("resize",this.resizeHandler),this.config.draggable&&(this.pointerDown=!1,this.drag={startX:0,endX:0,startY:0,letItGo:null},this.selector.addEventListener("touchstart",this.touchstartHandler),this.selector.addEventListener("touchend",this.touchendHandler),this.selector.addEventListener("touchmove",this.touchmoveHandler),this.selector.addEventListener("mousedown",this.mousedownHandler),this.selector.addEventListener("mouseup",this.mouseupHandler),this.selector.addEventListener("mouseleave",this.mouseleaveHandler),this.selector.addEventListener("mousemove",this.mousemoveHandler)),null===this.selector)throw new Error("Something wrong with your selector 😭");this.resolveSlidesNumber(),this.selector.style.overflow="hidden",this.sliderFrame=document.createElement("div"),this.sliderFrame.style.width=this.selectorWidth/this.perPage*this.innerElements.length+"px",this.sliderFrame.style.webkitTransition="all "+this.config.duration+"ms "+this.config.easing,this.sliderFrame.style.transition="all "+this.config.duration+"ms "+this.config.easing,this.config.draggable&&(this.sliderFrame.style.cursor="-webkit-grab");for(var docFragment=document.createDocumentFragment(),i=0;i<this.innerElements.length;i++){var elementContainer=document.createElement("div");elementContainer.style.cssFloat="left",elementContainer.style.float="left",elementContainer.style.width=100/this.innerElements.length+"%",elementContainer.appendChild(this.innerElements[i]),docFragment.appendChild(elementContainer)}this.sliderFrame.appendChild(docFragment),this.selector.innerHTML="",this.selector.appendChild(this.sliderFrame),this.slideToCurrent(),this.config.onInit.call(this)}},{key:"resolveSlidesNumber",value:function(){if("number"==typeof this.config.perPage)this.perPage=this.config.perPage;else if("object"===_typeof(this.config.perPage)){this.perPage=1;for(var viewport in this.config.perPage)window.innerWidth>=viewport&&(this.perPage=this.config.perPage[viewport])}}},{key:"prev",value:function(){var howManySlides=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;0===this.currentSlide&&this.config.loop?this.currentSlide=this.innerElements.length-this.perPage:this.currentSlide=Math.max(this.currentSlide-howManySlides,0),this.slideToCurrent(),this.config.onChange.call(this)}},{key:"next",value:function(){var howManySlides=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.currentSlide===this.innerElements.length-this.perPage&&this.config.loop?this.currentSlide=0:this.currentSlide=Math.min(this.currentSlide+howManySlides,this.innerElements.length-this.perPage),this.slideToCurrent(),this.config.onChange.call(this)}},{key:"goTo",value:function(index){this.currentSlide=Math.min(Math.max(index,0),this.innerElements.length-1),this.slideToCurrent()}},{key:"slideToCurrent",value:function(){this.sliderFrame.style[this.transformProperty]="translate3d(-"+this.currentSlide*(this.selectorWidth/this.perPage)+"px, 0, 0)"}},{key:"updateAfterDrag",value:function(){var movement=this.drag.endX-this.drag.startX,movementDistance=Math.abs(movement),howManySliderToSlide=Math.ceil(movementDistance/(this.selectorWidth/this.perPage));movement>0&&movementDistance>this.config.threshold?this.prev(howManySliderToSlide):movement<0&&movementDistance>this.config.threshold&&this.next(howManySliderToSlide),this.slideToCurrent()}},{key:"resizeHandler",value:function(){this.resolveSlidesNumber(),this.selectorWidth=this.selector.getBoundingClientRect().width,this.sliderFrame.style.width=this.selectorWidth/this.perPage*this.innerElements.length+"px",this.slideToCurrent()}},{key:"clearDrag",value:function(){this.drag={startX:0,endX:0,startY:0,letItGo:null}}},{key:"touchstartHandler",value:function(e){e.stopPropagation(),this.pointerDown=!0,this.drag.startX=e.touches[0].pageX,this.drag.startY=e.touches[0].pageY}},{key:"touchendHandler",value:function(e){e.stopPropagation(),this.pointerDown=!1,this.sliderFrame.style.webkitTransition="all "+this.config.duration+"ms "+this.config.easing,this.sliderFrame.style.transition="all "+this.config.duration+"ms "+this.config.easing,this.drag.endX&&this.updateAfterDrag(),this.clearDrag()}},{key:"touchmoveHandler",value:function(e){e.stopPropagation(),null===this.drag.letItGo&&(this.drag.letItGo=Math.abs(this.drag.startY-e.touches[0].pageY)<Math.abs(this.drag.startX-e.touches[0].pageX)),this.pointerDown&&this.drag.letItGo&&(e.preventDefault(),this.drag.endX=e.touches[0].pageX,this.sliderFrame.style.webkitTransition="all 0ms "+this.config.easing,this.sliderFrame.style.transition="all 0ms "+this.config.easing,this.sliderFrame.style[this.transformProperty]="translate3d("+-1*(this.currentSlide*(this.selectorWidth/this.perPage)+(this.drag.startX-this.drag.endX))+"px, 0, 0)")}},{key:"mousedownHandler",value:function(e){e.preventDefault(),e.stopPropagation(),this.pointerDown=!0,this.drag.startX=e.pageX}},{key:"mouseupHandler",value:function(e){e.stopPropagation(),this.pointerDown=!1,this.sliderFrame.style.cursor="-webkit-grab",this.sliderFrame.style.webkitTransition="all "+this.config.duration+"ms "+this.config.easing,this.sliderFrame.style.transition="all "+this.config.duration+"ms "+this.config.easing,this.drag.endX&&this.updateAfterDrag(),this.clearDrag()}},{key:"mousemoveHandler",value:function(e){e.preventDefault(),this.pointerDown&&(this.drag.endX=e.pageX,this.sliderFrame.style.cursor="-webkit-grabbing",this.sliderFrame.style.webkitTransition="all 0ms "+this.config.easing,this.sliderFrame.style.transition="all 0ms "+this.config.easing,this.sliderFrame.style[this.transformProperty]="translate3d("+-1*(this.currentSlide*(this.selectorWidth/this.perPage)+(this.drag.startX-this.drag.endX))+"px, 0, 0)")}},{key:"mouseleaveHandler",value:function(e){this.pointerDown&&(this.pointerDown=!1,this.sliderFrame.style.cursor="-webkit-grab",this.drag.endX=e.pageX,this.sliderFrame.style.webkitTransition="all "+this.config.duration+"ms "+this.config.easing,this.sliderFrame.style.transition="all "+this.config.duration+"ms "+this.config.easing,this.updateAfterDrag(),this.clearDrag())}},{key:"destroy",value:function(){var restoreMarkup=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(window.removeEventListener("resize",this.resizeHandler),this.selector.removeEventListener("touchstart",this.touchstartHandler),this.selector.removeEventListener("touchend",this.touchendHandler),this.selector.removeEventListener("touchmove",this.touchmoveHandler),this.selector.removeEventListener("mousedown",this.mousedownHandler),this.selector.removeEventListener("mouseup",this.mouseupHandler),this.selector.removeEventListener("mouseleave",this.mouseleaveHandler),this.selector.removeEventListener("mousemove",this.mousemoveHandler),restoreMarkup){for(var slides=document.createDocumentFragment(),i=0;i<this.innerElements.length;i++)slides.appendChild(this.innerElements[i]);this.selector.innerHTML="",this.selector.appendChild(slides),this.selector.removeAttribute("style")}this.config.onDestroy.call(this)}}],[{key:"mergeSettings",value:function(options){var settings={selector:".siema",duration:200,easing:"ease-out",perPage:1,startIndex:0,draggable:!0,threshold:20,loop:!1,onInit:function(){},onChange:function(){},onDestroy:function(){}},userSttings=options;for(var attrname in userSttings)settings[attrname]=userSttings[attrname];return settings}},{key:"webkitOrNot",value:function(){return"string"==typeof document.documentElement.style.transform?"transform":"WebkitTransform"}}]),Siema}();window.Siema=Siema;
</script>
    <script type="text/javascript" inline="">
"use strict";!function(document,window,top,helpers){function handleFirstSwipe(){_swiped||(analytics.record("swipe",null,!1,!0),$("[data-style]",document).each(function(i,el){el.setAttribute("style",el.getAttribute("data-style"))}),_swiped=!0)}var $=top.$,frame=window.frameElement;frame.style.width="100%",frame.style.maxWidth="500px",frame.style.margin="0 auto",frame.style.display="block";var analytics=new window.Analytics({video:{el:$("video",document)}}),setHeight=function setHeight(){var el=document.getElementsByClassName("c-content")[0],height=el.getBoundingClientRect().height;frame.style.height=height+"px",height<200&&requestAnimationFrame(setHeight)},$dots=$(".c-dots",document),_swiped=!1,createDot=function(slider,element,i){var $dot=$("<div />",{class:"c-dots__dot"});0===i&&$dot.addClass("is-active"),$dots.append($dot),$dot.on("click touch",function(){slider.goTo(i),setActiveDot(i),handleFirstSwipe()})},setActiveDot=function(i){$(".c-dots__dot.is-active",document).removeClass("is-active"),$(".c-dots__dot",document).eq(i).addClass("is-active")},handleVideo=function(i){$(".c-slide video",document).each(function(){this.pause()});var video=$(".c-slide",document).eq(i).find("video")[0];video&&video.play()};!function(){helpers.getViewability()>50&&$("body",document).addClass("is-viewable"),new window.Siema({selector:".c-slides",duration:200,easing:"ease-out",perPage:1,startIndex:0,draggable:!0,threshold:20,loop:!1,onInit:function(){for(var i=0;i<this.innerElements.length;i++)createDot(this,this.innerElements[i],i);setHeight()},onChange:function(){handleFirstSwipe(),setActiveDot(this.currentSlide),handleVideo(this.currentSlide)}}),requestAnimationFrame(setHeight),window.onresize=setHeight}()}(document,window,window.top,window.helpers||{});
</script>
</body>

</html>