@penskemediacorp/larva-js 1.45.1 → 1.46.1

package/build/video-showcase.js

@@ -23,4 +23,4 @@
  * Unidragger v2.4.0
  * 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("[data-video-showcase-jwplayer], #jwplayerContainer"),social:t.querySelector("[data-video-showcase-player-social-share]"),connatixContainer:t.querySelector("[data-video-showcase-connatix]"),player:t.querySelector("[data-video-player-id]")},this.init(),this.player.dataset.videoShowcaseAutoplay?this.handleTriggerClick(null,this.triggers[0]):(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){this.playerUI.title&&e.title&&(this.playerUI.title.innerText=e.title),this.playerUI.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`:"twitch"===e?"https://player.twitch.tv/?video="+t:"connatix"===e?t: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")}playConnatix(t,e){this.playerUI.connatixContainer.removeAttribute("hidden");const i=this.playerUI.connatixContainer.getAttribute("id");(new Image).src="https://capi.elements.video/tr/si?token=094029a3-814c-41d5-8a62-2c3adc647176&cid=1ffe63de-eb53-11e9-b4d2-06948452ae1a",cnx.cmd.push((function(){cnx({playerId:e,mediaId:t}).render(i)}))}playTwitch(t){this.playerUI.iframe.removeAttribute("hidden"),this.playerUI.iframe.setAttribute("src",`${t}&autoplay=true&parent=${window.location.hostname}`)}playJW(t){this.playerUI.jwplayerContainer.removeAttribute("hidden"),window.pmc_jwplayer&&window.pmc_jwplayer(this.playerUI.jwplayerContainer.id).setup({playlist:t,aspectratio:"16:9"}).play()}handleTriggerClick(t,e){t&&t.preventDefault();const 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){const i=this.returnUrl(t,e);if("youtube"===e&&this.playYoutube(i),"jwplayer"===e&&this.playJW(i),"twitch"===e&&this.playTwitch(i),"connatix"===e){const t=this.playerUI.player.dataset.videoPlayerId;this.playConnatix(i,t)}}onFirstTimePlay(){!1===this.state.isPlayerSetup&&(this.el.dispatchEvent(new CustomEvent("firstVideoPlay")),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){const 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=>{const e=t.classList.contains("js-Flickity--isContained"),i=t.classList.contains("js-Flickity--isFreeScroll"),s=t.classList.contains("js-Flickity--isWrapAround"),n=t.classList.contains("js-Flickity--pageDots");return new r.a(t,{cellSelector:".js-Flickity-cell",pageDots:n,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,playerID:"",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("[data-video-showcase-jwplayer], #jwplayerContainer"),social:t.querySelector("[data-video-showcase-player-social-share]"),connatixContainer:t.querySelector("[data-video-showcase-connatix]"),player:t.querySelector("[data-video-player-id]")},this.init(),this.player.dataset.videoShowcaseAutoplay?this.handleTriggerClick(null,this.triggers[0]):(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,e){let i="";i="connatix"===t?e.dataset.videoMediaId:e.dataset.videoShowcaseTrigger;const s=this.state.hasSocialShare;return{title:e.dataset.videoShowcaseTitle,sponsored:e.dataset.videoShowcaseSponsored,dek:e.dataset.videoShowcaseDek,permalink:e.dataset.videoShowcasePermalink,socialString:function(t){if(window.wp&&s){return wp.template("trigger-social-share-"+i)(void 0)}}()}}updatePlayerCardData(t,e){this.playerUI.title&&e.title&&(this.playerUI.title.innerText=e.title),this.playerUI.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`:"twitch"===e?"https://player.twitch.tv/?video="+t:"connatix"===e?t: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")}playConnatix(t,e){this.playerUI.connatixContainer.removeAttribute("hidden");const i=this.playerUI.connatixContainer.getAttribute("id");(new Image).src="https://capi.elements.video/tr/si?token=094029a3-814c-41d5-8a62-2c3adc647176&cid=1ffe63de-eb53-11e9-b4d2-06948452ae1a",cnx.cmd.push((function(){cnx({playerId:e,mediaId:t}).render(i)}))}playTwitch(t){this.playerUI.iframe.removeAttribute("hidden"),this.playerUI.iframe.setAttribute("src",`${t}&autoplay=true&parent=${window.location.hostname}`)}playJW(t){this.playerUI.jwplayerContainer.removeAttribute("hidden"),window.pmc_jwplayer&&window.pmc_jwplayer(this.playerUI.jwplayerContainer.id).setup({playlist:t,aspectratio:"16:9"}).play()}handleTriggerClick(t,e){if(t&&t.preventDefault(),"object"!=typeof e)return!1;const i=this.state.videoType;this.resetPlayer(i),this.state.videoType=e.dataset.videoShowcaseType,"connatix"===e.dataset.videoShowcaseType?(this.state.videoID=e.dataset.videoMediaId,this.state.playerID=e.dataset.videoPlayerId):this.state.videoID=e.dataset.videoShowcaseTrigger,this.playVideo(this.state),this.updatePlayerUI(this.state),this.onFirstTimePlay()}playVideo(t){const e=this.returnUrl(t.videoID,t.videoType);if("youtube"===t.videoType&&this.playYoutube(e),"jwplayer"===t.videoType&&this.playJW(e),"twitch"===t.videoType&&this.playTwitch(e),"connatix"===t.videoType){const t=this.playerUI.player.dataset.videoPlayerId;this.playConnatix(e,t)}}onFirstTimePlay(){!1===this.state.isPlayerSetup&&(this.el.dispatchEvent(new CustomEvent("firstVideoPlay")),this.elementsToHide.forEach(t=>t.setAttribute("hidden","")),this.attributesToRemoveFromPlayer.forEach(t=>this.player.parentNode.removeAttribute(t)),this.state.isPlayerSetup=!0)}updatePlayerUI(t){let e="";e="connatix"===t.videoType?this.el.querySelector(`[data-video-media-id="${t.videoID}"]`):this.el.querySelector(`[data-video-showcase-trigger="${t.videoID}"]`);const i=this.getPlayerCardData(t.videoType,e);this.setActiveTrigger(t.videoType,t.videoID),this.updatePlayerCardData(e,i)}resetPlayer(t){if("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","")),"connatix"===t){const t=document.getElementsByClassName("cnx-main-container");for(;t.length>0;)t[0].parentNode.removeChild(t[0])}}resetAllTriggers(){this.triggers.forEach(t=>t.classList.remove("is-playing"))}setActiveTrigger(t,e){let i="";i="connatix"===t?this.el.querySelector(`.related-videos [data-video-media-id="${e}"]`):this.el.querySelector(`[data-video-showcase-trigger="${e}"]`),this.resetAllTriggers(),null!==i&&i.classList.add("is-playing")}}document.addEventListener("DOMContentLoaded",()=>{n(),[...document.querySelectorAll(".js-Flickity")].forEach(t=>{const e=t.classList.contains("js-Flickity--isContained"),i=t.classList.contains("js-Flickity--isFreeScroll"),s=t.classList.contains("js-Flickity--isWrapAround"),n=t.classList.contains("js-Flickity--pageDots");return new r.a(t,{cellSelector:".js-Flickity-cell",pageDots:n,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": "1.45.1",
+	"version": "1.46.1",
 	"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": "9ca3eb7c6bdd48db16f6c4dc10eb0a929221109e"
+	"gitHead": "05fa633c002f8636bf93235d4f05e456047dc92f"
 }

