@penskemediacorp/larva-js 0.6.0 → 0.7.5

package/build/video-showcase.js

@@ -23,4 +23,4 @@
  * Unidragger v2.3.1
  * Draggable base class
  * MIT license
- */!function(o,r){s=[i(3)],void 0===(n=function(t){return function(t,e){"use strict";function i(){}var s=i.prototype=Object.create(e.prototype);s.bindHandles=function(){this._bindHandles(!0)},s.unbindHandles=function(){this._bindHandles(!1)},s._bindHandles=function(e){for(var i=(e=void 0===e||e)?"addEventListener":"removeEventListener",s=e?this._touchActionValue:"",n=0;n<this.handles.length;n++){var o=this.handles[n];this._bindStartEvent(o,e),o[i]("click",this),t.PointerEvent&&(o.style.touchAction=s)}},s._touchActionValue="none",s.pointerDown=function(t,e){this.okayPointerDown(t)&&(this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY},t.preventDefault(),this.pointerDownBlur(),this._bindPostStartEvents(t),this.emitEvent("pointerDown",[t,e]))};var n={TEXTAREA:!0,INPUT:!0,SELECT:!0,OPTION:!0},o={radio:!0,checkbox:!0,button:!0,submit:!0,image:!0,file:!0};return s.okayPointerDown=function(t){var e=n[t.target.nodeName],i=o[t.target.type],s=!e||i;return s||this._pointerReset(),s},s.pointerDownBlur=function(){var t=document.activeElement;t&&t.blur&&t!=document.body&&t.blur()},s.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.emitEvent("pointerMove",[t,e,i]),this._dragMove(t,e,i)},s._dragPointerMove=function(t,e){var i={x:e.pageX-this.pointerDownPointer.pageX,y:e.pageY-this.pointerDownPointer.pageY};return!this.isDragging&&this.hasDragStarted(i)&&this._dragStart(t,e),i},s.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3},s.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e]),this._dragPointerUp(t,e)},s._dragPointerUp=function(t,e){this.isDragging?this._dragEnd(t,e):this._staticClick(t,e)},s._dragStart=function(t,e){this.isDragging=!0,this.isPreventingClicks=!0,this.dragStart(t,e)},s.dragStart=function(t,e){this.emitEvent("dragStart",[t,e])},s._dragMove=function(t,e,i){this.isDragging&&this.dragMove(t,e,i)},s.dragMove=function(t,e,i){t.preventDefault(),this.emitEvent("dragMove",[t,e,i])},s._dragEnd=function(t,e){this.isDragging=!1,setTimeout(function(){delete this.isPreventingClicks}.bind(this)),this.dragEnd(t,e)},s.dragEnd=function(t,e){this.emitEvent("dragEnd",[t,e])},s.onclick=function(t){this.isPreventingClicks&&t.preventDefault()},s._staticClick=function(t,e){this.isIgnoringMouseUp&&"mouseup"==t.type||(this.staticClick(t,e),"mouseup"!=t.type&&(this.isIgnoringMouseUp=!0,setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)))},s.staticClick=function(t,e){this.emitEvent("staticClick",[t,e])},i.getPointerPoint=e.getPointerPoint,i}(o,t)}.apply(e,s))||(t.exports=n)}(window)},function(t,e,i){var s,n;window,s=[i(1),i(3),i(0)],void 0===(n=function(t,e,i){return function(t,e,i,s){"use strict";var n="http://www.w3.org/2000/svg";function o(t,e){this.direction=t,this.parent=e,this._create()}o.prototype=Object.create(i.prototype),o.prototype._create=function(){this.isEnabled=!0,this.isPrevious=-1==this.direction;var t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;var e=this.element=document.createElement("button");e.className="flickity-button flickity-prev-next-button",e.className+=this.isPrevious?" previous":" next",e.setAttribute("type","button"),this.disable(),e.setAttribute("aria-label",this.isPrevious?"Previous":"Next");var i=this.createSVG();e.appendChild(i),this.parent.on("select",this.update.bind(this)),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},o.prototype.activate=function(){this.bindStartEvent(this.element),this.element.addEventListener("click",this),this.parent.element.appendChild(this.element)},o.prototype.deactivate=function(){this.parent.element.removeChild(this.element),this.unbindStartEvent(this.element),this.element.removeEventListener("click",this)},o.prototype.createSVG=function(){var t=document.createElementNS(n,"svg");t.setAttribute("class","flickity-button-icon"),t.setAttribute("viewBox","0 0 100 100");var e,i=document.createElementNS(n,"path"),s="string"==typeof(e=this.parent.options.arrowShape)?e:"M "+e.x0+",50 L "+e.x1+","+(e.y1+50)+" L "+e.x2+","+(e.y2+50)+" L "+e.x3+",50  L "+e.x2+","+(50-e.y2)+" L "+e.x1+","+(50-e.y1)+" Z";return i.setAttribute("d",s),i.setAttribute("class","arrow"),this.isLeft||i.setAttribute("transform","translate(100, 100) rotate(180) "),t.appendChild(i),t},o.prototype.handleEvent=s.handleEvent,o.prototype.onclick=function(){if(this.isEnabled){this.parent.uiChange();var t=this.isPrevious?"previous":"next";this.parent[t]()}},o.prototype.enable=function(){this.isEnabled||(this.element.disabled=!1,this.isEnabled=!0)},o.prototype.disable=function(){this.isEnabled&&(this.element.disabled=!0,this.isEnabled=!1)},o.prototype.update=function(){var t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1)this.enable();else{var e=t.length?t.length-1:0,i=this.isPrevious?0:e;this[this.parent.selectedIndex==i?"disable":"enable"]()}},o.prototype.destroy=function(){this.deactivate(),this.allOff()},s.extend(e.defaults,{prevNextButtons:!0,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}}),e.createMethods.push("_createPrevNextButtons");var r=e.prototype;return r._createPrevNextButtons=function(){this.options.prevNextButtons&&(this.prevButton=new o(-1,this),this.nextButton=new o(1,this),this.on("activate",this.activatePrevNextButtons))},r.activatePrevNextButtons=function(){this.prevButton.activate(),this.nextButton.activate(),this.on("deactivate",this.deactivatePrevNextButtons)},r.deactivatePrevNextButtons=function(){this.prevButton.deactivate(),this.nextButton.deactivate(),this.off("deactivate",this.deactivatePrevNextButtons)},e.PrevNextButton=o,e}(0,t,e,i)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(1),i(3),i(0)],void 0===(n=function(t,e,i){return function(t,e,i,s){"use strict";function n(t){this.parent=t,this._create()}n.prototype=Object.create(i.prototype),n.prototype._create=function(){this.holder=document.createElement("ol"),this.holder.className="flickity-page-dots",this.dots=[],this.handleClick=this.onClick.bind(this),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},n.prototype.activate=function(){this.setDots(),this.holder.addEventListener("click",this.handleClick),this.bindStartEvent(this.holder),this.parent.element.appendChild(this.holder)},n.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick),this.unbindStartEvent(this.holder),this.parent.element.removeChild(this.holder)},n.prototype.setDots=function(){var t=this.parent.slides.length-this.dots.length;t>0?this.addDots(t):t<0&&this.removeDots(-t)},n.prototype.addDots=function(t){for(var e=document.createDocumentFragment(),i=[],s=this.dots.length,n=s+t,o=s;o<n;o++){var r=document.createElement("li");r.className="dot",r.setAttribute("aria-label","Page dot "+(o+1)),e.appendChild(r),i.push(r)}this.holder.appendChild(e),this.dots=this.dots.concat(i)},n.prototype.removeDots=function(t){this.dots.splice(this.dots.length-t,t).forEach((function(t){this.holder.removeChild(t)}),this)},n.prototype.updateSelected=function(){this.selectedDot&&(this.selectedDot.className="dot",this.selectedDot.removeAttribute("aria-current")),this.dots.length&&(this.selectedDot=this.dots[this.parent.selectedIndex],this.selectedDot.className="dot is-selected",this.selectedDot.setAttribute("aria-current","step"))},n.prototype.onTap=n.prototype.onClick=function(t){var e=t.target;if("LI"==e.nodeName){this.parent.uiChange();var i=this.dots.indexOf(e);this.parent.select(i)}},n.prototype.destroy=function(){this.deactivate(),this.allOff()},e.PageDots=n,s.extend(e.defaults,{pageDots:!0}),e.createMethods.push("_createPageDots");var o=e.prototype;return o._createPageDots=function(){this.options.pageDots&&(this.pageDots=new n(this),this.on("activate",this.activatePageDots),this.on("select",this.updateSelectedPageDots),this.on("cellChange",this.updatePageDots),this.on("resize",this.updatePageDots),this.on("deactivate",this.deactivatePageDots))},o.activatePageDots=function(){this.pageDots.activate()},o.updateSelectedPageDots=function(){this.pageDots.updateSelected()},o.updatePageDots=function(){this.pageDots.setDots()},o.deactivatePageDots=function(){this.pageDots.deactivate()},e.PageDots=n,e}(0,t,e,i)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(2),i(0),i(1)],void 0===(n=function(t,e,i){return function(t,e,i){"use strict";function s(t){this.parent=t,this.state="stopped",this.onVisibilityChange=this.visibilityChange.bind(this),this.onVisibilityPlay=this.visibilityPlay.bind(this)}s.prototype=Object.create(t.prototype),s.prototype.play=function(){"playing"!=this.state&&(document.hidden?document.addEventListener("visibilitychange",this.onVisibilityPlay):(this.state="playing",document.addEventListener("visibilitychange",this.onVisibilityChange),this.tick()))},s.prototype.tick=function(){if("playing"==this.state){var t=this.parent.options.autoPlay;t="number"==typeof t?t:3e3;var e=this;this.clear(),this.timeout=setTimeout((function(){e.parent.next(!0),e.tick()}),t)}},s.prototype.stop=function(){this.state="stopped",this.clear(),document.removeEventListener("visibilitychange",this.onVisibilityChange)},s.prototype.clear=function(){clearTimeout(this.timeout)},s.prototype.pause=function(){"playing"==this.state&&(this.state="paused",this.clear())},s.prototype.unpause=function(){"paused"==this.state&&this.play()},s.prototype.visibilityChange=function(){this[document.hidden?"pause":"unpause"]()},s.prototype.visibilityPlay=function(){this.play(),document.removeEventListener("visibilitychange",this.onVisibilityPlay)},e.extend(i.defaults,{pauseAutoPlayOnHover:!0}),i.createMethods.push("_createPlayer");var n=i.prototype;return n._createPlayer=function(){this.player=new s(this),this.on("activate",this.activatePlayer),this.on("uiChange",this.stopPlayer),this.on("pointerDown",this.stopPlayer),this.on("deactivate",this.deactivatePlayer)},n.activatePlayer=function(){this.options.autoPlay&&(this.player.play(),this.element.addEventListener("mouseenter",this))},n.playPlayer=function(){this.player.play()},n.stopPlayer=function(){this.player.stop()},n.pausePlayer=function(){this.player.pause()},n.unpausePlayer=function(){this.player.unpause()},n.deactivatePlayer=function(){this.player.stop(),this.element.removeEventListener("mouseenter",this)},n.onmouseenter=function(){this.options.pauseAutoPlayOnHover&&(this.player.pause(),this.element.addEventListener("mouseleave",this))},n.onmouseleave=function(){this.player.unpause(),this.element.removeEventListener("mouseleave",this)},i.Player=s,i}(t,e,i)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(1),i(0)],void 0===(n=function(t,e){return function(t,e,i){"use strict";var s=e.prototype;return s.insert=function(t,e){var i=this._makeCells(t);if(i&&i.length){var s=this.cells.length;e=void 0===e?s:e;var n=function(t){var e=document.createDocumentFragment();return t.forEach((function(t){e.appendChild(t.element)})),e}(i),o=e==s;if(o)this.slider.appendChild(n);else{var r=this.cells[e].element;this.slider.insertBefore(n,r)}if(0===e)this.cells=i.concat(this.cells);else if(o)this.cells=this.cells.concat(i);else{var a=this.cells.splice(e,s-e);this.cells=this.cells.concat(i).concat(a)}this._sizeCells(i),this.cellChange(e,!0)}},s.append=function(t){this.insert(t,this.cells.length)},s.prepend=function(t){this.insert(t,0)},s.remove=function(t){var e=this.getCells(t);if(e&&e.length){var s=this.cells.length-1;e.forEach((function(t){t.remove();var e=this.cells.indexOf(t);s=Math.min(e,s),i.removeFrom(this.cells,t)}),this),this.cellChange(s,!0)}},s.cellSizeChange=function(t){var e=this.getCell(t);if(e){e.getSize();var i=this.cells.indexOf(e);this.cellChange(i)}},s.cellChange=function(t,e){var i=this.selectedElement;this._positionCells(t),this._getWrapShiftCells(),this.setGallerySize();var s=this.getCell(i);s&&(this.selectedIndex=this.getCellSlideIndex(s)),this.selectedIndex=Math.min(this.slides.length-1,this.selectedIndex),this.emitEvent("cellChange",[t]),this.select(this.selectedIndex),e&&this.positionSliderAtSelected()},e}(0,t,e)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(1),i(0)],void 0===(n=function(t,e){return function(t,e,i){"use strict";e.createMethods.push("_createLazyload");var s=e.prototype;function n(t,e){this.img=t,this.flickity=e,this.load()}return s._createLazyload=function(){this.on("select",this.lazyLoad)},s.lazyLoad=function(){var t=this.options.lazyLoad;if(t){var e="number"==typeof t?t:0,s=this.getAdjacentCellElements(e),o=[];s.forEach((function(t){var e=function(t){if("IMG"==t.nodeName){var e=t.getAttribute("data-flickity-lazyload"),s=t.getAttribute("data-flickity-lazyload-src"),n=t.getAttribute("data-flickity-lazyload-srcset");if(e||s||n)return[t]}var o=t.querySelectorAll("img[data-flickity-lazyload], img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]");return i.makeArray(o)}(t);o=o.concat(e)})),o.forEach((function(t){new n(t,this)}),this)}},n.prototype.handleEvent=i.handleEvent,n.prototype.load=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this);var t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src"),e=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t,e&&this.img.setAttribute("srcset",e),this.img.removeAttribute("data-flickity-lazyload"),this.img.removeAttribute("data-flickity-lazyload-src"),this.img.removeAttribute("data-flickity-lazyload-srcset")},n.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")},n.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")},n.prototype.complete=function(t,e){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this);var i=this.flickity.getParentCell(this.img),s=i&&i.element;this.flickity.cellSizeChange(s),this.img.classList.add(e),this.flickity.dispatchEvent("lazyLoad",t,s)},e.LazyLoader=n,e}(0,t,e)}.apply(e,s))||(t.exports=n)},function(t,e,i){"use strict";i.r(e);class s{constructor(t){this.el=t,this.toggleEl=this.el.querySelector("[data-collapsible-toggle]"),this.panels=[...this.el.querySelectorAll("[data-collapsible-panel]")],this.group=this.findGroup(),this.toggle=this.toggle.bind(this),this.onClick=this.onClick.bind(this),this.toggleEl&&this.toggleEl.addEventListener("click",this.onClick)}destroy(){this.toggleEl&&this.toggleEl.removeEventListener("click",this.onClick),this.isCollapsed||this.toggle()}get state(){return this.el.dataset.collapsible}set state(t){this.el.dataset.collapsible=t,this.isCollapsed?this.el.classList.remove("is-expanded"):this.el.classList.add("is-expanded")}get isCollapsed(){return"collapsed"===this.state}get container(){return document.querySelector(this.el.dataset.collapsibleContainer)}get closeOnClick(){return void 0!==this.el.dataset.collapsibleCloseOnClick}findGroup(){return[...document.body.querySelectorAll("[data-collapsible-group]")].find(t=>t.contains(this.el))||null}onClick(t){t.preventDefault(),this.toggle()}toggle(){this.state=this.isCollapsed?"expanded":"collapsed",this.maybeRepositionPanel(),this.maybeCloseOnClick(),"expanded"===this.state&&(document.querySelector("[data-collapsible-toggle] + li > a").focus(),null!==this.group&&this.closeOthersInGroup())}collapse(){"expanded"===this.state&&this.toggle()}closeOthersInGroup(){[...this.group.querySelectorAll("[data-collapsible]")].forEach(t=>{t!==this.el&&t.pmcCollapsible.collapse()})}maybeRepositionPanel(){if(this.container)if(this.isCollapsed)this.panels.forEach(t=>t.style.marginLeft="");else{const t=this.container.getBoundingClientRect().left;this.panels.forEach(e=>{const i=e.getBoundingClientRect();if(0===i.width&&0===i.height)return;const s=parseInt(window.getComputedStyle(e).marginLeft,10),n=i.left-2*s;n<t&&(e.style.marginLeft=t-n+"px")})}}maybeCloseOnClick(){this.closeOnClick&&(this.isCollapsed?document.body.removeEventListener("click",this.toggle):setTimeout(()=>document.body.addEventListener("click",this.toggle),1))}}function n(){[...document.querySelectorAll("[data-collapsible]")].forEach(t=>t.pmcCollapsible=new s(t))}var o=i(5),r=i.n(o);class a{constructor(t){var e,i,s,n;this.el=t,this.triggers=[...t.querySelectorAll("[data-video-showcase-trigger]")],this.player=t.querySelector("[data-video-showcase-player]"),this.elementsToHide=[...this.el.querySelectorAll(".is-to-be-hidden")],this.attributesToRemoveFromPlayer=["data-video-showcase-trigger","data-video-showcase-title","data-video-showcase-dek","data-video-showcase-permalink","data-video-showcase-type","href"],this.state={isPlayerSetup:!1,hasSocialShare:!1,videoID:"",videoType:""},this.playerUI={title:t.querySelector(".js-VideoShowcase-title"),sponsoredBadge:t.querySelector(".js-video-showcase-sponsored-badge"),dek:t.querySelector(".js-VideoShowcase-dek"),iframe:t.querySelector("[data-video-showcase-iframe]"),jwplayerContainer:t.querySelector("#jwplayerContainer"),social:t.querySelector("[data-video-showcase-player-social-share]")},this.init(),e=this.el,i="click",s="[data-video-showcase-trigger]",n=this.handleTriggerClick.bind(this),e.addEventListener(i,t=>{const e=((t,e)=>e.matches&&e.matches(t))(s,t.target)?t.target:t.target.closest(s);e&&n(t,e)})}init(){null!==this.playerUI.social&&(this.state.hasSocialShare=!0)}getPlayerCardData(t){const e=t.dataset.videoShowcaseTrigger,i=this.state.hasSocialShare;return{title:t.dataset.videoShowcaseTitle,sponsored:t.dataset.videoShowcaseSponsored,dek:t.dataset.videoShowcaseDek,permalink:t.dataset.videoShowcasePermalink,socialString:function(t){if(window.wp&&i){return wp.template("trigger-social-share-"+e)(void 0)}}()}}updatePlayerCardData(t,e){console.log(e),e.title&&(this.playerUI.title.innerText=e.title),e.permalink&&this.playerUI.title.setAttribute("href",e.permalink),e.dek&&(this.playerUI.dek.innerText=e.dek),e.socialString&&this.state.hasSocialShare&&this.updateCardSocialShare(e.socialString),null!==this.playerUI.sponsoredBadge&&(e.sponsored?this.playerUI.sponsoredBadge.classList.remove("u-hidden"):this.playerUI.sponsoredBadge.classList.add("u-hidden"))}updateCardSocialShare(t){this.playerUI.social.removeChild(this.playerUI.social.querySelector("ul")),this.playerUI.social.insertAdjacentHTML("beforeend",t),n()}returnUrl(t,e){return"youtube"===e?"https://www.youtube.com/embed/"+t:"jwplayer"===e?`https://content.jwplatform.com/feeds/${t}.json`:void 0}playYoutube(t){this.playerUI.iframe.removeAttribute("hidden"),this.playerUI.iframe.setAttribute("src",t+"?rel=0&autoplay=1&showinfo=0&controls=2&rel=0&modestbranding=0")}playJW(t){let e="";this.playerUI.jwplayerContainer.removeAttribute("hidden"),window.jwplayer&&(e=window.jwplayer(this.playerUI.jwplayerContainer).setup({playlist:t,aspectratio:"16:9"}),"object"==typeof pmc_video_ads&&"function"==typeof pmc_video_ads.setup_jwplayer&&pmc_video_ads.setup_jwplayer(this.playerUI.jwplayerContainer.id),void 0!==window.pmc_ga_jwplayer&&"function"==typeof window.pmc_ga_jwplayer.setup_tracking_by_object&&window.pmc_ga_jwplayer.setup_tracking_by_object(this.playerUI.jwplayerContainer),e.play())}handleTriggerClick(t,e){t.preventDefault();let i=this.state.videoType;this.state.videoType=e.dataset.videoShowcaseType,this.state.videoID=e.dataset.videoShowcaseTrigger,this.resetPlayer(i),this.playVideo(this.state.videoID,this.state.videoType),this.updatePlayerUI(this.state.videoID),this.onFirstTimePlay()}playVideo(t,e){let i=this.returnUrl(t,e);"youtube"===e&&this.playYoutube(i),"jwplayer"===e&&this.playJW(i)}onFirstTimePlay(){!1===this.state.isPlayerSetup&&(this.elementsToHide.forEach(t=>t.setAttribute("hidden","")),this.attributesToRemoveFromPlayer.forEach(t=>this.player.parentNode.removeAttribute(t)),this.state.isPlayerSetup=!0)}updatePlayerUI(t){const e=this.el.querySelector(`[data-video-showcase-trigger="${t}"]`),i=this.getPlayerCardData(e);this.setActiveTrigger(t),this.updatePlayerCardData(e,i)}resetPlayer(t){"jwplayer"===t&&window.jwplayer&&(window.jwplayer("jwplayerContainer").remove(),this.playerUI.jwplayerContainer.setAttribute("hidden","")),"youtube"===t&&(this.playerUI.iframe.setAttribute("src",""),this.playerUI.iframe.setAttribute("hidden",""))}resetAllTriggers(){this.triggers.forEach(t=>t.classList.remove("is-playing"))}setActiveTrigger(t){let e=this.el.querySelector(`[data-video-showcase-trigger="${t}"]`);this.resetAllTriggers(),null!==e&&e.classList.add("is-playing")}}document.addEventListener("DOMContentLoaded",()=>{n(),[...document.querySelectorAll(".js-Flickity")].forEach(t=>{let e=t.classList.contains("js-Flickity--isContained"),i=t.classList.contains("js-Flickity--isFreeScroll"),s=t.classList.contains("js-Flickity--isWrapAround");return new r.a(t,{cellSelector:".js-Flickity-cell",pageDots:!1,imagesLoaded:!0,groupCells:!0,contain:e,wrapAround:s,freeScroll:i,arrowShape:{x0:10,x1:60,y1:50,x2:65,y2:45,x3:20}})}),function(){const t=[...document.querySelectorAll("[data-video-showcase]")];t.length&&t.forEach(t=>t.pmcVideoShowcase=new a(t))}()})}]);
+ */!function(o,r){s=[i(3)],void 0===(n=function(t){return function(t,e){"use strict";function i(){}var s=i.prototype=Object.create(e.prototype);s.bindHandles=function(){this._bindHandles(!0)},s.unbindHandles=function(){this._bindHandles(!1)},s._bindHandles=function(e){for(var i=(e=void 0===e||e)?"addEventListener":"removeEventListener",s=e?this._touchActionValue:"",n=0;n<this.handles.length;n++){var o=this.handles[n];this._bindStartEvent(o,e),o[i]("click",this),t.PointerEvent&&(o.style.touchAction=s)}},s._touchActionValue="none",s.pointerDown=function(t,e){this.okayPointerDown(t)&&(this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY},t.preventDefault(),this.pointerDownBlur(),this._bindPostStartEvents(t),this.emitEvent("pointerDown",[t,e]))};var n={TEXTAREA:!0,INPUT:!0,SELECT:!0,OPTION:!0},o={radio:!0,checkbox:!0,button:!0,submit:!0,image:!0,file:!0};return s.okayPointerDown=function(t){var e=n[t.target.nodeName],i=o[t.target.type],s=!e||i;return s||this._pointerReset(),s},s.pointerDownBlur=function(){var t=document.activeElement;t&&t.blur&&t!=document.body&&t.blur()},s.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.emitEvent("pointerMove",[t,e,i]),this._dragMove(t,e,i)},s._dragPointerMove=function(t,e){var i={x:e.pageX-this.pointerDownPointer.pageX,y:e.pageY-this.pointerDownPointer.pageY};return!this.isDragging&&this.hasDragStarted(i)&&this._dragStart(t,e),i},s.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3},s.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e]),this._dragPointerUp(t,e)},s._dragPointerUp=function(t,e){this.isDragging?this._dragEnd(t,e):this._staticClick(t,e)},s._dragStart=function(t,e){this.isDragging=!0,this.isPreventingClicks=!0,this.dragStart(t,e)},s.dragStart=function(t,e){this.emitEvent("dragStart",[t,e])},s._dragMove=function(t,e,i){this.isDragging&&this.dragMove(t,e,i)},s.dragMove=function(t,e,i){t.preventDefault(),this.emitEvent("dragMove",[t,e,i])},s._dragEnd=function(t,e){this.isDragging=!1,setTimeout(function(){delete this.isPreventingClicks}.bind(this)),this.dragEnd(t,e)},s.dragEnd=function(t,e){this.emitEvent("dragEnd",[t,e])},s.onclick=function(t){this.isPreventingClicks&&t.preventDefault()},s._staticClick=function(t,e){this.isIgnoringMouseUp&&"mouseup"==t.type||(this.staticClick(t,e),"mouseup"!=t.type&&(this.isIgnoringMouseUp=!0,setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)))},s.staticClick=function(t,e){this.emitEvent("staticClick",[t,e])},i.getPointerPoint=e.getPointerPoint,i}(o,t)}.apply(e,s))||(t.exports=n)}(window)},function(t,e,i){var s,n;window,s=[i(1),i(3),i(0)],void 0===(n=function(t,e,i){return function(t,e,i,s){"use strict";var n="http://www.w3.org/2000/svg";function o(t,e){this.direction=t,this.parent=e,this._create()}o.prototype=Object.create(i.prototype),o.prototype._create=function(){this.isEnabled=!0,this.isPrevious=-1==this.direction;var t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;var e=this.element=document.createElement("button");e.className="flickity-button flickity-prev-next-button",e.className+=this.isPrevious?" previous":" next",e.setAttribute("type","button"),this.disable(),e.setAttribute("aria-label",this.isPrevious?"Previous":"Next");var i=this.createSVG();e.appendChild(i),this.parent.on("select",this.update.bind(this)),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},o.prototype.activate=function(){this.bindStartEvent(this.element),this.element.addEventListener("click",this),this.parent.element.appendChild(this.element)},o.prototype.deactivate=function(){this.parent.element.removeChild(this.element),this.unbindStartEvent(this.element),this.element.removeEventListener("click",this)},o.prototype.createSVG=function(){var t=document.createElementNS(n,"svg");t.setAttribute("class","flickity-button-icon"),t.setAttribute("viewBox","0 0 100 100");var e,i=document.createElementNS(n,"path"),s="string"==typeof(e=this.parent.options.arrowShape)?e:"M "+e.x0+",50 L "+e.x1+","+(e.y1+50)+" L "+e.x2+","+(e.y2+50)+" L "+e.x3+",50  L "+e.x2+","+(50-e.y2)+" L "+e.x1+","+(50-e.y1)+" Z";return i.setAttribute("d",s),i.setAttribute("class","arrow"),this.isLeft||i.setAttribute("transform","translate(100, 100) rotate(180) "),t.appendChild(i),t},o.prototype.handleEvent=s.handleEvent,o.prototype.onclick=function(){if(this.isEnabled){this.parent.uiChange();var t=this.isPrevious?"previous":"next";this.parent[t]()}},o.prototype.enable=function(){this.isEnabled||(this.element.disabled=!1,this.isEnabled=!0)},o.prototype.disable=function(){this.isEnabled&&(this.element.disabled=!0,this.isEnabled=!1)},o.prototype.update=function(){var t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1)this.enable();else{var e=t.length?t.length-1:0,i=this.isPrevious?0:e;this[this.parent.selectedIndex==i?"disable":"enable"]()}},o.prototype.destroy=function(){this.deactivate(),this.allOff()},s.extend(e.defaults,{prevNextButtons:!0,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}}),e.createMethods.push("_createPrevNextButtons");var r=e.prototype;return r._createPrevNextButtons=function(){this.options.prevNextButtons&&(this.prevButton=new o(-1,this),this.nextButton=new o(1,this),this.on("activate",this.activatePrevNextButtons))},r.activatePrevNextButtons=function(){this.prevButton.activate(),this.nextButton.activate(),this.on("deactivate",this.deactivatePrevNextButtons)},r.deactivatePrevNextButtons=function(){this.prevButton.deactivate(),this.nextButton.deactivate(),this.off("deactivate",this.deactivatePrevNextButtons)},e.PrevNextButton=o,e}(0,t,e,i)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(1),i(3),i(0)],void 0===(n=function(t,e,i){return function(t,e,i,s){"use strict";function n(t){this.parent=t,this._create()}n.prototype=Object.create(i.prototype),n.prototype._create=function(){this.holder=document.createElement("ol"),this.holder.className="flickity-page-dots",this.dots=[],this.handleClick=this.onClick.bind(this),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},n.prototype.activate=function(){this.setDots(),this.holder.addEventListener("click",this.handleClick),this.bindStartEvent(this.holder),this.parent.element.appendChild(this.holder)},n.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick),this.unbindStartEvent(this.holder),this.parent.element.removeChild(this.holder)},n.prototype.setDots=function(){var t=this.parent.slides.length-this.dots.length;t>0?this.addDots(t):t<0&&this.removeDots(-t)},n.prototype.addDots=function(t){for(var e=document.createDocumentFragment(),i=[],s=this.dots.length,n=s+t,o=s;o<n;o++){var r=document.createElement("li");r.className="dot",r.setAttribute("aria-label","Page dot "+(o+1)),e.appendChild(r),i.push(r)}this.holder.appendChild(e),this.dots=this.dots.concat(i)},n.prototype.removeDots=function(t){this.dots.splice(this.dots.length-t,t).forEach((function(t){this.holder.removeChild(t)}),this)},n.prototype.updateSelected=function(){this.selectedDot&&(this.selectedDot.className="dot",this.selectedDot.removeAttribute("aria-current")),this.dots.length&&(this.selectedDot=this.dots[this.parent.selectedIndex],this.selectedDot.className="dot is-selected",this.selectedDot.setAttribute("aria-current","step"))},n.prototype.onTap=n.prototype.onClick=function(t){var e=t.target;if("LI"==e.nodeName){this.parent.uiChange();var i=this.dots.indexOf(e);this.parent.select(i)}},n.prototype.destroy=function(){this.deactivate(),this.allOff()},e.PageDots=n,s.extend(e.defaults,{pageDots:!0}),e.createMethods.push("_createPageDots");var o=e.prototype;return o._createPageDots=function(){this.options.pageDots&&(this.pageDots=new n(this),this.on("activate",this.activatePageDots),this.on("select",this.updateSelectedPageDots),this.on("cellChange",this.updatePageDots),this.on("resize",this.updatePageDots),this.on("deactivate",this.deactivatePageDots))},o.activatePageDots=function(){this.pageDots.activate()},o.updateSelectedPageDots=function(){this.pageDots.updateSelected()},o.updatePageDots=function(){this.pageDots.setDots()},o.deactivatePageDots=function(){this.pageDots.deactivate()},e.PageDots=n,e}(0,t,e,i)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(2),i(0),i(1)],void 0===(n=function(t,e,i){return function(t,e,i){"use strict";function s(t){this.parent=t,this.state="stopped",this.onVisibilityChange=this.visibilityChange.bind(this),this.onVisibilityPlay=this.visibilityPlay.bind(this)}s.prototype=Object.create(t.prototype),s.prototype.play=function(){"playing"!=this.state&&(document.hidden?document.addEventListener("visibilitychange",this.onVisibilityPlay):(this.state="playing",document.addEventListener("visibilitychange",this.onVisibilityChange),this.tick()))},s.prototype.tick=function(){if("playing"==this.state){var t=this.parent.options.autoPlay;t="number"==typeof t?t:3e3;var e=this;this.clear(),this.timeout=setTimeout((function(){e.parent.next(!0),e.tick()}),t)}},s.prototype.stop=function(){this.state="stopped",this.clear(),document.removeEventListener("visibilitychange",this.onVisibilityChange)},s.prototype.clear=function(){clearTimeout(this.timeout)},s.prototype.pause=function(){"playing"==this.state&&(this.state="paused",this.clear())},s.prototype.unpause=function(){"paused"==this.state&&this.play()},s.prototype.visibilityChange=function(){this[document.hidden?"pause":"unpause"]()},s.prototype.visibilityPlay=function(){this.play(),document.removeEventListener("visibilitychange",this.onVisibilityPlay)},e.extend(i.defaults,{pauseAutoPlayOnHover:!0}),i.createMethods.push("_createPlayer");var n=i.prototype;return n._createPlayer=function(){this.player=new s(this),this.on("activate",this.activatePlayer),this.on("uiChange",this.stopPlayer),this.on("pointerDown",this.stopPlayer),this.on("deactivate",this.deactivatePlayer)},n.activatePlayer=function(){this.options.autoPlay&&(this.player.play(),this.element.addEventListener("mouseenter",this))},n.playPlayer=function(){this.player.play()},n.stopPlayer=function(){this.player.stop()},n.pausePlayer=function(){this.player.pause()},n.unpausePlayer=function(){this.player.unpause()},n.deactivatePlayer=function(){this.player.stop(),this.element.removeEventListener("mouseenter",this)},n.onmouseenter=function(){this.options.pauseAutoPlayOnHover&&(this.player.pause(),this.element.addEventListener("mouseleave",this))},n.onmouseleave=function(){this.player.unpause(),this.element.removeEventListener("mouseleave",this)},i.Player=s,i}(t,e,i)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(1),i(0)],void 0===(n=function(t,e){return function(t,e,i){"use strict";var s=e.prototype;return s.insert=function(t,e){var i=this._makeCells(t);if(i&&i.length){var s=this.cells.length;e=void 0===e?s:e;var n=function(t){var e=document.createDocumentFragment();return t.forEach((function(t){e.appendChild(t.element)})),e}(i),o=e==s;if(o)this.slider.appendChild(n);else{var r=this.cells[e].element;this.slider.insertBefore(n,r)}if(0===e)this.cells=i.concat(this.cells);else if(o)this.cells=this.cells.concat(i);else{var a=this.cells.splice(e,s-e);this.cells=this.cells.concat(i).concat(a)}this._sizeCells(i),this.cellChange(e,!0)}},s.append=function(t){this.insert(t,this.cells.length)},s.prepend=function(t){this.insert(t,0)},s.remove=function(t){var e=this.getCells(t);if(e&&e.length){var s=this.cells.length-1;e.forEach((function(t){t.remove();var e=this.cells.indexOf(t);s=Math.min(e,s),i.removeFrom(this.cells,t)}),this),this.cellChange(s,!0)}},s.cellSizeChange=function(t){var e=this.getCell(t);if(e){e.getSize();var i=this.cells.indexOf(e);this.cellChange(i)}},s.cellChange=function(t,e){var i=this.selectedElement;this._positionCells(t),this._getWrapShiftCells(),this.setGallerySize();var s=this.getCell(i);s&&(this.selectedIndex=this.getCellSlideIndex(s)),this.selectedIndex=Math.min(this.slides.length-1,this.selectedIndex),this.emitEvent("cellChange",[t]),this.select(this.selectedIndex),e&&this.positionSliderAtSelected()},e}(0,t,e)}.apply(e,s))||(t.exports=n)},function(t,e,i){var s,n;window,s=[i(1),i(0)],void 0===(n=function(t,e){return function(t,e,i){"use strict";e.createMethods.push("_createLazyload");var s=e.prototype;function n(t,e){this.img=t,this.flickity=e,this.load()}return s._createLazyload=function(){this.on("select",this.lazyLoad)},s.lazyLoad=function(){var t=this.options.lazyLoad;if(t){var e="number"==typeof t?t:0,s=this.getAdjacentCellElements(e),o=[];s.forEach((function(t){var e=function(t){if("IMG"==t.nodeName){var e=t.getAttribute("data-flickity-lazyload"),s=t.getAttribute("data-flickity-lazyload-src"),n=t.getAttribute("data-flickity-lazyload-srcset");if(e||s||n)return[t]}var o=t.querySelectorAll("img[data-flickity-lazyload], img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]");return i.makeArray(o)}(t);o=o.concat(e)})),o.forEach((function(t){new n(t,this)}),this)}},n.prototype.handleEvent=i.handleEvent,n.prototype.load=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this);var t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src"),e=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t,e&&this.img.setAttribute("srcset",e),this.img.removeAttribute("data-flickity-lazyload"),this.img.removeAttribute("data-flickity-lazyload-src"),this.img.removeAttribute("data-flickity-lazyload-srcset")},n.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")},n.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")},n.prototype.complete=function(t,e){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this);var i=this.flickity.getParentCell(this.img),s=i&&i.element;this.flickity.cellSizeChange(s),this.img.classList.add(e),this.flickity.dispatchEvent("lazyLoad",t,s)},e.LazyLoader=n,e}(0,t,e)}.apply(e,s))||(t.exports=n)},function(t,e,i){"use strict";i.r(e);class s{constructor(t){this.el=t,this.toggleEl=this.el.querySelector("[data-collapsible-toggle]"),this.panels=[...this.el.querySelectorAll("[data-collapsible-panel]")],this.group=this.findGroup(),this.toggle=this.toggle.bind(this),this.onClick=this.onClick.bind(this),this.toggleEl&&this.toggleEl.addEventListener("click",this.onClick)}destroy(){this.toggleEl&&this.toggleEl.removeEventListener("click",this.onClick),this.isCollapsed||this.toggle()}get state(){return this.el.dataset.collapsible}set state(t){this.el.dataset.collapsible=t,this.isCollapsed?this.el.classList.remove("is-expanded"):this.el.classList.add("is-expanded")}get isCollapsed(){return"collapsed"===this.state}get container(){return document.querySelector(this.el.dataset.collapsibleContainer)}get closeOnClick(){return void 0!==this.el.dataset.collapsibleCloseOnClick}findGroup(){return[...document.body.querySelectorAll("[data-collapsible-group]")].find(t=>t.contains(this.el))||null}onClick(t){t.preventDefault(),this.toggle()}toggle(){this.state=this.isCollapsed?"expanded":"collapsed",this.maybeRepositionPanel(),this.maybeCloseOnClick(),"expanded"===this.state&&(document.querySelector("[data-collapsible-toggle] + li > a").focus(),null!==this.group&&this.closeOthersInGroup())}collapse(){"expanded"===this.state&&this.toggle()}closeOthersInGroup(){[...this.group.querySelectorAll("[data-collapsible]")].forEach(t=>{t!==this.el&&t.pmcCollapsible.collapse()})}maybeRepositionPanel(){if(this.container)if(this.isCollapsed)this.panels.forEach(t=>t.style.marginLeft="");else{const t=this.container.getBoundingClientRect().left;this.panels.forEach(e=>{const i=e.getBoundingClientRect();if(0===i.width&&0===i.height)return;const s=parseInt(window.getComputedStyle(e).marginLeft,10),n=i.left-2*s;n<t&&(e.style.marginLeft=t-n+"px")})}}maybeCloseOnClick(){this.closeOnClick&&(this.isCollapsed?document.body.removeEventListener("click",this.toggle):setTimeout(()=>document.body.addEventListener("click",this.toggle),1))}}function n(){[...document.querySelectorAll("[data-collapsible]")].forEach(t=>t.pmcCollapsible=new s(t))}var o=i(5),r=i.n(o);class a{constructor(t){var e,i,s,n;this.el=t,this.triggers=[...t.querySelectorAll("[data-video-showcase-trigger]")],this.player=t.querySelector("[data-video-showcase-player]"),this.elementsToHide=[...this.el.querySelectorAll(".is-to-be-hidden")],this.attributesToRemoveFromPlayer=["data-video-showcase-trigger","data-video-showcase-title","data-video-showcase-dek","data-video-showcase-permalink","data-video-showcase-type","href"],this.state={isPlayerSetup:!1,hasSocialShare:!1,videoID:"",videoType:""},this.playerUI={title:t.querySelector(".js-VideoShowcase-title"),sponsoredBadge:t.querySelector(".js-video-showcase-sponsored-badge"),dek:t.querySelector(".js-VideoShowcase-dek"),iframe:t.querySelector("[data-video-showcase-iframe]"),jwplayerContainer:t.querySelector("#jwplayerContainer"),social:t.querySelector("[data-video-showcase-player-social-share]")},this.init(),e=this.el,i="click",s="[data-video-showcase-trigger]",n=this.handleTriggerClick.bind(this),e.addEventListener(i,t=>{const e=((t,e)=>e.matches&&e.matches(t))(s,t.target)?t.target:t.target.closest(s);e&&n(t,e)})}init(){null!==this.playerUI.social&&(this.state.hasSocialShare=!0)}getPlayerCardData(t){const e=t.dataset.videoShowcaseTrigger,i=this.state.hasSocialShare;return{title:t.dataset.videoShowcaseTitle,sponsored:t.dataset.videoShowcaseSponsored,dek:t.dataset.videoShowcaseDek,permalink:t.dataset.videoShowcasePermalink,socialString:function(t){if(window.wp&&i){return wp.template("trigger-social-share-"+e)(void 0)}}()}}updatePlayerCardData(t,e){console.log(e),e.title&&(this.playerUI.title.innerText=e.title),e.permalink&&this.playerUI.title.setAttribute("href",e.permalink),e.dek&&(this.playerUI.dek.innerText=e.dek),e.socialString&&this.state.hasSocialShare&&this.updateCardSocialShare(e.socialString),null!==this.playerUI.sponsoredBadge&&(e.sponsored?this.playerUI.sponsoredBadge.classList.remove("u-hidden"):this.playerUI.sponsoredBadge.classList.add("u-hidden"))}updateCardSocialShare(t){this.playerUI.social.removeChild(this.playerUI.social.querySelector("ul")),this.playerUI.social.insertAdjacentHTML("beforeend",t),n()}returnUrl(t,e){return"youtube"===e?"https://www.youtube.com/embed/"+t:"jwplayer"===e?`https://content.jwplatform.com/feeds/${t}.json`:void 0}playYoutube(t){this.playerUI.iframe.removeAttribute("hidden"),this.playerUI.iframe.setAttribute("src",t+"?rel=0&autoplay=1&showinfo=0&controls=2&rel=0&modestbranding=0")}playJW(t){this.playerUI.jwplayerContainer.removeAttribute("hidden"),window.pmc_jwplayer&&window.pmc_jwplayer(this.playerUI.jwplayerContainer).setup({playlist:t,aspectratio:"16:9"}).play()}handleTriggerClick(t,e){t.preventDefault();let i=this.state.videoType;this.state.videoType=e.dataset.videoShowcaseType,this.state.videoID=e.dataset.videoShowcaseTrigger,this.resetPlayer(i),this.playVideo(this.state.videoID,this.state.videoType),this.updatePlayerUI(this.state.videoID),this.onFirstTimePlay()}playVideo(t,e){let i=this.returnUrl(t,e);"youtube"===e&&this.playYoutube(i),"jwplayer"===e&&this.playJW(i)}onFirstTimePlay(){!1===this.state.isPlayerSetup&&(this.elementsToHide.forEach(t=>t.setAttribute("hidden","")),this.attributesToRemoveFromPlayer.forEach(t=>this.player.parentNode.removeAttribute(t)),this.state.isPlayerSetup=!0)}updatePlayerUI(t){const e=this.el.querySelector(`[data-video-showcase-trigger="${t}"]`),i=this.getPlayerCardData(e);this.setActiveTrigger(t),this.updatePlayerCardData(e,i)}resetPlayer(t){"jwplayer"===t&&window.pmc_jwplayer&&(window.pmc_jwplayer("jwplayerContainer").remove(),this.playerUI.jwplayerContainer.setAttribute("hidden","")),"youtube"===t&&(this.playerUI.iframe.setAttribute("src",""),this.playerUI.iframe.setAttribute("hidden",""))}resetAllTriggers(){this.triggers.forEach(t=>t.classList.remove("is-playing"))}setActiveTrigger(t){let e=this.el.querySelector(`[data-video-showcase-trigger="${t}"]`);this.resetAllTriggers(),null!==e&&e.classList.add("is-playing")}}document.addEventListener("DOMContentLoaded",()=>{n(),[...document.querySelectorAll(".js-Flickity")].forEach(t=>{let e=t.classList.contains("js-Flickity--isContained"),i=t.classList.contains("js-Flickity--isFreeScroll"),s=t.classList.contains("js-Flickity--isWrapAround");return new r.a(t,{cellSelector:".js-Flickity-cell",pageDots:!1,imagesLoaded:!0,groupCells:!0,contain:e,wrapAround:s,freeScroll:i,arrowShape:{x0:10,x1:60,y1:50,x2:65,y2:45,x3:20}})}),function(){const t=[...document.querySelectorAll("[data-video-showcase]")];t.length&&t.forEach(t=>t.pmcVideoShowcase=new a(t))}()})}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@penskemediacorp/larva-js",
-	"version": "0.6.0",
+	"version": "0.7.5",
 	"description": "Larva JS patterns.",
 	"author": "laras126 <laras126@gmail.com>",
 	"homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -26,5 +26,5 @@
 		"webpack": "^4.43.0",
 		"webpack-cli": "^3.3.12"
 	},
