blacklight-spotlight 5.3.0 → 5.3.2

data/app/javascript/spotlight/admin/sir-trevor/block_limits.js

@@ -1,39 +1,44 @@
-import Core from 'spotlight/core'
+import Core from "spotlight/core"
 
-Core.BlockLimits = function(editor) {
-  this.editor = editor;
-};
+Core.BlockLimits = function (editor) {
+  this.editor = editor
+}
 
-Core.BlockLimits.prototype.enforceLimits = function(editor) {
-  this.addEditorCallbacks(editor);
-  this.checkGlobalBlockTypeLimit()();
-};
+Core.BlockLimits.prototype.enforceLimits = function (editor) {
+  this.addEditorCallbacks(editor)
+  this.checkGlobalBlockTypeLimit()()
+}
 
-Core.BlockLimits.prototype.addEditorCallbacks = function(editor) {
-  SirTrevor.EventBus.on('block:create:new', this.checkBlockTypeLimitOnAdd());
-  SirTrevor.EventBus.on('block:remove', this.checkGlobalBlockTypeLimit());
-};
+Core.BlockLimits.prototype.addEditorCallbacks = function (_editor) {
+  SirTrevor.EventBus.on("block:create:new", this.checkBlockTypeLimitOnAdd())
+  SirTrevor.EventBus.on("block:remove", this.checkGlobalBlockTypeLimit())
+}
 
-Core.BlockLimits.prototype.checkBlockTypeLimitOnAdd = function() {
-  var editor = this.editor;
+Core.BlockLimits.prototype.checkBlockTypeLimitOnAdd = function () {
+  var editor = this.editor
 
-  return function(block) {
-    var control = $(".st-block-controls__button[data-type='" + block.type + "']", editor.blockControls.el);
+  return function (block) {
+    var control = $(
+      ".st-block-controls__button[data-type='" + block.type + "']",
+      editor.blockControls.el,
+    )
 
-    control.prop("disabled", !editor.blockManager.canCreateBlock(block.class()));
-  };
-};
+    control.prop("disabled", !editor.blockManager.canCreateBlock(block.class()))
+  }
+}
 
-Core.BlockLimits.prototype.checkGlobalBlockTypeLimit = function() {
+Core.BlockLimits.prototype.checkGlobalBlockTypeLimit = function () {
   // we don't know what type of block was created or removed.. So, try them all.
-  var editor = this.editor;
-
-  return function() {
-    $.each(editor.blockManager.blockTypes, function(i, type) {
-      var block_type = SirTrevor.Blocks[type].prototype;
-
-      var control = $(editor.blockControls.el).find(".st-block-controls__button[data-type='" + block_type.type + "']");
-      control.prop("disabled", !editor.blockManager.canCreateBlock(type));
-    });
-  };
-};
+  var editor = this.editor
+
+  return function () {
+    $.each(editor.blockManager.blockTypes, function (i, type) {
+      var block_type = SirTrevor.Blocks[type].prototype
+
+      var control = $(editor.blockControls.el).find(
+        ".st-block-controls__button[data-type='" + block_type.type + "']",
+      )
+      control.prop("disabled", !editor.blockManager.canCreateBlock(type))
+    })
+  }
+}

data/app/javascript/spotlight/admin/sir-trevor/locales.js

