hologram-web-library/src/web-components/hw-toast.js

Hologram Web Library components

import HTMLParsedElement from "./hw-common";
import HWIcons from "./hw-icons";

export const hwToastObservedAttributes = ["type", "message"];

class HWToast extends HTMLParsedElement {
  innerWrapper;
  messageWrapper;
  leftIconWrapper;
  closeButtonWrapper;
  closeButton;

  constructor() {
    super();
    this.innerWrapper = document.createElement("div");
    this.messageWrapper = document.createElement("div");
    this.leftIconWrapper = document.createElement("div");
    this.closeButtonWrapper = document.createElement("div");
    this.closeButton = document.createElement("button");
  }

  parsedCallback() {
    this.classList.add("hw-toast-container");
    this.innerWrapper.classList.add("inner-wrapper");
    this.messageWrapper.classList.add("message-wrapper");

    const message = this.getAttribute("message") || "message";

    this.leftIconWrapper.appendChild(HWIcons.check());
    this.messageWrapper.innerHTML = message;
    this.closeButton.appendChild(HWIcons.close());
    this.closeButtonWrapper.appendChild(this.closeButton);

    this.innerWrapper.appendChild(this.leftIconWrapper);
    this.innerWrapper.appendChild(this.messageWrapper);
    this.innerWrapper.appendChild(this.closeButtonWrapper);
    this.appendChild(this.innerWrapper);

    const _removeToast = () => {
      this.classList.remove("active");
      setTimeout(() => {
        this.remove();
      }, 1000);
    }

    this.closeButton.addEventListener("click", _removeToast);

    setTimeout(() => {
      this.classList.add("active");

      const timeout = this.getAttribute("timeout") || 3000;

      setTimeout(_removeToast, timeout);
    }, 50);
  }

  static get observedAttributes() {
    return hwToastObservedAttributes;
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === "type") {
      if (this.getAttribute(attrName) === "error") {
        this.leftIconWrapper.classList.add("hidden");
      } else {
        this.leftIconWrapper.classList.remove("hidden");
      }
    }

    if (attrName === "message") {
      this.querySelector(".message-wrapper").innerHTML = this.getAttribute(attrName);
    }
  }

}

if (!customElements.get("hw-toast")) {
  customElements.define("hw-toast", HWToast);
}