@trailstash/ultra 3.0.0-dev

package/components/fs-button.js

@@ -0,0 +1,52 @@
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import {
+  faUpRightAndDownLeftFromCenter as faMaximize,
+  faDownLeftAndUpRightToCenter as faMinimize,
+} from "@fortawesome/free-solid-svg-icons";
+
+const faMaximizeIcon = icon(faMaximize);
+const faMinimizeIcon = icon(faMinimize);
+
+import { h } from "../lib/dom.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import { style as buttonCSS } from "./button.js";
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  :host {
+  }
+  button {
+    background: white;
+  }
+`);
+
+export class FSButton extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(buttonCSS);
+    shadow.adoptedStyleSheets.push(style);
+
+    const icon = h("fa-icon", { icon: "up-right-and-down-left-from-center" });
+    const button = h("button", {}, icon);
+    this.refs = { button, icon };
+
+    button.addEventListener("click", (e) => {
+      if (this.classList.contains("fs")) {
+        this.refs.icon.icon = "up-right-and-down-left-from-center";
+        this.dispatchEvent(new Event("exit-fullscreen"));
+      } else {
+        this.refs.icon.icon = "down-left-and-up-right-to-center";
+        this.dispatchEvent(new Event("enter-fullscreen"));
+      }
+      this.classList.toggle("fs");
+    });
+
+    shadow.appendChild(button);
+  }
+}

package/components/help-modal.js

@@ -0,0 +1,98 @@
+import { marked } from "marked";
+import { h, t } from "../lib/dom.js";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import { toQueryParams } from "../lib/queryParams.js";
+import { version as maplibreVersion } from "maplibre-gl/package.json";
+import { version as osmtogeojsonVersion } from "osmtogeojson/package.json";
+import { version as togeojsonVersion } from "../node_modules/@tmcw/togeojson/package.json";
+import readme from "../README.md";
+
+export class HelpModal extends HTMLElement {
+  constructor() {
+    super();
+    this.help = readme;
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    const readmeHTML = marked
+      .parse(this.help)
+      .replace(/<\/h3>/g, "</h5>")
+      .replace(/<h3>/g, "<h5>")
+      .replace(/<\/h2>/g, "</h4>")
+      .replace(/<h2>/g, "<h4>")
+      .replace(/<\/h1>/g, "</h3>")
+      .replace(/<h1>/g, "<h3>");
+
+    const div = h(
+      "div",
+      { style: "padding: 0 8px 8px;max-width:800px;", slot: "modal-content" },
+      `
+          ${readmeHTML}
+          <div>
+            <h4>Data Sources</h4>
+            <ul>
+              <li>
+                Data ©
+                <a target="_blank" href="http://openstreetmap.org/">OpenStreetMap</a>
+                contributors,
+                <span style="font-size: smaller">
+                  <a target="_blank" href="http://opendatacommons.org/licenses/odbl/1-0/"
+                    >ODbL</a
+                  >
+                  (<a target="_blank" href="http://www.openstreetmap.org/copyright">Terms</a>)
+                </span>
+              </li>
+              <li>
+                Data mining by
+                <a target="_blank" href="http://overpass-api.de/">Overpass API</a>
+              </li>
+              <li>
+                <a target="_blank" href="https://www.openmaptiles.org/"
+                  >OpenMapTiles
+                </a>
+                hosted by the
+                <a target="_blank" href="http://tile.ourmap.us/">
+                  OSM Americana Community Vector Tile Server</a
+                >
+              </li>
+              <li>
+                <a target="_blank" href="https://www.protomaps.com/"
+                  >Protomaps
+                </a>
+                hosted by the Protomaps API
+              </li>
+            </ul>
+            <h4>Software &amp; Libraries</h4>
+            <ul>
+              <li>
+                Map powered by
+                <a target="_blank" href="https://maplibre.org/projects/maplibre-gl-js/"
+                  >MapLibre GL JS</a
+                > <code>${maplibreVersion}</code>
+              </li>
+              <li>
+                OSM to GeoJSON conversion powered by
+                <a target="_blank" href="https://github.com/tyrasd/osmtogeojson"
+                  >osmtogeojson</a
+                > <code>${osmtogeojsonVersion}</code>
+              </li>
+              <li>
+                KML/GPX/TCX to GeoJSON conversion powered by
+                <a target="_blank" href="https://github.com/placemark/togeojson"
+                  >@tmcw/togeojson</a
+                > <code>${togeojsonVersion}</code>
+              </li>
+            </ul>
+          </div>
+      `,
+    );
+    div.addEventListener("click", (e) => e.stopPropagation());
+    const button = h("button-modal", { text: "Help", icon: "question" }, div);
+    this.refs = { button, div };
+
+    shadow.appendChild(button);
+  }
+}

package/components/map-popup.js

@@ -0,0 +1,57 @@
+import { Liquid } from "liquidjs";
+import { h, t } from "../lib/dom.js";
+import { normalizeCSS } from "../lib/normalize.js";
+
+const engine = new Liquid();
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  a {
+    text-decoration: none;
+  }
+  h1,h2,h3,h4,h5,h6 {
+    margin: .5em 0;
+  }
+`);
+
+const defaultTemplate = `
+  <h3>Properties</h3>
+  {%- for prop in properties %}
+    <code>{{ prop[0] }} = {{ prop[1] }}</code>
+    <br>
+  {%- endfor %}
+`;
+const defaultContextBuilder = ({ properties }) => ({ properties });
+
+export class MapPopup extends HTMLElement {
+  constructor() {
+    super();
+    this.template = defaultTemplate;
+    this.contextBuilder = defaultContextBuilder;
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(style);
+
+    const div = h("div");
+    div.style.maxHeight = "1000px";
+    div.style.overflowY = "auto";
+    let first = true;
+    for (const f of Object.values(this.features)) {
+      if (first) {
+        first = false;
+      } else {
+        div.appendChild(h("hr"));
+      }
+      const html = engine.parseAndRenderSync(
+        this.template,
+        this.contextBuilder(f),
+      );
+      div.appendChild(h("div", {}, html));
+    }
+    shadow.appendChild(div);
+  }
+}

