Skip to content

Instantly share code, notes, and snippets.

@neodigm

neodigm/zoom.html

Last active December 6, 2020 18:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neodigm/1dae3abec65217f70528693217de16a9 to your computer and use it in GitHub Desktop.
Save neodigm/1dae3abec65217f70528693217de16a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zoom.html
var sMU_dt , sMU_mob; // LTDC PDP Exp Col Jan S3
sMU_mob = `
<span class="hero__container"
:class="{'hidden' : isPlayingVideo }">
<aside class="hero-sm__pre--aside">
<section id="js-flick__hero--id" :class="{'vis_hide' : !bFlickHero, 'vis_show' : bFlickHero }">
<div id="js-flickHero--id" class="hero__container--flick">
<article class="flickhero__cell" v-for="(fh, nOrder) in aFlickHero">
<img class="hero__image" :src="fh.img" alt="Hero Image">
</article>
<span :class="{'hidden' : !isExclusive }">
<p class="quicker__excl quicker__excl--lsc brand--lsc__show">LAKESIDE EXCLUSIVE</p>
<p class="quicker__excl quicker__excl--ltd brand--ltd__show">LTD EXCLUSIVE</p>
<p class="quicker__excl quicker__excl--ff brand--ff__show">FRESH FINDS EXCLUSIVE</p>
</span>
</div>
</section>
</aside>
</span>
<span class="l-HeroZoom-Mob">
<span ref="HeroZoom-Mob__tap" class="HeroZoom-Mob__tap"></span>
</span>
`;
sMU_dt = `
<section class="l-HeroZoom-Cntr">
<a :href="selectedHero" class="l-HeroZoom"
@click.pevent="doHeroClick"
@mousemove="doHeroMouseMove" @mouseenter="doHeroMouseEnter" @mouseout="doHeroMouseOut">
<section>
<img ref="img_HeroZoom_bg" :src="selectedHero" :alt="selectedAlt">
<div>
<img ref="img_HeroZoom" :src="selectedHero">
</div>
</section>
</a>
<a class="HeroZoom-Cntr__link" role="button" tabindex="0"
@click.pevent="doHeroClick">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 24 24" fill="686868" width="18px" height="18px"
focusable="false" tabindex="-1" aria-hidden="true" aria-disabled="true"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.78 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.26 4.25c.41.41 1.07.41 1.48 0l.01-.01c.41-.41.41-1.07 0-1.48L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm0-7c-.28 0-.5.22-.5.5V9H7.5c-.28 0-.5.22-.5.5s.22.5.5.5H9v1.5c0 .28.22.5.5.5s.5-.22.5-.5V10h1.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H10V7.5c0-.28-.22-.5-.5-.5z"/></svg>
Click to Zoom</a>
</section>
<ltdc-reveal ref="pdp_zoom_reveal" class="l-reveal reveal__init reveal-cta">
<section id="pdp_zoom_reveal" class="reveal-modal reveal__box"
data-reveal aria-hidden="true">
<a class="close-reveal-modal resp_x"
aria-label="Close"
style="border: 1px dashed #686868;line-height: .8;margin-top: 8px;z-index: 256;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="32px" height="32px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>
</a>
<div class="l-HeroZoom-Revl">
<section
:class="{'hidden' : isPlayingVideo }">
<section class="HeroZoom-Revl__img-cont">
<img ref="img_HeroZoom_bgRv" class="HeroZoom-Revl__img-bg" :src="selectedHero" :alt="selectedAlt"
@mouseenter="doHeroMouseEnterRv" @mousemove="doHeroMouseMoveRv" @mouseout="doHeroMouseOutRv">
</section>
<div>
<img ref="img_HeroZoomRv" :src="selectedHero">
</div>
</section>
<section class="HeroZoom-Revl__vid"
:class="{'hidden' : !isPlayingVideo }">
<video v-if="isPlayingVideo" poster="/images/video_poster.jpg" controls>
<source :src="(isPlayingVideo) ? jResponse.productVideo: ''" type="video/mp4">
<source :src="(isPlayingVideo) ? jResponse.productVideo.replace('.mp4','.ogv'): ''" type="video/ogg">
<source :src="(isPlayingVideo) ? jResponse.productVideo.replace('.mp4','.webm'): ''" type="video/webm">
Your browser does not support the video tag.
</video>
</section>
<section class="HeroZoom-Revl__tn">
<aside :style="{width: aThumbnails3.length * 110 + 'px'}">
<a v-for="(th, nOrder) in aThumbnails3">
<img :src="th.img" :alt="th.alt" :title="th.alt"
@click.prevent="selectSKU( th.sku, th.img, th.pers )">
</a>
</aside>
</section>
</div>
</section>
</ltdc-reveal>
<ltdc-reveal ref="pdp_zoom_mob" class="l-reveal reveal__init reveal-cta">
<section id="pdp_zoom_mob" class="reveal-modal reveal__box"
data-reveal aria-hidden="true">
<a class="close-reveal-modal resp_x"
aria-label="Close"
style="border: 1px dashed #686868;line-height: .8;margin-top: 8px;z-index: 256;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="32px" height="32px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>
</a>
<div class="l-HeroZoom-Revl-mob">
<section
:class="{'hidden' : isPlayingVideo }">
<section class="HeroZoom-mob__img-cont">
<img ref="img_HeroZoom_mob" class="HeroZoom-mob__img-bg" :src="selectedHero" :alt="selectedAlt"
@mousedown="doHeroMobMouseDown" @mouseup="doHeroMobMouseUp"
@pointerdown ="doHeroMobPointDown"
@pointermove ="doHeroMobPointMove"
@pointerup ="doHeroMobPointUp"
@pointercancel ="doHeroMobPointUp"
@pointerout ="doHeroMobPointUp"
@pointerleave ="doHeroMobPointUp">
</section>
</section>
<section class="HeroZoom-Revl__vid"
:class="{'hidden' : !isPlayingVideo }">
<video v-if="isPlayingVideo" poster="/images/video_poster.jpg" controls>
<source :src="(isPlayingVideo) ? jResponse.productVideo: ''" type="video/mp4">
<source :src="(isPlayingVideo) ? jResponse.productVideo.replace('.mp4','.ogv'): ''" type="video/ogg">
<source :src="(isPlayingVideo) ? jResponse.productVideo.replace('.mp4','.webm'): ''" type="video/webm">
Your browser does not support the video tag.
</video>
</section>
<span style="postion: absolute; overflow: hidden;">
<section class="HeroZoom-Revl__tn">
<aside :style="{width: aThumbnails3.length * 94 + 'px'}">
<a v-for="(th, nOrder) in aThumbnails3">
<img :src="th.img" :alt="th.alt" :title="th.alt"
@click.prevent="selectSKU( th.sku, th.img, th.pers )">
</a>
</aside>
</section>
</span>
</div>
</section>
<button class="HeroZoom-btn HeroZoom-btn--prev"
@click.prevent="doSKUNav( -1 )">
<svg focusable="false" viewBox="0 0 28 28" role="img" aria-label="Previous Slide"><title>Previous Slide</title>
<path d="M11.5 21.5a.47.47 0 01-.35-.15.48.48 0 010-.7L17.79 14l-6.64-6.65a.49.49 0 01.7-.7l7 7a.48.48 0 010 .7l-7 7a.47.47 0 01-.35.15z"></path>
</svg>
</button>
<button class="HeroZoom-btn HeroZoom-btn--next"
@click.prevent="doSKUNav( 1 )">
<svg focusable="false" viewBox="0 0 28 28" role="img" aria-label="Next Slide"><title>Next Slide</title>
<path d="M11.5 21.5a.47.47 0 01-.35-.15.48.48 0 010-.7L17.79 14l-6.64-6.65a.49.49 0 01.7-.7l7 7a.48.48 0 010 .7l-7 7a.47.47 0 01-.35.15z"></path>
</svg>
</button>
</ltdc-reveal>
`;
var doReplace = function(_d, _q, _mu){
var eR = _d.querySelector( _q );
if( eR ){
eR.outerHTML = _mu;
return true;
}
return false;
}
if( doReplace( document, "#js-z__cont", sMU_dt ) ){
if( doReplace( document, ".hero__container", sMU_mob ) ){
setTimeout(()=>{ holdfast(); }, 2000);
}
}
//document.querySelectorAll(".sku-pers__instruct--1")[0].outerHTML = sMU_dt;
//document.querySelectorAll(".sku-pers__instruct--1")[1].outerHTML = sMU_dt;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment