blacklight-spotlight 5.3.2 → 6.0.0.rc2

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

@@ -4,18 +4,28 @@ import Core from "spotlight/core"
 export default class Crop {
   constructor(cropArea, preserveAspectRatio = true) {
     this.cropArea = cropArea
-    this.cropArea.data("iiifCropper", this)
-    // This element will also have the IIIF input elements contained
-    // There may be multiple elements with data-cropper attributes, but
-    // there should only one element with this data-cropper attribute value.
-    this.cropSelector = '[data-cropper="' + cropArea.data("cropperKey") + '"]'
-    this.cropTool = $(this.cropSelector)
+    if (this.cropArea) {
+      this.cropArea.iiifCropper = this
+    }
+
+    // Get the cropper key and find the crop tool element
+    const cropperKey = this.cropArea
+      ? this.cropArea.dataset.cropperKey ||
+        this.cropArea.getAttribute("data-cropper-key")
+      : null
+    this.cropSelector = '[data-cropper="' + cropperKey + '"]'
+    this.cropTool = document.querySelector(this.cropSelector)
+
     // Exhibit and masthead cropping requires the ratio between image width and height
     // to be consistent, whereas item widget cropping allows any combination of
     // image width and height.
     this.preserveAspectRatio = preserveAspectRatio
+
     // Get the IIIF input elements used to store/reference IIIF information
-    this.inputPrefix = this.cropTool.data("input-prefix")
+    this.inputPrefix = this.cropTool
+      ? this.cropTool.dataset.inputPrefix ||
+        this.cropTool.getAttribute("data-input-prefix")
+      : null
     this.iiifUrlField = this.iiifInputElement(
       this.inputPrefix,
       "iiif_tilesource",
@@ -41,8 +51,9 @@ export default class Crop {
       "iiif_image_id",
       this.cropTool,
     )
+
     // Get the closest form element
-    this.form = cropArea.closest("form")
+    this.form = this.cropArea ? this.cropArea.closest("form") : null
     this.tileSource = null
   }
 
@@ -50,10 +61,15 @@ export default class Crop {
   // Multiple input fields with the same name on the page may be related
   // to a cropper. We thus need to pass in a parent element.
   iiifInputElement(inputPrefix, fieldName, inputParentElement) {
-    return $(
-      'input[name="' + inputPrefix + "[" + fieldName + ']"]',
-      inputParentElement,
-    )
+    if (inputParentElement && inputPrefix) {
+      const selector = 'input[name="' + inputPrefix + "[" + fieldName + ']"]'
+      const element = inputParentElement.querySelector(selector)
+      if (element) {
+        return element
+      }
+    }
+    // Return a dummy object to prevent null-pointer exceptions
+    return { value: undefined }
   }
 
   // Render the cropper environment and add hooks into the autocomplete and upload forms
@@ -66,12 +82,12 @@ export default class Crop {
   // Setup the cropper on page load if the field
   // that holds the IIIF url is populated
   setupExistingIiifCropper() {
-    if (this.iiifUrlField.val() === "") {
+    if (this.iiifUrlField.value === "") {
       return
     }
 
     this.addImageSelectorToExistingCropTool()
-    this.setTileSource(this.iiifUrlField.val())
+    this.setTileSource(this.iiifUrlField.value)
   }
 
   // Display the IIIF Cropper map with the current IIIF Layer (and cropbox, once the layer is available)
@@ -85,7 +101,7 @@ export default class Crop {
       // Code in leaflet-iiif land calls delete on the image layer's container when removing,
       // which errors if there is an issue fetching the info.json and stops further necessary steps to execute.
       if (!this.imageLayer._container) {
-        this.imageLayer._container = $("<div></div>")
+        this.imageLayer._container = document.createElement("div")
       }
       this.cropperMap.removeLayer(this.imageLayer)
     }
@@ -101,15 +117,24 @@ export default class Crop {
       }
     })
 
-    this.cropArea.data("initiallyVisible", this.cropArea.is(":visible"))
+    this.cropAreaInitiallyVisible = this.isCropAreaVisible()
+  }
+
+  isCropAreaVisible() {
+    if (!this.cropArea) return false
+    return !!(
+      this.cropArea.offsetWidth ||
+      this.cropArea.offsetHeight ||
+      this.cropArea.getClientRects().length
+    )
   }
 
   // Get (or initialize) the current crop region from the form data
   getCropRegion() {
-    var regionFieldValue = this.iiifRegionField.val()
+    var regionFieldValue = this.iiifRegionField.value
     if (!regionFieldValue || regionFieldValue === "") {
       var region = this.defaultCropRegion()
-      this.iiifRegionField.val(region)
+      this.iiifRegionField.value = region
       return region
     } else {
       return regionFieldValue.split(",")
@@ -134,8 +159,15 @@ export default class Crop {
 
   // Calculate the required aspect ratio for the crop area
   aspectRatio() {
-    var cropWidth = parseInt(this.cropArea.data("crop-width"))
-    var cropHeight = parseInt(this.cropArea.data("crop-height"))
+    if (!this.cropArea) return 1
+    var cropWidth = parseInt(
+      this.cropArea.dataset.cropWidth ||
+        this.cropArea.getAttribute("data-crop-width"),
+    )
+    var cropHeight = parseInt(
+      this.cropArea.dataset.cropHeight ||
+        this.cropArea.getAttribute("data-crop-height"),
+    )
     return cropWidth / cropHeight
   }
 
@@ -160,9 +192,9 @@ export default class Crop {
   // the appropriate IIIF URL or identifier
   setIiifFields(iiifObject) {
     this.setTileSource(iiifObject.tilesource)
-    this.iiifManifestField.val(iiifObject.manifest)
-    this.iiifCanvasField.val(iiifObject.canvasId)
-    this.iiifImageField.val(iiifObject.imageId)
+    this.iiifManifestField.value = iiifObject.manifest
+    this.iiifCanvasField.value = iiifObject.canvasId
+    this.iiifImageField.value = iiifObject.imageId
   }
 
   // Set the Crop tileSource and setup the cropper
@@ -177,17 +209,17 @@ export default class Crop {
     }
 
     if (this.cropBox) {
-      this.iiifRegionField.val("")
+      this.iiifRegionField.value = ""
     }
 
     this.tileSource = source
-    this.iiifUrlField.val(source)
+    this.iiifUrlField.value = source
     this.setupIiifCropper()
   }
 
   // Render the Leaflet Map into the crop area
   renderCropperMap() {
-    if (this.cropperMap) {
+    if (this.cropperMap || !this.cropArea) {
       return
     }
 
@@ -206,7 +238,10 @@ export default class Crop {
       }
     }
 
-    this.cropperMap = L.map(this.cropArea.attr("id"), cropperOptions)
+    this.cropperMap = L.map(
+      this.cropArea.getAttribute("id") || this.cropArea.id,
+      cropperOptions,
+    )
     this.invalidateMapSizeOnTabToggle()
   }
 
@@ -226,7 +261,7 @@ export default class Crop {
         var bounds = e.layer.getBounds()
         var region = self.projectBoundsToIIIFRegion(bounds)
 
-        self.iiifRegionField.val(region.join(","))
+        self.iiifRegionField.value = region.join(",")
       },
     )
   }
@@ -267,76 +302,114 @@ export default class Crop {
 
   // Setup autocomplete inputs to have the iiif_cropper context
   setupAutoCompletes() {
-    var input = $('[data-behavior="autocomplete"]', this.cropTool)
-    input.data("iiifCropper", this)
+    if (!this.cropTool) return
+    var input = this.cropTool.querySelector('[data-behavior="autocomplete"]')
+    if (input) {
+      input.iiifCropper = this
+    }
   }
 
   setupAjaxFileUpload() {
-    this.fileInput = $('input[type="file"]', this.cropTool)
-    this.fileInput.change(() => this.uploadFile())
+    if (!this.cropTool) return
+    this.fileInput = this.cropTool.querySelector('input[type="file"]')
+    if (this.fileInput) {
+      this.fileInput.addEventListener("change", () => this.uploadFile())
+    }
   }
 
   addImageSelectorToExistingCropTool() {
-    if (this.iiifManifestField.val() === "") {
+    if (this.iiifManifestField.value === "") {
       return
     }
 
-    var input = $('[data-behavior="autocomplete"]', this.cropTool)
+    if (!this.cropTool) {
+      return
+    }
+
+    var inputElement = this.cropTool.querySelector(
+      '[data-behavior="autocomplete"]',
+    )
 
     // Not every page which uses this module has autocomplete linked directly to the cropping tool
-    if (input.length) {
-      var panel = $(input.data("target-panel"))
-      addImageSelector(
-        input,
-        panel,
-        this.iiifManifestField.val(),
-        !this.iiifImageField.val(),
-      )
+    if (inputElement) {
+      var targetPanel =
+        inputElement.dataset.targetPanel ||
+        inputElement.getAttribute("data-target-panel")
+      var panelElement = document.querySelector(targetPanel)
+      if (panelElement) {
+        addImageSelector(
+          inputElement,
+          panelElement,
+          this.iiifManifestField.value,
+          !this.iiifImageField.value,
+        )
+      }
     }
   }
 
   invalidateMapSizeOnTabToggle() {
-    var tabs = $('[role="tablist"]', this.form)
+    if (!this.form) return
+    var tabs = this.form.querySelectorAll('[role="tablist"]')
     var self = this
-    tabs.on("shown.bs.tab", function () {
-      if (
-        self.cropArea.data("initiallyVisible") === false &&
-        self.cropArea.is(":visible")
-      ) {
+    var onTabShown = function () {
+      if (self.cropAreaInitiallyVisible === false && self.isCropAreaVisible()) {
         self.cropperMap.invalidateSize()
         // Because the map size is 0,0 when image is loading (not visible) we need to refit the bounds of the layer
         self.imageLayer._fitBounds()
-        self.cropArea.data("initiallyVisible", null)
+        self.cropAreaInitiallyVisible = null
       }
+    }
+
+    tabs.forEach((tab) => {
+      tab.addEventListener("shown.bs.tab", onTabShown)
     })
   }
 
   // Get all the form data with the exception of the _method field.
   getData() {
-    var data = new FormData(this.form[0])
+    if (!this.form) return null
+    var data = new FormData(this.form)
     data.append("_method", null)
     return data
   }
 
   uploadFile() {
-    var url = this.fileInput.data("endpoint")
+    if (!this.fileInput) return
+    var url =
+      this.fileInput.dataset.endpoint ||
+      this.fileInput.getAttribute("data-endpoint")
     // Every post creates a new image/masthead.
     // Because they create IIIF urls which are heavily cached.
-    $.ajax({
-      url: url, //Server script to process data
-      type: "POST",
-      success: (data, stat, xhr) => this.successHandler(data, stat, xhr),
-      error: (xhr, stat, error) => this.errorHandler(xhr, stat, error),
-      // Form data
-      data: this.getData(),
+    fetch(url, {
+      method: "POST",
       headers: {
         "X-CSRF-Token": Core.csrfToken() || "",
+        Accept: "application/json",
       },
-      //Options to tell jQuery not to process data or worry about content-type.
-      cache: false,
-      contentType: false,
-      processData: false,
+      body: this.getData(),
     })
+      .then((response) => {
+        if (!response.ok) {
+          return response.json().then(
+            (json) => {
+              var fakeXhr = { responseJSON: json }
+              this.errorHandler(fakeXhr, "error", response.statusText)
+            },
+            () => {
+              this.errorHandler({}, "error", "Upload failed")
+            },
+          )
+        }
+        return response.json()
+      })
+      .then((data) => {
+        if (data) {
+          this.successHandler(data, "success", null)
+        }
+      })
+      .catch((error) => {
+        this.errorHandler({}, "error", error.message)
+      })
   }
 
   successHandler(data, _stat, _xhr) {
@@ -358,13 +431,15 @@ export default class Crop {
   }
 
   getUploadErrorsElement() {
-    return this.cropTool.find(".featured-image.invalid-feedback")
+    if (!this.cropTool) return null
+    return this.cropTool.querySelector(".featured-image.invalid-feedback")
   }
 
   showUploadError(errorMessage) {
     const errorsElement = this.getUploadErrorsElement()
     if (errorsElement) {
-      errorsElement.text(errorMessage).show()
+      errorsElement.textContent = errorMessage
+      errorsElement.style.display = "block"
     } else {
       console.error("uploadFile", errorMessage)
     }
@@ -373,7 +448,8 @@ export default class Crop {
   clearUploadErrors() {
     const errorsElement = this.getUploadErrorsElement()
     if (errorsElement) {
-      errorsElement.text("").hide()
+      errorsElement.textContent = ""
+      errorsElement.style.display = "none"
     }
   }
 
@@ -382,7 +458,11 @@ export default class Crop {
     // The name should be sufficient in this case, as we don't use this part of the
     // code for solr document widgets where we enable cropping.
     // If we require more specificity, we can scope this to this.cropTool.
-    $('input[name="' + this.inputPrefix + '[upload_id]"]').val(id)
+    const selector = 'input[name="' + this.inputPrefix + '[upload_id]"]'
+    const element = document.querySelector(selector)
+    if (element) {
+      element.value = id
+    }
   }
 
   aspectRatioPreservingRectangleEditor(aspect) {

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

@@ -5,10 +5,11 @@ export default class Croppable {
   connect() {
     // For exhibit masthead or thumbnail pages, where
     // the div exists on page load
-    $('[data-behavior="iiif-cropper"]').each(function () {
-      var cropElement = $(this)
-      new Crop(cropElement).render()
-    })
+    document
+      .querySelectorAll('[data-behavior="iiif-cropper"]')
+      .forEach((cropElement) => {
+        new Crop(cropElement).render()
+      })
 
     // In the case of individual document thumbnails, selection
     // of the image is through a modal. Here we attach the event

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

@@ -13,7 +13,7 @@ export default class CroppableModal {
     document.addEventListener(
       "loaded.blacklight.blacklight-modal",
       function () {
-        var dataCropperDiv = $(
+        const dataCropperDiv = document.querySelector(
           '#blacklight-modal [data-behavior="iiif-cropper"]',
         )
 
@@ -26,65 +26,100 @@ export default class CroppableModal {
 
   // Field names are of the format item[item_0][iiif_image_id]
   iiifInputField(itemIndex, fieldName, parentElement) {
-    var itemPrefix = "item[" + itemIndex + "]"
-    var selector = 'input[name="' + itemPrefix + "[" + fieldName + ']"]'
-    return $(selector, parentElement)
+    const itemPrefix = "item[" + itemIndex + "]"
+    const selector = 'input[name="' + itemPrefix + "[" + fieldName + ']"]'
+    return parentElement ? parentElement.querySelector(selector) : null
   }
 
   attachModalSaveHandler() {
-    var context = this
+    const context = this
 
     document.addEventListener("show.blacklight.blacklight-modal", function () {
-      $("#save-cropping-selection").on("click", () => {
-        context.saveCroppedRegion()
-      })
+      const saveBtn = document.getElementById("save-cropping-selection")
+      if (saveBtn) {
+        saveBtn.addEventListener("click", () => {
+          context.saveCroppedRegion()
+        })
+      }
     })
   }
 
   saveCroppedRegion() {
     //On hitting "save changes", we need to copy over the value
     //to the iiif thumbnail url input field as well as the image source itself
-    var context = this
-    var dataCropperDiv = $('#blacklight-modal [data-behavior="iiif-cropper"]')
+    const context = this
+    const dataCropperDiv = document.querySelector(
+      '#blacklight-modal [data-behavior="iiif-cropper"]',
+    )
 
     if (dataCropperDiv) {
-      var dataCropperKey = dataCropperDiv.data("cropper-key")
-      var itemIndex = dataCropperDiv.data("index-id")
+      const dataCropperKey =
+        dataCropperDiv.dataset.cropperKey ||
+        dataCropperDiv.getAttribute("data-cropper-key")
+      const itemIndex =
+        dataCropperDiv.dataset.indexId ||
+        dataCropperDiv.getAttribute("data-index-id")
+
       // Get the element on the main edit page whose select image link opened up the modal
-      var itemElement = $('[data-cropper="' + dataCropperKey + '"]')
+      const itemElement = document.querySelector(
+        '[data-cropper="' + dataCropperKey + '"]',
+      )
+      if (!itemElement) return
+
       // Get the hidden input field on the main edit page corresponding to this item
-      var thumbnailSaveField = context.iiifInputField(
+      const thumbnailSaveField = context.iiifInputField(
         itemIndex,
         "thumbnail_image_url",
         itemElement,
       )
-      var fullimageSaveField = context.iiifInputField(
+      const fullimageSaveField = context.iiifInputField(
         itemIndex,
         "full_image_url",
         itemElement,
       )
-      var iiifTilesource = context
-        .iiifInputField(itemIndex, "iiif_tilesource", itemElement)
-        .val()
-      var regionValue = context
-        .iiifInputField(itemIndex, "iiif_region", itemElement)
-        .val()
-      // Extract the region string to incorporate into the thumbnail URL
-      var urlPrefix = iiifTilesource.substring(
-        0,
-        iiifTilesource.lastIndexOf("/info.json"),
+
+      const iiifTilesourceField = context.iiifInputField(
+        itemIndex,
+        "iiif_tilesource",
+        itemElement,
       )
-      var thumbnailUrl =
+      const regionValueField = context.iiifInputField(
+        itemIndex,
+        "iiif_region",
+        itemElement,
+      )
+
+      const iiifTilesource = iiifTilesourceField
+        ? iiifTilesourceField.value
+        : ""
+      const regionValue = regionValueField ? regionValueField.value : ""
+
+      // Extract the region string to incorporate into the thumbnail URL
+      const lastIndex = iiifTilesource.lastIndexOf("/info.json")
+      const urlPrefix =
+        lastIndex !== -1
+          ? iiifTilesource.substring(0, lastIndex)
+          : iiifTilesource
+      const thumbnailUrl =
         urlPrefix + "/" + regionValue + "/!400,400/0/default.jpg"
+
       // Set the hidden input value to the thumbnail URL
       // Also set the full image - which is used by widgets like carousel or slideshow
-      thumbnailSaveField.val(thumbnailUrl)
-      fullimageSaveField.val(
-        urlPrefix + "/" + regionValue + "/!800,800/0/default.jpg",
-      )
+      if (thumbnailSaveField) {
+        thumbnailSaveField.value = thumbnailUrl
+        thumbnailSaveField.dispatchEvent(new Event("change", { bubbles: true }))
+      }
+      if (fullimageSaveField) {
+        fullimageSaveField.value =
+          urlPrefix + "/" + regionValue + "/!800,800/0/default.jpg"
+        fullimageSaveField.dispatchEvent(new Event("change", { bubbles: true }))
+      }
+
       // Also change img url for thumbnail image
-      var itemImage = $("img.img-thumbnail", itemElement)
-      itemImage.attr("src", thumbnailUrl)
+      const itemImage = itemElement.querySelector("img.img-thumbnail")
+      if (itemImage) {
+        itemImage.setAttribute("src", thumbnailUrl)
+      }
     }
   }
 }