package/src/interface/VideoShowcase/VideoShowcase.js

@@ -59,6 +59,7 @@ export default class VideoShowcase {
 		this.state = {
 			isPlayerSetup: false,
 			hasSocialShare: false,
+			playerID: '',
 			videoID: '',
 			videoType: '',
 		};
@@ -91,7 +92,7 @@ export default class VideoShowcase {
 			connatixContainer: el.querySelector(
 				'[data-video-showcase-connatix]'
 			),
-			player: el.querySelector('[data-video-player-id]'),
+			player: el.querySelector( '[data-video-player-id]' ),
 		};
 
 		this.init();
@@ -127,7 +128,8 @@ export default class VideoShowcase {
 	 * to the main player card. These are all strings from data attributes except the
 	 * social share, which replaces an entire block of HTML.
 	 *
-	 * @param {element} el - A trigger.
+	 * @param {element} type - Video type.
+	 * @param {element} el   - A trigger.
 	 *
 	 * @return {Object} - An object containing the data needed to update the player.
 	 * @property {string} title - Title text from the `data-video-showcase-title`
@@ -136,8 +138,13 @@ export default class VideoShowcase {
 	 * @property {string} socialString - HTML string returned from wp.template.
 	 */
 
-	getPlayerCardData( el ) {
-		const triggerID = el.dataset.videoShowcaseTrigger;
+	getPlayerCardData( type, el ) {
+		let triggerID = '';
+		if ( 'connatix' === type ) {
+			triggerID = el.dataset.videoMediaId;
+		} else {
+			triggerID = el.dataset.videoShowcaseTrigger;
+		}
 		const hasSocialShare = this.state.hasSocialShare;
 
 		return {
@@ -161,8 +168,8 @@ export default class VideoShowcase {
 	 *
 	 * Apply the assembled data to the UI.
 	 *
-	 * @param {element} el - A trigger.
-	 * @param {Object} data - An object of data from getPlayerCardData.
+	 * @param {element} el  - A trigger.
+	 * @param {Object}  data - An object of data from getPlayerCardData.
 	 */
 
 	updatePlayerCardData( el, data ) {
@@ -207,8 +214,8 @@ export default class VideoShowcase {
 	 *
 	 * Return an embed URL with the video ID based on the type of video.
 	 *
-	 * @param {string} id - ID of the video e.g. f1FX5wvC3DA
-	 * @param {string} type - "youtube" or "jwplayer"
+	 * @param {string} id   - ID of the video e.g. f1FX5wvC3DA
+	 * @param {string} type - Video type.
 	 */
 	returnUrl( id, type ) {
 		if ( 'youtube' === type ) {
@@ -223,7 +230,7 @@ export default class VideoShowcase {
 			return `https://player.twitch.tv/?video=${ id }`;
 		}
 
-		if ('connatix' === type) {
+		if ( 'connatix' === type ) {
 			return id;
 		}
 	}
@@ -244,10 +251,10 @@ export default class VideoShowcase {
 	/**
 	 * Remove hidden attribute from the iframe and set the src.
 	 *
-	 * @param {string} id       - A copnnatix media id.
-	 * @param {string} playerId - Id of player.
+	 * @param {string} mediaId  - Connatix media id.
+	 * @param {string} playerId - Connatix player id.
 	 */
-	playConnatix(id, playerId) {
+	playConnatix( mediaId, playerId ) {
 		this.playerUI.connatixContainer.removeAttribute('hidden');
 		const eleId = this.playerUI.connatixContainer.getAttribute('id');
 		// eslint-disable-next-line no-undef
@@ -258,7 +265,7 @@ export default class VideoShowcase {
 			// eslint-disable-next-line no-undef
 			cnx({
 				playerId,
-				mediaId: id,
+				mediaId,
 			}).render(eleId);
 		});
 	}
@@ -315,13 +322,21 @@ export default class VideoShowcase {
 			e.preventDefault();
 		}
 
-		const previousVideoType = this.state.videoType;
-		this.state.videoType = el.dataset.videoShowcaseType;
-		this.state.videoID = el.dataset.videoShowcaseTrigger;
+		if ( 'object' !== typeof el ) {
+			return false;
+		}
 
+		const previousVideoType = this.state.videoType;
 		this.resetPlayer( previousVideoType );
-		this.playVideo( this.state.videoID, this.state.videoType );
-		this.updatePlayerUI( this.state.videoID );
+		this.state.videoType = el.dataset.videoShowcaseType;
+		if ( 'connatix' === el.dataset.videoShowcaseType ) {
+			this.state.videoID = el.dataset.videoMediaId;
+			this.state.playerID = el.dataset.videoPlayerId;
+		} else {
+			this.state.videoID = el.dataset.videoShowcaseTrigger;
+		}
+		this.playVideo( this.state );
+		this.updatePlayerUI( this.state );
 		this.onFirstTimePlay();
 	}
 
@@ -330,27 +345,26 @@ export default class VideoShowcase {
 	 *
 	 * A wrapper function to conditonally play videos according to their type.
 	 *
-	 * @param {string} id - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
-	 * @param {string} type - "youtube" or "jwplayer" or "twitch"
+	 * @param {Object} state - Includes Video ID, Player ID and Video type.
 	 */
-	playVideo( id, type ) {
-		const url = this.returnUrl( id, type );
+	playVideo( state ) {
+		const url = this.returnUrl( state.videoID, state.videoType );
 
-		if ( 'youtube' === type ) {
+		if ( 'youtube' === state.videoType ) {
 			this.playYoutube( url );
 		}
 
-		if ( 'jwplayer' === type ) {
+		if ( 'jwplayer' === state.videoType ) {
 			this.playJW( url );
 		}
 
-		if ( 'twitch' === type ) {
+		if ( 'twitch' === state.videoType ) {
 			this.playTwitch( url );
 		}
 
-		if ('connatix' === type) {
+		if ( 'connatix' === state.videoType ) {
 			const playerId = this.playerUI.player.dataset.videoPlayerId;
-			this.playConnatix(url, playerId);
+			this.playConnatix( url, playerId );
 		}
 	}
 
@@ -374,15 +388,22 @@ export default class VideoShowcase {
 	 *
 	 * Replace the title and dek elements and mark the active trigger.
 	 *
-	 * @param {string} id - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
+	 * @param {string} state - Includes Video ID, Player ID and Video type.
 	 */
-	updatePlayerUI( id ) {
-		const clickedTrigger = this.el.querySelector(
-			`[data-video-showcase-trigger="${ id }"]`
-		);
-		const data = this.getPlayerCardData( clickedTrigger );
+	updatePlayerUI( state ) {
+		let clickedTrigger = '';
+		if ( 'connatix' === state.videoType ) {
+			clickedTrigger = this.el.querySelector(
+				`[data-video-media-id="${ state.videoID }"]`
+			);
+		} else {
+			clickedTrigger = this.el.querySelector(
+				`[data-video-showcase-trigger="${ state.videoID }"]`
+			);
+		}
+		const data = this.getPlayerCardData( state.videoType, clickedTrigger );
 
-		this.setActiveTrigger( id );
+		this.setActiveTrigger( state.videoType, state.videoID );
 		this.updatePlayerCardData( clickedTrigger, data );
 	}
 
@@ -407,6 +428,14 @@ export default class VideoShowcase {
 			this.playerUI.iframe.setAttribute( 'src', '' );
 			this.playerUI.iframe.setAttribute( 'hidden', '' );
 		}
+
+		if ( 'connatix' === pastType ) {
+			const elements =
+				document.getElementsByClassName( 'cnx-main-container' );
+			while (elements.length > 0) {
+				elements[0].parentNode.removeChild( elements[0] );
+			}
+		}
 	}
 
 	// Remove `is-playing` class from all triggers.
@@ -417,12 +446,20 @@ export default class VideoShowcase {
 	/**
 	 * Reset triggers and mark the current active trigger.
 	 *
-	 * @param {string} id - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
+	 * @param {string} type - Type of Video.
+	 * @param {string} id   - Youtube or JWplayer ID, should be from this.state.videoID, e.g. f1FX5wvC3DA
 	 */
-	setActiveTrigger( id ) {
-		const trigger = this.el.querySelector(
-			`[data-video-showcase-trigger="${ id }"]`
-		);
+	setActiveTrigger( type, id ) {
+		let trigger = '';
+		if( 'connatix' === type ) {
+			trigger = this.el.querySelector(
+				`.related-videos [data-video-media-id="${ id }"]`
+			);
+		} else {
+			trigger = this.el.querySelector(
+				`[data-video-showcase-trigger="${ id }"]`
+			);
+		}
 
 		this.resetAllTriggers();