@trailstash/ultra/components/run-button.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 { normalizeCSS } from "../lib/normalize.js";
import { style as buttonCSS } from "./button.js";

export class RunButton extends HTMLElement {
  static observedAttributes = ["loading"];
  icons = {
    run: "play",
    abort: "xmark",
  };
  text = {
    run: "Run",
    abort: "Cancel",
  };
  colors = {
    run: "#2ecc40",
    abort: "#ff4136",
    text: "white",
  };

  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" });

    const style = new CSSStyleSheet();
    style.replaceSync(`
  :host {
  }
  button {
    background: ${this.colors.run};
    width: 115px;
    color: ${this.colors.text};
  }
  button:after {
    content: " ${this.text.run}";
  }
  button.loading {
    background: ${this.colors.abort};
  }
  button.loading:after {
    content: " ${this.text.abort}";
  }
`);

    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 = this.icons.run;
        this.dispatchEvent(new Event("abort"));
      } else {
        this.refs.button.children[0].icon = this.icons.abort;
        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 = this.icons.abort;
    } else {
      this.refs.button.classList.remove("loading");
      this.refs.button.children[0].icon = this.icons.run;
    }
  }
}