package/components/nav-bar.js

@@ -0,0 +1,76 @@
+import { h, t } from "../lib/dom.js";
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  :host {
+    display: block;
+  }
+  nav {
+    background: white;
+    border-bottom: 1px solid #8f8f9d;
+    padding: 4px;
+  }
+  :host(.fs) nav {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+  a {
+    color: black;
+    text-decoration: none;
+  }
+  b, img {
+    margin: 0 0 0 10px;
+  }
+  img {
+    vertical-align: middle;
+    height: 22px;
+  }
+  nav > * {
+    margin-right: 4px;
+  }
+  slot {
+    padding: 100px;
+  }
+  ::slotted(fs-button) {
+    z-index: 1;
+    position: fixed;
+    top: 4px;
+    right: 4px;
+  }
+  :host(.fs) nav > a {
+    display: none;
+  }
+  @media (max-width: 900px) {
+    b {
+      display: none;
+    }
+  }
+`);
+
+export class NavBar extends HTMLElement {
+  title;
+  icon;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.adoptedStyleSheets.push(style);
+    const nav = h(
+      "nav",
+      {},
+      h("slot", { name: "fs-button" }),
+      h("slot", { name: "buttons" }),
+      h(
+        "a",
+        { href: "." },
+        h("b", {}, t(this.title)),
+        h("img", { src: this.icon }),
+      ),
+    );
+    shadow.appendChild(nav);
+  }
+}

package/components/run-button.js

@@ -0,0 +1,78 @@
+import { h } from "../lib/dom.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import { style as buttonCSS } from "./button.js";
+
+const style = new CSSStyleSheet();
+style.replaceSync(`
+  :host {
+  }
+  button {
+    background: #2ecc40;
+    width: 100px;
+    color: white;
+  }
+  button:after {
+    content: " Run";
+  }
+  button.loading {
+    background: #ff4136;
+  }
+  button.loading:after {
+    content: " Cancel";
+  }
+`);
+
+export class RunButton extends HTMLElement {
+  static observedAttributes = ["loading"];
+
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(value) {
+    if (value) {
+      return this.setAttribute("loading", "");
+    } else {
+      return this.removeAttribute("loading");
+    }
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(buttonCSS);
+    shadow.adoptedStyleSheets.push(style);
+
+    const button = h("button", {}, h("fa-icon", { icon: "play" }));
+    this.refs = { button };
+
+    button.addEventListener("auxclick", (e) => {
+      this.dispatchEvent(new Event("auxclick"));
+    });
+    button.addEventListener("click", (e) => {
+      if (this.loading) {
+        this.refs.button.children[0].icon = "play";
+        this.dispatchEvent(new Event("abort"));
+      } else {
+        this.refs.button.children[0].icon = "xmark";
+        this.dispatchEvent(new Event("run"));
+      }
+    });
+
+    shadow.appendChild(button);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (newValue === "") {
+      this.refs.button.classList.add("loading");
+      this.refs.button.children[0].icon = "xmark";
+    } else {
+      this.refs.button.classList.remove("loading");
+      this.refs.button.children[0].icon = "play";
+    }
+  }
+}

package/components/share-button.js

@@ -0,0 +1,35 @@
+import { h } from "../lib/dom.js";
+import buttonStyle from "./button.css";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+
+export const css = new CSSStyleSheet();
+css.replaceSync(`
+  button:after {
+    content: " Share";
+  }
+  @media (max-width: 900px) {
+    button:after {
+      content: "";
+    }
+  }
+`);
+
+export class ShareButton extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(buttonCSS);
+    shadow.adoptedStyleSheets.push(css);
+
+    const button = h("button", {}, h("fa-icon", { icon: "link" }));
+    this.refs = { button };
+
+    shadow.appendChild(button);
+  }
+}

package/components/share-modal.js

@@ -0,0 +1,139 @@
+import { h, t } from "../lib/dom.js";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import { toQueryParams } from "../lib/queryParams.js";
+
+export class ShareModal extends HTMLElement {
+  #center;
+  #zoom;
+  #query;
+
+  constructor() {
+    super();
+  }
+
+  get center() {
+    return this.#center;
+  }
+  set center(value) {
+    this.#center = value;
+    this.update();
+  }
+
+  get zoom() {
+    return this.#zoom;
+  }
+  set zoom(value) {
+    this.#zoom = value;
+    this.update();
+  }
+
+  get query() {
+    return this.#query;
+  }
+  set query(value) {
+    this.#query = value;
+    this.update();
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    const queryInput = h("input", { type: "text" });
+    const mapInput = h("input", { type: "text" });
+    const mapViewCheckBox = h("input", { type: "checkbox", checked: true });
+    mapViewCheckBox.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.update();
+    });
+    const mapViewLabel = h(
+      "label",
+      {},
+      mapViewCheckBox,
+      t(" include current map state"),
+    );
+    mapViewLabel.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    const autoRunCheckBox = h("input", { type: "checkbox" });
+    autoRunCheckBox.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.update();
+    });
+    const autoRunLabel = h(
+      "label",
+      {},
+      autoRunCheckBox,
+      t(" run this query immediately after loading"),
+    );
+    autoRunLabel.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    const div = h(
+      "div",
+      { style: "", slot: "modal-content" },
+      h(
+        "style",
+        {},
+        `
+        div {
+          padding: 0 8px 8px;
+        }
+        h3, h5 {
+          margin-bottom: 0;
+        }
+        input[type=text] {
+          width: 100%;
+          padding: 0;
+          margin: 0;
+        }
+        label {
+          display: block;
+        }
+        `,
+      ),
+      h("h3", {}, "Query"),
+      h("p", {}, "Copy this link to share the current code:"),
+      queryInput,
+      h("h5", {}, "Options"),
+      mapViewLabel,
+      autoRunLabel,
+      h("h3", {}, "Map"),
+      h("p", {}, "Copy this link to share the an interactive map:"),
+      mapInput,
+    );
+    const button = h(
+      "button-modal",
+      { text: "Share", icon: "share-nodes" },
+      div,
+    );
+    this.refs = {
+      button,
+      div,
+      mapInput,
+      queryInput,
+      autoRunCheckBox,
+      mapViewCheckBox,
+    };
+
+    queryInput.addEventListener("focus", () => queryInput.select());
+    mapInput.addEventListener("focus", () => mapInput.select());
+
+    shadow.appendChild(button);
+  }
+
+  update() {
+    const opts = { query: this.query, mode: "ide" };
+    if (this.refs.mapViewCheckBox.checked) {
+      opts.center = this.center;
+      opts.zoom = this.zoom;
+    }
+    opts.autoRun = this.refs.autoRunCheckBox.checked;
+    this.refs.queryInput.value = toQueryParams(opts);
+    delete opts.autoRun;
+    opts.center = this.center;
+    opts.zoom = this.zoom;
+    opts.mode = "map";
+    this.refs.mapInput.value = toQueryParams(opts);
+  }
+}

package/components/style-picker.js

@@ -0,0 +1,47 @@
+import { h, t } from "../lib/dom.js";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+
+const style = `margin: 10px 0; display: block; width: 100%; text-align: left;`;
+
+export class StylePicker extends HTMLElement {
+  constructor() {
+    super();
+    this.styles = [];
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    if (!this.styles || this.styles.length === 0) {
+      return;
+    }
+
+    const div = h("div", { slot: "modal-content" });
+    const button = h(
+      "button-modal",
+      { text: "Pick Style", icon: "paintbrush" },
+      div,
+    );
+    this.refs = { button, div };
+
+    for (const [name, value, tiles] of this.styles) {
+      const styleButton = h(
+        "button",
+        { style },
+        t(name),
+        // h("br"),
+        // h("small", {}, `Tiles: ${tiles}`),
+      );
+      styleButton.addEventListener("click", (e) => {
+        button.toggle();
+        this.dispatchEvent(
+          new CustomEvent("change", { detail: { value: value } }),
+        );
+      });
+      div.appendChild(styleButton);
+    }
+
+    shadow.appendChild(button);
+  }
+}