Split up base.js into seperate modules

Create a javascript file for each function. They are not related to each other.

app/javascript/alchemy_admin.js

@@ -1,6 +1,5 @@
 import "@hotwired/turbo-rails"
 
-import Base from "alchemy_admin/base"
 import Buttons from "alchemy_admin/buttons"
 import GUI from "alchemy_admin/gui"
 import translate from "alchemy_admin/i18n"
@@ -12,7 +11,10 @@ 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 Tinymce from "alchemy_admin/tinymce"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 
@@ -30,7 +32,6 @@ if (typeof window.Alchemy === "undefined") {
 
 // Enhance the global Alchemy object with imported features
 Object.assign(Alchemy, {
-  ...Base,
   Buttons,
   ...Dirty,
   GUI,
@@ -42,6 +43,9 @@ Object.assign(Alchemy, {
   ImageCropper,
   Initializer,
   IngredientAnchorLink,
+  pictureSelector,
+  pleaseWaitOverlay,
+  SelectBox,
   Sitemap,
   Tinymce,
   PagePublicationFields

app/javascript/alchemy_admin/picture_selector.js

@@ -0,0 +1,32 @@
+/**
+ * Multiple picture select handler for the picture archive.
+ */
+export default function PictureSelector() {
+  const $selected_item_tools = $(".selected_item_tools")
+  const $picture_selects = $(".picture_tool.select input")
+
+  $picture_selects.on("change", function () {
+    if ($picture_selects.filter(":checked").size() > 0) {
+      $selected_item_tools.show()
+    } else {
+      $selected_item_tools.hide()
+    }
+
+    if (this.checked) {
+      $(this).parent().addClass("visible").removeClass("hidden")
+    } else {
+      $(this).parent().removeClass("visible").addClass("hidden")
+    }
+  })
+
+  $("a#edit_multiple_pictures").on("click", function (e) {
+    const $this = $(this)
+    const picture_ids = $("input:checkbox", "#picture_archive").serialize()
+    const url = $this.attr("href") + "?" + picture_ids
+
+    Alchemy.openDialog(url, {
+      title: $this.attr("title"),
+      size: "400x295"
+    })
+  })
+}

app/javascript/alchemy_admin/please_wait_overlay.js

@@ -0,0 +1,19 @@
+/**
+ * To show the "Please wait" overlay.
+ * Pass false to hide it.
+ * @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()
+  }
+}

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
+  })
+}