@@ -1,111 +1,123 @@
 SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
   autocompleteable: {
-    placeholder: "Enter a title..."
+    placeholder: "Enter a title...",
   },
 
   browse: {
     title: "Browse Categories",
-    description: "This widget highlights browse categories. Each highlighted category links to the corresponding browse category results page.",
-    item_counts: "Include item counts?"
+    description:
+      "This widget highlights browse categories. Each highlighted category links to the corresponding browse category results page.",
+    item_counts: "Include item counts?",
   },
 
   browse_group_categories: {
     autocomplete: "Enter a browse group title...",
     title: "Browse Group Categories",
-    description: "This widget displays all browse categories associated with a selected browse group as a horizontally-scrolling row. Each selected browse group is displayed as a separate row. Each displayed category in a group links to the corresponding browse category results page.",
-    item_counts: "Include category item counts?"
+    description:
+      "This widget displays all browse categories associated with a selected browse group as a horizontally-scrolling row. Each selected browse group is displayed as a separate row. Each displayed category in a group links to the corresponding browse category results page.",
+    item_counts: "Include category item counts?",
   },
 
   link_to_search: {
     title: "Saved Searches",
-    description: "This widget highlights saved searches. Each highlighted saved search links to the search results page generated by the saved search parameters. Any saved search listed on the Curation > Browse categories page, whether published or not, can be highlighted as a saved search.",
-    item_counts: "Include item counts?"
+    description:
+      "This widget highlights saved searches. Each highlighted saved search links to the search results page generated by the saved search parameters. Any saved search listed on the Curation > Browse categories page, whether published or not, can be highlighted as a saved search.",
+    item_counts: "Include item counts?",
   },
 
   iframe: {
-    title:  "IFrame",
+    title: "IFrame",
     description: "This widget embeds iframe-based embed code into pages",
-    placeholder: "Enter embed code here. It should begin with e.g. '<iframe'"
+    placeholder: "Enter embed code here. It should begin with e.g. '<iframe'",
   },
 
   oembed: {
     title: "Embed + Text",
-    description: "This widget embeds an oEmbed-supported web resource and a text block to the left or right of it. Examples of oEmbed-supported resources include those from YouTube, Twitter, Flickr, and SlideShare.",
+    description:
+      "This widget embeds an oEmbed-supported web resource and a text block to the left or right of it. Examples of oEmbed-supported resources include those from YouTube, Twitter, Flickr, and SlideShare.",
     url: "URL",
   },
 
   uploaded_items: {
     title: "Uploaded Item Row",
-    description: "This widget displays uploaded items in a horizontal row. Optionally, you can add a heading and/or text to be displayed adjacent to the items. The item caption and link URL fields are also optional.",
-    caption: 'Caption',
-    link: 'Link URL'
+    description:
+      "This widget displays uploaded items in a horizontal row. Optionally, you can add a heading and/or text to be displayed adjacent to the items. The item caption and link URL fields are also optional.",
+    caption: "Caption",
+    link: "Link URL",
   },
 
   featured_pages: {
-    title:  "Pages",
-    description: "This widget highlights pages from this exhibit. Each highlighted item links to the corresponding page."
+    title: "Pages",
+    description:
+      "This widget highlights pages from this exhibit. Each highlighted item links to the corresponding page.",
   },
 
   resources: {
     panel: {
       drag: "Drag",
       display: "Display?",
-      remove: "Remove"
+      remove: "Remove",
     },
     alt_text: {
       decorative: "Decorative",
       alternative_text: "Alternative text",
-      placeholder: "Enter alt text for this item..."
-    }
+      placeholder: "Enter alt text for this item...",
+    },
   },
 
   rule: {
-    title: "Horizontal Rule"
+    title: "Horizontal Rule",
   },
 
   search_results: {
     title: "Search Results",
-    description: "This widget displays a set of search results on a page. Specify a search result set by selecting an existing browse category. You can also select the view types that are available to the user when viewing the result set."
+    description:
+      "This widget displays a set of search results on a page. Specify a search result set by selecting an existing browse category. You can also select the view types that are available to the user when viewing the result set.",
   },
 
   solr_documents: {
     title: "Item Row",
-    description: "This widget displays exhibit items in a horizontal row. Optionally, you can add a heading and/or text to be displayed adjacent to the items.",
+    description:
+      "This widget displays exhibit items in a horizontal row. Optionally, you can add a heading and/or text to be displayed adjacent to the items.",
     caption: {
       placeholder: "Select...",
       primary: "Primary caption",
-      secondary: "Secondary caption"
+      secondary: "Secondary caption",
     },
     zpr: {
-      title: 'Offer "View larger" option'
-    }
+      title: 'Offer "View larger" option',
+    },
   },
 
   solr_documents_carousel: {
     title: "Item Carousel",
-    description: "This widget displays exhibit items in a carousel. You can configure the item captions, how the images are cycled, and the size of the carousel.",
+    description:
+      "This widget displays exhibit items in a carousel. You can configure the item captions, how the images are cycled, and the size of the carousel.",
     interval: {
       title: "Automatically cycle images",
-      placeholder: "Select..."
+      placeholder: "Select...",
     },
     height: {
-      title: "Maximum carousel height"
-    }
+      title: "Maximum carousel height",
+    },
   },
 
   solr_documents_embed: {
     title: "Item Embed",
-    description: "This widget embeds an exhibit item in a viewer on a page. Optionally, you can add a heading to be displayed above the viewer and/or text to be displayed adjacent to the viewer.",
+    description:
+      "This widget embeds an exhibit item in a viewer on a page. Optionally, you can add a heading to be displayed above the viewer and/or text to be displayed adjacent to the viewer.",
   },
 
   solr_documents_features: {
     title: "Item Slideshow",
-    description: "This widget displays exhibit items in a static slideshow. The user will move between items in the slideshow using the field you select as the primary caption."
+    description:
+      "This widget displays exhibit items in a static slideshow. The user will move between items in the slideshow using the field you select as the primary caption.",
   },
 
   solr_documents_grid: {
     title: "Item Grid",
-    description: "This widget displays exhibit items in a multi-row grid. Optionally, you can add a heading and/or text to be displayed adjacent to the items."
+    description:
+      "This widget displays exhibit items in a multi-row grid. Optionally, you can add a heading and/or text to be displayed adjacent to the items.",
   },
 
   textable: {
@@ -114,18 +126,19 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
     align: {
       title: "Display text on:",
       left: "Left",
-      right: "Right"
-    }
+      right: "Right",
+    },
   },
 
   group: {
     undefined: "Standard widgets",
-    items: "Exhibit item widgets"
+    items: "Exhibit item widgets",
   },
 
   alt_text_guidelines: {
-    intro: 'For each item, please enter alternative text or appropriately check the decorative box. ',
-    link_label: 'Guidelines for writing alt text.',
-    link_url: 'https://www.w3.org/WAI/tutorials/images/' 
-  }
-});
+    intro:
+      "For each item, please enter alternative text or appropriately check the decorative box. ",
+    link_label: "Guidelines for writing alt text.",
+    link_url: "https://www.w3.org/WAI/tutorials/images/",
+  },
+})

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

