sutty-base-jekyll-theme/_packs/controllers/notification_controller.js

import { Controller } from "stimulus";
import { Liquid } from "liquidjs";

/*
 * Waits for notifications and shows them by fetching and rendering
 * a template.
 */
export default class extends Controller {
  connect() {
    window.addEventListener(
      "notification",
      async (event) =>
        await this.render(event.detail.template, event.detail.data)
    );
  }

  /*
   * Renders and replaces notification contents and then shows it.  Does
   * nothing if the template isn't found.
   */
  async render(name, data = {}) {
    data.site = window.site;

    const template = window.templates.alert;
    const html = await this.engine.parseAndRender(template, data);

    this.element.innerHTML = html;
    this.show();
  }

  /*
   * Shows the notification
   */
  show() {
    this.element.classList.add("show");
    this.element.classList.remove("hide");
  }

  /*
   * Hides the notification
   */
  hide() {
    this.element.classList.add("hide");
    this.element.classList.remove("show");
  }

  /*
   * Liquid renderer
   *
   * @return Liquid
   */
  get engine() {
    if (!window.liquid) window.liquid = new Liquid();

    return window.liquid;
  }
}