A "code injection" helper to make pic-time work better when embedded in squarespace

squarespace-pictime.js

const pictime = "https://juliameganphotography.pic-time.com";
const gallery = document.getElementById("pictime-gallery");

if(gallery) {
  const iframe = document.createElement("iframe");
  let url = new URL(window.location);
  let path = url.searchParams.get("path") || "/art?headless=true"; 

  window.addEventListener("message", (event) => {
    switch (event.data.type) {
      case "scroll":
        window.scrollTo({top: event.data.offsetTop});
        break;

      case "updateHeight":
        const height = event.data.height;
        if(height > 0) {
          iframe.style.height = height + "px";
        }
        break;

      case "updatePath":
        // console.info("update path", event.data);
        const path = event.data.path;
        const cart = (new URL("http://example.com" + path)).pathname.endsWith("cart");

        if(cart) {
          console.info("not updating window history for cart");
        } else {
          url.searchParams.set("path", path);
          window.history.replaceState({}, "", url);
        }

        break;

      default:
        console.warn("unhandled pictime message", event.data);
        break;
    }
  }, false);

  iframe.id = "pictimeIntegration";
  iframe.src = `${pictime}${path}`;
  iframe.frameBorder = "0";
  iframe.onload = "var script=document.createElement('script');script.src='https://akamaipictime.azureedge.net/pictures/scripts/compiled/artgalleryembed.js';document.head.append(script);";
  iframe.allowFullscreen = true;
  iframe.setAttribute("allowtransparency", "true");
  iframe.style.width = "100%";
  iframe.style.height = "100%";

  gallery.replaceChildren(iframe);
}