@@ -1,68 +1,86 @@
-import Sortable from 'sortablejs';
+import Sortable from "sortablejs"
 
-const Module = (function() {
-  const nestableContainerSelector = '[data-behavior="nestable"]';
+const Module = (function () {
+  const nestableContainerSelector = '[data-behavior="nestable"]'
   const sortableOptions = {
     animation: 150,
-    draggable: '.dd-item',
-    handle: '.dd-handle',
+    draggable: ".dd-item",
+    handle: ".dd-handle",
     fallbackOnBody: true,
     swapThreshold: 0.65,
-    emptyInsertThreshold: 15,
+    // 0 turns off SortableJS's "drop near an empty list" check. The .dd-nesting drop
+    // zones in _nestable.scss decide nesting, so a vertical drag past an item's edge
+    // does not nest it by accident.
+    emptyInsertThreshold: 0,
     onStart: onStartHandler,
     onEnd: onEndHandler,
     onMove: onMoveHandler,
   }
-  const draggableClass = 'dd-item';
-  const nestedSortableClass = 'dd-list';
-  const nestedSortableSelector = '.dd-list';
-  const nestedSortableNodeName = 'ol';
-  const findNode = (id, container) => container.querySelector(`[data-id="${id}"]`);
-  const setWeight = (node, weight) => weightField(node).value = weight;
-  const setParent = (node, parentId) => parentPageField(node).value = parentId;
-  const weightField = node => findProperty(node, "weight");
-  const parentPageField = node => findProperty(node, "parent_page");
-  const findProperty = (node, property) => node.querySelector(`input[data-property="${property}"]`);
-  let nestedId = 0;
+  const draggableClass = "dd-item"
+  const nestedSortableClass = "dd-list"
+  const nestedSortableSelector = ".dd-list"
+  const nestedSortableNodeName = "ol"
+  const nestingClass = "dd-nesting"
+  const findNode = (id, container) =>
+    container.querySelector(`[data-id="${id}"]`)
+  const setWeight = (node, weight) => (weightField(node).value = weight)
+  const setParent = (node, parentId) => (parentPageField(node).value = parentId)
+  const weightField = (node) => findProperty(node, "weight")
+  const parentPageField = (node) => findProperty(node, "parent_page")
+  const findProperty = (node, property) =>
+    node.querySelector(`input[data-property="${property}"]`)
+  let nestedId = 0
 
   return {
-    init: function(nestedContainers) {
+    init: function (nestedContainers) {
       if (nestedContainers === undefined) {
-        nestedContainers = document.querySelectorAll(nestableContainerSelector);
+        nestedContainers = document.querySelectorAll(nestableContainerSelector)
       }
 
       // nestedContainers could be a jQuery selector result, normalize to an array.
-      const containersToInit = Array.from(nestedContainers);
+      const containersToInit = Array.from(nestedContainers)
       containersToInit.forEach((container) => {
         // Sir Trevor listens for drag and drop events and will error on Sortable events.
         // Don't let them bubble past the Sortable wrapper.
-        container.addEventListener('drop', stopPropagationHandler);
-      
+        container.addEventListener("drop", stopPropagationHandler)
+
         const nestedSortables = [
           ...(container.matches(nestedSortableSelector) ? [container] : []),
-          ...Array.from(container.querySelectorAll(nestedSortableSelector))
-        ];
-        const group = `nested-${nestedId++}`;
-        
-        nestedSortables.forEach(sortable => {
-          new Sortable(sortable, { ...sortableOptions, group: group });
-        });
-      });
-    }
-  };
+          ...Array.from(container.querySelectorAll(nestedSortableSelector)),
+        ]
+        const group = `nested-${nestedId++}`
+
+        nestedSortables.forEach((sortable) => {
+          new Sortable(sortable, { ...sortableOptions, group: group })
+        })
+      })
+    },
+  }
 
   function stopPropagationHandler(evt) {
-    evt.stopPropagation();
+    evt.stopPropagation()
   }
 
   function onStartHandler(evt) {
-    makeEmptyChildSortablesForEligibleParents(getNestableContainer(evt.item), getMaxNestingLevelSetting(evt.item));
+    const nestableContainer = getNestableContainer(evt.item)
+    makeEmptyChildSortablesForEligibleParents(
+      nestableContainer,
+      getMaxNestingLevelSetting(evt.item),
+    )
+    // Size the drop zone below each child list to match the dragged item, so that
+    // a drag straight to the right lands in the list of the item above.
+    nestableContainer.style.setProperty(
+      "--dd-nesting-zone-height",
+      `${evt.item.querySelector(sortableOptions.handle).offsetHeight}px`,
+    )
+    nestableContainer.classList.add(nestingClass)
   }
 
   function onEndHandler(evt) {
-    const nestableContainer = getNestableContainer(evt.item);
-    removeEmptySortables(nestableContainer);
-    updateWeightsAndRelationships(nestableContainer);
+    const nestableContainer = getNestableContainer(evt.item)
+    nestableContainer.classList.remove(nestingClass)
+    removeEmptySortables(nestableContainer)
+    updateWeightsAndRelationships(nestableContainer)
   }
 
   function onMoveHandler(evt) {
@@ -70,122 +88,139 @@ const Module = (function() {
     // E.g., data-max-depth=2 allows for one level of nesting.
     // evt.dragged is a draggable in a Sortable (e.g., a dd-item)
     // evt.to is the Sortable to insert into (e.g., a dd-list)
-    const maxAllowedDepth = getMaxNestingLevelSetting(evt.to) - 1;
-    const newDepth = getSortableDepth(evt.to) + getHeight(evt.dragged);
+    const maxAllowedDepth = getMaxNestingLevelSetting(evt.to) - 1
+    const newDepth = getSortableDepth(evt.to) + getHeight(evt.dragged)
 
     // Be careful here. Returning true is different than returning nothing in SortableJS.
     if (newDepth > maxAllowedDepth) {
-      return false;
+      return false
     }
   }
 
   // Get the depth of the sortable element from the root container
   function getSortableDepth(sortableElement) {
-    const originatingGroup = Sortable.get(sortableElement).options.group.name;
-    let depth = 0;
-    let parentSortableElement = sortableElement;
-
-    while ((parentSortableElement = parentSortableElement.parentElement.closest(nestedSortableSelector))) {
-      const parentSortable = Sortable.get(parentSortableElement);
+    const originatingGroup = Sortable.get(sortableElement).options.group.name
+    let depth = 0
+    let parentSortableElement = sortableElement
+
+    while (
+      (parentSortableElement = parentSortableElement.parentElement.closest(
+        nestedSortableSelector,
+      ))
+    ) {
+      const parentSortable = Sortable.get(parentSortableElement)
       if (parentSortable?.options.group.name === originatingGroup) {
-        depth++;
+        depth++
       }
     }
 
-    return depth;
+    return depth
   }
 
   // Find the max child depth in the tree, starting from the draggableElement
   function findMaxDepth(draggableElement) {
-    const childSortableElement = draggableElement.querySelector(nestedSortableSelector);
+    const childSortableElement = draggableElement.querySelector(
+      nestedSortableSelector,
+    )
     if (!childSortableElement) {
-      return 1;
+      return 1
     }
 
-    const children = childSortableElement.querySelectorAll(`.${draggableClass}`);
-    const childDepths = Array.from(children).map(findMaxDepth);
-    return 1 + Math.max(0, ...childDepths);
+    const children = childSortableElement.querySelectorAll(`.${draggableClass}`)
+    const childDepths = Array.from(children).map(findMaxDepth)
+    return 1 + Math.max(0, ...childDepths)
   }
 
   function getHeight(draggableElement) {
-    return findMaxDepth(draggableElement) - 1;
+    return findMaxDepth(draggableElement) - 1
   }
 
   function getNestableContainer(element) {
-    return element.closest(nestableContainerSelector);
+    return element.closest(nestableContainerSelector)
   }
 
   function getMaxNestingLevelSetting(element) {
-    return getNestableContainer(element).getAttribute('data-max-depth') || 1;
+    return getNestableContainer(element).getAttribute("data-max-depth") || 1
   }
 
   // Create empty child sortables for all potential parents as appropriate for the given nesting level
   function makeEmptyChildSortablesForEligibleParents(container, nestingLevel) {
     if (nestingLevel <= 1) {
-      return;
+      return
     }
 
-    const sortableElement = container.querySelector(nestedSortableSelector);
-    const sortable = Sortable.get(sortableElement);
+    const sortableElement = container.querySelector(nestedSortableSelector)
+    const sortable = Sortable.get(sortableElement)
     if (!sortable) {
-      return;
+      return
     }
 
-    const group = sortable.options.group.name;
-    const draggableElements = Array.from(sortableElement.children)
-      .filter(child => child.classList.contains(draggableClass));
+    const group = sortable.options.group.name
+    const draggableElements = Array.from(sortableElement.children).filter(
+      (child) => child.classList.contains(draggableClass),
+    )
 
-    draggableElements.forEach(draggableElement => {
+    draggableElements.forEach((draggableElement) => {
       if (!draggableElement.querySelector(nestedSortableSelector)) {
-        const emptySortableElement = document.createElement(nestedSortableNodeName);
-        emptySortableElement.className = nestedSortableClass;
-        draggableElement.appendChild(emptySortableElement);
-        new Sortable(emptySortableElement, { ...sortableOptions, group: group });
+        const emptySortableElement = document.createElement(
+          nestedSortableNodeName,
+        )
+        emptySortableElement.className = nestedSortableClass
+        draggableElement.appendChild(emptySortableElement)
+        new Sortable(emptySortableElement, {
+          ...sortableOptions,
+          group: group,
+        })
       }
-      makeEmptyChildSortablesForEligibleParents(draggableElement, nestingLevel - 1);
-    });
+      makeEmptyChildSortablesForEligibleParents(
+        draggableElement,
+        nestingLevel - 1,
+      )
+    })
   }
 
   // Remove any empty sortables within the container. They could be empty lists, which are invalid for accessibility.
   function removeEmptySortables(container) {
-    const sortableElements = container.querySelectorAll(nestedSortableSelector);
-    sortableElements.forEach(sortableElement => {
-      if (sortableElement.innerHTML.trim() === '') {
-        const sortable = Sortable.get(sortableElement);
+    const sortableElements = container.querySelectorAll(nestedSortableSelector)
+    sortableElements.forEach((sortableElement) => {
+      if (sortableElement.innerHTML.trim() === "") {
+        const sortable = Sortable.get(sortableElement)
         if (sortable) {
-          sortable.destroy();
-          sortableElement.remove();
+          sortable.destroy()
+          sortableElement.remove()
         }
       }
-    });
+    })
   }
 
   // Traverse all sortables within a container and update the weight and parent_page inputs
   function updateWeightsAndRelationships(container) {
-    const sortableElement = container.matches(nestedSortableSelector) ? container : container.querySelector(nestedSortableSelector);
-    const nestingLevelSetting = getMaxNestingLevelSetting(sortableElement);
-    const sortable = Sortable.get(sortableElement);
-    const stack = [{nodes: sortable.toArray(), parentId: ''}];
-    let weight = 0;
+    const sortableElement = container.matches(nestedSortableSelector)
+      ? container
+      : container.querySelector(nestedSortableSelector)
+    const nestingLevelSetting = getMaxNestingLevelSetting(sortableElement)
+    const sortable = Sortable.get(sortableElement)
+    const stack = [{ nodes: sortable.toArray(), parentId: "" }]
+    let weight = 0
 
     while (stack.length > 0) {
-      const {nodes, parentId} = stack.pop();
+      const { nodes, parentId } = stack.pop()
 
       nodes.forEach((nodeId) => {
-        const node = findNode(nodeId, container);
-        setWeight(node, weight++);
+        const node = findNode(nodeId, container)
+        setWeight(node, weight++)
 
         if (nestingLevelSetting > 1) {
-          setParent(node, parentId);
-          const children = node.querySelector(nestedSortableSelector);
+          setParent(node, parentId)
+          const children = node.querySelector(nestedSortableSelector)
           if (children) {
-            const sortableElement = Sortable.get(children);
-            stack.push({nodes: sortableElement.toArray(), parentId: nodeId});
+            const sortableElement = Sortable.get(children)
+            stack.push({ nodes: sortableElement.toArray(), parentId: nodeId })
           }
         }
-      });
+      })
     }
   }
-})();
+})()
 
 export default Module

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

