PageSourceSearch

https://www.emma-sleep.co.jp/cdn/shop/t/168/assets/main-navigation.js?v=128090960144380407031790216029

js emma-sleep.co.jp collected 2026-10-09 17:32:58 UTC 17,173 bytes, 72 lines download raw bytes

1document.addEventListener("DOMContentLoaded",async()=>{if(document.getElementById("announcement-bar")){await ResourceCoordinator.requestVendor("TippyDependency"),await ResourceCoordinator.requestVendor("Tippy");const tooltipContents=[...document.querySelectorAll("#announcement-bar li")].map(element=>element.dataset.tooltip),tooltipElements=[...document.querySelectorAll("#announcement-bar .anno-tooltip")];setTimeout(()=>{tooltipElements.forEach((element,index)=>{tippy(element,{content:tooltipContents[index]})})},500),await ResourceCoordinator.requestVendor("Splide"),new Splide("#announcement_slide .splide",{type:"fade",rewind:!0,autoplay:!0,arrows:"false",autoWidth:!1,padding:{right:"0rem"},perPage:1,perMove:1,gap:"20px",pagination:!1,breakpoints:{768:{perPage:1,arrows:!1,pagination:!1,gap:"12px"}}}).mount()}});class NavToggler extends CustomButton{get refs(){const $siteNav=$("#navbar"),navOverlay=document.querySelector("nav-overlay");return{$siteNav,$hamburgerIcon:this.$el.find(".hamburger-icon"),$closeIcon:this.$el.find(".close-icon"),navOverlay}}constructor(){super()}setup(){this.setAccessibility(),this.addEventListener("click",this.toggle)}setAccessibility(){this.$el.attr({role:"button","aria-haspopup":"dialog"})}toggle(){const{$siteNav,$hamburgerIcon,$closeIcon,navOverlay}=this.refs,openClass="site-nav--is-open";$siteNav.hasClass(openClass)?($siteNav.slideUp(100),$siteNav.removeClass(openClass),$hamburgerIcon.show(),$closeIcon.hide(),$(document.body).removeClass("no-scroll")):($siteNav.slideDown(100),$siteNav.addClass(openClass),$hamburgerIcon.hide(),$closeIcon.show(),$(document.body).addClass("no-scroll"),navOverlay.open())}}customElements.define("nav-toggler",NavToggler);class NavOverlay extends CustomElement{get refs(){return{$navToggler:$("nav-toggler")}}constructor(){super()}open(){const{$navToggler}=this.refs;this.$el.click(debounce(()=>{this.$el.off("click"),$navToggler.trigger("click")},100))}}customElements.define("nav-overlay",NavOverlay);class SiteNav extends CustomElement{activeIndex=null;isOpen=!1;get refs(){const navDropdown=document.querySelector("nav-dropdown"),$navDropdown=$(navDropdown),$siteSubnav=$navDropdown.find("site-subnav");return{$navDropdown,navDropdown,$siteSubnav,siteSubnavEl:$siteSubnav.get(0)}}constructor(){super()}changeActive(index=0){this.activeIndex=index}open(){this.$el.slideDown(500),this.isOpen=!0}close(){this.$el.slideUp(250),this.isOpen=!1}}customElements.define("site-nav",SiteNav);class SiteNavItem extends CustomElement{props={index:0,name:"",hasDropdown:!1,isMinimal:!1};active=!1;get refs(){const $siteNav=this.$el.closest("site-nav"),siteNav=$siteNav.get(0);return{$siteNav,siteNav,...$siteNav.get(0).refs}}constructor(){super()}setup(){isMobileViewport()?this.addEventListener("click",this.prepareMobileDropdown):this.addEventListener("mouseover",debounce(this.onMouseOver.bind(this),100))}init(){super.init(),this.$el.attr("aria-haspopup",!0)}async onMouseOver(){const{siteNav,siteSubnavEl,navDropdown}=this.refs,{isMinimal,index,hasDropdown}=this.props;siteNav.activeIndex===index||isMinimal||!hasDropdown||(siteNav.changeActive(index),navDropdown.open(),siteSubnavEl.refresh())}async prepareMobileDropdown(){const{isMinimal}=this.props;if(await this.clear(),this.active){this.active=!1;return}isMinimal?this.toggleMinimalDropdown():await this.openMobileDropdown(),this.active=!this.active,this.scrollIntoView({behavior:"smooth"})}async clear(){const{$siteNav,navDropdown}=this.refs;this.$el.siblings().each(function(){this.active=!1}),await navDropdown.close(),$siteNav.find(".minimal-nav-dropdown").each(function(){$(this).slideUp()})}async openMobileDropdown(){const{index}=this.props,{siteNav,navDropdown}=this.refs;siteNav.changeActive(index),navDropdown.attach(),await navDropdown.open()}toggleMinimalDropdown(){this.$el.find(".minimal-nav-dropdown")[this.active?"slideUp":"slideDown"]()}}customElements.define("site-nav-item",SiteNavItem);class NavDropdown extends CustomElement{isOpen=!1;get refs(){const siteNav=document.querySelector("site-nav"),$siteNav=$(siteNav),$siteSubnav=this.$el.find("site-subnav"),$cartToggler=$(document.querySelector("nav
1-toggler")),activeSiteNavItem=$siteNav.find(`site-nav-item[\\:index="${siteNav.activeIndex}"]`);return{$siteNav,siteNav,$siteSubnav,siteSubnavEl:$siteSubnav.get(0),$cartToggler,activeSiteNavItem}}onMouseMove=debounce(e=>{const{siteNav}=this.refs;(!this.contains(e.target)&&!siteNav.contains(e.target)||e.target.closest('site-nav-item[\\:isMinimal="true"]'))&&this.close()},100);open(){return this.isOpen=!0,this.refs.activeSiteNavItem.addClass("is-open"),this.$el.slideDown({duration:0,start:()=>{this.$el.css({display:"flex"}),$(document).on("mousemove",this.onMouseMove)}}).promise()}close(){const{siteNav}=this.refs;return this.isOpen=!1,$(document).off("mousemove"),this.refs.activeSiteNavItem.removeClass("is-open"),siteNav.activeIndex=null,this.$el.slideUp({duration:0,done:function(){$(this).css({display:"none"})}}).promise()}attach(){const{activeSiteNavItem}=this.refs;this.$el.detach().appendTo(activeSiteNavItem)}}customElements.define("nav-dropdown",NavDropdown);class SiteSubnav extends CustomElement{parentIndex=null;data={title:"",url:""};get refs(){const siteNav=document.querySelector("site-nav");return{$subNavItems:this.$el.find("site-subnav-item"),siteNav,mainNavigationMenu:JSON.parse(document.getElementById("main-navigation-menu").textContent)}}beforeMount(){super.beforeMount(),this.getActiveNavLink()}mounted(){super.mounted()}refresh(){const{siteNav}=this.refs;siteNav.activeIndex!==this.parentIndex&&(this.getActiveNavLink(),this.render())}render(){this.innerHTML=this.template()}template(){if(!this.data)return null;const{title,url}=this.data;return`
2        <div class="subnav-container ${title}" data-name="${url==="/collections/mattresses-remove"?"Mattresses":title}">
3            <nav-sidebar :parentIndex="${this.parentIndex}"></nav-sidebar>
4        </div>
5
6        <nav-spotlight class="spotlight" :parentIndex="${this.parentIndex}"></nav-spotlight>
7    `}getActiveNavLink(){const{siteNav,mainNavigationMenu}=this.refs;this.parentIndex=siteNav.activeIndex,this.data=mainNavigationMenu[this.parentIndex]}}customElements.define("site-subnav",SiteSubnav);class SiteSubavItem extends CustomElement{props={path:"",index:0};data={};get refs(){return{navSpotlight:this.$el.closest("site-subnav").find("nav-spotlight").get(0),mainNavigationMenu:JSON.parse(document.getElementById("main-navigation-menu").textContent)}}constructor(){super()}setup(){}mounted(){super.mounted(),this.$el.on("mouseover",this.renderSpotLight)}beforeMount(){super.beforeMount();const{mainNavigationMenu}=this.refs,{path}=this.props;this.data=get(mainNavigationMenu,path)}async renderSpotLight(){if(this.props.index===this.refs.navSpotlight.activeIndex)return;if(this.refs.navSpotlight.activeIndex=this.props.index,!["mattress-luxury","hybrid-v2","mattress-hybrid-v2"].includes(this.data.object.handle)){this.refresh(this.data.object,this.data.accentuate);return}this.refs.navSpotlight.renderLoading();const html=await fetchProductPage(this.data.object.handle),mergePDPDocument=new DOMParser().parseFromString(html,"text/html"),blockProductSelectors=Array.from(mergePDPDocument.querySelectorAll("block-product-selector"));if(!blockProductSelectors.length){this.refresh(this.data.object,this.data.accentuate);return}if(!blockProductSelectors.some(this.checkDiscountExist)){this.refresh(this.data.object,this.data.accentuate);return}if(blockProductSelectors.every(this.checkDiscountExist).length>=2){const[product1,product2]=blockProductSelectors.map(selector=>JSON.parse(selector.getAttribute(":product"))),lowestPriceProduct=product1.price<product2.price?product1:product2,product=JSON.parse(lowestPriceProduct.getAttribute(":product")),accentuate=JSON.parse(lowestPriceProduct.getAttribute(":accentuate"));this.refresh(product,accentuate);return}const discountedSelector=blockProductSelectors.find(this.checkDiscountExist);if(discountedSelector){const product=JSON.parse(discountedSelector.getAttribute(":product")),accentuate=JSON.parse(discountedSelector.getAttribute(":accentuate"));this.refresh(product,accentuate)}}checkDiscountExist(blockProductSelector){const product=JSON.parse(blockProductSelector.getAttribute(":product"));return product.compare_at_price&&product.price<product.compare_at_price}refresh(product,accentuate){this.refs.navSpotlight?.refresh({name:product.title,price:product.price,originalPrice
7:product.compare_at_price,url:`/products/${product.handle}`,featuredImage:`nav-img-${product.handle}.jpg`,accentuate,primaryBadge:accentuate?.primary_badge??"",secondaryBadge:accentuate?.secondary_badge??""})}}customElements.define("site-subnav-item",SiteSubavItem);class NavSidebar extends CustomElement{props={parentIndex:0};get refs(){const siteNav=document.querySelector("site-nav");return{$subNavItems:this.$el.find("site-subnav-item"),siteNav,$navSpotlight:this.$el.find("nav-spotlight"),mainNavigationMenu:JSON.parse(document.getElementById("main-navigation-menu").textContent)}}async render(){isMobileViewport()||(this.innerHTML=""),this.innerHTML=await this.template(),this.populateSpotlight()}populateSpotlight(){const{$subNavItems,$navSpotlight}=this.refs,firstSubNavItem=$subNavItems.first().get(0);$navSpotlight.get(0)?.mounted?firstSubNavItem?.renderSpotLight():$navSpotlight.on("mounted",()=>{firstSubNavItem?.renderSpotLight()})}async template(){const{mainNavigationMenu}=this.refs,{parentIndex}=this.props;if(this.data=mainNavigationMenu[parentIndex],!this.data)return null;const{title}=this.data,navItems=await this.renderSubnavItems(),ctaLink=this.data.children.find(link=>link.type!=="product_link");return`
8      <p class="subnav-container__title paragraph-20 font-semibold">${title}</p>
9      <ul class="subnav-container__links mt-3 lg:mt-0">${navItems.join("")}</ul>
10      ${ctaLink?`<a href="${ctaLink.url}" class="compare-btn btn btn--compact">${ctaLink.title}</a>`:""}
11    `}async renderSubnavItems(){const{children}=this.data,{parentIndex}=this.props,productLinks=children.filter(child=>child.type==="product_link");return Promise.all(productLinks.map(async(childlink,i)=>`<site-subnav-item
12                :path="[${parentIndex}].children[${i}]"
13                :index="${i}"
14                class="site-subnav__item"
15              >
16                <a
17                  href="${childlink.url}"
18                  class="site-subnav__link"
19                  ${childlink.active?'aria-current="page"':""}
20                  tabindex="-1"
21                >
22                  <div class="sub-item-content">
23                    <div class="title_dis">
24                      <div class="flex gap-4 items-center">
25                        <p class="lg:font-semibold font-inter">
26                          ${childlink.title}
27                        </p>
28                        ${childlink.mobileBadge?`<p class="lg:hidden font-inter bg-[var(--color-primary-400)] px-3 py-1 text-[12px] font-semibold text-[var(--color-neutral-0)] rounded-full">${childlink.mobileBadge}</p>`:""}
29                      </div>
30                      ${childlink.subnavHtmlContent} 
31                    </div>
32                    <img src="${childlink.submenuThumbImage}&transform=resize=600" class="spotlight__image w-full h-full object-contain" loading="lazy" />
33                  </div>
34                </a>
35              </site-subnav-item>`))}}customElements.define("nav-sidebar",NavSidebar);class NavSpotlight extends CustomElement{props={parentIndex:0};activeIndex=0;data={name:"",price:"",originalPrice:"",imageUrl:null,url:"#",primaryBadge:"",secondaryBadge:"",isDiscounted:!1,discountPercentage:0};get refs(){return{mainNavigationMenu:JSON.parse(document.getElementById("main-navigation-menu").textContent)}}constructor(){super()}async connectedCallback(){this.extractProps(),this.init(),this.beforeMount(),await this.render(),setTimeout(()=>{$(this).ready(this.mounted.bind(this))},0)}init(){super.init()}async render(){this.$el.css("opacity",0),await wait(250),this.innerHTML=this.template(),this.$el.css("opacity",1)}async renderLoading(){await wait(250),this.innerHTML=this.loadingTemplate()}async renderDefault(){const{parentIndex}=this.props,path=`[${parentIndex}].children[0]`,{mainNavigationMenu}=this.refs,data=get(mainNavigationMenu,path),{object,featuredImage,url,accentuate,primaryBadge,secondaryBadge}=data;await this.refresh({name:object.title,price:object.price,originalPrice:object.compare_at_price,url,featuredImage,accentuate,primaryBadge,secondaryBadge})}async mounted(){super.mounted();const path=`[${this.props.parentIndex}].children[0]`,data=get(this.refs.mainNavigationMenu,path),refresh=(product,accentuate)=>{this.refresh({name:product.title,price:product.price,originalPrice
35:product.compare_at_price,url:`/products/${product.handle}`,featuredImage:`nav-img-${product.handle}.jpg`,accentuate,primaryBadge:accentuate?.primary_badge??"",secondaryBadge:accentuate?.secondary_badge??""})};if(!["mattress-luxury","hybrid-v2","mattress-hybrid-v2"].includes(data.object.handle)){await this.renderDefault();return}this.renderLoading();const html=await fetchProductPage(data.object.handle),mergePDPDocument=new DOMParser().parseFromString(html,"text/html"),blockProductSelectors=Array.from(mergePDPDocument.querySelectorAll("block-product-selector"));if(!blockProductSelectors.length){await this.renderDefault();return}if(!blockProductSelectors.some(this.checkDiscountExist)){await this.renderDefault();return}if(blockProductSelectors.every(this.checkDiscountExist).length>=2){const[product1,product2]=blockProductSelectors.map(selector=>JSON.parse(selector.getAttribute(":product"))),lowestPriceProduct=product1.price<product2.price?product1:product2,product=JSON.parse(lowestPriceProduct.getAttribute(":product")),accentuate=JSON.parse(lowestPriceProduct.getAttribute(":accentuate"));refresh(product,accentuate);return}const discountedSelector=blockProductSelectors.find(this.checkDiscountExist);if(discountedSelector){const product=JSON.parse(discountedSelector.getAttribute(":product")),accentuate=JSON.parse(discountedSelector.getAttribute(":accentuate"));refresh(product,accentuate)}}checkDiscountExist(blockProductSelector){const product=JSON.parse(blockProductSelector.getAttribute(":product"));return product.compare_at_price&&product.price<product.compare_at_price}loadingTemplate(){return`
36      <div class="spotlight-media">
37        <div class="animate-skeleton w-full h-full">
38          <div class="h-full bg-gray-300 rounded w-full">&nbsp;</div>
39        </div>
40      </div>
41
42      <div style="height: 56px;">
43        <div class="animate-skeleton w-full h-full">
44          <div class="h-full bg-gray-300 rounded w-full">&nbsp;</div>
45        </div>
46      </div>
47    `}template(){if(!this.data.name)return"";const{name,price,originalPrice,url,imageUrl,primaryBadge,secondaryBadge,discountPercentage,isDiscounted}=this.data;return`
48      <div class="spotlight-media">
49        <a href="${url}" class="spotlight__link">
50          <div class="absolute left-2 top-2 md:left-3 md:top-3">
51            <div class="flex flex-wrap gap-2">
52              ${isDiscounted?`<p class="hidden rounded-full bg-[var(--color-negative-500)] px-3 py-1 text-[12px] font-semibold text-[var(--color-neutral-0)] md:block">${discountPercentage}% OFF</p>`:""}
53              ${primaryBadge?`<p class="hidden rounded-full bg-[var(--color-secondary-500)] px-3 py-1 text-[12px] font-semibold text-[var(--color-neutral-0)] md:block">${primaryBadge}</p>`:""}
54              ${secondaryBadge?`<p class="hidden rounded-full bg-[var(--color-positive-600)] px-3 py-1 text-[12px] font-semibold text-[var(--color-neutral-0)] md:block">${secondaryBadge}</p>`:""}
55            </div>
56          </div>
57          <img src="${imageUrl}" class="spotlight__image w-full h-full object-contain" loading="lazy" />
58        </a>
59      </div>
60
61      <div class="spotlight-body">
62        <a href="${url}" class="spotlight__link">
63          <p class="spotlight__name text-xl font-semibold">${name}</p>
64        </a>
65        <div class="flex items-center gap-2 text-md">
66          ${originalPrice?'<p class="inline">\u4FA1\u683C</p> ':""}<span class="spotlight__price text-scarlet font-bold">${price}</span>
67          ${originalPrice?`<span class="spotlight__original-price line-through text-xs">${originalPrice}</span>`:""}
68          <p>\uFF5E</p>
69        </div>
70      </div>
71    `}async refresh({name,price,url,originalPrice,featuredImage,primaryBadge,secondaryBadge}){this.data.name=name,this.data.price=currencyFormatter.format(price/100),this.data.originalPrice=originalPrice?currencyFormatter.format(originalPrice/100):null,this.data.imageUrl="//www.emma-sleep-japan.com/cdn/shop/files/"+featuredImage,this.data.url=url,this.data.primaryBadge=primaryBadge,this.data.secondaryBadge=secondaryBadge,this.data.isDiscounted=price<originalPrice,this.data.discountPercentage=this.data.isDiscounted?Math.round((originalPrice-price)/originalPrice*100):0,await this.render()}}customElements.define("nav-spotlight",NavSpotlight);
72//# sourceMappingURL=/cdn/shop/t/168/assets/main-navigation.js.map?v=128090960144380407031790216029

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.