-	"gitHead": "a1bb1fceaf6aa39eb3a0f2730f11821f02dcca00"
+	"gitHead": "d584b033ef39d9be9279eab5b499528b5ab130e7"
 }

package/src/interface/ExpandableSearch/ExpandableSearch.js

@@ -0,0 +1,63 @@
+export default class ExpandableSearch {
+	constructor(el) {
+		this.el = el;
+		this.isOpen = false;
+		this.trigger = this.el.querySelector('.js-ExpandableSearch-trigger');
+		this.target = this.el.querySelector('.js-ExpandableSearch-target');
+		this.targetInput = this.target.querySelector('input');
+
+		this.trigger.addEventListener('click', () => {
+			this.toggleSearch();
+		});
+
+		// TODO: remove these event listeners when search is closed.
+
+		// Collapse search on ESC.
+		document.addEventListener('keydown', (e) => {
+			if (27 === e.keyCode) {
+				this.collapseSearch();
+			}
+		});
+
+		// Collapse search on body click, outside of search el.
+		document.body.addEventListener('click', (e) => {
+			if (!this.el.contains(e.target)) {
+				this.collapseSearch();
+			}
+		});
+
+		// Collapse search when focus leaves search el.
+		document.addEventListener('focusin', () => {
+			// eslint-disable-next-line @wordpress/no-global-active-element
+			if (!this.el.contains(document.activeElement) && this.isOpen) {
+				this.collapseSearch();
+			}
+		});
+	}
+
+	updateState() {
+		this.isOpen = this.isOpen ? false : true;
+	}
+
+	toggleSearch() {
+		this.target.toggleAttribute('hidden');
+		this.target.classList.toggle('js-fade-is-out');
+		this.target.classList.toggle('js-fade-is-in');
+		this.trigger.classList.toggle('is-ExpandableSearch-open');
+
+		this.updateState();
+
+		// Switch focus to input if it is opened
+		if (this.isOpen) {
+			this.targetInput.focus();
+		}
+	}
+
+	// Switch focus back to trigger when search is closed.
+	collapseSearch() {
+		if (this.isOpen) {
+			this.toggleSearch();
+			this.trigger.focus();
+		}
+	}
+}

