https://www.rockymountainsoap.com/cdn/shop/t/509/assets/r-adaptive…?v=167921005226182664411790725216

1import{Component}from"@theme/component";import{SlideshowSelectEvent,ThemeEvents}from"@theme/events";const WORDMARK_SELECTOR=".r-header-statement-logo",ART_SELECTOR=".r-header-statement-logo__link",GALLERY_SELECTOR=".r-pdp-gallery slideshow-component",SCROLLER_SELECTOR="slideshow-slides",CURRENT_SLIDE_SELECTOR='slideshow-slide[aria-hidden="false"]',SLIDE_IMAGE_SELECTOR="img",ON_DARK="on-dark",ON_LIGHT="on-light",THUMB_SIZE=64,THUMB_CACHE_MAX=12,PAPER_LUMINANCE=.85,PAPER_SHARE_ENTER=.75,PAPER_SHARE_LEAVE=.6,ROWS=[.2,.5,.8],MAX_COLUMNS=7,thumbnails=new Map;class AdaptiveContrast extends Component{requiredRefs=[];#frame=null;#resizeTimer=null;#pendingWhileHidden=!1;connectedCallback(){super.connectedCallback(),addEventListener(SlideshowSelectEvent.eventName,this.#onSlide,{passive:!0}),addEventListener(ThemeEvents.variantUpdate,this.#schedule,{passive:!0}),addEventListener("load",this.#onLoad,{capture:!0,passive:!0}),addEventListener("resize",this.#onResize,{passive:!0}),document.addEventListener("visibilitychange",this.#onVisibilityChange),this.#schedule()}disconnectedCallback(){super.disconnectedCallback(),removeEventListener(SlideshowSelectEvent.eventName,this.#onSlide),removeEventListener(ThemeEvents.variantUpdate,this.#schedule),removeEventListener("load",this.#onLoad,{capture:!0}),removeEventListener("resize",this.#onResize),document.removeEventListener("visibilitychange",this.#onVisibilityChange),this.#frame!=null&&cancelAnimationFrame(this.#frame),this.#resizeTimer!=null&&clearTimeout(this.#resizeTimer)}get#wordmark(){return this.closest("header-component")?.querySelector(WORDMARK_SELECTOR)??null}get#gallery(){return document.querySelector(GALLERY_SELECTOR)}#onSlide=event=>{const gallery=this.#gallery;if(gallery&&event.target instanceof Node&&gallery.contains(event.target)){const slide=event.detail?.slide;this.#schedule(slide instanceof Element?slide:void 0)}};#onLoad=event=>{const gallery=this.#gallery;gallery&&event.target instanceof HTMLImageElement&&gallery.contains(event.target)&&this.#schedule()};#onResize=()=>{this.#resizeTimer!=null&&clearTimeout(this.#resizeTimer),this.#resizeTimer=setTimeout(()=>{this.#resizeTimer=null,this.#schedule()},100)};#onVisibilityChange=()=>{document.visibilityState!=="visible"||!this.#pendingWhileHidden||(this.#pendingWhileHidden=!1,this.#schedule())};#announcedSlide;#schedule=slide=>{if(slide instanceof Element&&(this.#announcedSlide=slide),this.#frame==null){if(document.visibilityState!=="visible"){this.#pendingWhileHidden=!0;return}this.#frame=requestAnimationFrame(()=>{this.#frame=null;const announced=this.#announcedSlide;this.#announcedSlide=void 0,this.#update(announced)})}};#update(announcedSlide){const wordmark=this.#wordmark;if(!wordmark)return;const art=wordmark.querySelector(ART_SELECTOR)??wordmark,gallery=this.#gallery,slide=announcedSlide?.isConnected?announcedSlide:currentSlide(gallery),image=slide?.querySelector(SLIDE_IMAGE_SELECTOR);if(!(image instanceof HTMLImageElement)){this.#write(wordmark,ON_DARK);return}const source=image.currentSrc||image.src;if(!source)return;const thumb=this.#thumbnail(source,image);if(!thumb)return;const markRect=art.getBoundingClientRect(),imageRect=landingRect(image,slide,gallery);if(markRect.width<=0||markRect.height<=0||imageRect.width<=0||imageRect.height<=0)return;const fit=getComputedStyle(image).objectFit,columns=clamp(Math.ceil(markRect.width/120),1,MAX_COLUMNS);let paper=0,total=0;for(const row of ROWS){const y=markRect.top+markRect.height*row;for(let i=0;i<columns;i++){const x=markRect.left+markRect.width*(columns===1?.5:.05+.9*i/(columns-1));if(total++,x<imageRect.left||x>imageRect.right||y<imageRect.top||y>imageRect.bottom){paper++;continue}const point=mapPointIntoSource(image,imageRect,fit,x,y);sampleLuminance(thumb,point)>=PAPER_LUMINANCE&&paper++}}const share=paper/total,threshold=wordmark.dataset.rContrast===ON_LIGHT?PAPER_SHARE_LEAVE:PAPER_SHARE_ENTER;this.#write(wordmark,share>=threshold?ON_LIGHT:ON_DARK)}#thumbnail(source,image){const cached=thumbnails.get(source);if(cached instanceof Uint8ClampedArray)return cached;if(cached)return null;const pending=decodeThumbnail(source).then(data=>(data?(thumbnails.size>=THUMB_CACHE_MAX&&thumbnails.delete(thumbnails.keys().next().value),thumbnails.set(source,data),image.isConnected&&(image.currentSrc||image.src)===source&&this.#schedule()):thumbn

1ails.delete(source),data));return thumbnails.set(source,pending),null}#write(wordmark,mode){wordmark.dataset.rContrast!==mode&&(wordmark.dataset.rContrast=mode)}}customElements.get("r-adaptive-contrast")||customElements.define("r-adaptive-contrast",AdaptiveContrast);function currentSlide(gallery){const slideshow=gallery;return slideshow?.slides?.[slideshow.current??0]??gallery?.querySelector(CURRENT_SLIDE_SELECTOR)}function landingRect(image,slide,gallery){const raw=image.getBoundingClientRect(),slideRect=slide.getBoundingClientRect(),scrollerRect=gallery?.querySelector(SCROLLER_SELECTOR)?.getBoundingClientRect()??slideRect,dx=scrollerRect.left-slideRect.left,dy=scrollerRect.top-slideRect.top;return{left:raw.left+dx,top:raw.top+dy,right:raw.right+dx,bottom:raw.bottom+dy,width:raw.width,height:raw.height}}async function decodeThumbnail(source){const image=new Image;image.crossOrigin="anonymous",image.src=source;try{await image.decode();const canvas=document.createElement("canvas");canvas.width=canvas.height=THUMB_SIZE;const context=canvas.getContext("2d",{willReadFrequently:!0});return context?(context.drawImage(image,0,0,THUMB_SIZE,THUMB_SIZE),context.getImageData(0,0,THUMB_SIZE,THUMB_SIZE).data):null}catch{return null}}function mapPointIntoSource(image,rect,fit,x,y){const{naturalWidth:width,naturalHeight:height}=image;if(!width||!height)return{x:clamp((x-rect.left)/rect.width,0,1),y:clamp((y-rect.top)/rect.height,0,1)};let scaleX=rect.width/width,scaleY=rect.height/height;fit==="contain"||fit==="scale-down"?scaleX=scaleY=Math.min(scaleX,scaleY):fit==="cover"?scaleX=scaleY=Math.max(scaleX,scaleY):fit==="none"&&(scaleX=scaleY=1);const originX=rect.left+(rect.width-width*scaleX)/2,originY=rect.top+(rect.height-height*scaleY)/2;return{x:clamp((x-originX)/scaleX/width,0,1),y:clamp((y-originY)/scaleY/height,0,1)}}function sampleLuminance(data,point){const cx=Math.round(point.x*(THUMB_SIZE-1)),cy=Math.round(point.y*(THUMB_SIZE-1));let total=0,count=0;for(let y=Math.max(0,cy-1);y<=Math.min(THUMB_SIZE-1,cy+1);y++)for(let x=Math.max(0,cx-1);x<=Math.min(THUMB_SIZE-1,cx+1);x++){const i=(y*THUMB_SIZE+x)*4;total+=relativeLuminance(data[i],data[i+1],data[i+2]),count++}return total/count}function relativeLuminance(r,g,b){const channel=value=>{const c=value/255;return c<=.03928?c/12.92:((c+.055)/1.055)**2.4};return .2126*channel(r)+.7152*channel(g)+.0722*channel(b)}function clamp(value,min,max){return Math.min(Math.max(value,min),max)}
2//# sourceMappingURL=/cdn/shop/t/509/assets/r-adaptive-contrast.js.map?v=167921005226182664411790725216