@expofp/floorplan
Version:
Interactive floor plan library for expos and events
69 lines (62 loc) • 3.4 kB
JavaScript
import"./utils/silence-mobx-react-lite-warning";import{applyIntents as c,loadConfig as p,setConfig as m}from"@expofp/config";import{safeLocalStorage as u}from"@expofp/utils";import l from"debug";import{initHtmlHead as y}from"./_misc_to_move/initHtmlHead";import{logBuildInfo as h}from"./_misc_to_move/logBuildInfo";import g from"./floorplan.loader";import{migrateLegacyStorageKeys as v}from"./utils/legacy-storage-keys";const d=l("efp:load");export async function load(r,e={}){y(),h(),l("efp:device").enabled&&import("./_misc_to_move/logDeviceInfo").then(o=>o.logDeviceInfo()).catch(()=>{});const a=e.element;let t;if(typeof a=="string"){const o=document.querySelector(a);if(!o)throw new Error(`Element not found for selector: ${a}`);t=o}else a?t=a:(t=document.getElementById("floorplan"),t||(t=document.createElement("div"),S(t),document.body.appendChild(t)));w(),t.setAttribute("data-efp-floorplan-defaults",""),document.documentElement.style.overscrollBehavior||="none",document.body.style.overscrollBehavior||="none",requestAnimationFrame(()=>{t.style.backgroundColor="#ebebeb"}),v();let i;try{if(i=await p(r,e,window.location.search,u()??void 0),!i.fpSvgJsRef)throw new Error("No floor plan drawing: the manifest must set `legacyDataUrlBase` (live event) or `fpSvgJsRef` (offline copy)")}catch(o){const{showEventNotFound:f}=await import("./tools/event-not-found");throw f(t),o}d("config",i),m(i);const n=new g(e,t),s=window.___fpResolve;return window.___fp=n,s&&(n.ready.then(()=>s(n)),delete window.___fpResolve),n.ready.then(()=>{const o=new CustomEvent("expofp:ready",{detail:{floorplan:n}});window.__expofpReady=o,window.dispatchEvent(o)}),n.ready.then(()=>c(n,i.intents)).catch(o=>d("config intents skipped:",o)),n}function w(){const r="efp-floorplan-defaults";if(document.getElementById(r))return;const e=document.createElement("style");e.id=r,e.textContent=`
[data-efp-floorplan-defaults] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
overscroll-behavior: none;
background: #fff;
transition: background-color 2s ease;
}`,document.head.prepend(e)}function S(r){if(!document.adoptedStyleSheets)return;const e="efp-runtime-loader-spinner",a=`
.${e} {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: all 1s ease;
}
.${e} > svg {
width: 60px;
transform-origin: center;
animation: ${e}-rotate 2s linear infinite;
}
.${e} > svg > circle {
fill: none;
stroke: var(--color-primary, #2382f4);
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-width: 2;
animation: ${e}-dash 1.5s ease-in-out infinite;
}
@keyframes ${e}-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes ${e}-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dashoffset: -125px;
}
}`,t=new CSSStyleSheet;t.replaceSync(a),document.adoptedStyleSheets=[...document.adoptedStyleSheets,t],r.innerHTML=`<div class="${e}">
<svg viewBox="25 25 50 50">
<circle r="20" cy="50" cx="50"></circle>
</svg>
</div>`,requestAnimationFrame(()=>{r.querySelector(`.${e}`)?.style.setProperty("opacity","1")})}