@trailstash/ultra/components/ultra-loader.js

A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc

import { h } from "../lib/dom.js";
import { getModeFromQueryParams } from "../lib/queryParams.js";
import { UltraMap } from "./ultra-map.js";
import { UltraIDE } from "./ultra-ide.js";
import { UltraApp } from "./ultra-app.js";
import pick from "lodash.pick";

import { defaultMode, modes } from "ultra-config";

const style = new CSSStyleSheet();
style.replaceSync(`
  :host {
    height: 100%;
    width: 100%;
    display: flex;
  }
`);

export class UltraLoader extends HTMLElement {
  constructor() {
    super();
  }
  get mode() {
    return this.getAttribute("mode") || "detect";
  }
  set mode(value) {
    if (value) {
      return this.setAttribute("mode", value);
    } else {
      return this.removeAttribute("mode");
    }
  }

  async connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    shadow.adoptedStyleSheets.push(style);

    let mode = this.mode;
    if (this.mode === "detect") {
      mode = getModeFromQueryParams() || defaultMode;
    }
    const config = modes[mode];

    if (config.title) {
      document.title = config.title;
    }
    if (config.icon) {
      document.head.querySelector("link[rel=icon]").href = config.icon;
    }

    if (mode === "map") {
      shadow.appendChild(
        h(
          "ultra-map",
          pick(config.settings, [
            ...UltraMap.INIT_SETTINGS,
            ...UltraMap.CONFIG_SETTINGS,
          ]),
        ),
      );
    } else if (mode === "app") {
      shadow.appendChild(h("ultra-app", pick(config, UltraApp.props)));
    } else {
      shadow.appendChild(h("ultra-ide", pick(config, UltraIDE.props)));
    }
  }
}