File: /apps/sni-foundation/components/photoGallery/slide/slideTemplate.html
<template data-sly-template.slideTemplate="${@ slide, slidesCount, clickthru}"
data-sly-use.context="sni.models.Context"
data-sly-use.productTemplate="productTemplate.html"
>
<!--/* add the hx- attributes on the slide that triggers loading more */-->
<div
data-sly-unwrap="${!clickthru}"
class="gallery-controller"
hx-target="closest .slide"
hx-swap="outerHTML" >
<div
role="button"
class="gallery-controller__button gallery-controller__button--left ${pageProperties['optimizelyIsEnabled'] || context.optimizelyIsEnabled ? 'isHiddenForOptimizely' : ''}"
data-sly-test="${clickthru && slide.previousOne}"
hx-trigger="click, keydown[key==='ArrowLeft'] from:window"
preload="preload:init"
preload-images="true"
hx-get="${slide.previousOne}?mode=clickthru"
>
<svg width="51px" height="51px"><use href="#previous-slide"></use></svg>
</div>
<div class="slide-image-container">
<div class="slide-image"
style="aspect-ratio: ${slide.image.allAttributes['sni23col']['width'] @ context='attribute'}/${slide.image.allAttributes['sni23col']['height'] @ context='attribute'}; height: ${clickthru ? slide.image.allAttributes['sni23col']['height'] : '' @context='attribute'}px">
<div data-sly-test="${clickthru && !slide.isLastSlide}" class="loading-next-slide-indicator">
<div class="a-Loader"> <div></div> <div></div> <div></div> <div></div> </div>
</div>
<img
src="${context.isMobile ? slide.image.rendition['sni18col'] : slide.image.rendition['sni23col']}"
data-sly-attribute="${context.isMobile ? slide.image.allAttributes['sni18col'] : slide.image.allAttributes['sni23col']}"
loading="${slide.num == '1' || clickthru ? 'eager' : 'lazy'}"
>
<a
target="_blank"
class="slide-image__pinterest"
role="button"
aria-label="pin it"
href="${slide.pinItLink.href}"
data-pinterest-link="true"
data-track-click="TXT||Save this image on Pinterest"
>
<svg width="44px" height="44px">
<use href="#pinterest-icon"></use>
</svg>
</a>
<div data-sly-test="${slide.hotspotJson}"
class="hotspotContainer"
style="aspect-ratio: ${slide.image.allAttributes['sni18col']['width'] @ context='attribute'}/${slide.image.allAttributes['sni18col']['height'] @ context='attribute'}">
<sly data-sly-list="${slide.hotspotMapList}">
<a class="hotspot"
href="${item['sponsorUrl']}"
data-sponsorUrl="${item['sponsorUrl']}"
data-sponsorLogo="${item['sponsorLogo']}"
data-title="${item['title']}"
data-image="${item['image']}"
data-caption="${item['caption']}"
data-url="${item['url']}"
data-hotspot-link="true"
style="position:absolute; left:${item['x'] @ context='attribute'}; top: ${item['y'] @ context='attribute'};"
data-track-click="Photo Gallery Hotspots:Hotspot Click"
>
</a>
</sly>
</div>
<div data-sly-test="${slide.hotspotJson}" class="toggle-hotspot" data-track-click="TXT||Hide">
<span class="toggle-text">Hide</span>
<span class="icon icon-circle"></span>
</div>
</div>
</div>
<div
role="button"
data-sly-test="${clickthru && slide.isFirstSlide && pageProperties.hasIntroduction}"
class="gallery-controller__button gallery-controller__button--enter"
>
<span class="enter-text">View The Gallery</span>
<svg width="51px" height="51px"><use href="#enter-gallery"></use></svg>
</div>
<div
role="button"
class="gallery-controller__button gallery-controller__button--right ${pageProperties['optimizelyIsEnabled'] || context.optimizelyIsEnabled ? 'isHiddenForOptimizely' : ''}"
data-sly-test="${clickthru && slide.nextOne}"
hx-trigger="click, keydown[key==='ArrowRight'] from:window"
preload="preload:init"
preload-images="true"
hx-get="${slide.nextOne}?mode=clickthru"
>
<svg width="51px" height="51px"><use href="#next-slide"></use></svg>
</div>
<div
role="button"
class="gallery-controller__button gallery-controller__button--right gallery-controller__button--last-slide"
data-sly-test="${clickthru && slide.isLastSlide}"
>
<svg width="51px" height="51px"><use href="#next-slide"></use></svg>
</div>
<div
role="button"
class="gallery-controller__button gallery-controller__button--next-gallery hidden"
data-sly-test="${clickthru && slide.isLastSlide}"
>
<span class="next-up-label">NEXT UP</span>
<div id="next-gallery" class="next-up-buttons">
</div>
<svg width="51px" height="51px"><use href="#next-gallery-icon"></use></svg>
</div>
<div data-sly-test="${clickthru && slide.isLastSlide}" id="loading-next-gallery">
<div class="a-Loader"> <div></div> <div></div> <div></div> <div></div> </div>
</div>
</div>
<div class="slide-body ${slide.isLastSlide ? 'slide-body--last':''}">
<div class="slide-body-text">
<div class="slide-body-top">
<div class="slide-credit">
<span data-sly-test="${slide.image.credit}">
Photo: ${slide.image.credit @ context='html'}${slide.image.copyright ? " ©" : '' @context='html'}${slide.image.attribution.authorList ? ".": ''}
</span>
<span data-sly-test="${slide.image.attribution.authorList}">
From:
<!-- If the following is broken into multiple lines, there's an additional unwanted white space between the items.
This seems to be the only way to get this working -->
<sly data-sly-repeat="${slide.image.attribution.authorList}">${itemList.middle ? ', ' : ''}${itemList.last && !itemList.first ? ' and ' : ''}<a data-sly-element="${item.profileLink ? 'a' : 'span'}" href="${item.profileLink}">${item.mainTitle}${itemList.last && slide.image.credit ? '.' : ''}</a></sly>
</span>
</div>
<div data-sly-test="${slide.num == '1'}" class="scroll-more-container">
<sly data-sly-use.icon="${'sni.models.view.Icon' @ type='arrow-scroll-hint'}">
<svg class="scroll-more-icon-arrow">
${icon.atom.markup @ context='unsafe'}
<use xlink:href="#arrow"></use>
</svg>
</sly>
<div>Scroll For More Photos</div>
</div>
<span class="slide-count-caption" data-sly-test="${slidesCount}">${slide.num} / ${slidesCount}</span>
</div>
<div class="slide-title-caption">
<h2 data-sly-test="${slide.title}" class="slide-title">${slide.title @ context='html'}</h2>
<div data-sly-test="${slide.caption}" class="slide-caption">
${slide.caption @context='html'}
</div>
</div>
</div>
<a data-sly-test="${slide.ctaLink}" href="${slide.ctaLink}" title="${slide.ctaTitle ? slide.ctaTitle : ''}"
class="slide-cta ${slide.isCtaLinkAProductUrl ? 'slide-product-link' : ''} ${slide.isCtaExactCase ? 'slide-cta-exact-case' : ''}" target="_blank" rel="${slide.isCtaLinkAProductUrl ? 'nofollow' : ''}"
data-track-click="${slide.ctaTitle ? slide.ctaTitle : ''}"
data-type="${slide.isCtaLinkAProductUrl ? 'product-link' : ''}"
>
${slide.ctaLabel}
</a>
<div data-sly-test="${slide.productList.size > 0}"
class="slide-products"
data-products="${slide.mdmProducts}"
data-partner="${slide.productPartner}"
>
<h3>${slide.productGroupTitle}</h3>
<sly data-sly-list="${slide.productList}">
<div data-sly-test="${itemList.index < 4}"
class="slide-product"
data-sly-call="${productTemplate.product @ item=item}">
</div>
</sly>
<button
data-sly-test="${slide.productList.size > 4}"
class="view-more-products"
hx-get="${slide.path}.products.html"
hx-target="closest .slide-products"
hx-swap="innerHTML"
>
View More
</button>
</div>
</div>
<!--/* Trigger a JS event the next mediastream link. */-->
<script data-sly-test="${!clickthru && slide.isLastSlide}">
//trigger the last-slide event on the first link that hasn't been loaded
var nextUp = document.querySelector(".next-galleries a:not([data-streamed])");
if (nextUp) {
nextUp.dataset.streamed = true;
nextUp.dispatchEvent(new CustomEvent("last-slide"));
}
</script>
</template>