blacklight-spotlight 5.3.2 → 6.0.0.rc2

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

@@ -1,175 +1,223 @@
 // Module to add multi-image selector to widget panels
 
-;(function () {
-  $.fn.multiImageSelector = function (
-    image_versions,
-    clickCallback,
-    activeImageId,
-  ) {
-    var changeLink = $("<a href='javascript:;'>Change</a>"),
-      thumbsListContainer = $(
-        "<div class='thumbs-list' style='display:none'></div>",
-      ),
-      thumbList = $("<ul></ul>"),
-      panel
-
-    var imageIds = $.map(image_versions, function (e) {
-      return e["imageId"]
-    })
-
-    return init(this)
+function initMultiImageSelector(
+  panel,
+  image_versions,
+  clickCallback,
+  activeImageId,
+) {
+  const changeLink = document.createElement("a")
+  changeLink.href = "javascript:;"
+  changeLink.textContent = "Change"
+
+  const thumbsListContainer = document.createElement("div")
+  thumbsListContainer.className = "thumbs-list"
+  thumbsListContainer.style.display = "none"
+
+  const thumbList = document.createElement("ul")
+
+  const imageIds = (image_versions || []).map((e) => e["imageId"])
+
+  init()
+
+  function init() {
+    destroyExistingImageSelector()
+    if (image_versions && image_versions.length > 1) {
+      addChangeLink()
+      addThumbsList()
+    }
+  }
 
-    function init(el) {
-      panel = el
+  function addChangeLink() {
+    const pagination = panel.querySelector("[data-panel-image-pagination]")
+    if (pagination) {
+      pagination.innerHTML =
+        "Image <span data-current-image='true'>" +
+        indexOf(activeImageId) +
+        "</span> of " +
+        image_versions.length
+      pagination.style.display = ""
+      pagination.appendChild(document.createTextNode(" "))
+      pagination.appendChild(changeLink)
+    }
+    addChangeLinkBehavior()
+  }
 
-      destroyExistingImageSelector()
-      if (image_versions && image_versions.length > 1) {
-        addChangeLink()
-        addThumbsList()
+  function destroyExistingImageSelector() {
+    const pagination = panel.querySelector("[data-panel-image-pagination]")
+    if (pagination) {
+      pagination.innerHTML = ""
+      const nextEl = pagination.nextElementSibling
+      if (nextEl && nextEl.classList.contains("thumbs-list")) {
+        nextEl.remove()
       }
     }
-    function addChangeLink() {
-      $("[data-panel-image-pagination]", panel)
-        .html(
-          "Image <span data-current-image='true'>" +
-            indexOf(activeImageId) +
-            "</span> of " +
-            image_versions.length,
-        )
-        .show()
-        .append(" ")
-        .append(changeLink)
-      addChangeLinkBehavior()
-    }
+  }
 
-    function destroyExistingImageSelector() {
-      var pagination = $("[data-panel-image-pagination]", panel)
-      pagination.html("")
-      pagination.next("." + thumbsListContainer.attr("class")).remove()
+  function indexOf(thumb) {
+    const index = imageIds.indexOf(thumb)
+    if (index > -1) {
+      return index + 1
+    } else {
+      return 1
     }
+  }
 
-    function indexOf(thumb) {
-      const index = imageIds.indexOf(thumb)
-      if (index > -1) {
-        return index + 1
+  function addChangeLinkBehavior() {
+    changeLink.addEventListener("click", () => {
+      if (thumbsListContainer.style.display === "none") {
+        thumbsListContainer.style.display = ""
       } else {
-        return 1
+        thumbsListContainer.style.display = "none"
       }
-    }
-    function addChangeLinkBehavior() {
-      changeLink.on("click", function () {
-        thumbsListContainer.slideToggle()
-        updateThumbListWidth()
-        addScrollBehavior()
-        scrollToActiveThumb()
-        loadVisibleThumbs()
-        swapChangeLinkText($(this))
-      })
-    }
-    function updateThumbListWidth() {
-      var width = 0
-      $("li", thumbList).each(function () {
-        width += $(this).outerWidth()
-      })
-      thumbList.width(width + 5)
-    }
-    function loadVisibleThumbs() {
-      var viewportWidth = thumbsListContainer.width()
-      var width = 0
-      $("li", thumbList).each(function () {
-        var thisThumb = $(this),
-          image = $("img", thisThumb),
-          totalWidth = (width += thisThumb.width()),
-          position = thumbList.position().left + totalWidth - thisThumb.width()
-
-        if (position >= 0 && position < viewportWidth) {
-          image.prop("src", image.data("src"))
+      updateThumbListWidth()
+      addScrollBehavior()
+      scrollToActiveThumb()
+      loadVisibleThumbs()
+      swapChangeLinkText(changeLink)
+    })
+  }
+
+  function updateThumbListWidth() {
+    let width = 0
+    thumbList.querySelectorAll("li").forEach((li) => {
+      width += li.offsetWidth
+    })
+    thumbList.style.width = width + 5 + "px"
+  }
+
+  function loadVisibleThumbs() {
+    const viewportWidth = thumbsListContainer.clientWidth
+    let width = 0
+    thumbList.querySelectorAll("li").forEach((thisThumb) => {
+      const image = thisThumb.querySelector("img")
+      if (!image) return
+      const thumbWidth = thisThumb.offsetWidth
+      width += thumbWidth
+      const totalWidth = width
+      const position = thumbList.offsetLeft + totalWidth - thumbWidth
+
+      if (position >= 0 && position < viewportWidth) {
+        const dataSrc = image.dataset.src || image.getAttribute("data-src")
+        if (dataSrc) {
+          image.src = dataSrc
         }
-      })
-    }
-    function addScrollBehavior() {
-      thumbsListContainer.scrollStop(function () {
+      }
+    })
+  }
+
+  let scrollTimeout
+  function addScrollBehavior() {
+    thumbsListContainer.addEventListener("scroll", () => {
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout)
+      }
+      scrollTimeout = setTimeout(() => {
         loadVisibleThumbs()
-      })
-    }
-    function scrollToActiveThumb() {
-      var halfContainerWidth = thumbsListContainer.width() / 2,
-        activeThumbLeftPosition = (
-          $(".active", thumbList).position() ||
-          $("li", thumbList).first().position()
-        ).left,
-        halfActiveThumbWidth = $(".active", thumbList).width() / 2
-      thumbsListContainer.scrollLeft(
-        activeThumbLeftPosition - halfContainerWidth + halfActiveThumbWidth,
-      )
-    }
-    function addThumbsList() {
-      addThumbsToList()
-      updateActiveThumb()
-      $(".card-header", panel).append(thumbsListContainer.append(thumbList))
+      }, 250)
+    })
+  }
+
+  function scrollToActiveThumb() {
+    const halfContainerWidth = thumbsListContainer.clientWidth / 2
+    const activeThumb =
+      thumbList.querySelector(".active") || thumbList.querySelector("li")
+    const activeThumbLeftPosition = activeThumb ? activeThumb.offsetLeft : 0
+    const halfActiveThumbWidth = activeThumb ? activeThumb.offsetWidth / 2 : 0
+
+    thumbsListContainer.scrollLeft =
+      activeThumbLeftPosition - halfContainerWidth + halfActiveThumbWidth
+  }
+
+  function addThumbsList() {
+    addThumbsToList()
+    updateActiveThumb()
+    thumbsListContainer.appendChild(thumbList)
+    const cardHeader = panel.querySelector(".card-header")
+    if (cardHeader) {
+      cardHeader.appendChild(thumbsListContainer)
     }
-    function updateActiveThumb() {
-      $("li", thumbList).each(function () {
-        var item = $(this)
-        if ($("img", item).data("image-id") == activeImageId) {
-          item.addClass("active")
+  }
+
+  function updateActiveThumb() {
+    thumbList.querySelectorAll("li").forEach((item) => {
+      const img = item.querySelector("img")
+      if (
+        img &&
+        (img.dataset.imageId == activeImageId ||
+          img.getAttribute("data-image-id") == activeImageId)
+      ) {
+        item.classList.add("active")
+      }
+    })
+  }
+
+  function swapChangeLinkText(link) {
+    link.textContent = link.textContent === "Change" ? "Close" : "Change"
+  }
+
+  function addThumbsToList() {
+    ;(image_versions || []).forEach((version, i) => {
+      const listItem = document.createElement("li")
+      listItem.setAttribute("data-index", i.toString())
+
+      const anchor = document.createElement("a")
+      anchor.href = "javascript:;"
+
+      const img = document.createElement("img")
+      img.src = version["thumb"]
+      img.setAttribute("data-image-id", version["imageId"])
+
+      if (version["src"]) {
+        img.setAttribute("data-src", version["src"])
+      }
+
+      anchor.appendChild(img)
+      listItem.appendChild(anchor)
+
+      listItem.addEventListener("click", () => {
+        const src = img.getAttribute("src")
+
+        if (typeof clickCallback === "function") {
+          clickCallback(version)
         }
-      })
-    }
-    function swapChangeLinkText(link) {
-      link.text(link.text() == "Change" ? "Close" : "Change")
-    }
 
-    function addThumbsToList() {
-      $.each(image_versions, function (i) {
-        var listItem = $(
-          '<li data-index="' +
-            i +
-            '"><a href="javascript:;"><img src="' +
-            image_versions[i]["thumb"] +
-            '" data-image-id="' +
-            image_versions[i]["imageId"] +
-            '" /></a></li>',
+        const activeItem = thumbList.querySelector("li.active")
+        if (activeItem) {
+          activeItem.classList.remove("active")
+        }
+        listItem.classList.add("active")
+
+        const panelImg = panel.querySelector(".pic img.img-thumbnail")
+        if (panelImg) {
+          panelImg.setAttribute("src", src)
+        }
+
+        const currentImgSpan = panel.querySelector(
+          "[data-panel-image-pagination] [data-current-image]",
         )
-        listItem.on("click", function () {
-          // get the current image id
-          var src = $("img", $(this)).attr("src")
-
-          if (typeof clickCallback === "function") {
-            clickCallback(image_versions[i])
-          }
-
-          // mark the current selection as active
-          $("li.active", thumbList).removeClass("active")
-          $(this).addClass("active")
-
-          // update the multi-image selector image
-          $(".pic img.img-thumbnail", panel).attr("src", src)
-
-          $("[data-panel-image-pagination] [data-current-image]", panel).text(
-            $("li", thumbList).index($(this)) + 1,
-          )
-          scrollToActiveThumb()
-        })
-        $("img", listItem).on("load", function () {
-          updateThumbListWidth()
-        })
-        thumbList.append(listItem)
+        if (currentImgSpan) {
+          currentImgSpan.textContent = (i + 1).toString()
+        }
+        scrollToActiveThumb()
       })
-    }
-  }
-})(jQuery)
 
-// source: http://stackoverflow.com/questions/14035083/jquery-bind-event-on-scroll-stops
-jQuery.fn.scrollStop = function (callback) {
-  $(this).scroll(function () {
-    var self = this,
-      $this = $(self)
+      img.addEventListener("load", () => {
+        updateThumbListWidth()
+      })
 
-    if ($this.data("scrollTimeout")) {
-      clearTimeout($this.data("scrollTimeout"))
-    }
+      thumbList.appendChild(listItem)
+    })
+  }
+}
+
+export default function multiImageSelector(
+  panel,
+  image_versions,
+  clickCallback,
+  activeImageId,
+) {
+  if (!panel) return
 
-    $this.data("scrollTimeout", setTimeout(callback, 250, self))
-  })
+  initMultiImageSelector(panel, image_versions, clickCallback, activeImageId)
 }

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

@@ -1,12 +1,18 @@
 // Place all the behaviors and hooks related to the matching controller here.
 // All this logic will automatically be available in application.js.
 import Core from "spotlight/core"
+import { SerializedForm } from "spotlight/admin/form_observer"
 
 export default class {
   connect() {
+    var attachmentEndpointEl = document.querySelector(
+      "[data-attachment-endpoint]",
+    )
     SirTrevor.setDefaults({
       iconUrl: Spotlight.sirTrevorIcon,
-      uploadUrl: $("[data-attachment-endpoint]").data("attachment-endpoint"),
+      uploadUrl: attachmentEndpointEl
+        ? attachmentEndpointEl.dataset.attachmentEndpoint
+        : undefined,
       ajaxOptions: {
         headers: {
           "X-CSRF-Token": Core.csrfToken() || "",
@@ -19,16 +25,16 @@ export default class {
     SirTrevor.Blocks.Quote.prototype.toolbarEnabled = true
     SirTrevor.Blocks.Text.prototype.toolbarEnabled = true
 
-    var instance = $(".js-st-instance").first()
+    var instance = document.querySelector(".js-st-instance")
 
-    if (instance.length) {
+    if (instance) {
       var editor = new SirTrevor.Editor({
-        el: instance[0],
-        blockTypes: instance.data("blockTypes"),
-        altTextSettings: instance.data("altTextSettings"),
+        el: instance,
+        blockTypes: JSON.parse(instance.dataset.blockTypes),
+        altTextSettings: JSON.parse(instance.dataset.altTextSettings),
         defaultType: ["Text"],
         onEditorRender: function () {
-          $.SerializedForm()
+          SerializedForm.init()
         },
         blockTypeLimits: {
           SearchResults: 1,

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

@@ -1,15 +1,17 @@
 export default class {
   connect() {
-    var monitorElements = $('[data-behavior="progress-panel"]')
+    var monitorElements = document.querySelectorAll(
+      '[data-behavior="progress-panel"]',
+    )
     var defaultRefreshRate = 3000
     var panelContainer
     var pollers = []
 
-    $(monitorElements).each(function () {
-      panelContainer = $(this)
-      panelContainer.hide()
-      var monitorUrl = panelContainer.data("monitorUrl")
-      var refreshRate = panelContainer.data("refreshRate") || defaultRefreshRate
+    monitorElements.forEach(function (el) {
+      panelContainer = el
+      panelContainer.style.display = "none"
+      var monitorUrl = panelContainer.dataset.monitorUrl
+      var refreshRate = panelContainer.dataset.refreshRate || defaultRefreshRate
       pollers.push(
         setInterval(function () {
           checkMonitorUrl(monitorUrl)
@@ -18,71 +20,86 @@ export default class {
     })
 
     // Clear the intervals on turbolink:click event (e.g. when the user navigates away from the page)
-    $(document).on("turbolinks:click", function () {
+    document.addEventListener("turbolinks:click", function () {
       if (pollers.length > 0) {
-        $.each(pollers, function () {
-          clearInterval(this)
+        pollers.forEach(function (poller) {
+          clearInterval(poller)
         })
         pollers = []
       }
     })
 
     function checkMonitorUrl(url) {
-      $.ajax(url).done(success).fail(fail)
+      fetch(url)
+        .then(function (response) {
+          if (!response.ok) {
+            throw new Error("Network response was not ok")
+          }
+          return response.json()
+        })
+        .then(success)
+        .catch(fail)
     }
 
     function success(data) {
+      var panel = monitorPanel()
+      if (!panel) return
       if (data.recently_in_progress) {
         updateMonitorPanel(data)
-        monitorPanel().show()
+        panel.style.display = ""
       } else {
-        monitorPanel().hide()
+        panel.style.display = "none"
       }
     }
 
     function fail() {
-      monitorPanel().hide()
+      var panel = monitorPanel()
+      if (panel) panel.style.display = "none"
     }
 
     function updateMonitorPanel(data) {
-      panelStartDate().text(data.started_at)
-      panelCurrentDate().text(data.updated_at)
-      panelCompletedDate().text(data.updated_at)
-      panelCurrent().text(data.completed)
+      setText(panelStartDate(), data.started_at)
+      setText(panelCurrentDate(), data.updated_at)
+      setText(panelCompletedDate(), data.updated_at)
+      setText(panelCurrent(), data.completed)
       setPanelCompleted(data.finished)
       updatePanelTotals(data)
       updatePanelErrorMessage(data)
       updateProgressBar(data)
 
-      panelContainer.show()
+      panelContainer.style.display = ""
+    }
+
+    function setText(el, value) {
+      if (el) el.textContent = value
     }
 
     function updateProgressBar(data) {
       var percentage = calculatePercentage(data)
-      progressBar()
-        .attr("aria-valuemax", data.total)
-        .attr("aria-valuenow", percentage)
-        .css("width", percentage + "%")
-        .text(percentage + "%")
+      var bar = progressBar()
+      if (!bar) return
+      bar.setAttribute("aria-valuemax", data.total)
+      bar.setAttribute("aria-valuenow", percentage)
+      bar.style.width = percentage + "%"
+      bar.textContent = percentage + "%"
 
       if (data.finished) {
-        progressBar().removeClass("active").removeClass("progress-bar-striped")
+        bar.classList.remove("active")
+        bar.classList.remove("progress-bar-striped")
       }
     }
 
     function updatePanelErrorMessage(data) {
       // We currently do not store this state,
       // but with this code we can in the future.
-      if (data.errored) {
-        panelErrorMessage().show()
-      } else {
-        panelErrorMessage().hide()
-      }
+      var message = panelErrorMessage()
+      if (!message) return
+      message.style.display = data.errored ? "" : "none"
     }
 
     function updatePanelTotals(data) {
-      panelTotals().each(function () {
-        $(this).text(data.total)
+      panelTotals().forEach(function (el) {
+        el.textContent = data.total
       })
     }
 
@@ -92,53 +109,51 @@ export default class {
     }
 
     function monitorPanel() {
-      return panelContainer.find(".index-status")
+      return panelContainer.querySelector(".index-status")
     }
 
     function panelStartDate() {
       return monitorPanel()
-        .find('[data-behavior="monitor-start"]')
-        .find('[data-behavior="date"]')
+        ?.querySelector('[data-behavior="monitor-start"]')
+        ?.querySelector('[data-behavior="date"]')
     }
 
     function panelCurrentDate() {
       return monitorPanel()
-        .find('[data-behavior="monitor-current"]')
-        .find('[data-behavior="date"]')
+        ?.querySelector('[data-behavior="monitor-current"]')
+        ?.querySelector('[data-behavior="date"]')
     }
 
     function panelCompletedDate() {
       return monitorPanel()
-        .find('[data-behavior="monitor-completed"]')
-        .find('[data-behavior="date"]')
+        ?.querySelector('[data-behavior="monitor-completed"]')
+        ?.querySelector('[data-behavior="date"]')
     }
 
     function panelTotals() {
-      return monitorPanel().find('[data-behavior="total"]')
+      return monitorPanel().querySelectorAll('[data-behavior="total"]')
     }
 
     function panelCurrent() {
       return monitorPanel()
-        .find('[data-behavior="monitor-current"]')
-        .find('[data-behavior="completed"]')
+        ?.querySelector('[data-behavior="monitor-current"]')
+        ?.querySelector('[data-behavior="completed"]')
     }
 
     function progressBar() {
-      return monitorPanel().find(".progress-bar")
+      return monitorPanel()?.querySelector(".progress-bar")
     }
 
     function panelErrorMessage() {
-      return monitorPanel().find('[data-behavior="monitor-error"]')
+      return monitorPanel()?.querySelector('[data-behavior="monitor-error"]')
     }
 
     function setPanelCompleted(finished) {
-      var panel = monitorPanel().find('[data-behavior="monitor-completed"]')
-
-      if (finished) {
-        panel.show()
-      } else {
-        panel.hide()
-      }
+      var panel = monitorPanel()?.querySelector(
+        '[data-behavior="monitor-completed"]',
+      )
+      if (!panel) return
+      panel.style.display = finished ? "" : "none"
     }
 
     return this

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

@@ -1,8 +1,12 @@
 export default class {
   connect() {
     // Don't allow unchecking of checkboxes with the data-readonly attribute
-    $("input[type='checkbox'][data-readonly]").on("click", function (event) {
-      event.preventDefault()
-    })
+    document
+      .querySelectorAll("input[type='checkbox'][data-readonly]")
+      .forEach(function (el) {
+        el.addEventListener("click", function (event) {
+          event.preventDefault()
+        })
+      })
   }
 }