blacklight-spotlight 5.3.0 → 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/components/spotlight/analytics/aggregation_component.html.erb

@@ -11,4 +11,4 @@
     <% end %>
     </tr>
   </tfoot>
-</table>
+</table>

data/app/components/spotlight/document_admin_table_component.html.erb

@@ -8,7 +8,7 @@
   itemscope: true,
   itemtype: @document.itemtype,
   class: classes.flatten.join(' ') do %>
-  <% # header bar for doc items in index view -%>
+  <%# header bar for doc items in index view -%>
     <td class="spotlight-admin-thumbnail">
       <%= thumbnail %>
     </td>
@@ -31,6 +31,6 @@
     </td>
 
     <td class="checkbox-toggle">
-      <%= render partial: 'document_visibility_control', locals: { document: presenter.document} %>
+      <%= helpers.render partial: 'document_visibility_control', locals: { document: presenter.document} %>
     </td>
 <% end %>

data/app/components/spotlight/edit_view_links_component.html.erb

@@ -10,4 +10,4 @@
   <% if delete_link %>
     &middot; <%= helpers.exhibit_delete_link page %>
   <% end %>
-</div>
+</div>

data/app/components/spotlight/header_component.html.erb

@@ -1 +1 @@
-<%= top_bar %>
+<%= top_bar %>

data/app/components/spotlight/tag_list_form_component.html.erb

@@ -11,4 +11,4 @@
   </div>
 <% else %>
   <%= form.text_field :tag_list, value: form.object.tag_list.to_s %>
-<% end %>
+<% end %>

data/app/components/spotlight/tag_selector_component.html.erb

@@ -5,8 +5,8 @@
     <%= form.text_field field_name, value: selected_tags_value, class: 'tag-selector-input', placeholder: t('.no_js_placeholder'), data: { tag_selector_target: "tagsField" } %>
   <% end %>
   <input type="hidden" value="<%= selected_tags_value %>" data-tag-selector-target="initialTags">
-    
-  <div class='mb-3'>
+
+  <div class="mb-3">
     <div class="tag-selection-wrapper" data-tag-selector-target="tagControlWrapper">
       <div class="dropdown w-100 mb-3 d-inline-block" data-action="click@window->tag-selector#clickOutside">
         <div data-tag-selector-target="tagSearchDropdown">

data/app/components/spotlight/translations/subheading_component.html.erb

@@ -1,3 +1,3 @@
-<h2 class='translation-subheading mt-4'>
+<h2 class="translation-subheading mt-4">
   <%= text %>
 </h2>

data/app/controllers/spotlight/resources_controller.rb

@@ -55,7 +55,7 @@ module Spotlight
 
     def resource_params
       params.require(:resource).tap { |x| x['type'] ||= resource_class.name }
-                               .permit(:url, :type, *resource_class.stored_attributes[:data], data: params[:resource][:data].try(:keys))
+            .permit(:url, :type, *resource_class.stored_attributes[:data], data: params[:resource][:data].try(:keys))
     end
   end
 end

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

@@ -1,24 +1,31 @@
 export default class {
   connect() {
-    $("[data-action='add-another']").on("click", function(event) {
-      event.preventDefault();
+    $("[data-action='add-another']").on("click", function (event) {
+      event.preventDefault()
 
-      var templateId = $(this).data('template-id');
+      var templateId = $(this).data("template-id")
 
-      var template = document.querySelector('#' + templateId);
-      var clone = document.importNode(template.content, true);
+      var template = document.querySelector("#" + templateId)
+      var clone = document.importNode(template.content, true)
 
-      var count = $(this).closest('.form-group').find('[name="' + $(clone).find('[name]').attr('name') + '"]').length + 1;
-      $(clone).find('[id]').each(function(index, el) {
-        $(el).attr('id', $(el).attr('id') + '_' + String(count));
-      });
+      var count =
+        $(this)
+          .closest(".form-group")
+          .find('[name="' + $(clone).find("[name]").attr("name") + '"]')
+          .length + 1
+      $(clone)
+        .find("[id]")
+        .each(function (index, el) {
+          $(el).attr("id", $(el).attr("id") + "_" + String(count))
+        })
 
-      $(clone).find('[for]').each(function(index, el) {
-        $(el).attr('for', $(el).attr('for') + '_' + String(count));
-      });
+      $(clone)
+        .find("[for]")
+        .each(function (index, el) {
+          $(el).attr("for", $(el).attr("for") + "_" + String(count))
+        })
 
-
-      $(clone).insertBefore(this);
-    });
+      $(clone).insertBefore(this)
+    })
   }
 }

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

