Convert base from Coffeescript to Javascript

app/assets/javascripts/alchemy/admin.js

@@ -13,7 +13,6 @@
 //= require requestAnimationFrame
 //= require handlebars
 //= require alchemy/templates
-//= require alchemy/alchemy.base
 //= require alchemy/alchemy.dialog
 //= require alchemy/alchemy.confirm_dialog
 //= require alchemy/alchemy.dragndrop

app/javascript/alchemy_admin.js

@@ -11,16 +11,23 @@ import pictureEditors from "alchemy_admin/picture_editors"
 import ImageLoader from "alchemy_admin/image_loader"
 import ImageCropper from "alchemy_admin/image_cropper"
 import Initializer from "alchemy_admin/initializer"
+import pictureSelector from "alchemy_admin/picture_selector"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import Sitemap from "alchemy_admin/sitemap"
+import SelectBox from "alchemy_admin/select_box"
 import Spinner from "alchemy_admin/spinner"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 
+// Setting jQueryUIs global animation duration to something more snappy
+$.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") {
@@ -40,6 +47,9 @@ Object.assign(Alchemy, {
   ImageCropper,
   Initializer,
   IngredientAnchorLink,
+  pictureSelector,
+  pleaseWaitOverlay,
+  SelectBox,
   Sitemap,
   Spinner,
   PagePublicationFields

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/picture_selector.js

@@ -0,0 +1,38 @@
+import { on } from "alchemy_admin/utils/events"
+
+/**
+ * Multiple picture select handler for the picture archive.
+ */
+export default function PictureSelector() {
+  const selectedItemTools = document.querySelector(".selected_item_tools")
+  const checkedInputs = () =>
+    document.querySelectorAll("#picture_archive input:checked")
+
+  // make the item toolbar visible and show the checkbox also if it is not hovered anymore
+  on("change", ".picture_tool.select", "input", (event) => {
+    selectedItemTools.style.display =
+      checkedInputs().length > 0 ? "block" : "none"
+
+    const parentElementClassList = event.target.parentElement.classList
+    const checked = event.target.checked
+
+    parentElementClassList.toggle("visible", checked)
+    parentElementClassList.toggle("hidden", !checked)
+  })
+
+  // open the edit view in a dialog modal
+  on("click", ".selected_item_tools", "a#edit_multiple_pictures", (event) => {
+    event.preventDefault()
+
+    const searchParameters = new URLSearchParams()
+    checkedInputs().forEach((entry) =>
+      searchParameters.append(entry.name, entry.value)
+    )
+    const url = event.target.href + "?" + searchParameters.toString()
+
+    Alchemy.openDialog(url, {
+      title: event.target.title,
+      size: "400x295"
+    })
+  })
+}

app/javascript/alchemy_admin/please_wait_overlay.js

@@ -0,0 +1,8 @@
+/**
+ * To show the "Please wait" overlay.
+ * Pass false to hide it.
+ * @param {boolean,null} show
+ */
+export default function pleaseWaitOverlay(show) {
+  customElements.get("alchemy-overlay").show = !!show
+}

app/javascript/alchemy_admin/select_box.js

@@ -0,0 +1,11 @@
+/**
+ * Initializes all select tag with .alchemy_selectbox class as select2 instance
+ * Pass a jQuery scope to only init a subset of selectboxes.
+ * @param scope
+ */
+export default function SelectBox(scope) {
+  $("select.alchemy_selectbox", scope).select2({
+    minimumResultsForSearch: 7,
+    dropdownAutoWidth: true
+  })
+}

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/features/admin/legacy_page_url_management_spec.rb

@@ -11,7 +11,7 @@
 
   def open_page_properties
     visit admin_pages_path
-    expect(page).to have_no_css(".spinner")
+    expect(page.find("alchemy-overlay").style("display")["display"]).to have_content("none")
     page.find("a[href='#{configure_admin_page_path(a_page)}']", wait: 10).click
   end
 

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

@@ -0,0 +1,35 @@
+import "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")
+  })
+})