blacklight-spotlight 5.3.2 → 6.0.0.rc2

data/app/javascript/spotlight/admin/edit_in_place.js

@@ -3,75 +3,90 @@
 */
 export default class {
   connect() {
-    $("[data-in-place-edit-target]").each(function () {
-      $(this).on("click.inplaceedit", function () {
-        var $label = $(this).find($(this).data("in-place-edit-target"))
-        var $input = $(this).find($(this).data("in-place-edit-field-target"))
+    document
+      .querySelectorAll("[data-in-place-edit-target]")
+      .forEach(function (container) {
+        var label = container.querySelector(container.dataset.inPlaceEditTarget)
+        var input = container.querySelector(
+          container.dataset.inPlaceEditFieldTarget,
+        )
+        if (!label || !input) return
 
-        // hide the edit-in-place affordance icon while in edit mode
-        $(this).addClass("hide-edit-icon")
-        $label.hide()
-        $input.val($label.text())
-        $input.attr("type", "text")
-        $input.select()
-        $input.focus()
+        container.addEventListener("click", function (e) {
+          // hide the edit-in-place affordance icon while in edit mode
+          container.classList.add("hide-edit-icon")
+          label.style.display = "none"
+          input.value = label.textContent
+          input.setAttribute("type", "text")
+          input.select()
+          input.focus()
+          e.preventDefault()
+          e.stopPropagation()
+        })
 
-        $input.on("keypress", function (e) {
-          if (e.which == 13) {
-            $input.trigger("blur.inplaceedit")
-            return false
+        input.addEventListener("keypress", function (e) {
+          if (e.key === "Enter") {
+            input.blur()
+            e.preventDefault()
+            e.stopPropagation()
           }
         })
 
-        $input.on("blur.inplaceedit", function () {
-          var value = $input.val()
+        input.addEventListener("blur", function () {
+          var value = input.value
 
-          if ($.trim(value).length == 0) {
-            $input.val($label.text())
+          if (value.trim().length == 0) {
+            input.value = label.textContent
           } else {
-            $label.text(value)
+            label.textContent = value
           }
 
-          $label.show()
-          $input.attr("type", "hidden")
+          label.style.display = ""
+          input.setAttribute("type", "hidden")
           // when leaving edit mode, should no longer hide edit-in-place affordance icon
-          $("[data-in-place-edit-target]").removeClass("hide-edit-icon")
-
-          return false
+          document
+            .querySelectorAll("[data-in-place-edit-target]")
+            .forEach(function (el) {
+              el.classList.remove("hide-edit-icon")
+            })
         })
-
-        return false
       })
-    })
 
-    $("[data-behavior='restore-default']").each(function () {
-      var hidden = $("[data-default-value]", $(this))
-      var value = $(
-        $("[data-in-place-edit-target]", $(this)).data("in-place-edit-target"),
-        $(this),
-      )
-      var button = $("[data-restore-default]", $(this))
+    document
+      .querySelectorAll("[data-behavior='restore-default']")
+      .forEach(function (container) {
+        var hidden = container.querySelector("[data-default-value]")
+        var inPlaceEditContainer = container.querySelector(
+          "[data-in-place-edit-target]",
+        )
+        var button = container.querySelector("[data-restore-default]")
+        if (!hidden || !inPlaceEditContainer || !button) return
 
-      hidden.on("keypress", function (e) {
-        if (e.which == 13) {
-          hidden.trigger("blur")
-          return false
-        }
-      })
+        var value = container.querySelector(
+          inPlaceEditContainer.dataset.inPlaceEditTarget,
+        )
 
-      hidden.on("blur", function () {
-        if ($(this).val() == $(this).data("default-value")) {
-          button.addClass("d-none")
-        } else {
-          button.removeClass("d-none")
-        }
-      })
-      button.on("click", function (e) {
-        e.preventDefault()
-        hidden.val(hidden.data("default-value"))
-        value.text(hidden.data("default-value"))
-        button.hide()
+        hidden.addEventListener("keypress", function (e) {
+          if (e.key === "Enter") {
+            hidden.blur()
+            e.preventDefault()
+          }
+        })
+
+        hidden.addEventListener("blur", function () {
+          if (hidden.value == hidden.dataset.defaultValue) {
+            button.classList.add("d-none")
+          } else {
+            button.classList.remove("d-none")
+          }
+        })
+
+        button.addEventListener("click", function (e) {
+          e.preventDefault()
+          hidden.value = hidden.dataset.defaultValue
+          if (value) value.textContent = hidden.dataset.defaultValue
+          button.style.display = "none"
+        })
       })
-    })
   }
 }

data/app/javascript/spotlight/admin/exhibits.js

@@ -3,54 +3,90 @@ import { URLify } from "parameterize"
 export default class {
   connect() {
     // auto-fill the exhibit slug on the new exhibit form
-    $("#new_exhibit").each(function () {
-      $("#exhibit_title").on("change keyup", function () {
-        $("#exhibit_slug").attr(
-          "placeholder",
-          URLify($(this).val(), $(this).val().length),
-        )
-      })
+    const newExhibit = document.getElementById("new_exhibit")
+    if (newExhibit) {
+      const exhibitTitle = document.getElementById("exhibit_title")
+      const exhibitSlug = document.getElementById("exhibit_slug")
 
-      $("#exhibit_slug").on("focus", function () {
-        if ($(this).val() === "") {
-          $(this).val($(this).attr("placeholder"))
+      if (exhibitTitle && exhibitSlug) {
+        const updatePlaceholder = () => {
+          const val = exhibitTitle.value || ""
+          exhibitSlug.placeholder = URLify(val, val.length)
         }
-      })
-    })
 
-    $("#another-email").on("click", function (e) {
-      e.preventDefault()
+        exhibitTitle.addEventListener("change", updatePlaceholder)
+        exhibitTitle.addEventListener("keyup", updatePlaceholder)
 
-      var container = $(this).closest(".form-group")
-      var contacts = container.find(".contact")
-      var inputContainer = contacts.first().clone()
+        exhibitSlug.addEventListener("focus", () => {
+          if (exhibitSlug.value === "") {
+            exhibitSlug.value = exhibitSlug.placeholder || ""
+          }
+        })
+      }
+    }
 
-      // wipe out any values from the inputs
-      inputContainer.find("input").each(function () {
-        $(this).val("")
-        $(this).attr("id", $(this).attr("id").replace("0", contacts.length))
-        $(this).attr("name", $(this).attr("name").replace("0", contacts.length))
-        if ($(this).attr("aria-label")) {
-          $(this).attr(
-            "aria-label",
-            $(this)
-              .attr("aria-label")
-              .replace("1", contacts.length + 1),
-          )
-        }
-      })
+    const anotherEmail = document.getElementById("another-email")
+    if (anotherEmail) {
+      anotherEmail.addEventListener("click", (e) => {
+        e.preventDefault()
+
+        const container = anotherEmail.closest(".form-group")
+        if (!container) return
 
-      inputContainer.find(".contact-email-delete-wrapper").remove()
-      inputContainer.find(".confirmation-status").remove()
+        const contacts = container.querySelectorAll(".contact")
+        if (contacts.length === 0) return
 
-      // bootstrap does not render input-groups with only one value in them correctly.
-      inputContainer
-        .find(".input-group input:only-child")
-        .closest(".input-group")
-        .removeClass("input-group")
+        const firstContact = contacts[0]
+        const inputContainer = firstContact.cloneNode(true)
 
-      $(inputContainer).insertAfter(contacts.last())
-    })
+        // wipe out any values from the inputs
+        const inputs = inputContainer.querySelectorAll("input")
+        inputs.forEach((input) => {
+          input.value = ""
+          const originalId = input.getAttribute("id")
+          if (originalId) {
+            input.setAttribute(
+              "id",
+              originalId.replace("0", contacts.length.toString()),
+            )
+          }
+          const originalName = input.getAttribute("name")
+          if (originalName) {
+            input.setAttribute(
+              "name",
+              originalName.replace("0", contacts.length.toString()),
+            )
+          }
+          const originalAriaLabel = input.getAttribute("aria-label")
+          if (originalAriaLabel) {
+            input.setAttribute(
+              "aria-label",
+              originalAriaLabel.replace("1", (contacts.length + 1).toString()),
+            )
+          }
+        })
+
+        inputContainer
+          .querySelectorAll(".contact-email-delete-wrapper")
+          .forEach((el) => el.remove())
+        inputContainer
+          .querySelectorAll(".confirmation-status")
+          .forEach((el) => el.remove())
+
+        // bootstrap does not render input-groups with only one value in them correctly.
+        const onlyChildInputs = inputContainer.querySelectorAll(
+          ".input-group input:only-child",
+        )
+        onlyChildInputs.forEach((input) => {
+          const group = input.closest(".input-group")
+          if (group) {
+            group.classList.remove("input-group")
+          }
+        })
+
+        contacts[contacts.length - 1].after(inputContainer)
+      })
+    }
 
     if (document.getElementById("another-email")) {
       document.addEventListener(
@@ -60,9 +96,15 @@ export default class {
     }
 
     // Put focus in saved search title input when Save this search modal is shown
-    $("#save-modal").on("shown.bs.modal", function () {
-      $("#search_title").focus()
-    })
+    const saveModal = document.getElementById("save-modal")
+    if (saveModal) {
+      saveModal.addEventListener("shown.bs.modal", () => {
+        const searchTitle = document.getElementById("search_title")
+        if (searchTitle) {
+          searchTitle.focus()
+        }
+      })
+    }
   }
 
   contactToDeleteNotFoundHandler(e) {
@@ -70,8 +112,13 @@ export default class {
       e.detail.formSubmission?.delegate?.element?.querySelector(".contact")
     if (contact && e.detail?.fetchResponse?.response?.status === 404) {
       const error = contact.querySelector(".contact-email-delete-error")
-      error.style.display = "block"
-      error.querySelector(".error-msg").textContent = "Not Found"
+      if (error) {
+        error.style.display = "block"
+        const errorMsg = error.querySelector(".error-msg")
+        if (errorMsg) {
+          errorMsg.textContent = "Not Found"
+        }
+      }
     }
   }
 }

data/app/javascript/spotlight/admin/form_observer.js

@@ -1,94 +1,108 @@
-;(function ($, _) {
-  "use strict"
+/*
+ * SerializedForm is built as a singleton. It needs to be able to
+ * handle instantiation from multiple sources, and use the [data-form-observer]
+ * as global state object.
+ */
 
-  /*
-   * SerializedForm is built as a singleton jQuery plugin. It needs to be able to
-   * handle instantiation from multiple sources, and use the [data-form-observer]
-   * as global state object.
-   */
-  $.SerializedForm = function () {
-    var $serializedForm
-    var plugin = this
+// Per-form state (replaces jQuery's .data() storage)
+const formState = new WeakMap()
 
-    // Store form serialization in data attribute
-    function serializeFormStatus() {
-      $serializedForm.data(
-        "serialized-form",
-        formSerialization($serializedForm),
-      )
-    }
+function getState(form) {
+  if (!formState.has(form)) {
+    formState.set(form, {})
+  }
+  return formState.get(form)
+}
 
-    // Do custom serialization of the sir-trevor form data. This needs to be a
-    // passed in argument for comparison later on.
-    function formSerialization(form) {
-      var content_editable = []
-      var i = 0
-      $("[contenteditable='true']", form).each(function () {
-        content_editable.push("&contenteditable_" + i + "=" + $(this).text())
-      })
-      return form.serialize() + content_editable.join()
-    }
+// Do custom serialization of the sir-trevor form data. This needs to be a
+// passed in argument for comparison later on.
+function formSerialization(form) {
+  var params = new URLSearchParams()
+  for (const element of form.elements) {
+    if (!element.name || element.disabled) continue
+    const type = (element.type || "").toLowerCase()
+    if (
+      type === "file" ||
+      type === "submit" ||
+      type === "button" ||
+      type === "reset" ||
+      type === "image"
+    )
+      continue
+    if ((type === "checkbox" || type === "radio") && !element.checked) continue
+    params.append(element.name, element.value)
+  }
 
-    // Unbind observing form on submit (which we have to do because of turbolinks)
-    function unbindObservedFormSubmit() {
-      $serializedForm.on("submit", function () {
-        $(this).data("being-submitted", true)
-      })
-    }
+  var content_editable = []
+  var i = 0
+  form.querySelectorAll("[contenteditable='true']").forEach((element) => {
+    content_editable.push("&contenteditable_" + i + "=" + element.textContent)
+    i++
+  })
+  return params.toString() + content_editable.join("")
+}
 
-    // Get the stored serialized form status
-    function serializedFormStatus() {
-      return $serializedForm.data("serialized-form")
-    }
+// Unbind observing form on submit (which we have to do because of turbolinks)
+function bindObservedFormSubmit(form) {
+  var state = getState(form)
+  if (state.submitBound) return
+  state.submitBound = true
+  form.addEventListener("submit", () => {
+    getState(form).beingSubmitted = true
+  })
+}
 
-    // Check all observed forms on page for status change
-    plugin.observedFormsStatusHasChanged = function () {
-      var unsaved_changes = false
-      $("[data-form-observer]").each(function () {
-        if (!$(this).data("being-submitted")) {
-          if (serializedFormStatus() != formSerialization($(this))) {
-            unsaved_changes = true
-          }
-        }
-      })
-      return unsaved_changes
-    }
+export const SerializedForm = {
+  // Store form serialization in state and bind submit handlers
+  init() {
+    document.querySelectorAll("[data-form-observer]").forEach((form) => {
+      getState(form).serialized = formSerialization(form)
+      bindObservedFormSubmit(form)
+    })
+    return this
+  },
 
-    function init() {
-      $serializedForm = $("[data-form-observer]")
-      serializeFormStatus()
-      unbindObservedFormSubmit()
-    }
+  // Check all observed forms on page for status change
+  observedFormsStatusHasChanged() {
+    return Array.from(document.querySelectorAll("[data-form-observer]")).some(
+      (form) => {
+        var state = getState(form)
+        if (state.beingSubmitted) return false
+        return state.serialized !== formSerialization(form)
+      },
+    )
+  },
+}
 
-    init()
+var UNSAVED_CHANGES_MESSAGE =
+  "You have unsaved changes. Are you sure you want to leave this page?"
 
-    return plugin
+// Don't handle the same event twice #turbolinks
+function handleNavigationEvent(event) {
+  if (event.handled === true) return
+  if (!SerializedForm.observedFormsStatusHasChanged()) return
+  event.handled = true
+
+  // There are variations in how Webkit browsers may handle this:
+  // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
+  if (event.type === "beforeunload") {
+    event.preventDefault()
+    event.returnValue = UNSAVED_CHANGES_MESSAGE
+    return UNSAVED_CHANGES_MESSAGE
+  } else {
+    if (!confirm(UNSAVED_CHANGES_MESSAGE)) {
+      event.preventDefault()
+    }
   }
-})(jQuery)
+}
 
 export default class {
   connect() {
     // Instantiate the singleton SerializedForm plugin
-    var serializedForm = $.SerializedForm()
-    $(window).on(
-      "beforeunload page:before-change turbolinks:before-visit turbo:before-visit",
-      function (event) {
-        // Don't handle the same event twice #turbolinks
-        if (event.handled !== true) {
-          if (serializedForm.observedFormsStatusHasChanged()) {
-            event.handled = true
-            var message =
-              "You have unsaved changes. Are you sure you want to leave this page?"
-            // There are variations in how Webkit browsers may handle this:
-            // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
-            if (event.type == "beforeunload") {
-              return message
-            } else {
-              return confirm(message)
-            }
-          }
-        }
-      },
-    )
+    SerializedForm.init()
+    window.addEventListener("beforeunload", handleNavigationEvent)
+    document.addEventListener("page:before-change", handleNavigationEvent)
+    document.addEventListener("turbolinks:before-visit", handleNavigationEvent)
+    document.addEventListener("turbo:before-visit", handleNavigationEvent)
   }
 }