@@ -1,8 +1,24 @@
+import * as bootstrap from "bootstrap"
+
+// Bootstrap's ESM build exports Tab by name; CDN-converted UMD builds (e.g. ga.jspm.io) only have a default export
+const Tab = bootstrap.Tab ?? bootstrap.default?.Tab
+
 export default class {
   connect() {
-    if ($('[role=tabpanel]').length > 0 && window.location.hash) {
-      var tabpanel = $(window.location.hash).closest('[role=tabpanel]');
-      $('a[role=tab][href="#'+tabpanel.attr('id')+'"]').tab('show');
+    if (document.querySelector("[role=tabpanel]") && window.location.hash) {
+      const targetId = window.location.hash.substring(1)
+      const targetElement = document.getElementById(targetId)
+      if (!targetElement) return
+
+      const tabpanel = targetElement.closest("[role=tabpanel]")
+      if (!tabpanel) return
+
+      const tabElement = document.querySelector(
+        `a[role=tab][href="#${tabpanel.id}"]`,
+      )
+      if (!tabElement) return
+
+      Tab.getOrCreateInstance(tabElement).show()
     }
   }
 }

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

@@ -4,13 +4,19 @@
 // present (indicated by data attributes) in each tab's content
 export default class {
   connect() {
-    $('[data-behavior="translation-progress"]').each(function(){
-      var currentTab = $(this);
-      var tabName = $(this).attr('aria-controls');
-      var translationFields = $('#' + tabName).find('[data-translation-progress-item="true"]');
-      var completedTranslations = $('#' + tabName).find('[data-translation-present="true"]');
+    $('[data-behavior="translation-progress"]').each(function () {
+      var currentTab = $(this)
+      var tabName = $(this).attr("aria-controls")
+      var translationFields = $("#" + tabName).find(
+        '[data-translation-progress-item="true"]',
+      )
+      var completedTranslations = $("#" + tabName).find(
+        '[data-translation-present="true"]',
+      )
 
-      currentTab.find('span').text(completedTranslations.length + '/' + translationFields.length);
+      currentTab
+        .find("span")
+        .text(completedTranslations.length + "/" + translationFields.length)
     })
   }
-}
+}