blacklight-spotlight 5.3.2 → 6.0.0.rc2

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

@@ -1,57 +1,55 @@
-;(function (_$) {
-  SirTrevor.BlockMixins.Plustextable = {
-    mixinName: "Textable",
-    preload: true,
+SirTrevor.BlockMixins.Plustextable = {
+  mixinName: "Textable",
+  preload: true,
 
-    initializeTextable: function () {
-      if (this["formId"] === undefined) {
-        this.withMixin(SirTrevor.BlockMixins.Formable)
-      }
+  initializeTextable: function () {
+    if (this["formId"] === undefined) {
+      this.withMixin(SirTrevor.BlockMixins.Formable)
+    }
 
-      if (this["show_heading"] === undefined) {
-        this.show_heading = true
-      }
-    },
+    if (this["show_heading"] === undefined) {
+      this.show_heading = true
+    }
+  },
 
-    align_key: "text-align",
-    text_key: "item-text",
-    heading_key: "title",
+  align_key: "text-align",
+  text_key: "item-text",
+  heading_key: "title",
 
-    text_area: function () {
-      return `
-      <div class="row">
-        <div class="col-md-8">
-          <div class="form-group mb-3">
-            ${this.heading()}
-            <div class="field">
-              <label for="${this.formId(this.text_key)}" class="col-form-label">${i18n.t("blocks:textable:text")}</label>
-              <div id="${this.formId(this.text_key)}" class="st-text-block form-control" contenteditable="true"></div>
-            </div>
+  text_area: function () {
+    return `
+    <div class="row">
+      <div class="col-md-8">
+        <div class="form-group mb-3">
+          ${this.heading()}
+          <div class="field">
+            <label for="${this.formId(this.text_key)}" class="col-form-label">${i18n.t("blocks:textable:text")}</label>
+            <div id="${this.formId(this.text_key)}" class="st-text-block form-control" contenteditable="true"></div>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="text-align">
-            <p>${i18n.t("blocks:textable:align:title")}</p>
-            <input data-key="${this.align_key}" type="radio" name="${this.formId(this.align_key)}" id="${this.formId(this.align_key + "-left")}" value="left" checked="true">
-            <label for="${this.formId(this.align_key + "-left")}">${i18n.t("blocks:textable:align:left")}</label>
-            <input data-key="${this.align_key}" type="radio" name="${this.formId(this.align_key)}" id="${this.formId(this.align_key + "-right")}" value="right">
-            <label for="${this.formId(this.align_key + "-right")}">${i18n.t("blocks:textable:align:right")}</label>
-          </div>
+      </div>
+      <div class="col-md-4">
+        <div class="text-align">
+          <p>${i18n.t("blocks:textable:align:title")}</p>
+          <input data-key="${this.align_key}" type="radio" name="${this.formId(this.align_key)}" id="${this.formId(this.align_key + "-left")}" value="left" checked="true">
+          <label for="${this.formId(this.align_key + "-left")}">${i18n.t("blocks:textable:align:left")}</label>
+          <input data-key="${this.align_key}" type="radio" name="${this.formId(this.align_key)}" id="${this.formId(this.align_key + "-right")}" value="right">
+          <label for="${this.formId(this.align_key + "-right")}">${i18n.t("blocks:textable:align:right")}</label>
         </div>
-      </div>`
-    },
+      </div>
+    </div>`
+  },
 
-    heading: function () {
-      if (this.show_heading) {
-        return `<div class="field">
-          <label for="${this.formId(this.heading_key)}" class="col-form-label">${i18n.t("blocks:textable:heading")}</label>
-          <input type="text" class="form-control" id="${this.formId(this.heading_key)}" name="${this.heading_key}" />
-        </div>`
-      } else {
-        return ""
-      }
-    },
-  }
+  heading: function () {
+    if (this.show_heading) {
+      return `<div class="field">
+        <label for="${this.formId(this.heading_key)}" class="col-form-label">${i18n.t("blocks:textable:heading")}</label>
+        <input type="text" class="form-control" id="${this.formId(this.heading_key)}" name="${this.heading_key}" />
+      </div>`
+    } else {
+      return ""
+    }
+  },
+}
 
-  SirTrevor.Block.prototype.availableMixins.push("plustextable")
-})(jQuery)
+SirTrevor.Block.prototype.availableMixins.push("plustextable")

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

