blacklight-spotlight 5.3.2 → 6.0.0.rc2

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

@@ -1,81 +1,96 @@
 export default class {
   connect() {
-    $("[data-expanded-add-button]").each((_i, el) =>
-      this.addExpandBehaviorToButton($(el)),
-    )
+    document
+      .querySelectorAll("[data-expanded-add-button]")
+      .forEach((el) => this.addExpandBehaviorToButton(el))
   }
 
   addExpandBehaviorToButton(button) {
     var settings = {
-      speed: button.data("speed") || 450,
-      animate_width: button.data("animate_width") || 425,
+      speed: parseInt(button.dataset.speed || "450", 10),
+      animate_width: parseInt(button.dataset.animateWidth || "425", 10),
     }
-    var target = $(button.data("field-target"))
-    var save = $("input[data-behavior='save']", target)
-    var cancel = $("input[data-behavior='cancel']", target)
-    var input = $("input[type='text']", target)
-    var original_width = button.outerWidth()
+    var target = document.querySelector(button.dataset.fieldTarget)
+    var save = target.querySelector("input[data-behavior='save']")
+    var cancel = target.querySelector("input[data-behavior='cancel']")
+    var input = target.querySelector("input[type='text']")
+    var original_width = button.offsetWidth
     var expanded = false
 
     // Animate button open when the mouse enters or
     // the button is given focus (i.e. clicked/tabbed)
-    button.on("mouseenter focus", function () {
-      expandButton()
-    })
+    button.addEventListener("mouseenter", expandButton)
+    button.addEventListener("focus", expandButton)
 
     // Don't allow blank titles
-    save.on("click", function () {
+    save.addEventListener("click", function (e) {
       if (inputEmpty()) {
-        return false
+        e.preventDefault()
+        e.stopPropagation()
       }
     })
 
     // Empty input and collapse
     // button on cancel click
-    cancel.on("click", function (e) {
+    cancel.addEventListener("click", function (e) {
       e.preventDefault()
-      input.val("")
+      input.value = ""
       collapseButton()
     })
 
     // Collapse the button on when
     // an empty input loses focus
-    input.on("blur", function () {
+    input.addEventListener("blur", function () {
       if (inputEmpty()) {
         collapseButton()
       }
     })
+
     function expandButton() {
       // If this has not yet been expanded, recalculate original_width to
       // handle things that may have been originally hidden.
       if (!expanded) {
-        original_width = button.outerWidth()
+        original_width = button.offsetWidth
       }
-      if (button.outerWidth() <= original_width + 5) {
+      if (button.offsetWidth <= original_width + 5) {
         expanded = true
-        button.animate(
+        var anim = button.animate(
           { width: settings.animate_width + "px" },
-          settings.speed,
-          function () {
-            target.show(0, function () {
-              input.focus()
-              // Set the button to auto width to make
-              // sure it has room for any inputs
-              button.width("auto")
-              // Explicitly set the width of the button
-              // so the close animation works properly
-              button.width(button.width())
-            })
-          },
+          { duration: settings.speed },
         )
+        anim.onfinish = function () {
+          button.style.width = settings.animate_width + "px"
+          showElement(target)
+          input.focus()
+          // Set the button to auto width to make
+          // sure it has room for any inputs
+          button.style.width = "auto"
+          // Explicitly set the width of the button
+          // so the close animation works properly
+          button.style.width = button.offsetWidth + "px"
+        }
       }
     }
     function collapseButton() {
-      target.hide()
-      button.animate({ width: original_width + "px" }, settings.speed)
+      target.style.display = "none"
+      var anim = button.animate(
+        { width: original_width + "px" },
+        { duration: settings.speed },
+      )
+      anim.onfinish = function () {
+        button.style.width = original_width + "px"
+      }
+    }
+    // Show an element that may be hidden via a CSS class by overriding with an
+    // appropriate inline display value (mirrors jQuery's .show()).
+    function showElement(el) {
+      el.style.display = ""
+      if (window.getComputedStyle(el).display === "none") {
+        el.style.display = "inline-block"
+      }
     }
     function inputEmpty() {
-      return $.trim(input.val()) == ""
+      return input.value.trim() == ""
     }
   }
 }

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

@@ -7,70 +7,92 @@ export default class {
 
   // Add Select/Deselect all behavior for metadata field names for a given view e.g. Item details.
   addCheckboxToggleBehavior() {
-    $("[data-behavior='metadata-select']").each(function () {
-      var selectCheckbox = $(this)
-      var parentCell = selectCheckbox.parents("th")
-      var table = parentCell.closest("table")
-      var columnRows = $(
-        "tr td:nth-child(" + (parentCell.index() + 1) + ")",
-        table,
-      )
-      var checkboxes = $("input[type='checkbox']", columnRows)
-      updateSelectAllInput(selectCheckbox, columnRows)
-      // Add the check/uncheck behavior to the select/deselect all checkbox
-      selectCheckbox.on("click", function () {
-        var allChecked = allCheckboxesChecked(columnRows)
-        columnRows.each(function () {
-          $("input[type='checkbox']", $(this)).prop("checked", !allChecked)
-        })
-      })
-      // When a single checkbox is selected/unselected, the "All" checkbox should be updated accordingly.
-      checkboxes.each(function () {
-        $(this).on("change", function () {
-          updateSelectAllInput(selectCheckbox, columnRows)
-        })
-      })
-    })
-
     // Check number of checkboxes against the number of checked
     // checkboxes to determine if all of them are checked or not
-    function allCheckboxesChecked(elements) {
-      return (
-        $("input[type='checkbox']", elements).length ==
-        $("input[type='checkbox']:checked", elements).length
-      )
+    function allCheckboxesChecked(cells) {
+      let total = 0
+      let checked = 0
+      cells.forEach((cell) => {
+        cell.querySelectorAll("input[type='checkbox']").forEach((cb) => {
+          total++
+          if (cb.checked) {
+            checked++
+          }
+        })
+      })
+      return total === checked
     }
 
     // Check or uncheck the "All" checkbox for each view column, e.g. Item details, List, etc.
-    function updateSelectAllInput(checkbox, elements) {
-      if (allCheckboxesChecked(elements)) {
-        checkbox.prop("checked", true)
-      } else {
-        checkbox.prop("checked", false)
-      }
+    function updateSelectAllInput(checkbox, cells) {
+      checkbox.checked = allCheckboxesChecked(cells)
     }
+
+    document
+      .querySelectorAll("[data-behavior='metadata-select']")
+      .forEach((selectCheckbox) => {
+        const parentCell = selectCheckbox.closest("th")
+        if (!parentCell) return
+
+        const table = parentCell.closest("table")
+        if (!table) return
+
+        const columnIndex = Array.from(parentCell.parentNode.children).indexOf(
+          parentCell,
+        )
+        const columnRows = table.querySelectorAll(
+          `tr td:nth-child(${columnIndex + 1})`,
+        )
+
+        const checkboxes = []
+        columnRows.forEach((cell) => {
+          cell.querySelectorAll("input[type='checkbox']").forEach((cb) => {
+            checkboxes.push(cb)
+          })
+        })
+
+        updateSelectAllInput(selectCheckbox, columnRows)
+
+        // Add the check/uncheck behavior to the select/deselect all checkbox
+        selectCheckbox.addEventListener("click", () => {
+          const allChecked = allCheckboxesChecked(columnRows)
+          columnRows.forEach((cell) => {
+            cell.querySelectorAll("input[type='checkbox']").forEach((cb) => {
+              cb.checked = !allChecked
+              cb.dispatchEvent(new Event("change", { bubbles: true }))
+            })
+          })
+          updateSelectAllInput(selectCheckbox, columnRows)
+        })
+
+        // When a single checkbox is selected/unselected, the "All" checkbox should be updated accordingly.
+        checkboxes.forEach((cb) => {
+          cb.addEventListener("change", () => {
+            updateSelectAllInput(selectCheckbox, columnRows)
+          })
+        })
+      })
   }
 
   addEnableToggleBehavior() {
-    $("[data-behavior='enable-feature']").each(function () {
-      var checkbox = $(this)
-      var target = $($(this).data("target"))
+    document
+      .querySelectorAll("[data-behavior='enable-feature']")
+      .forEach((checkbox) => {
+        const targetSelector = checkbox.dataset.target
+        if (!targetSelector) return
+        const target = document.querySelector(targetSelector)
+        if (!target) return
 
-      checkbox.on("change", function () {
-        if ($(this).is(":checked")) {
-          target
-            .find("input:checkbox")
-            .not("[data-behavior='enable-feature']")
-            .prop("checked", true)
-            .attr("disabled", false)
-        } else {
-          target
-            .find("input:checkbox")
-            .not("[data-behavior='enable-feature']")
-            .prop("checked", false)
-            .attr("disabled", true)
-        }
+        checkbox.addEventListener("change", () => {
+          const isChecked = checkbox.checked
+          target.querySelectorAll("input[type='checkbox']").forEach((cb) => {
+            if (!cb.matches("[data-behavior='enable-feature']")) {
+              cb.checked = isChecked
+              cb.disabled = !isChecked
+              cb.dispatchEvent(new Event("change", { bubbles: true }))
+            }
+          })
+        })
       })
-    })
   }
 }

data/app/javascript/spotlight/admin/block_mixins/autocompleteable.js

@@ -1,112 +1,113 @@
 import { fetchAutocompleteJSON } from "spotlight/admin/search_typeahead"
-;(function ($) {
-  ;((SirTrevor.BlockMixins.Autocompleteable = {
-    mixinName: "Autocompleteable",
-    preload: true,
-
-    initializeAutocompleteable: function () {
-      this.on("onRender", this.addAutocompletetoSirTrevorForm)
-
-      if (this["autocomplete_url"] === undefined) {
-        this.autocomplete_url = function () {
-          return $("form[data-autocomplete-url]").data("autocomplete-url")
-        }
-      }
 
-      if (this["autocomplete_fetch"] === undefined) {
-        this.autocomplete_fetch = this.fetchAutocompleteResults
-      }
+SirTrevor.BlockMixins.Autocompleteable = {
+  mixinName: "Autocompleteable",
+  preload: true,
 
-      if (this["transform_autocomplete_results"] === undefined) {
-        this.transform_autocomplete_results = (val) => val
+  initializeAutocompleteable: function () {
+    this.on("onRender", this.addAutocompletetoSirTrevorForm)
+
+    if (this["autocomplete_url"] === undefined) {
+      this.autocomplete_url = function () {
+        var el = document.querySelector("form[data-autocomplete-url]")
+        return el ? el.dataset.autocompleteUrl : undefined
       }
+    }
+
+    if (this["autocomplete_fetch"] === undefined) {
+      this.autocomplete_fetch = this.fetchAutocompleteResults
+    }
 
-      if (this["highlight"] === undefined) {
-        this.highlight = function (value) {
-          if (!value) return ""
-          const queryValue = this.getQueryValue().trim()
-          return queryValue
-            ? value.replace(new RegExp(queryValue, "gi"), "<strong>$&</strong>")
-            : value
-        }
+    if (this["transform_autocomplete_results"] === undefined) {
+      this.transform_autocomplete_results = (val) => val
+    }
+
+    if (this["highlight"] === undefined) {
+      this.highlight = function (value) {
+        if (!value) return ""
+        const queryValue = this.getQueryValue().trim()
+        return queryValue
+          ? value.replace(new RegExp(queryValue, "gi"), "<strong>$&</strong>")
+          : value
       }
+    }
 
-      if (this["autocomplete_control"] === undefined) {
-        this.autocomplete_control = function () {
-          const autocompleteID = this.autocompleteID()
-          return `
-          <auto-complete src="${this.autocomplete_url()}" for="${autocompleteID}-popup" fetch-on-empty>
-            <input type="text" name="${autocompleteID}" placeholder="${i18n.t("blocks:autocompleteable:placeholder")}" data-default-typeahead>
-            <ul id="${autocompleteID}-popup"></ul>
-            <div id="${autocompleteID}-popup-feedback" class="visually-hidden"></div>
-          </auto-complete>
-        `
-        }
+    if (this["autocomplete_control"] === undefined) {
+      this.autocomplete_control = function () {
+        const autocompleteID = this.autocompleteID()
+        return `
+        <auto-complete src="${this.autocomplete_url()}" for="${autocompleteID}-popup" fetch-on-empty>
+          <input type="text" name="${autocompleteID}" placeholder="${i18n.t("blocks:autocompleteable:placeholder")}" data-default-typeahead>
+          <ul id="${autocompleteID}-popup"></ul>
+          <div id="${autocompleteID}-popup-feedback" class="visually-hidden"></div>
+        </auto-complete>
+      `
       }
+    }
 
-      if (this["autocomplete_element_template"] === undefined) {
-        this.autocomplete_element_template = function (item) {
-          return `<li role="option" data-autocomplete-value="${item.id}">${this.autocomplete_template(item)}</li>`
-        }
+    if (this["autocomplete_element_template"] === undefined) {
+      this.autocomplete_element_template = function (item) {
+        return `<li role="option" data-autocomplete-value="${item.id}">${this.autocomplete_template(item)}</li>`
       }
-    },
-
-    queryTokenizer: function (query) {
-      return query.trim().toLowerCase().split(/\s+/).filter(Boolean)
-    },
-
-    filterResults: function (data, query) {
-      const queryStrings = this.queryTokenizer(query)
-      return data.filter((item) => {
-        const lowerTitle = item.title.toLowerCase()
-        return queryStrings.some((queryString) =>
-          lowerTitle.includes(queryString),
-        )
-      })
-    },
-
-    fetchAutocompleteResults: async function (url) {
-      const result = await fetchAutocompleteJSON(url)
-      const transformed = this.transform_autocomplete_results(result)
-      this.fetchedData = {}
-      transformed.map((item) => (this.fetchedData[item.id] = item))
-      return transformed
-        .map((item) => this.autocomplete_element_template(item))
-        .join("")
-    },
-
-    fetchOnceAndFilterLocalResults: async function (url) {
-      if (this.fetchedData === undefined) {
-        await this.fetchAutocompleteResults(url)
+    }
+  },
+
+  queryTokenizer: function (query) {
+    return query.trim().toLowerCase().split(/\s+/).filter(Boolean)
+  },
+
+  filterResults: function (data, query) {
+    const queryStrings = this.queryTokenizer(query)
+    return data.filter((item) => {
+      const lowerTitle = item.title.toLowerCase()
+      return queryStrings.some((queryString) =>
+        lowerTitle.includes(queryString),
+      )
+    })
+  },
+
+  fetchAutocompleteResults: async function (url) {
+    const result = await fetchAutocompleteJSON(url)
+    const transformed = this.transform_autocomplete_results(result)
+    this.fetchedData = {}
+    transformed.map((item) => (this.fetchedData[item.id] = item))
+    return transformed
+      .map((item) => this.autocomplete_element_template(item))
+      .join("")
+  },
+
+  fetchOnceAndFilterLocalResults: async function (url) {
+    if (this.fetchedData === undefined) {
+      await this.fetchAutocompleteResults(url)
+    }
+    const query = url.searchParams.get("q")
+    const data = Object.values(this.fetchedData)
+    const filteredData = query ? this.filterResults(data, query) : data
+    return filteredData
+      .map((item) => this.autocomplete_element_template(item))
+      .join("")
+  },
+
+  autocompleteID: function () {
+    return this.blockID + "-autocomplete"
+  },
+
+  getQueryValue: function () {
+    const completer = this.inner.querySelector("auto-complete > input")
+    return completer.value
+  },
+
+  addAutocompletetoSirTrevorForm: function () {
+    const completer = this.inner.querySelector("auto-complete")
+    completer.fetchResult = this.autocomplete_fetch.bind(this)
+    completer.addEventListener("auto-complete-change", (e) => {
+      const data = this.fetchedData[e.relatedTarget.value]
+      if (e.relatedTarget.value && data) {
+        e.value = e.relatedTarget.value = ""
+        this.createItemPanel({ ...data, display: "true" })
       }
-      const query = url.searchParams.get("q")
-      const data = Object.values(this.fetchedData)
-      const filteredData = query ? this.filterResults(data, query) : data
-      return filteredData
-        .map((item) => this.autocomplete_element_template(item))
-        .join("")
-    },
-
-    autocompleteID: function () {
-      return this.blockID + "-autocomplete"
-    },
-
-    getQueryValue: function () {
-      const completer = this.inner.querySelector("auto-complete > input")
-      return completer.value
-    },
-
-    addAutocompletetoSirTrevorForm: function () {
-      const completer = this.inner.querySelector("auto-complete")
-      completer.fetchResult = this.autocomplete_fetch.bind(this)
-      completer.addEventListener("auto-complete-change", (e) => {
-        const data = this.fetchedData[e.relatedTarget.value]
-        if (e.relatedTarget.value && data) {
-          e.value = e.relatedTarget.value = ""
-          this.createItemPanel({ ...data, display: "true" })
-        }
-      })
-    },
-  }),
-    SirTrevor.Block.prototype.availableMixins.push("autocompleteable"))
-})(jQuery)
+    })
+  },
+}
+
+SirTrevor.Block.prototype.availableMixins.push("autocompleteable")

data/app/javascript/spotlight/admin/block_mixins/formable.js

@@ -1,86 +1,102 @@
-;(function ($) {
-  ;((SirTrevor.BlockMixins.Formable = {
-    mixinName: "Formable",
-    preload: true,
-
-    initializeFormable: function () {
-      if (this["afterLoadData"] === undefined) {
-        this["afterLoadData"] = function (_data) {}
-      }
-    },
+import serializeJSON from "spotlight/admin/serialize_json"
+
+function setElementValue(el, values) {
+  var type = el.type || ""
+  if (type === "checkbox" || type === "radio") {
+    el.checked = values.indexOf(el.value) !== -1
+  } else if (el.nodeName.toLowerCase() === "select") {
+    Array.prototype.forEach.call(el.options, function (opt) {
+      opt.selected = values.indexOf(opt.value) !== -1
+    })
+  } else {
+    el.value = values[0] != null ? values[0] : ""
+  }
+}
+
+SirTrevor.BlockMixins.Formable = {
+  mixinName: "Formable",
+  preload: true,
+
+  initializeFormable: function () {
+    if (this["afterLoadData"] === undefined) {
+      this["afterLoadData"] = function (_data) {}
+    }
+  },
 
-    formId: function (id) {
-      return this.blockID + "_" + id
-    },
+  formId: function (id) {
+    return this.blockID + "_" + id
+  },
 
-    _serializeData: function () {
-      var data = $(":input,textarea,select", this.inner)
-        .not(":input:radio")
-        .serializeJSON()
+  _serializeData: function () {
+    var inputs = this.inner.querySelectorAll("input, select, textarea")
+    var nonRadioInputs = Array.prototype.filter.call(inputs, function (el) {
+      return el.type !== "radio"
+    })
+    var data = serializeJSON(nonRadioInputs)
 
-      $(":input:radio:checked", this.inner).each(function (index, input) {
-        var key = $(input).data("key") || input.getAttribute("name")
+    this.inner
+      .querySelectorAll("input[type='radio']:checked")
+      .forEach(function (input) {
+        var key = input.getAttribute("data-key") || input.getAttribute("name")
 
-        if (!key.match("\\[")) {
-          data[key] = $(input).val()
+        if (key && !/\[/.test(key)) {
+          data[key] = input.value
         }
       })
 
-      /* Simple to start. Add conditions later */
-      if (this.hasTextBlock()) {
-        data.text = this.getTextBlockHTML()
-        data.format = "html"
-        if (
-          data.text &&
-          data.text.length > 0 &&
-          this.options.convertToMarkdown
-        ) {
-          data.text = stToMarkdown(data.text, this.type)
-          data.format = "markdown"
-        }
+    /* Simple to start. Add conditions later */
+    if (this.hasTextBlock()) {
+      data.text = this.getTextBlockHTML()
+      data.format = "html"
+      if (data.text && data.text.length > 0 && this.options.convertToMarkdown) {
+        data.text = stToMarkdown(data.text, this.type)
+        data.format = "markdown"
+      }
+    }
+
+    return data
+  },
+
+  loadData: function (data) {
+    if (this.hasTextBlock()) {
+      if (
+        data.text &&
+        data.text.length > 0 &&
+        this.options.convertFromMarkdown &&
+        data.format !== "html"
+      ) {
+        this.setTextBlockHTML(SirTrevor.toHTML(data.text, this.type))
+      } else {
+        this.setTextBlockHTML(data.text)
       }
+    }
+    this.loadFormDataByKey(data)
+    this.afterLoadData(data)
+  },
+
+  loadFormDataByKey: function (data) {
+    var elements = this.inner.querySelectorAll("input, select, textarea")
+    Array.prototype.forEach.call(elements, function (input) {
+      var type = input.type || ""
+      if (type === "button" || type === "submit" || type === "hidden") return
 
-      return data
-    },
-
-    loadData: function (data) {
-      if (this.hasTextBlock()) {
-        if (
-          data.text &&
-          data.text.length > 0 &&
-          this.options.convertFromMarkdown &&
-          data.format !== "html"
-        ) {
-          this.setTextBlockHTML(SirTrevor.toHTML(data.text, this.type))
-        } else {
-          this.setTextBlockHTML(data.text)
+      var key = input.getAttribute("data-key") || input.getAttribute("name")
+
+      if (key) {
+        if (/\[\]$/.test(key)) {
+          key = key.replace("[]", "")
         }
+
+        // by wrapping it in an array, this'll "just work" for radio and checkbox fields too
+        var input_data = data[key]
+
+        if (!(input_data instanceof Array)) {
+          input_data = [input_data]
+        }
+        setElementValue(input, input_data)
       }
-      this.loadFormDataByKey(data)
-      this.afterLoadData(data)
-    },
-
-    loadFormDataByKey: function (data) {
-      $(":input", this.inner)
-        .not("button,:input[type=hidden]")
-        .each(function (index, input) {
-          var key = $(input).data("key") || input.getAttribute("name")
-
-          if (key) {
-            if (key.match("\\[\\]$")) {
-              key = key.replace("[]", "")
-            }
-
-            // by wrapping it in an array, this'll "just work" for radio and checkbox fields too
-            var input_data = data[key]
-
-            if (!(input_data instanceof Array)) {
-              input_data = [input_data]
-            }
-            $(this).val(input_data)
-          }
-        })
-    },
-  }),
-    SirTrevor.Block.prototype.availableMixins.push("formable"))
-})(jQuery)
+    })
+  },
+}
+
+SirTrevor.Block.prototype.availableMixins.push("formable")