@@ -1,38 +1,40 @@
-import Iiif from 'spotlight/admin/iiif'
+import Iiif from "spotlight/admin/iiif"
 
 export function addImageSelector(input, panel, manifestUrl, initialize) {
   if (!manifestUrl) {
-    showNonIiifAlert(input);
-    return;
+    showNonIiifAlert(input)
+    return
   }
-  var cropper = input.data('iiifCropper');
-  $.ajax(manifestUrl).done(
-    function(manifest) {
-      var iiifManifest = new Iiif(manifestUrl, manifest);
+  var cropper = input.data("iiifCropper")
+  $.ajax(manifestUrl).done(function (manifest) {
+    var iiifManifest = new Iiif(manifestUrl, manifest)
 
-      var thumbs = iiifManifest.imagesArray();
+    var thumbs = iiifManifest.imagesArray()
 
-      hideNonIiifAlert(input);
+    hideNonIiifAlert(input)
 
-      if (initialize) {
-        cropper.setIiifFields(thumbs[0]);
-        panel.multiImageSelector(); // Clears out existing selector
-      }
+    if (initialize) {
+      cropper.setIiifFields(thumbs[0])
+      panel.multiImageSelector() // Clears out existing selector
+    }
 
-      if(thumbs.length > 1) {
-        panel.show();
-        panel.multiImageSelector(thumbs, function(selectorImage) {
-          cropper.setIiifFields(selectorImage);
-        }, cropper.iiifImageField.val());
-      }
+    if (thumbs.length > 1) {
+      panel.show()
+      panel.multiImageSelector(
+        thumbs,
+        function (selectorImage) {
+          cropper.setIiifFields(selectorImage)
+        },
+        cropper.iiifImageField.val(),
+      )
     }
-  );
+  })
 }
 
-function showNonIiifAlert(input){
-  input.parent().prev('[data-behavior="non-iiif-alert"]').show();
+function showNonIiifAlert(input) {
+  input.parent().prev('[data-behavior="non-iiif-alert"]').show()
 }
 
-function hideNonIiifAlert(input){
-  input.parent().prev('[data-behavior="non-iiif-alert"]').hide();
-}
+function hideNonIiifAlert(input) {
+  input.parent().prev('[data-behavior="non-iiif-alert"]').hide()
+}

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

@@ -1,77 +1,81 @@
 export default class {
   connect() {
-    $("[data-expanded-add-button]").each((_i, el) => this.addExpandBehaviorToButton($(el)))
+    $("[data-expanded-add-button]").each((_i, el) =>
+      this.addExpandBehaviorToButton($(el)),
+    )
   }
 
-  addExpandBehaviorToButton(button){
+  addExpandBehaviorToButton(button) {
     var settings = {
-      speed: (button.data('speed') || 450),
-      animate_width: (button.data('animate_width') || 425)
+      speed: button.data("speed") || 450,
+      animate_width: button.data("animate_width") || 425,
     }
-    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 expanded = false;
+    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 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.on("mouseenter focus", function () {
+      expandButton()
+    })
 
     // Don't allow blank titles
-    save.on('click', function(){
-      if ( inputEmpty() ) {
-        return false;
+    save.on("click", function () {
+      if (inputEmpty()) {
+        return false
       }
-    });
+    })
 
     // Empty input and collapse
     // button on cancel click
-    cancel.on('click', function(e){
-      e.preventDefault();
-      input.val('');
-      collapseButton();
-    });
+    cancel.on("click", function (e) {
+      e.preventDefault()
+      input.val("")
+      collapseButton()
+    })
 
     // Collapse the button on when
     // an empty input loses focus
-    input.on("blur", function(){
-      if ( inputEmpty() ) {
-        collapseButton();
+    input.on("blur", function () {
+      if (inputEmpty()) {
+        collapseButton()
       }
-    });
-    function expandButton(){
-      // If this has not yet been expanded, recalculate original_width to 
+    })
+    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.outerWidth()
       }
-      if(button.outerWidth() <= (original_width + 5)) {
-        expanded = true;
+      if (button.outerWidth() <= original_width + 5) {
+        expanded = true
         button.animate(
-          {width: settings.animate_width + 'px'}, settings.speed, function(){
-            target.show(0, function(){
-              input.focus();
+          { 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");
+              button.width("auto")
               // Explicitly set the width of the button
               // so the close animation works properly
-              button.width(button.width());
-            });
-          }
+              button.width(button.width())
+            })
+          },
         )
       }
     }
-    function collapseButton(){
-      target.hide();
-      button.animate({width: original_width + 'px'}, settings.speed);
+    function collapseButton() {
+      target.hide()
+      button.animate({ width: original_width + "px" }, settings.speed)
     }
-    function inputEmpty(){
-      return $.trim(input.val()) == "";
+    function inputEmpty() {
+      return $.trim(input.val()) == ""
     }
   }
 }

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

@@ -1,62 +1,76 @@
 export default class {
   connect() {
     // Add Select/Deselect all input behavior
-    this.addCheckboxToggleBehavior();
-    this.addEnableToggleBehavior();
+    this.addCheckboxToggleBehavior()
+    this.addEnableToggleBehavior()
   }
-  
-  // Add Select/Deselect all behavior for metadata field names for a given view e.g. Item details. 
+
+  // 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);
+    $("[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(e){
-        var allChecked = allCheckboxesChecked(columnRows);
-        columnRows.each(function(){
-          $("input[type='checkbox']", $(this)).prop('checked', !allChecked);
-        });
-      });
+      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);
-        });
-      }); 
-    });
+      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)
+      return (
+        $("input[type='checkbox']", elements).length ==
+        $("input[type='checkbox']:checked", elements).length
+      )
     }
 
     // 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);
+      if (allCheckboxesChecked(elements)) {
+        checkbox.prop("checked", true)
       } else {
-        checkbox.prop('checked', false);
+        checkbox.prop("checked", false)
       }
     }
   }
-    
+
   addEnableToggleBehavior() {
-    $("[data-behavior='enable-feature']").each(function(){
-      var checkbox = $(this);
-      var target = $($(this).data('target'));
+    $("[data-behavior='enable-feature']").each(function () {
+      var checkbox = $(this)
+      var target = $($(this).data("target"))
 
-      checkbox.on('change', function() {
-        if ($(this).is(':checked')) {
-          target.find('input:checkbox').not("[data-behavior='enable-feature']").prop('checked', true).attr('disabled', false);
+      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);
+          target
+            .find("input:checkbox")
+            .not("[data-behavior='enable-feature']")
+            .prop("checked", false)
+            .attr("disabled", true)
         }
-      });
-    });
+      })
+    })
   }
-}
+}