From b10fbe0aaca6050698912b7c43b36ef29e20577c Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Mon, 4 Sep 2023 14:54:23 +0200
Subject: [PATCH] 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               |  5 +--
 .../alchemy_admin/components/overlay.js       | 22 ++++++++++++
 .../alchemy_admin/please_wait_overlay.js      | 13 +------
 app/views/layouts/alchemy/admin.html.erb      |  6 +---
 .../alchemy_admin/components/overlay.spec.js  | 35 +++++++++++++++++++
 5 files changed, 62 insertions(+), 19 deletions(-)
 create mode 100644 app/javascript/alchemy_admin/components/overlay.js
 create mode 100644 spec/javascript/alchemy_admin/components/overlay.spec.js

diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index 5a9c23cb58..786a407a8f 100644
--- a/app/javascript/alchemy_admin.js
+++ b/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") {
diff --git a/app/javascript/alchemy_admin/components/overlay.js b/app/javascript/alchemy_admin/components/overlay.js
new file mode 100644
index 0000000000..6db711350f
--- /dev/null
+++ b/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)
diff --git a/app/javascript/alchemy_admin/please_wait_overlay.js b/app/javascript/alchemy_admin/please_wait_overlay.js
index 6f019b17a3..d483cef748 100644
--- a/app/javascript/alchemy_admin/please_wait_overlay.js
+++ b/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
 }
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
index 0980bee3d0..4d41a00a65 100644
--- a/app/views/layouts/alchemy/admin.html.erb
+++ b/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| %>
diff --git a/spec/javascript/alchemy_admin/components/overlay.spec.js b/spec/javascript/alchemy_admin/components/overlay.spec.js
new file mode 100644
index 0000000000..108b4ae41c
--- /dev/null
+++ b/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")
+  })
+})