package/src/interface/ExpandableSearch/index.js

@@ -0,0 +1,9 @@
+import ExpandableSearch from './ExpandableSearch.js';
+
+export default function initExpandableSearch() {
+	const searches = [...document.querySelectorAll('.js-ExpandableSearch')];
+
+	searches.forEach((el) => {
+		return new ExpandableSearch(el);
+	});
+}

package/src/interface/Header/Header.js

@@ -0,0 +1,124 @@
+// Copied from Vibe
+export default class Header {
+	constructor(el) {
+		this.el = el;
+		this.el.pmcHeader = this;
+		this.container = document.documentElement;
+
+		this.initSticky();
+
+		// Uncomment when ready to work on search.
+		this.initSearch();
+	}
+
+	destroy() {
+		this.destroySticky();
+
+		this.destroySearch();
+		delete this.el.pmcHeader;
+	}
+
+	get stickyClass() {
+		return this.el.dataset.headerStickyClass || 'is-sticky';
+	}
+
+	get readyClass() {
+		return this.el.dataset.headerReadyClass || 'is-header-ready';
+	}
+
+	get searchClass() {
+		return this.el.dataset.headerSearchClass || 'is-search-expanded';
+	}
+
+	initSticky() {
+		if (window.IntersectionObserver) {
+			this.observerOptions = {
+				root: null,
+				rootMargin: '350px',
+				threshold: [1.0],
+			};
+
+			this.toggleSticky = this.toggleSticky.bind(this);
+
+			// eslint-disable-next-line no-undef
+			this.observer = new IntersectionObserver(
+				this.toggleSticky,
+				this.observerOptions
+			);
+			this.observer.observe(this.el);
+
+			// Delay the initialization of the transition effects on the header.
+			this.container.classList.add(this.readyClass);
+		}
+	}
+
+	destroySticky() {
+		if (window.IntersectionObserver) {
+			this.observer.disconnect();
+			this.container.classList.remove(this.stickyClass, this.readyClass);
+		}
+	}
+
+	toggleSticky(entries) {
+		if (window.IntersectionObserver) {
+			entries.forEach((entry) => {
+				const ratio = entry.intersectionRatio;
+
+				if (1 === ratio) {
+					this.container.classList.remove(this.stickyClass);
+				} else if (1 > ratio) {
+					this.container.classList.add(this.stickyClass);
+				}
+			});
+		}
+	}
+
+	initSearch() {
+		// TODO: Note to @Lara Schenck that this should be updated to be a class, probably
+		this.searchTrigger = this.el.querySelector(
+			'[data-header-search-trigger]'
+		);
+
+		if (null === this.searchTrigger) {
+			return;
+		}
+
+		this.expandSearch = this.expandSearch.bind(this);
+		this.collapseSearch = this.collapseSearch.bind(this);
+		this.searchTrigger.addEventListener('click', this.expandSearch);
+	}
+
+	destroySearch() {
+		document.body.removeEventListener('click', this.collapseSearch);
+		this.searchTrigger.removeEventListener('click', this.expandSearch);
+		this.container.classList.remove(this.searchClass);
+	}
+
+	expandSearch(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.container.classList.add(this.searchClass);
+
+		this.searchTrigger.removeEventListener('click', this.expandSearch);
+
+		// Delay new event listener set up to prevent immediate search form collapsing.
+		setTimeout(
+			() => document.body.addEventListener('click', this.collapseSearch),
+			1
+		);
+	}
+
+	collapseSearch(e) {
+		// Do not collapse if the search form element was clicked.
+		if (
+			e.target === this.searchTrigger ||
+			this.searchTrigger.contains(e.target)
+		) {
+			return;
+		}
+
+		this.container.classList.remove(this.searchClass);
+		this.searchTrigger.addEventListener('click', this.expandSearch);
+		document.body.removeEventListener('click', this.collapseSearch);
+	}
+}