@@ -1,29 +1,28 @@
 import Core from "spotlight/core"
-;(function ($) {
-  Core.Block = SirTrevor.Block.extend({
-    scribeOptions: {
-      allowBlockElements: true,
-      tags: { p: true },
-    },
-    formable: true,
-    editorHTML: function () {
-      return ""
-    },
-    beforeBlockRender: function () {
-      this.availableMixins.forEach(function (mixin) {
-        if (
-          this[mixin] &&
-          SirTrevor.BlockMixins[this.capitalize(mixin)].preload
-        ) {
-          this.withMixin(SirTrevor.BlockMixins[this.capitalize(mixin)])
-        }
-      }, this)
-    },
-    $instance: function () {
-      return $("#" + this.instanceID)
-    },
-    capitalize: function (string) {
-      return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase()
-    },
-  })
-})(jQuery)
+
+Core.Block = SirTrevor.Block.extend({
+  scribeOptions: {
+    allowBlockElements: true,
+    tags: { p: true },
+  },
+  formable: true,
+  editorHTML: function () {
+    return ""
+  },
+  beforeBlockRender: function () {
+    this.availableMixins.forEach(function (mixin) {
+      if (
+        this[mixin] &&
+        SirTrevor.BlockMixins[this.capitalize(mixin)].preload
+      ) {
+        this.withMixin(SirTrevor.BlockMixins[this.capitalize(mixin)])
+      }
+    }, this)
+  },
+  instance: function () {
+    return document.getElementById(this.instanceID)
+  },
+  capitalize: function (string) {
+    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase()
+  },
+})

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

