1/*! For license information please see interactive-image.js.LICENSE.txt */ 2"use strict";(self.webpackChunkempori_base=self.webpackChunkempori_base||[]).push([[149],{6960:(e,t,i)=>{i.r(t),i.d(t,{default:()=>a});var n=i(5893),s=i(7294);function a(e){var t;const i=(0,s.useRef)(null),[a,r]=(0,s.useState)(window.innerWidth<1200),[o,f]=(0,s.useState)(null===(t=i.current)||void 0===t?void 0:t.getBoundingClientRect()),[l,u]=(0,s.useState)(!1),[c,d]=(0,s.useState)("0,0 0,0 0,0"),[g,p]=s.useState(e.buttons.map((e=>Object.assign(Object.assign({},e),{buttonRef:s.createRef(),featureInfoRef:s.createRef()})))),v=()=>{r(window.innerWidth<1200)};return(0,s.useEffect)((()=>(window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)})),[]),(0,s.useEffect)((()=>{var e,t;const i=g.find((e=>e.featureInput.active));if(i){const n=null===(e=i.buttonRef.current)||void 0===e?void 0:e.getBoundingClientRect(),s=null===(t=i.featureInfoRef.current)||void 0===t?void 0:t.getBoundingClientRect();if(o&&n&&s){const e=i.positionX<.5,t=e||a?n.left-o.left-6:n.left-o.left+36,r=n.top+n.height/2-o.top,f=e||a?s.right-o.left:s.left-o.left,l=s.bottom-o.top,u=e||a?s.left-o.left:s.right-o.left,c=s.bottom-o.top;d(`${t},${r} ${f},${l} ${u},${c}`)}}u(!!i)}),[g,o,a]),(0,s.useEffect)((()=>{var e;f(null===(e=i.current)||void 0===e?void 0:e.getBoundingClientRect())}),[g]),(0,n.jsxs)("div",Object.assign({className:"empori-interactive-image-grid",ref:i},{children:[l&&(0,n.jsx)("svg",Object.assign({className:"lines-svg",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",version:"1.1",id:"Layer_1",viewBox:`0 0 ${null==o?void 0:o.width} ${null==o?void 0:o.height}`,preserveAspectRatio:"xMinYMin meet",width:"100%",height:"100%"},{children:(0,n.jsx)("polyline",{className:"st0",points:c})})),(0,n.jsx)("div",Object.assign({className:"feature-info-container left"},{children:a?g.map((e=>(0,n.jsx)("div",{className:"feature-info "+(e.featureInput.active?"clicked":""),ref:e.featureInfoRef,dangerouslySetInnerHTML:{__html:e.featureInput.inputText}},e.id))):g.filter((e=>e.positionX<.5)).map((e=>(0,n.jsx)("div",{className:"feature-info "+(e.featureInput.active?"clicked":""),ref:e.featureInfoRef,dangerouslySetInnerHTML:{__html:e.featureInput.inputText}},e.id)))})),(0,n.jsxs)("div",Object.assign({className:"image-container"},{children:[(0,n.jsx)("img",{className:"product-image",src:e.image||"",alt:e.altText}),g.map((e=>(0,n.jsx)("div",Object.assign({className:"button feature-point "+(e.featureInput.active?"active":""),style:{left:100*e.positionX+"%",top:100*e.positionY+"%"},onClick:t=>((e,t)=>{e.preventDefault(),p((e=>e.map((e=>Object.assign(Object.assign({},e),{featureInput:Object.assign(Object.assign({},e.featureInput),{active:e.id===t.id&&!e.featureInput.active})})))))})(t,e),ref:e.buttonRef},{children:e.featureInput.active?(0,n.jsx)("svg",Object.assign({width:"37",height:"3",viewBox:"0 0 37 3",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:(0,n.jsx)("line",{y1:"1.5",x2:"37",y2:"1.5",stroke:"#BF8D43",strokeWidth:"3"})})):(0,n.jsxs)("svg",Object.assign({width:"37",height:"37",viewBox:"0 0 37 37",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[(0,n.jsx)("line",{y1:"18.5",x2:"37",y2:"18.5",stroke:"#fff",strokeWidth:"3"}),(0,n.jsx)("line",{x1:"18.5",y1:"37",x2:"18.5",stroke:"#fff",strokeWidth:"3"})]}))}),e.id)))]})),!a&&(0,n.jsx)("div",Object.assign({className:"feature-info-container right"},{children:g.filter((e=>e.positionX>=.5)).map((e=>(0,n.jsx)("div",{className:"feature-info "+(e.featureInput.active?"clicked":""),ref:e.featureInfoRef,dangerouslySetInnerHTML:{__html:e.featureInput.inputText}},e.id)))}))]}))}}}]); 3//# sourceMappingURL=interactive-image.js.map?v=9.1.8
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.