package/src/interface/Header/index.js

@@ -0,0 +1,7 @@
+import Header from './Header.js';
+
+export default function initHeader() {
+	// TODO: For Lara, This maybe should be turned into a class
+	const headers = [...document.querySelectorAll('.js-Header')];
+	headers.forEach((el) => (el.pmcHeader = new Header(el)));
+}

package/src/interface/VideoShowcase/VideoShowcase.js

@@ -220,27 +220,15 @@ export default class VideoShowcase {
 	 *
 	 * @param {string} jwplayerUrl - A Youtube embed URL from returnUrl.
 	 */
-	playJW( jwplayerUrl ) {
-		/* eslint-disable */
-		let custom_jwplayer = '';
+	playJW( playlistUrl ) {
 
 		this.playerUI.jwplayerContainer.removeAttribute( 'hidden' );
 
-		if ( window.jwplayer ) {
-			custom_jwplayer = window.jwplayer( this.playerUI.jwplayerContainer ).setup({
-				'playlist': jwplayerUrl,
+		if ( window.pmc_jwplayer ) {
+			window.pmc_jwplayer( this.playerUI.jwplayerContainer ).setup({
+				'playlist': playlistUrl,
 				'aspectratio': '16:9'
-			});
-
-			if ( 'object' === typeof pmc_video_ads && 'function' === typeof pmc_video_ads.setup_jwplayer ) {
-				pmc_video_ads.setup_jwplayer( this.playerUI.jwplayerContainer.id );
-			}
-
-			if ( 'undefined' !== typeof( window.pmc_ga_jwplayer ) && 'function' === typeof( window.pmc_ga_jwplayer.setup_tracking_by_object ) ) {
-				window.pmc_ga_jwplayer.setup_tracking_by_object( this.playerUI.jwplayerContainer );
-			}
-
-			custom_jwplayer.play();
+			}).play();
 
 		}
 
@@ -325,8 +313,8 @@ export default class VideoShowcase {
 	 */
 	resetPlayer( pastType ) {
 
-		if ( 'jwplayer' === pastType && window.jwplayer ) {
-			window.jwplayer( 'jwplayerContainer' ).remove();
+		if ( 'jwplayer' === pastType && window.pmc_jwplayer ) {
+			window.pmc_jwplayer( 'jwplayerContainer' ).remove();
 			this.playerUI.jwplayerContainer.setAttribute( 'hidden', '' );
 		}