@@ -7,10 +7,9 @@ SirTrevor.Blocks.Browse = (function () {
     icon_name: "browse",
 
     autocomplete_url: function () {
-      return document
-        .getElementById(this.instanceID)
-        .closest("form[data-autocomplete-exhibit-searches-path]").dataset
-        .autocompleteExhibitSearchesPath
+      return this.instance().closest(
+        "form[data-autocomplete-exhibit-searches-path]",
+      ).dataset.autocompleteExhibitSearchesPath
     },
 
     autocomplete_fetch: function (url) {
@@ -66,14 +65,19 @@ SirTrevor.Blocks.Browse = (function () {
               </div>
             </li>`
 
-      var panel = $(markup)
+      var tempDiv = document.createElement("div")
+      tempDiv.innerHTML = markup.trim()
+      var panel = tempDiv.firstElementChild
       var context = this
 
-      $(".remove a", panel).on("click", function (e) {
-        e.preventDefault()
-        $(this).closest(".field").remove()
-        context.afterPanelDelete()
-      })
+      const removeLink = panel.querySelector(".remove a")
+      if (removeLink) {
+        removeLink.addEventListener("click", function (e) {
+          e.preventDefault()
+          this.closest(".field").remove()
+          context.afterPanelDelete()
+        })
+      }
 
       this.afterPanelRender(data, panel)
 

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

@@ -22,10 +22,9 @@ SirTrevor.Blocks.BrowseGroupCategories = (function () {
     },
 
     autocomplete_url: function () {
-      return document
-        .getElementById(this.instanceID)
-        .closest("form[data-autocomplete-exhibit-browse-groups-path]").dataset
-        .autocompleteExhibitBrowseGroupsPath
+      return this.instance().closest(
+        "form[data-autocomplete-exhibit-browse-groups-path]",
+      ).dataset.autocompleteExhibitBrowseGroupsPath
     },
     autocomplete_fetch: function (url) {
       return this.fetchOnceAndFilterLocalResults(url)
@@ -64,14 +63,19 @@ SirTrevor.Blocks.BrowseGroupCategories = (function () {
             </div>
           </li>`
 
-      const panel = $(markup)
+      const tempDiv = document.createElement("div")
+      tempDiv.innerHTML = markup.trim()
+      const panel = tempDiv.firstElementChild
       var context = this
 
-      $("a[data-item-grid-panel-remove]", panel).on("click", function (e) {
-        e.preventDefault()
-        $(this).closest(".field").remove()
-        context.afterPanelDelete()
-      })
+      const removeLink = panel.querySelector("a[data-item-grid-panel-remove]")
+      if (removeLink) {
+        removeLink.addEventListener("click", function (e) {
+          e.preventDefault()
+          this.closest(".field").remove()
+          context.afterPanelDelete()
+        })
+      }
 
       this.afterPanelRender(data, panel)
 

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

@@ -6,13 +6,14 @@ SirTrevor.Blocks.FeaturedPages = (function () {
 
     icon_name: "pages",
 
+    blockGroup: "undefined",
+
     show_image_selection: false,
 
     autocomplete_url: function () {
-      return document
-        .getElementById(this.instanceID)
-        .closest("form[data-autocomplete-exhibit-pages-path]").dataset
-        .autocompleteExhibitPagesPath
+      return this.instance().closest(
+        "form[data-autocomplete-exhibit-pages-path]",
+      ).dataset.autocompleteExhibitPagesPath
     },
     autocomplete_fetch: function (url) {
       return this.fetchOnceAndFilterLocalResults(url)

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

@@ -1,5 +1,6 @@
 import Core from "spotlight/core"
 import SpotlightNestable from "spotlight/admin/spotlight_nestable"
+import { selectRelatedInput } from "spotlight/admin/select_related_input"
 
 Core.Block.Resources = (function () {
   return Core.Block.extend({
@@ -71,8 +72,8 @@ Core.Block.Resources = (function () {
       // If image selection is not possible for this block, then do not show
       // image selection link
       if (!this.show_image_selection) return ``
-      var url =
-        $("form[data-exhibit-path]").data("exhibit-path") + "/select_image?"
+      var formEl = document.querySelector("form[data-exhibit-path]")
+      var url = (formEl ? formEl.dataset.exhibitPath : "") + "/select_image?"
       var markup = `
           <a name="selectimage" href="${url}block_item_id=${block_item_id}&index_id=${index}" data-blacklight-modal="trigger">Select image area</a>
         `
@@ -128,14 +129,19 @@ Core.Block.Resources = (function () {
             </li>
       `
 
-      const panel = $(markup)
+      const tempDiv = document.createElement("div")
+      tempDiv.innerHTML = markup.trim()
+      const panel = tempDiv.firstElementChild
       var context = this
 
-      $(".remove a", panel).on("click", function (e) {
-        e.preventDefault()
-        $(this).closest(".field").remove()
-        context.afterPanelDelete()
-      })
+      const removeLink = panel.querySelector(".remove a")
+      if (removeLink) {
+        removeLink.addEventListener("click", function (e) {
+          e.preventDefault()
+          this.closest(".field").remove()
+          context.afterPanelDelete()
+        })
+      }
 
       this.afterPanelRender(data, panel)
 
@@ -149,8 +155,11 @@ Core.Block.Resources = (function () {
     createItemPanel: function (data) {
       var panel = this._itemPanel(data)
       this.attachAltTextHandlers(panel)
-      $(panel).appendTo($(".panels > ol", this.inner))
-      $('[data-behavior="nestable"]', this.inner).trigger("change")
+      const ol = this.inner.querySelector(".panels > ol")
+      if (ol) ol.appendChild(panel)
+      const nestable = this.inner.querySelector('[data-behavior="nestable"]')
+      if (nestable)
+        nestable.dispatchEvent(new Event("change", { bubbles: true }))
     },
 
     item_options: function () {
@@ -237,53 +246,64 @@ Core.Block.Resources = (function () {
 
     attachAltTextHandlers: function (panel) {
       if (this.showAltText()) {
-        const decorativeCheckbox = $('input[name$="[decorative]"]', panel)
-        const altTextInput = $('textarea[name$="[alt_text]"]', panel)
-        const altTextBackupInput = $('input[name$="[alt_text_backup]"]', panel)
+        const decorativeCheckbox = panel.querySelector(
+          'input[name$="[decorative]"]',
+        )
+        const altTextInput = panel.querySelector('textarea[name$="[alt_text]"]')
+        const altTextBackupInput = panel.querySelector(
+          'input[name$="[alt_text_backup]"]',
+        )
 
-        decorativeCheckbox.on("change", function () {
-          const isDecorative = this.checked
-          if (isDecorative) {
-            altTextBackupInput.val(altTextInput.val())
-            altTextInput.val("")
-          } else {
-            altTextInput.val(altTextBackupInput.val())
-          }
-          altTextInput
-            .prop("disabled", isDecorative)
-            .attr(
+        if (decorativeCheckbox) {
+          decorativeCheckbox.addEventListener("change", function () {
+            const isDecorative = this.checked
+            if (isDecorative) {
+              if (altTextBackupInput)
+                altTextBackupInput.value = altTextInput.value
+              altTextInput.value = ""
+            } else {
+              if (altTextBackupInput)
+                altTextInput.value = altTextBackupInput.value
+            }
+            altTextInput.disabled = isDecorative
+            altTextInput.setAttribute(
               "placeholder",
               isDecorative
                 ? ""
                 : i18n.t("blocks:resources:alt_text:placeholder"),
             )
-        })
+          })
+        }
 
-        altTextInput.on("input", function () {
-          $(this).data("lastValue", $(this).val())
-        })
+        if (altTextInput) {
+          altTextInput.addEventListener("input", function () {
+            this.dataset.lastValue = this.value
+          })
+        }
       }
     },
 
     onBlockRender: function () {
-      SpotlightNestable.init($('[data-behavior="nestable"]', this.inner))
-      $("[data-input-select-target]", this.inner).selectRelatedInput()
+      SpotlightNestable.init(
+        this.inner.querySelectorAll('[data-behavior="nestable"]'),
+      )
+      selectRelatedInput(
+        this.inner.querySelectorAll("[data-input-select-target]"),
+      )
     },
 
     afterLoadData: function (data) {
       var context = this
-      $.each(
-        Object.keys(data.item || {})
-          .map(function (k) {
-            return data.item[k]
-          })
-          .sort(function (a, b) {
-            return a.weight - b.weight
-          }),
-        function (index, item) {
+      Object.keys(data.item || {})
+        .map(function (k) {
+          return data.item[k]
+        })
+        .sort(function (a, b) {
+          return a.weight - b.weight
+        })
+        .forEach(function (item) {
           context.createItemPanel(item)
-        },
-      )
+        })
     },
   })
 })()

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

@@ -14,26 +14,43 @@ SirTrevor.Blocks.SearchResults = (function () {
 
     item_options: function () {
       var block = this
-      var fields = $("[data-blacklight-configuration-search-views]").data(
-        "blacklight-configuration-search-views",
+      var element = document.querySelector(
+        "[data-blacklight-configuration-search-views]",
       )
+      var fieldsData = element
+        ? element.dataset.blacklightConfigurationSearchViews
+        : null
+      var fields = []
+      if (fieldsData) {
+        try {
+          fields = JSON.parse(fieldsData)
+        } catch {
+          // ignore parse errors
+        }
+      }
 
-      return $.map(fields, function (field) {
-        return `<div>
+      return fields
+        .map(function (field) {
+          return `<div>
           <label for='${block.formId(block.view_key + field.key)}'>
             <input id='${block.formId(block.view_key + field.key)}' name='${block.view_key}[]' type='checkbox' value='${field.key}' />
           ${field.label}
           </label>
         </div>`
-      }).join("\n")
+        })
+        .join("\n")
     },
 
     afterPanelRender: function (_data, _panel) {
-      $(this.inner).find(".item-input-field").attr("disabled", "disabled")
+      this.inner.querySelectorAll(".item-input-field").forEach(function (el) {
+        el.disabled = true
+      })
     },
 
     afterPanelDelete: function () {
-      $(this.inner).find(".item-input-field").removeAttr("disabled")
+      this.inner.querySelectorAll(".item-input-field").forEach(function (el) {
+        el.disabled = false
+      })
     },
   })
 })()