blacklight-spotlight 5.3.2 → 6.0.0.rc2

data/app/javascript/spotlight/admin/blocks/solr_documents_base_block.js

@@ -1,13 +1,14 @@
 import Iiif from "spotlight/admin/iiif"
 import Core from "spotlight/core"
+import multiImageSelector from "spotlight/admin/multi_image_selector"
 
 SirTrevor.Blocks.SolrDocumentsBase = (function () {
   return Core.Block.Resources.extend({
     plustextable: true,
     autocomplete_url: function () {
-      return this.$instance()
-        .closest("form[data-autocomplete-exhibit-catalog-path]")
-        .data("autocomplete-exhibit-catalog-path")
+      return this.instance().closest(
+        "form[data-autocomplete-exhibit-catalog-path]",
+      ).dataset.autocompleteExhibitCatalogPath
     },
     autocomplete_template: function (obj) {
       const thumbnail = obj.thumbnail
@@ -17,19 +18,32 @@ SirTrevor.Blocks.SolrDocumentsBase = (function () {
       <span class="autocomplete-title">${this.highlight(obj.title)}</span><br/><small>&nbsp;&nbsp;${this.highlight(obj.description)}</small></div>`
     },
     transform_autocomplete_results: function (response) {
-      return $.map(response["docs"], function (doc) {
+      return (response["docs"] || []).map(function (doc) {
         return doc
       })
     },
 
     caption_option_values: function () {
-      var fields = $("[data-blacklight-configuration-index-fields]").data(
-        "blacklight-configuration-index-fields",
+      const element = document.querySelector(
+        "[data-blacklight-configuration-index-fields]",
       )
+      const fieldsData = element
+        ? element.dataset.blacklightConfigurationIndexFields
+        : null
+      let fields = []
+      if (fieldsData) {
+        try {
+          fields = JSON.parse(fieldsData)
+        } catch {
+          // ignore
+        }
+      }
 
-      return $.map(fields, function (field) {
-        return $("<option />").val(field.key).text(field.label)[0].outerHTML
-      }).join("\n")
+      return fields
+        .map(function (field) {
+          return `<option value="${field.key}">${field.label}</option>`
+        })
+        .join("\n")
     },
 
     item_options: function () {
@@ -117,64 +131,103 @@ SirTrevor.Blocks.SolrDocumentsBase = (function () {
     // from canvases in the manifest, transformed by spotlight/admin/iiif.js in
     // the #images method.
     setIiifFields: function (panel, manifest_data, initialize) {
-      var legacyThumbnailField = $(panel).find(
+      if (!panel) return
+
+      const legacyThumbnailField = panel.querySelector(
         '[name$="[thumbnail_image_url]"]',
       )
-      var legacyFullField = $(panel).find('[name$="[full_image_url]"]')
+      const legacyFullField = panel.querySelector('[name$="[full_image_url]"]')
 
-      if (initialize && legacyThumbnailField.val().length > 0) {
+      if (
+        initialize &&
+        legacyThumbnailField &&
+        legacyThumbnailField.value.length > 0
+      ) {
         return
       }
 
-      legacyThumbnailField.val("")
-      legacyFullField.val("")
-      $(panel).find('[name$="[iiif_image_id]"]').val(manifest_data.imageId)
-      $(panel).find('[name$="[iiif_tilesource]"]').val(manifest_data.tilesource)
-      $(panel).find('[name$="[iiif_manifest_url]"]').val(manifest_data.manifest)
-      $(panel).find('[name$="[iiif_canvas_id]"]').val(manifest_data.canvasId)
-      $(panel)
-        .find("img.img-thumbnail")
-        .attr(
-          "src",
+      if (legacyThumbnailField) legacyThumbnailField.value = ""
+      if (legacyFullField) legacyFullField.value = ""
+
+      const iiifImageIdField = panel.querySelector('[name$="[iiif_image_id]"]')
+      if (iiifImageIdField) iiifImageIdField.value = manifest_data.imageId || ""
+
+      const iiifTilesourceField = panel.querySelector(
+        '[name$="[iiif_tilesource]"]',
+      )
+      if (iiifTilesourceField)
+        iiifTilesourceField.value = manifest_data.tilesource || ""
+
+      const iiifManifestUrlField = panel.querySelector(
+        '[name$="[iiif_manifest_url]"]',
+      )
+      if (iiifManifestUrlField)
+        iiifManifestUrlField.value = manifest_data.manifest || ""
+
+      const iiifCanvasIdField = panel.querySelector(
+        '[name$="[iiif_canvas_id]"]',
+      )
+      if (iiifCanvasIdField)
+        iiifCanvasIdField.value = manifest_data.canvasId || ""
+
+      const img = panel.querySelector("img.img-thumbnail")
+      if (img) {
+        img.src =
           manifest_data.thumbnail_image_url ||
-            manifest_data.tilesource.replace(
-              "/info.json",
-              "/full/100,100/0/default.jpg",
-            ),
-        )
+          (manifest_data.tilesource || "").replace(
+            "/info.json",
+            "/full/100,100/0/default.jpg",
+          )
+      }
     },
     afterPanelRender: function (data, panel) {
+      if (!panel) return
+
       var context = this
       var manifestUrl = data.iiif_manifest || data.iiif_manifest_url
 
       if (!manifestUrl) {
-        $(panel)
-          .find('[name$="[thumbnail_image_url]"]')
-          .val(data.thumbnail_image_url || data.thumbnail)
-        $(panel).find('[name$="[full_image_url]"]').val(data.full_image_url)
+        const legacyThumbnailField = panel.querySelector(
+          '[name$="[thumbnail_image_url]"]',
+        )
+        if (legacyThumbnailField) {
+          legacyThumbnailField.value =
+            data.thumbnail_image_url || data.thumbnail || ""
+        }
+        const legacyFullField = panel.querySelector(
+          '[name$="[full_image_url]"]',
+        )
+        if (legacyFullField) {
+          legacyFullField.value = data.full_image_url || ""
+        }
 
         return
       }
 
-      $.ajax(manifestUrl).done(function (manifest) {
-        var iiifManifest = new Iiif(manifestUrl, manifest)
-
-        var thumbs = iiifManifest.imagesArray()
-
-        if (!data.iiif_image_id) {
-          context.setIiifFields(panel, thumbs[0], !!data.iiif_manifest_url)
-        }
-
-        if (thumbs.length > 1) {
-          panel.multiImageSelector(
-            thumbs,
-            function (selectorImage) {
-              context.setIiifFields(panel, selectorImage, false)
-            },
-            data.iiif_image_id,
-          )
-        }
-      })
+      fetch(manifestUrl)
+        .then(function (response) {
+          return response.json()
+        })
+        .then(function (manifest) {
+          var iiifManifest = new Iiif(manifestUrl, manifest)
+
+          var thumbs = iiifManifest.imagesArray()
+
+          if (!data.iiif_image_id) {
+            context.setIiifFields(panel, thumbs[0], !!data.iiif_manifest_url)
+          }
+
+          if (thumbs.length > 1) {
+            multiImageSelector(
+              panel,
+              thumbs,
+              function (selectorImage) {
+                context.setIiifFields(panel, selectorImage, false)
+              },
+              data.iiif_image_id,
+            )
+          }
+        })
     },
   })
 })()

data/app/javascript/spotlight/admin/blocks/solr_documents_carousel_block.js

@@ -1,3 +1,8 @@
+import * as bootstrap from "bootstrap"
+
+// Bootstrap's ESM build exports Carousel by name; CDN-converted UMD builds (e.g. ga.jspm.io) only have a default export
+const Carousel = bootstrap.Carousel ?? bootstrap.default?.Carousel
+
 SirTrevor.Blocks.SolrDocumentsCarousel = (function () {
   return SirTrevor.Blocks.SolrDocumentsBase.extend({
     plustextable: false,
@@ -39,7 +44,7 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function () {
     addCarouselCycleOptions: function (options) {
       var html = ""
 
-      $.each(options.values, function (index, interval) {
+      options.values.forEach(function (interval) {
         var selected = interval === options.selected ? "selected" : "",
           intervalInMilliSeconds = parseInt(interval, 10) * 1000
 
@@ -60,7 +65,8 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function () {
       var html = "",
         _this = this
 
-      $.each(options.values, function (size, px) {
+      Object.keys(options.values).forEach(function (size) {
+        var px = options.values[size]
         var checked = size === options.selected ? "checked" : "",
           id = _this.formId(_this.max_height_key)
 
@@ -84,35 +90,53 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function () {
     },
 
     afterPreviewLoad: function (_options) {
-      $(this.inner).find(".carousel").carousel()
-
-      // the bootstrap carousel only initializes data-bs-slide widgets on page load, so we need
-      // to initialize them ourselves..
-      var clickHandler = function (e) {
-        var href
-        var $this = $(this)
-        var $target = $(
-          $this.attr("data-bs-target") ||
-            ((href = $this.attr("href")) && href.replace(/.*(?=#[^\s]+$)/, "")),
-        ) // strip for ie7
-        if (!$target.hasClass("carousel")) return
-        var options = $.extend({}, $target.data(), $this.data())
-        var slideIndex = $this.attr("data-bs-slide-to")
-        if (slideIndex) options.interval = false
-
-        $.fn.carousel.call($target, options)
-
-        if (slideIndex) {
-          $target.data("bs.carousel").to(slideIndex)
+      const carousels = this.inner.querySelectorAll(".carousel")
+
+      const clickHandler = function (e) {
+        const button = e.currentTarget
+        let target
+        try {
+          const targetSelector =
+            button.getAttribute("data-bs-target") || button.getAttribute("href")
+          if (targetSelector) {
+            target = document.querySelector(targetSelector)
+          }
+        } catch {
+          // ignore selector errors
+        }
+
+        if (!target) {
+          target = button.closest(".carousel")
+        }
+
+        if (!target || !target.classList.contains("carousel")) return
+
+        const carousel = Carousel.getOrCreateInstance(target)
+        const slideIndex = button.getAttribute("data-bs-slide-to")
+
+        if (slideIndex !== null) {
+          carousel.to(parseInt(slideIndex, 10))
+        } else {
+          const slideAction = button.getAttribute("data-bs-slide")
+          if (slideAction === "next") {
+            carousel.next()
+          } else if (slideAction === "prev") {
+            carousel.prev()
+          }
         }
 
         e.preventDefault()
       }
 
-      $(this.inner)
-        .find(".carousel")
-        .on("click.bs.carousel.data-api", "[data-bs-slide]", clickHandler)
-        .on("click.bs.carousel.data-api", "[data-bs-slide-to]", clickHandler)
+      carousels.forEach(function (carouselEl) {
+        Carousel.getOrCreateInstance(carouselEl)
+
+        carouselEl
+          .querySelectorAll("[data-bs-slide], [data-bs-slide-to]")
+          .forEach(function (btn) {
+            btn.addEventListener("click", clickHandler)
+          })
+      })
     },
   })
 })()

data/app/javascript/spotlight/admin/blocks/solr_documents_features_block.js

@@ -1,3 +1,8 @@
+import * as bootstrap from "bootstrap"
+
+// Bootstrap's ESM build exports Carousel by name; CDN-converted UMD builds (e.g. ga.jspm.io) only have a default export
+const Carousel = bootstrap.Carousel ?? bootstrap.default?.Carousel
+
 SirTrevor.Blocks.SolrDocumentsFeatures = (function () {
   return SirTrevor.Blocks.SolrDocumentsBase.extend({
     plustextable: false,
@@ -6,34 +11,53 @@ SirTrevor.Blocks.SolrDocumentsFeatures = (function () {
     icon_name: "item_features",
 
     afterPreviewLoad: function (_options) {
-      $(this.inner).find(".carousel").carousel()
-
-      // the bootstrap carousel only initializes data-bs-slide widgets on page load, so we need
-      // to initialize them ourselves..
-      var clickHandler = function (e) {
-        var href
-        var $this = $(this)
-        var $target = $(
-          $this.attr("data-bs-target") ||
-            ((href = $this.attr("href")) && href.replace(/.*(?=#[^\s]+$)/, "")),
-        ) // strip for ie7
-        if (!$target.hasClass("carousel")) return
-        var options = $.extend({}, $target.data(), $this.data())
-        var slideIndex = $this.attr("data-bs-slide-to")
-        if (slideIndex) options.interval = false
-
-        $.fn.carousel.call($target, options)
-
-        if (slideIndex) {
-          $target.data("bs.carousel").to(slideIndex)
+      const carousels = this.inner.querySelectorAll(".carousel")
+
+      const clickHandler = function (e) {
+        const button = e.currentTarget
+        let target
+        try {
+          const targetSelector =
+            button.getAttribute("data-bs-target") || button.getAttribute("href")
+          if (targetSelector) {
+            target = document.querySelector(targetSelector)
+          }
+        } catch {
+          // ignore selector errors
+        }
+
+        if (!target) {
+          target = button.closest(".carousel")
+        }
+
+        if (!target || !target.classList.contains("carousel")) return
+
+        const carousel = Carousel.getOrCreateInstance(target)
+        const slideIndex = button.getAttribute("data-bs-slide-to")
+
+        if (slideIndex !== null) {
+          carousel.to(parseInt(slideIndex, 10))
+        } else {
+          const slideAction = button.getAttribute("data-bs-slide")
+          if (slideAction === "next") {
+            carousel.next()
+          } else if (slideAction === "prev") {
+            carousel.prev()
+          }
         }
 
         e.preventDefault()
       }
 
-      $(this.inner)
-        .find(".carousel")
-        .on("click.bs.carousel.data-api", "[data-bs-slide-to]", clickHandler)
+      carousels.forEach(function (carouselEl) {
+        Carousel.getOrCreateInstance(carouselEl)
+
+        carouselEl
+          .querySelectorAll("[data-bs-slide-to]")
+          .forEach(function (btn) {
+            btn.addEventListener("click", clickHandler)
+          })
+      })
     },
   })
 })()

data/app/javascript/spotlight/admin/blocks/uploaded_items_block.js

@@ -21,18 +21,20 @@ SirTrevor.Blocks.UploadedItems = (function () {
     upload_options: { html: "" },
 
     fileInput: function () {
-      return $(this.inner).find('input[type="file"]')
+      return this.inner.querySelector('input[type="file"]')
     },
 
     onBlockRender: function () {
-      SpotlightNestable.init($(this.inner).find('[data-behavior="nestable"]'))
+      SpotlightNestable.init(
+        this.inner.querySelectorAll('[data-behavior="nestable"]'),
+      )
 
-      this.fileInput().on(
-        "change",
-        function (ev) {
+      const input = this.fileInput()
+      if (input) {
+        input.addEventListener("change", (ev) => {
           this.onDrop(ev.currentTarget)
-        }.bind(this),
-      )
+        })
+      }
     },
 
     onDrop: function (transferData) {
@@ -50,12 +52,15 @@ SirTrevor.Blocks.UploadedItems = (function () {
 
         this.uploader(
           file,
-          function (data) {
+          (data) => {
             this.createItemPanel(data)
-            this.fileInput().val("")
+            const input = this.fileInput()
+            if (input) {
+              input.value = ""
+            }
             this.ready()
           },
-          function (_error) {
+          () => {
             this.addMessage(i18n.t("blocks:image:upload_error"))
             this.ready()
           },
@@ -119,16 +124,27 @@ SirTrevor.Blocks.UploadedItems = (function () {
               </div>
             </li>`
 
-      const panel = $(markup)
-      panel.find('[data-field="caption"]').val(data.caption)
-      panel.find('[data-field="link"]').val(data.link)
-      var context = this
+      const tempDiv = document.createElement("div")
+      tempDiv.innerHTML = markup.trim()
+      const panel = tempDiv.firstElementChild
 
-      $(".remove a", panel).on("click", function (e) {
-        e.preventDefault()
-        $(this).closest(".field").remove()
-        context.afterPanelDelete()
-      })
+      const captionInput = panel.querySelector('[data-field="caption"]')
+      if (captionInput) {
+        captionInput.value = data.caption || ""
+      }
+      const linkInput = panel.querySelector('[data-field="link"]')
+      if (linkInput) {
+        linkInput.value = data.link || ""
+      }
+
+      const removeBtn = panel.querySelector(".remove a")
+      if (removeBtn) {
+        removeBtn.addEventListener("click", (e) => {
+          e.preventDefault()
+          panel.remove()
+          this.afterPanelDelete()
+        })
+      }
 
       this.afterPanelRender(data, panel)