Move overlay into a web component

The overlay is now a web component and a bit easier to use. The API is still the same, but the component is using the same mechanic as the Spinner.

app/javascript/alchemy_admin.js

@@ -23,10 +23,11 @@ $.fx.speeds._default = 400
 
 // Web Components
 import "alchemy_admin/components/char_counter"
-import "alchemy_admin/components/tinymce"
-import "alchemy_admin/components/tooltip"
 import "alchemy_admin/components/datepicker"
+import "alchemy_admin/components/overlay"
 import "alchemy_admin/components/spinner"
+import "alchemy_admin/components/tinymce"
+import "alchemy_admin/components/tooltip"
 
 // Global Alchemy object
 if (typeof window.Alchemy === "undefined") {

app/javascript/alchemy_admin/components/overlay.js

@@ -0,0 +1,22 @@
+import { AlchemyHTMLElement } from "./alchemy_html_element"
+
+class Overlay extends AlchemyHTMLElement {
+  static properties = {
+    show: { default: false },
+    text: { default: "" }
+  }
+
+  render() {
+    this.id = `overlay`
+    this.style.setProperty("display", this.show ? "block" : "none")
+
+    return `
+        <alchemy-spinner></alchemy-spinner>
+        <div id="overlay_text_box">
+            <span id="overlay_text">${this.text}</span>
+        </div>
+        `
+  }
+}
+
+customElements.define("alchemy-overlay", Overlay)

app/javascript/alchemy_admin/please_wait_overlay.js

@@ -4,16 +4,5 @@
  * @param {boolean,null} show
  */
 export default function pleaseWaitOverlay(show) {
-  if (show == null) {
-    show = true
-  }
-  const $overlay = $("#overlay")
-  if (show) {
-    const spinner = new Alchemy.Spinner("medium")
-    spinner.spin($overlay)
-    $overlay.show()
-  } else {
-    $overlay.find(".spinner").remove()
-    $overlay.hide()
-  }
+  customElements.get("alchemy-overlay").show = !!show
 }

app/views/layouts/alchemy/admin.html.erb

@@ -42,11 +42,7 @@
       <h1><%= Alchemy.t(:javascript_disabled_headline) %></h1>
       <p><%= Alchemy.t(:javascript_disabled_text) %></p>
     </noscript>
-    <div id="overlay">
-      <div id="overlay_text_box">
-        <span id="overlay_text"><%= Alchemy.t(:please_wait) %></span>
-      </div>
-    </div>
+    <alchemy-overlay text="<%= Alchemy.t(:please_wait) %>"></alchemy-overlay>
     <div id="left_menu">
       <div id="main_navi">
         <% sorted_alchemy_modules.each do |alchemy_module| %>

spec/javascript/alchemy_admin/components/overlay.spec.js

@@ -0,0 +1,35 @@
+import "../../../../app/javascript/alchemy_admin/components/overlay"
+
+describe("alchemy-overlay", () => {
+  /**
+   * @type {HTMLElement | undefined}
+   */
+  let overlay = undefined
+  let overlayText = undefined
+
+  const renderComponent = (html = `<alchemy-overlay></alchemy-overlay>`) => {
+    document.body.innerHTML = html
+    overlay = document.querySelector("alchemy-overlay")
+    overlayText = document.getElementById("overlay_text")
+  }
+
+  it("should render the overlay", () => {
+    renderComponent()
+    expect(overlayText).toBeTruthy()
+  })
+
+  it("should be hidden", () => {
+    renderComponent()
+    expect(overlay.style.getPropertyValue("display")).toBe("none")
+  })
+
+  it("should have a given text", () => {
+    renderComponent(`<alchemy-overlay text="Foo Bar"></alchemy-overlay>`)
+    expect(overlayText.textContent).toBe("Foo Bar")
+  })
+
+  it("should be visible", () => {
+    renderComponent(`<alchemy-overlay show="true"></alchemy-overlay>`)
+    expect(overlay.style.getPropertyValue("display")).toBe("block")
+  })
+})