https://bfakontor.dk/app/assets/interactiveModel.js

1const I=()=>`<svg width="751" height="10" viewBox="0 0 751 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2		<path d="M0 3.125C0 4.375 0 5.625 0 6.875C12.5167 7.29167 25.0333 7.66667 37.55 8C87.6167 9.33333 137.683 10 187.75 10C362.983 10 538.217 9.09259 713.45 7.27778C725.967 7.14815 738.483 7.01389 751 6.875C751 5.625 751 4.375 751 3.125C738.483 2.98611 725.967 2.85185 713.45 2.72222C538.217 0.907408 362.983 0 187.75 0C137.683 0 87.6167 0.666667 37.55 2C25.0333 2.33333 12.5167 2.70833 0 3.125Z" fill="#262626" />
3	</svg> `,W=()=>`<svg xmlns="http://www.w3.org/2000/svg" width="35" height="16" viewBox="0 0 35 16" fill="none">
4		<path d="M26.8285 6.78874C27.0513 7.08321 27.6456 7.30405 27.8685 7.67213L28.4628 8.48191C28.0914 8.48191 27.8685 8.11383 27.4971 7.9666C21.1827 5.68451 15.6855 5.09559 9.51974 7.9666C3.35396 10.8376 2.83395 12.3099 1.12535 14.4448C-0.583233 16.5796 -0.0632248 15.8435 0.828213 15.9907C1.71965 16.1379 4.17112 13.5614 5.06255 12.8988C12.4912 7.37767 19.8456 7.00959 28.4628 10.3223C37.08 13.635 28.6114 10.5431 28.7599 10.6168C28.9085 10.6904 29.3542 10.4695 29.3542 10.764C28.4628 10.9112 27.5713 10.6168 26.7542 10.6168C25.937 10.6168 26.7542 10.9112 26.5313 10.9112C26.1599 10.9848 24.2285 11.0585 24.1542 11.0585L24.3027 11.4265C23.6342 11.2793 23.4856 11.8682 23.1885 12.0155C21.0341 12.9725 17.9884 13.4142 15.7598 14.1503C13.5312 14.8865 14.3484 14.592 14.1255 15.3282C15.3884 15.549 16.5027 15.0337 17.617 14.8129C18.7313 14.592 19.9941 14.592 21.1084 14.3712C25.7142 13.5614 30.2457 12.2363 35 12.678C35 12.3835 35 12.0891 34.8514 11.8682C34.2571 10.2487 29.8742 7.23044 28.3885 5.90536C26.9028 4.58028 25.0456 2.44543 24.3027 0.0897243C22.817 -0.425585 23.7085 1.4148 24.0056 2.15095C24.5999 3.69688 25.7885 5.46366 26.8285 6.64152V6.78874Z" fill="#E05920" />
5	</svg>`,q=document.querySelectorAll("[data-model-wrapper]"),b=document.querySelectorAll("[data-interactive-model-popover]");q&&q.forEach(f=>{const o=f.querySelector("[data-model-container]"),h=f.querySelector(".popover"),v=f.querySelector(".popover-inner");if(!o||!h||!v)return;let x=o.offsetWidth/2,w=o.offsetHeight/2,d=o.offsetWidth/2.5,p=o.offsetHeight/2.5;const m=f.querySelector("[data-interactive-model]");if(!m)throw new Error("Interactive subjects template not found");const u=Array.from((m==null?void 0:m.querySelectorAll("[data-template-items]"))||[]).map(e=>{var t,r;const s=(t=e.querySelector("[data-template-title]"))==null?void 0:t.textContent,l=(r=e.querySelector("[data-template-content]"))==null?void 0:r.innerHTML;if(s&&l)return{name:s,content:l}}).filter(e=>e!==void 0),S=e=>{document.addEventListener("keydown",l=>{l.key==="Escape"&&h.classList.remove("active")});const s=` <div class="flex flex-col h-full ">
6				<div class="flex justify-between p-4 gap-2 popover-header items-center lg:flex-row flex-col-reverse">
7					<h3 class="!mb-0 !color-black">${e.name}</h3>
8					<button class="flex gap-2 items-center whitespace-nowrap" onclick="handleBackClick(event)"><span>Tilbage til oversigten</span>${W()}</button>
9				</div>
10				<i class="w-full [&_svg]:w-full px-4"> ${I()} </i>
11				<div class="p-4 text-bfa-body-color overflow-auto">${e.content}</div>
12			</div>`;return f.addEventListener("click",l=>{h.classList.contains("active")&&l.target==o&&h.classList.remove("active")}),h.classList.add("active"),s};b.forEach(e=>{const s=parseInt(e.dataset.interactiveModelPopover||"");e.addEventListener("click",()=>{v&&(v.innerHTML=S(u[s]))})}),window.handleBackClick=function(e){const s=e.target.closest(".popover");s==null||s.classList.remove("active")};function M(e,s){var r;const l=(r=f.querySelector("[data-interactive-model-title]"))==null?void 0:r.cloneNode(!0);let t;l&&(t=l.querySelector("svg"),l.style.width=`${d}px`,l.style.height=`${p}px`),t&&(t.style.position="absolute",t.style.transform="translate(-50%, -50%)",t.style.top="50%",t.style.left="50%",t.style.width=`${d-50}px`,t.style.height=`${p-50}px`,s.appendChild(l),e.forEach((i,g)=>{if(!i.x||!i.y||!i.svgX||!i.svgY)throw new Error("Missing position properties for item: "+JSON.stringify(i));const a=document.createElement("div");a.className="text-grey-900 text-item text-gloria",a.textContent=i.name||"",a.style.maxWidth="150px",a.style.rotate="-10deg",a.style.position="relative";const n=document.createElement("button");n.setAttribute("type","button"),n.setAttribute("aria-label",i.name||"Open details"),n.setAttribute("tabindex","0"),n.className="text-holder",n.style.position="absolute",n.style.left=`${i.x}px`,n.style.top=`${i.y}px`,n.style.transform="translate(-50%, -50%)",n.appendChild(a),n.addEventListener("click",()=>{v&&(v.innerHTML=S(u[g]))}),document.createElementNS("http://www.w3.org/2000/svg","svg"),fetch(`/app/svg/Arrow-${g+1}.svg`).then(E=>E.text()).then(E=>{const L=document.createElement("div");L.innerHTML=E;const c=L.querySelector("svg");let H=a.clientWidth/2.1,B=a.clientHeight/2;c&&(c.style.transformOrigin="0 0",c.style.width="80px",c.style.height="80px",c.style.rotate=`${360/e.length*g}deg`,c.style.position="absolute",c.style.left=`${i.svgX-i.x+H}px`,c.style.top=`${i.svgY-i.y+B}px`,c.style.transform="translate(-50%, -50%)",a.appendChild(c))}),s.appendChild(n),i.x<n.clientWidth&&(n.style.left=`${i.x+20}px`)}))}function $(e,s,l,t,r){const i=2*Math.PI/e.length;return e.map((g,a)=>{const n=a*i-Math.PI/2;return{...g,x:t+s*Math.cos(n),y:r+l*Math.sin(n),svgY:r+(l-100)*Math.sin(n),svgX:t+(s-120)*Math.cos(n),angle:n}})}const k=()=>{const e=$(u,d,p,x,w),s=o.querySelector("[data-interactive-model-title]");if(s){s.style.width=`${d}px`,s.style.height=`${p}px`;const t=s.querySelector("svg");t&&(t.style.width=`${d-50}px`,t.style.height=`${p-50}px`)}o.querySelectorAll(".text-holder").forEach((t,r)=>{t.style.left=`${e[r].x}px`,t.style.top=`${e[r].y}px`})},y=window.matchMedia("(min-width: 1024px)");function C(e){e.matches?(console.log("Switched to Desktop view"),o&&!o.querySelector("[data-interactive-model-title]")&&A()):console.log("Switched to Mobile view")}y.addEventListener?y.addEventListener("change",C):y.addListener(C),C({matches:y.matches}),window.addEventListener("resize",()=>{d=o.offsetWidth/2.5,p=o.offsetHeight/2.5,x=o.offsetWidth/2,w=o.offsetHeight/2,k()});function A(){const e=$(u,d,p,x,w);o&&e&&M(e,o)}});