https://gray-label.com/cdn/shop/t/260/assets/extenders-size-guide-chart.js?v=79691968491787786301790334372

1var y=v=>{let t="",h="",l="",m=0;function g(e){return e=e.replace(/([0-9]+)/g,'<span data-original="$1" data-number>$1</span>'),e}function u(e){return e=e.replace(/\b(\w*cm\w*)\b/g,"<span data-metric-holder>$1</span><br>"),e}return v.data.sizes.forEach(e=>{if(e.age==""||e.size==""||e.size==null||e.body_height=="")return!1;let i=e.size.split("||"),a="",c=g(e.body_height);c=u(c),i.forEach(n=>{n=g(n),n=u(n),a+=n}),m==0?(t+=`<button type="button" class="button button--size js-size-active" data-size="${e.age}">${e.age}</button>`,l+=`<p class="js-size-active" data-size="${e.age}">${c}</p>`,h+=`<div data-size="${e.age}" class="measurement js-size-active">${a}</div>`):(t+=`<button type="button" class="button button--size" data-size="${e.age}" class="size">${e.age}</button>`,l+=`<p class="" data-size="${e.age}">${c}</p>`,h+=`<div data-size="${e.age}" class="measurement">${a}</div>`),m++}),`
2    <div class="size-chart-holder">
3      <div class="size-chart-holder__image-holder">
4        <img src="${v.data.image}">
5      </div>
6
7      <div class="size-chart-holder__chart">
8        <div class="chart__switcher switcher">
9          <div class="input input--switch">
10            <span class="js-toggle-switch" data-value="cm">cm</span><input type="checkbox" name="size-guide-unit" data-off-value="cm" data-on-value="inch"><span class="js-toggle-switch" data-value="inch">inch</span>
11          </div>
12        </div>
13        
14        <div class="chart__info">
15          <h5 class="info__title">${window.translations.select_age}</h5>
16          <div class="sizes">
17            ${t}
18          </div>
19          <!-- end .sizes -->
20
21          <h5 class="info__title">${window.translations.body_height}</h5>
22          <div class="body-height">
23            ${l}
24          </div>
25          <!-- end .body-height -->
26
27          <h5 class="info__title">${window.translations.product_measurements}</h5>
28          <div class="measurements">
29              ${h}
30            <!-- end .measurement -->
31          </div>
32          <!-- end .measurements -->
33        </div>
34
35      </div>
36
37    </div>
38    <!-- end .modal -->
39  `};var b=class extends HTMLElement{constructor(){super();let t=this,h=document.querySelectorAll(".size-chart-data"),l=[],m=t.getAttribute("data-size-guide-id"),g=t.querySelector(".size-chart-holder");h.forEach(i=>{JSON.parse(i.innerHTML).sizecharts.map(c=>{l.push(c)})});let u=l.find(i=>i.id===m);if(!u)return;let e=y(u);if(e){g.insertAdjacentHTML("beforeend",e);let i=t.querySelector(".size-chart-holder"),a=i.querySelector('input[name="size-guide-unit"]'),c=t.querySelector('.js-toggle-switch[data-value="cm"]'),n=t.querySelector('.js-toggle-switch[data-value="inch"]'),z=S=>{let $=S||"cm",f=i.querySelectorAll(".button--size"),E=t.querySelectorAll("[data-number]"),w=t.querySelectorAll("[data-metric-holder]");E.forEach(o=>{if($==="inch"){let r=o.getAttribute("data-original"),d=(Math.round(r/2.54*100)/100).toFixed(1);o.innerHTML=d,w.forEach(p=>{p.innerHTML="inch"}),a.checked=!0}if($==="cm"){let r=o.getAttribute("data-original");o.innerHTML=r,w.forEach(d=>{d.innerHTML="cm"}),a.checked=!1}}),f&&f.forEach(o=>{o.addEventListener("click",r=>{r.preventDefault(),f.forEach(s=>{s.classList.remove("js-size-active")});let d=r.target.getAttribute("data-size"),p=t.querySelectorAll(".measurement"),_=t.querySelectorAll("p");p.forEach(s=>{s.classList.remove("js-size-active"),s.getAttribute("data-size")===d&&s.classList.add("js-size-active")}),_.forEach(s=>{s.classList.remove("js-size-active"),s.getAttribute("data-size")===d&&s.classList.add("js-size-active")}),r.target.classList.add("js-size-active")})})};z(),a==null||a.addEventListener("change",()=>z((a==null?void 0:a.checked)==!0?"inch":"cm")),c.addEventListener("click",()=>z("cm")),n.addEventListener("click",()=>z("inch"))}}};customElements.get("size-guide-modal")===void 0&&customElements.define("size-guide-modal",b);