blacklight-spotlight 5.3.1 → 5.3.2

data/app/assets/stylesheets/spotlight/_multi_up_item_grid.scss

@@ -1,8 +1,4 @@
 .spotlight-flexbox {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
   flex-flow: row wrap;
 
@@ -13,7 +9,7 @@
 
     @media (max-width: breakpoint-max("sm")) {
       min-width: 200px;
-      -webkit-flex: 1 1 200px;
+      flex: 1 1 200px;
     }
 
     .caption {
@@ -23,11 +19,6 @@
     img {
       max-width: 100%;
     }
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     flex: 1;
-    -webkit-flex: 1 1 125px;
   }
 }

data/app/assets/stylesheets/spotlight/_nestable.scss

@@ -26,10 +26,27 @@ tr.dd-item {
   position: relative;
 }
 
+// SortableJS moves an item to the start of a list when the pointer is over the list more than
+// 10px left of its items.
+$dd-nested-list-padding-left: 5px;
+
 .dd-list { display: block; position: relative; margin: 0; padding: 0 0 5px 0; list-style: none; }
-.dd-list .dd-list { margin-left: 15px; padding-left: 15px; padding-bottom: 0; } // Having this mix of padding and margin improves the experience of dragging left to remove an item from a nested list.
+.dd-list .dd-list { margin-left: 25px; padding-left: $dd-nested-list-padding-left; padding-bottom: 0; }
 .dd-collapsed .dd-list { display: none; }
 
+// While a drag is in progress, extend each child list with a drop zone that covers the
+// indented part of the next item. Dragging an item to the right then nests it.
+.dd-nesting .dd-item > .dd-list::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: $dd-nested-list-padding-left; // Offset from the child list's padding box, so the zone starts where its items start
+  right: 0;
+  height: var(--dd-nesting-zone-height);
+  z-index: 1;
+}
+.dd-nesting .sortable-chosen > .dd-list::after { display: none; }
+
 .dd-item,
 .dd-empty,
 .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

data/app/assets/stylesheets/spotlight/_pages.scss

@@ -237,14 +237,14 @@
 
     .box {
       min-width: 150px;
-      -webkit-flex: 1 1 150px;
+      flex: 1 1 150px;
     }
 
     /* two items */
     .box:first-child:nth-last-child(2),
     .box:first-child:nth-last-child(2) ~ .box {
       min-width: 250px;
-      -webkit-flex: 1 1 250px;
+      flex: 1 1 250px;
     }
 
     /* only images, no text */
@@ -260,7 +260,7 @@
         }
 
         @media (max-width: breakpoint-max("md")) {
-          -webkit-flex: 1 1 175px;
+          flex: 1 1 175px;
         }
       }
     }

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

@@ -8,7 +8,10 @@ const Module = (function () {
     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,
@@ -17,6 +20,7 @@ const Module = (function () {
   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)
@@ -58,14 +62,23 @@ const Module = (function () {
   }
 
   function onStartHandler(evt) {
+    const nestableContainer = getNestableContainer(evt.item)
     makeEmptyChildSortablesForEligibleParents(
-      getNestableContainer(evt.item),
+      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)
+    nestableContainer.classList.remove(nestingClass)
     removeEmptySortables(nestableContainer)
     updateWeightsAndRelationships(nestableContainer)
   }

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

@@ -1,4 +1,7 @@
-import bootstrap from "bootstrap"
+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() {
@@ -15,7 +18,7 @@ export default class {
       )
       if (!tabElement) return
 
-      bootstrap.Tab.getOrCreateInstance(tabElement).show()
+      Tab.getOrCreateInstance(tabElement).show()
     }
   }
 }

data/lib/spotlight/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Spotlight
-  VERSION = '5.3.1'
+  VERSION = '5.3.2'
 end

data/spec/support/features/test_features_helpers.rb

@@ -58,6 +58,37 @@ module Spotlight
       expect(page).to have_no_selector('.alert-danger')
     end
 
+    # Capybara's HTML5 drag emulation sends the drag events to a given element. This drags
+    # to a point instead, so the test covers what is under the pointer.
+    def drag_horizontally(handle, by:)
+      # elementFromPoint returns null for a point outside the viewport
+      page.scroll_to(handle, align: :center)
+      page.driver.browser.action.click_and_hold(handle.native).perform
+      error = page.evaluate_async_script(DRAG_HORIZONTALLY_SCRIPT, handle, by)
+      page.driver.browser.action.release.perform
+      raise error if error
+    end
+
+    DRAG_HORIZONTALLY_SCRIPT = <<~JS
+      const [handle, offset, done] = arguments
+      const item = handle.closest('.dd-item')
+      const tick = () => new Promise((resolve) => setTimeout(resolve, 50))
+      const opts = { bubbles: true, cancelable: true, dataTransfer: new DataTransfer() }
+
+      item.dispatchEvent(new DragEvent('dragstart', opts))
+      tick().then(() => {
+        const rect = handle.getBoundingClientRect()
+        const point = { clientX: rect.left + rect.width / 2 + offset, clientY: rect.top + rect.height / 2 }
+        const target = document.elementFromPoint(point.clientX, point.clientY)
+        target.dispatchEvent(new DragEvent('dragover', { ...opts, ...point }))
+        return tick().then(() => {
+          target.dispatchEvent(new DragEvent('drop', { ...opts, ...point }))
+          item.dispatchEvent(new DragEvent('dragend', { ...opts, ...point }))
+          done()
+        })
+      }).catch((error) => done(String(error)))
+    JS
+
     RSpec::Matchers.define :have_breadcrumbs do |*expected|
       match do |actual|
         errors = []

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: blacklight-spotlight
 version: !ruby/object:Gem::Version
-  version: 5.3.1
+  version: 5.3.2
 platform: ruby
 authors:
 - Chris Beer
@@ -10,7 +10,7 @@ authors:
 - Justin Coyne
 bindir: bin
 cert_chain: []
-date: 2026-09-29 00:00:00.000000000 Z
+date: 2026-09-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activejob-status