blacklight-spotlight 5.3.2 → 6.0.0.rc2

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

@@ -7,7 +7,7 @@ function highlight(value, query) {
   const queryValue = query.trim()
   return queryValue
     ? value.replace(new RegExp(queryValue, "gi"), "<strong>$&</strong>")
-    : value
+    : ""
 }
 
 function templateFunc(obj, query) {
@@ -49,13 +49,18 @@ async function fetchResult(url) {
 }
 
 export function addAutocompletetoFeaturedImage() {
-  const autocompletePath = $(
+  const autocompletePathElement = document.querySelector(
     "form[data-autocomplete-exhibit-catalog-path]",
-  ).data("autocomplete-exhibit-catalog-path")
-  const featuredImageTypeaheads = $("[data-featured-image-typeahead]")
+  )
+  const autocompletePath =
+    autocompletePathElement &&
+    autocompletePathElement.dataset.autocompleteExhibitCatalogPath
+  const featuredImageTypeaheads = document.querySelectorAll(
+    "[data-featured-image-typeahead]",
+  )
   if (featuredImageTypeaheads.length === 0) return
 
-  $.each(featuredImageTypeaheads, function (index, autoCompleteInput) {
+  featuredImageTypeaheads.forEach((autoCompleteInput) => {
     const autoCompleteElement = autoCompleteInput.closest("auto-complete")
 
     autoCompleteElement.setAttribute("src", autocompletePath)
@@ -66,12 +71,16 @@ export function addAutocompletetoFeaturedImage() {
       )
       if (!data) return
 
-      const inputElement = $(e.relatedTarget)
-      const panel = document.querySelector(e.relatedTarget.dataset.targetPanel)
-      e.relatedTarget.value = data.title
-      addImageSelector(inputElement, $(panel), data.iiif_manifest, true)
-      $(inputElement.data("id-field")).val(data["global_id"])
-      inputElement.attr("type", "text")
+      const inputElement = e.relatedTarget
+      const panel = document.querySelector(inputElement.dataset.targetPanel)
+      inputElement.value = data.title
+      addImageSelector(inputElement, panel, data.iiif_manifest, true)
+      const idFieldSelector = inputElement.dataset.idField
+      const idField = document.querySelector(idFieldSelector)
+      if (idField) {
+        idField.value = data["global_id"]
+      }
+      inputElement.setAttribute("type", "text")
     })
   })
 }

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

@@ -1,37 +1,37 @@
 /*
-  Simple plugin to select form elements
+  Simple helper to select form elements
   when other elements are clicked.
 */
-;(function ($) {
-  $.fn.selectRelatedInput = function () {
-    var clickElements = this
+export function selectRelatedInput(elements) {
+  if (!elements) return
 
-    $(clickElements).each(function () {
-      var target = $($(this).data("input-select-target"))
+  const nodes =
+    elements instanceof NodeList || Array.isArray(elements)
+      ? Array.from(elements)
+      : [elements]
 
-      var event
+  nodes.forEach(function (element) {
+    if (!element) return
+    const targetSelector = element.getAttribute("data-input-select-target")
+    if (!targetSelector) return
+    const target = document.querySelector(targetSelector)
+    if (!target) return
 
-      if ($(this).is("select")) {
-        event = "change"
+    const event =
+      element.tagName.toLowerCase() === "select" ? "change" : "click"
+
+    element.addEventListener(event, function () {
+      if (target.type === "checkbox" || target.type === "radio") {
+        target.checked = true
       } else {
-        event = "click"
+        target.focus()
       }
-
-      $(this).on(event, function () {
-        if (target.is(":checkbox") || target.is(":radio")) {
-          target.prop("checked", true)
-        } else {
-          target.focus()
-        }
-      })
     })
-
-    return this
-  }
-})(jQuery)
+  })
+}
 
 export default class {
   connect() {
-    $("[data-input-select-target]").selectRelatedInput()
+    selectRelatedInput(document.querySelectorAll("[data-input-select-target]"))
   }
 }

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

@@ -0,0 +1,120 @@
+// Vanilla JavaScript port of the default behavior of jquery.serializeJSON (v3.2.1).
+// Serializes form elements with bracket-notation names (e.g. "item[0][title]")
+// into a nested JavaScript object. Accepts a NodeList/array of elements.
+
+var rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i
+var rcheckableType = /^(?:checkbox|radio)$/i
+
+function splitInputNameIntoKeysArray(name) {
+  var keys = name.split("[")
+  keys = keys.map(function (key) {
+    return key.replace(/\]/g, "")
+  })
+  if (keys[0] === "") {
+    keys.shift()
+  }
+  return keys
+}
+
+function deepGet(o, keys) {
+  if (
+    o === undefined ||
+    keys === undefined ||
+    keys.length === 0 ||
+    typeof o !== "object"
+  ) {
+    return o
+  }
+  var key = keys[0]
+  if (key === "") return undefined
+  if (keys.length === 1) return o[key]
+  return deepGet(o[key], keys.slice(1))
+}
+
+function deepSet(o, keys, value) {
+  if (keys.length === 0) return
+
+  var key = keys[0]
+
+  if (keys.length === 1) {
+    if (key === "") {
+      o.push(value)
+    } else {
+      o[key] = value
+    }
+    return
+  }
+
+  var nextKey = keys[1]
+  var tailKeys = keys.slice(1)
+
+  if (key === "") {
+    var lastIdx = o.length - 1
+    var lastVal = o[lastIdx]
+
+    if (
+      typeof lastVal === "object" &&
+      lastVal !== null &&
+      deepGet(lastVal, tailKeys) === undefined
+    ) {
+      key = lastIdx
+    } else {
+      key = lastIdx + 1
+    }
+  }
+
+  if (nextKey === "") {
+    if (o[key] === undefined || !Array.isArray(o[key])) {
+      o[key] = []
+    }
+  } else {
+    if (o[key] === undefined || typeof o[key] !== "object" || o[key] === null) {
+      o[key] = {}
+    }
+  }
+
+  deepSet(o[key], tailKeys, value)
+}
+
+function elementValue(el) {
+  var nodeName = el.nodeName.toLowerCase()
+  if (nodeName === "select" && el.multiple) {
+    var values = []
+    Array.prototype.forEach.call(el.options, function (opt) {
+      if (opt.selected) values.push(opt.value)
+    })
+    return values
+  }
+  return el.value
+}
+
+export default function serializeJSON(elements) {
+  var data = {}
+
+  Array.prototype.forEach.call(elements, function (el) {
+    if (!el.name) return
+    if (el.disabled) return
+
+    var type = el.type || ""
+    var nodeName = el.nodeName.toLowerCase()
+
+    if (nodeName === "input" && rsubmitterTypes.test(type)) return
+    if (rcheckableType.test(type) && !el.checked) return
+
+    var val = elementValue(el)
+    if (val == null) return
+
+    var assign = function (v) {
+      var value = String(v).replace(/\r?\n/g, "\r\n")
+      deepSet(data, splitInputNameIntoKeysArray(el.name), value)
+    }
+
+    if (Array.isArray(val)) {
+      val.forEach(assign)
+    } else {
+      assign(val)
+    }
+  })
+
+  return data
+}

data/app/javascript/spotlight/admin/sir-trevor/block_controls.js

@@ -33,7 +33,7 @@ import Core from "spotlight/core"
       ) {
         var blockGroup
 
-        if ($.isFunction(Blocks[type].prototype.blockGroup)) {
+        if (typeof Blocks[type].prototype.blockGroup === "function") {
           blockGroup = Blocks[type].prototype.blockGroup()
         } else {
           blockGroup = Blocks[type].prototype.blockGroup
@@ -52,16 +52,17 @@ import Core from "spotlight/core"
 
     function generateBlock(groups, key) {
       var group = groups[key]
-      var groupEl = $(
-        "<div class='st-controls-group'><div class='st-group-col-form-label'>" +
-          key +
-          "</div></div>",
-      )
+      var groupEl = document.createElement("div")
+      groupEl.className = "st-controls-group"
+      var label = document.createElement("div")
+      label.className = "st-group-col-form-label"
+      label.textContent = key
+      groupEl.appendChild(label)
       var buttons = group.reduce(function (memo, btn) {
         return memo + btn
       }, "")
-      groupEl.append(buttons)
-      return groupEl[0].outerHTML
+      groupEl.insertAdjacentHTML("beforeend", buttons)
+      return groupEl.outerHTML
     }
 
     var standardWidgets = generateBlock(
@@ -94,6 +95,15 @@ import Core from "spotlight/core"
     return elButtons
   }
 
+  function delegate(root, selector, eventName, handler) {
+    root.addEventListener(eventName, function (e) {
+      var matcher = e.target.closest(selector)
+      if (matcher) {
+        handler.call(matcher, e)
+      }
+    })
+  }
+
   Core.BlockControls = function () {}
   Core.BlockControls.create = function (editor) {
     // REFACTOR - should probably not know about blockManager
@@ -122,12 +132,15 @@ import Core from "spotlight/core"
       if (!parent || hide() === parent) {
         return
       }
-      $(".st-block__inner", parent).after(el)
+      var inner = parent.querySelector(".st-block__inner")
+      if (inner) {
+        inner.insertAdjacentElement("afterend", el)
+      }
       parent.classList.add("st-block--controls-active")
     }
 
-    $(editor.wrapper).delegate(".st-block-replacer", "click", insert)
-    $(editor.wrapper).delegate(".st-block-controls__button", "click", insert)
+    delegate(editor.wrapper, ".st-block-replacer", "click", insert)
+    delegate(editor.wrapper, ".st-block-controls__button", "click", insert)
 
     return {
       el: el,

data/app/javascript/spotlight/admin/sir-trevor/block_limits.js

@@ -18,12 +18,13 @@ Core.BlockLimits.prototype.checkBlockTypeLimitOnAdd = function () {
   var editor = this.editor
 
   return function (block) {
-    var control = $(
+    var control = editor.blockControls.el.querySelector(
       ".st-block-controls__button[data-type='" + block.type + "']",
-      editor.blockControls.el,
     )
 
-    control.prop("disabled", !editor.blockManager.canCreateBlock(block.class()))
+    if (control) {
+      control.disabled = !editor.blockManager.canCreateBlock(block.class())
+    }
   }
 }
 
@@ -32,13 +33,15 @@ Core.BlockLimits.prototype.checkGlobalBlockTypeLimit = function () {
   var editor = this.editor
 
   return function () {
-    $.each(editor.blockManager.blockTypes, function (i, type) {
+    editor.blockManager.blockTypes.forEach(function (type) {
       var block_type = SirTrevor.Blocks[type].prototype
 
-      var control = $(editor.blockControls.el).find(
+      var control = editor.blockControls.el.querySelector(
         ".st-block-controls__button[data-type='" + block_type.type + "']",
       )
-      control.prop("disabled", !editor.blockManager.canCreateBlock(type))
+      if (control) {
+        control.disabled = !editor.blockManager.canCreateBlock(type)
+      }
     })
   }
 }

data/app/javascript/spotlight/admin/sir-trevor/locales.js

@@ -1,4 +1,4 @@
-SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
+SirTrevor.Locales.en.blocks = Object.assign(SirTrevor.Locales.en.blocks, {
   autocompleteable: {
     placeholder: "Enter a title...",
   },
@@ -14,7 +14,7 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
     autocomplete: "Enter a browse group title...",
     title: "Browse Group Categories",
     description:
-      "This widget displays all browse categories associated with a selected browse group as a horizontally-scrolling row. Each selected browse group is displayed as a separate row. Each displayed category in a group links to the corresponding browse category results page.",
+      "This widget displays a limited number of browse categories from each selected browse group, with a link to view all categories in the group. Each selected group is displayed as a separate row. Each category links to the corresponding browse category results page.",
     item_counts: "Include category item counts?",
   },
 

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

@@ -37,7 +37,7 @@ const Module = (function () {
         nestedContainers = document.querySelectorAll(nestableContainerSelector)
       }
 
-      // nestedContainers could be a jQuery selector result, normalize to an array.
+      // nestedContainers is a list of DOM nodes, normalize to an array.
       const containersToInit = Array.from(nestedContainers)
       containersToInit.forEach((container) => {
         // Sir Trevor listens for drag and drop events and will error on Sortable events.
@@ -167,10 +167,7 @@ const Module = (function () {
         )
         emptySortableElement.className = nestedSortableClass
         draggableElement.appendChild(emptySortableElement)
-        new Sortable(emptySortableElement, {
-          ...sortableOptions,
-          group: group,
-        })
+        new Sortable(emptySortableElement, { ...sortableOptions, group: group })
       }
       makeEmptyChildSortablesForEligibleParents(
         draggableElement,

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

@@ -4,19 +4,24 @@
 // present (indicated by data attributes) in each tab's content
 export default class {
   connect() {
-    $('[data-behavior="translation-progress"]').each(function () {
-      var currentTab = $(this)
-      var tabName = $(this).attr("aria-controls")
-      var translationFields = $("#" + tabName).find(
-        '[data-translation-progress-item="true"]',
-      )
-      var completedTranslations = $("#" + tabName).find(
-        '[data-translation-present="true"]',
-      )
+    document
+      .querySelectorAll('[data-behavior="translation-progress"]')
+      .forEach(function (tab) {
+        var tabName = tab.getAttribute("aria-controls")
+        var tabContent = tabName && document.getElementById(tabName)
+        if (!tabContent) return
 
-      currentTab
-        .find("span")
-        .text(completedTranslations.length + "/" + translationFields.length)
-    })
+        var translationFields = tabContent.querySelectorAll(
+          '[data-translation-progress-item="true"]',
+        )
+        var completedTranslations = tabContent.querySelectorAll(
+          '[data-translation-present="true"]',
+        )
+
+        tab.querySelectorAll("span").forEach(function (span) {
+          span.textContent =
+            completedTranslations.length + "/" + translationFields.length
+        })
+      })
   }
 }

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

@@ -1,69 +1,156 @@
 export default class {
   connect() {
-    var container
-    function edit_user(event) {
-      event.preventDefault()
-      $(this).closest("tr").hide()
-      const id = $(this).attr("data-target")
-      const edit_view = $("[data-edit-for='" + id + "']", container).show()
-      $.each(edit_view.find('input[type="text"], select'), function () {
-        // Cache original values incase editing is canceled
-        $(this).data("orig", $(this).val())
-      })
-    }
-
-    function cancel_edit(event) {
-      event.preventDefault()
-      const id = $(this).closest("tr").attr("data-edit-for")
-      const edit_view = $("[data-edit-for='" + id + "']", container).hide()
-      clear_errors(edit_view)
-      rollback_changes(edit_view)
-      $("[data-show-for='" + id + "']", container).show()
-    }
-
-    function clear_errors(element) {
-      element
-        .find(".has-error")
-        .removeClass("has-error")
-        .find(".form-text")
-        .remove() // Remove the error messages
-    }
-
-    function rollback_changes(element) {
-      $.each(element.find('input[type="text"], select'), function () {
-        $(this).val($(this).data("orig")).trigger("change")
-      })
-    }
-
-    function destroy_user(_event) {
-      const id = $(this).attr("data-target")
-      $("[data-destroy-for='" + id + "']", container).val("1")
-    }
-
-    function new_user(event) {
-      event.preventDefault()
-      const edit_view = $("[data-edit-for='new']", container).show()
-      $.each(edit_view.find('input[type="text"], select'), function () {
-        // Cache original values incase editing is canceled
-        $(this).data("orig", $(this).val())
+    document
+      .querySelectorAll(".edit_exhibit, .admin-users")
+      .forEach((container) => {
+        const edit_user = (event) => {
+          event.preventDefault()
+          const button = event.currentTarget
+          const row = button.closest("tr")
+          row.style.display = "none"
+
+          const id = button.getAttribute("data-target")
+          // Show ALL rows for this id (the fields row and the actions row)
+          container
+            .querySelectorAll(`[data-edit-for='${id}']`)
+            .forEach((edit_view) => {
+              edit_view.style.display = ""
+
+              // Cache original values in case editing is canceled
+              edit_view
+                .querySelectorAll('input[type="text"], select')
+                .forEach((input) => {
+                  input.dataset.orig = input.value
+                })
+            })
+        }
+
+        const cancel_edit = (event) => {
+          event.preventDefault()
+          const button = event.currentTarget
+          const id = button
+            .closest("tr[data-edit-for]")
+            .getAttribute("data-edit-for")
+
+          // Hide all rows with this id
+          container
+            .querySelectorAll(`[data-edit-for='${id}']`)
+            .forEach((edit_view) => {
+              edit_view.style.display = "none"
+              clear_errors(edit_view)
+              rollback_changes(edit_view)
+            })
+
+          const show_view = container.querySelector(`[data-show-for='${id}']`)
+          if (show_view) {
+            show_view.style.display = ""
+          }
+        }
+
+        const clear_errors = (element) => {
+          element.querySelectorAll(".has-error").forEach((errorElement) => {
+            errorElement.classList.remove("has-error")
+            // Remove the error messages
+            errorElement.querySelectorAll(".form-text").forEach((formText) => {
+              formText.remove()
+            })
+          })
+        }
+
+        const rollback_changes = (element) => {
+          element
+            .querySelectorAll('input[type="text"], select')
+            .forEach((input) => {
+              if (input.dataset.orig !== undefined) {
+                input.value = input.dataset.orig
+                input.dispatchEvent(new Event("change", { bubbles: true }))
+              }
+            })
+        }
+
+        const destroy_user = (event) => {
+          const button = event.currentTarget
+          const id = button.getAttribute("data-target")
+          const destroyInput = container.querySelector(
+            `[data-destroy-for='${id}']`,
+          )
+          if (destroyInput) {
+            destroyInput.value = "1"
+          }
+        }
+
+        const new_user = (event) => {
+          event.preventDefault()
+          // Show ALL rows with data-edit-for='new'
+          container
+            .querySelectorAll(`[data-edit-for='new']`)
+            .forEach((edit_view) => {
+              edit_view.style.display = ""
+
+              // Cache original values in case editing is canceled
+              edit_view
+                .querySelectorAll('input[type="text"], select')
+                .forEach((input) => {
+                  input.dataset.orig = input.value
+                })
+            })
+        }
+
+        const open_errors = () => {
+          // Find all rows with errors within this container
+          const allErrorElements = container.querySelectorAll(".has-error")
+          const rowsToShow = new Set()
+
+          allErrorElements.forEach((errorElement) => {
+            const edit_row = errorElement.closest("[data-edit-for]")
+            if (edit_row) {
+              // Show all rows with the same data-edit-for value
+              const id = edit_row.getAttribute("data-edit-for")
+              container
+                .querySelectorAll(`[data-edit-for='${id}']`)
+                .forEach((row) => {
+                  rowsToShow.add(row)
+                })
+            }
+          })
+
+          rowsToShow.forEach((row) => {
+            row.style.display = ""
+          })
+        }
+
+        // First, hide all edit views
+        container.querySelectorAll("[data-edit-for]").forEach((element) => {
+          element.style.display = "none"
+        })
+
+        // Then show any with errors
+        open_errors()
+
+        // Attach event listeners
+        container
+          .querySelectorAll("[data-behavior='edit-user']")
+          .forEach((button) => {
+            button.addEventListener("click", edit_user)
+          })
+
+        container
+          .querySelectorAll("[data-behavior='cancel-edit']")
+          .forEach((button) => {
+            button.addEventListener("click", cancel_edit)
+          })
+
+        container
+          .querySelectorAll("[data-behavior='destroy-user']")
+          .forEach((button) => {
+            button.addEventListener("click", destroy_user)
+          })
+
+        container
+          .querySelectorAll("[data-behavior='new-user']")
+          .forEach((button) => {
+            button.addEventListener("click", new_user)
+          })
       })
-    }
-
-    function open_errors() {
-      const edit_row = container.find(".has-error").closest("[data-edit-for]")
-      edit_row.show()
-      // The following row has the controls, so show it too.
-      edit_row.next().show()
-    }
-
-    $(".edit_exhibit, .admin-users").each(function () {
-      container = $(this)
-      $("[data-edit-for]", container).hide()
-      open_errors()
-      $("[data-behavior='edit-user']", container).on("click", edit_user)
-      $("[data-behavior='cancel-edit']", container).on("click", cancel_edit)
-      $("[data-behavior='destroy-user']", container).on("click", destroy_user)
-      $("[data-behavior='new-user']", container).on("click", new_user)
-    })
   }
 }