blacklight-spotlight 4.1.2 → 4.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 264d92ef87c83424b382a6925033397b0b886f66d9ef9e5fefeeff8a0f492a9b
-  data.tar.gz: 00f4a1e42e0d4bacfa15cea790ec24085cdb9e46a2a005f1d47417de0b61cc21
+  metadata.gz: 4b9748a58737da3155547a7ae91de947638a30a54f8b69eb616ececa64d6a90a
+  data.tar.gz: 62915d1d008172d70a7a6374bda9672077b4454bbcb6a621a5055a7f8912ef8d
 SHA512:
-  metadata.gz: 6e7c7c123467a8001c771d28944353fae1bb24d80039ca41c7dc927e1e8a8cfff6ec916467ff5241e88c45647d393d6dc68d05a17065cea95e31fc67c3de3a8e
-  data.tar.gz: 24fbaf64f21ac53e2c0eb5c38663fd9fa3d490b5cab5854ee407237ba6c50092a5b1e72a79828d7775729531a4167006c7b9cfcf59c1d8c2265a8974aa162924
+  metadata.gz: 4a2607a1b105f87dbce17fa9569f9c1126d08d0bd75ef6db193e87bf38c06874cc0976f71bf946987881babd5da4da7dd00494cc77515837309059b20acf3cff
+  data.tar.gz: 474aa21fe721b381cd3aa220f29090f34101906aff760a3d829b9108b1fa03a3b18797b24376050ddd01d85202610fb824a80cdad4948fdcb6d78d3b292f948f

data/README.md

@@ -78,9 +78,9 @@ See more detailed instructions for development environment setup at ["Contributi
 ## With Docker
 
 ```sh
-# because of how docker-compose handles named images, running `docker-compose up --build` will error when the Rails images have not been built locally
-docker-compose build
-docker-compose up
+# because of how docker compose handles named images, running `docker compose up --build` will error when the Rails images have not been built locally
+docker compose build
+docker compose up
 ```
 
 ## Tests

data/app/assets/javascripts/spotlight/spotlight.esm.js

@@ -4050,29 +4050,6 @@ class AddNewButton {
   }
 }
 
-class Appearance {
-  connect(){
-    $("[data-behavior='restore-default']").each(function(){
-      var hidden = $("[data-default-value]", $(this));
-      var value = $($("[data-in-place-edit-target]", $(this)).data('in-place-edit-target'), $(this));
-      var button = $("[data-restore-default]", $(this));
-      hidden.on('blur', function(){
-        if( $(this).val() == $(this).data('default-value') ) {
-          button.addClass('d-none');
-        } else {
-          button.removeClass('d-none');
-        }
-      });
-      button.on('click', function(e){
-        e.preventDefault();
-        hidden.val(hidden.data('default-value'));
-        value.text(hidden.data('default-value'));
-        button.hide();
-      });
-    });
-  }
-}
-
 class BlacklightConfiguration {
   connect() {
     // Add Select/Deselect all button behavior
@@ -4629,6 +4606,33 @@ class EditInPlace {
         return false;
       });
     });
+
+    $("[data-behavior='restore-default']").each(function(){
+      var hidden = $("[data-default-value]", $(this));
+      var value = $($("[data-in-place-edit-target]", $(this)).data('in-place-edit-target'), $(this));
+      var button = $("[data-restore-default]", $(this));
+
+      hidden.on('keypress', function(e) {
+        if(e.which == 13) {
+          hidden.trigger('blur');
+          return false;
+        }
+      });
+
+      hidden.on('blur', function(){
+        if( $(this).val() == $(this).data('default-value') ) {
+          button.addClass('d-none');
+        } else {
+          button.removeClass('d-none');
+        }
+      });
+      button.on('click', function(e){
+        e.preventDefault();
+        hidden.val(hidden.data('default-value'));
+        value.text(hidden.data('default-value'));
+        button.hide();
+      });
+    });
   }
 }
 
@@ -5131,6 +5135,7 @@ jQuery.fn.scrollStop = function(callback) {
 };
 
 // Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
 
 class Pages {
   connect(){
@@ -5597,6 +5602,8 @@ class CheckboxSubmit {
 }
 
 // Visibility toggle for items in an exhibit, based on Blacklight's bookmark toggle
+// See: https://github.com/projectblacklight/blacklight/blob/main/app/javascript/blacklight/bookmark_toggle.js
+
 
 const VisibilityToggle = (e) => {
   if (e.target.matches('[data-checkboxsubmit-target="checkbox"]')) {
@@ -5923,10 +5930,24 @@ Spotlight$1.Block.Resources = (function(){
     formable: true,
     autocompleteable: true,
     show_heading: true,
+    show_alt_text: true,
 
     title: function() { return i18n.t("blocks:" + this.type + ":title"); },
     description: function() { return i18n.t("blocks:" + this.type + ":description"); },
-
+    alt_text_guidelines: function() { 
+      if (this.show_alt_text) {
+        return i18n.t("blocks:alt_text_guidelines:intro"); 
+      }
+      return "";
+    },
+    alt_text_guidelines_link: function() {
+      if (this.show_alt_text) {
+        var link_url = i18n.t("blocks:alt_text_guidelines:link_url");
+        var link_label = i18n.t("blocks:alt_text_guidelines:link_label");
+        return '<a target="_blank" href="' + link_url + '">' +  link_label + '</a>'; 
+      }
+      return "";
+    },
     icon_name: "resources",
     blockGroup: function() { return i18n.t("blocks:group:items") },
 
@@ -5936,6 +5957,8 @@ Spotlight$1.Block.Resources = (function(){
     show_secondary_field_key: "show-secondary-caption",
 
     display_checkbox: "display-checkbox",
+    decorative_checkbox: "decorative-checkbox",
+    alt_text_textarea: "alt-text-textarea",
 
     globalIndex: 0,
 
@@ -5943,6 +5966,13 @@ Spotlight$1.Block.Resources = (function(){
       return [];
     },
 
+    _altTextFieldsHTML: function(index, data) {
+      if (this.show_alt_text) {
+        return this.altTextHTML(index, data);
+      }
+      return "";
+    },
+
     _itemPanel: function(data) {
       var index = "item_" + this.globalIndex++;
       var checked;
@@ -5973,6 +6003,7 @@ Spotlight$1.Block.Resources = (function(){
                     <div class="main">
                       <div class="title card-title">${data.title}</div>
                       <div>${(data.slug || data.id)}</div>
+                      ${this._altTextFieldsHTML(index, data)}
                     </div>
                     <div class="remove float-right float-end">
                       <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
@@ -6009,6 +6040,7 @@ Spotlight$1.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');
     },
@@ -6041,11 +6073,67 @@ Spotlight$1.Block.Resources = (function(){
       return `<div class="form resources-admin clearfix">
         <div class="widget-header">
           ${this.description()}
+          ${this.alt_text_guidelines()}
+          ${this.alt_text_guidelines_link()}
         </div>
         ${this.content()}
       </div>`
     },
 
+    _altTextData: function(data) {
+      const isDecorative = data.decorative;
+      const altText = isDecorative ? '' : (data.alt_text || '');
+      const altTextBackup = data.alt_text_backup || '';
+      const placeholderAttr = isDecorative ? '' : `placeholder="${i18n.t("blocks:resources:alt_text:placeholder")}"`;
+      const disabledAttr = isDecorative ? 'disabled' : '';
+
+      return { isDecorative, altText, altTextBackup, placeholderAttr, disabledAttr };
+    },
+
+    altTextHTML: function(index, data) {
+      const { isDecorative, altText, altTextBackup, placeholderAttr, disabledAttr } = this._altTextData(data);
+      return `<div class="mt-2 pt-2 d-flex">
+          <div class="me-2 mr-2">
+            <label class="col-form-label pb-0 pt-1" for="${this.formId(this.alt_text_textarea + '_' + data.id)}">${i18n.t("blocks:resources:alt_text:alternative_text")}</label>
+            <div class="form-check mb-1 justify-content-end">
+              <input class="form-check-input" type="checkbox" 
+                id="${this.formId(this.decorative_checkbox + '_' + data.id)}" name="item[${index}][decorative]" ${isDecorative ? 'checked' : ''}>
+              <label class="form-check-label" for="${this.formId(this.decorative_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:alt_text:decorative")}</label>
+            </div>
+          </div>
+          <div class="flex-grow-1 flex-fill d-flex">
+            <input type="hidden" name="item[${index}][alt_text_backup]" value="${altTextBackup}" />
+            <textarea class="form-control w-100" rows="2" ${placeholderAttr}
+              id="${this.formId(this.alt_text_textarea + '_' + data.id)}" name="item[${index}][alt_text]" ${disabledAttr}>${altText}</textarea>
+          </div>
+        </div>`
+    },
+
+    attachAltTextHandlers: function(panel) {
+      if (this.show_alt_text) {
+        const decorativeCheckbox = $('input[name$="[decorative]"]', panel);
+        const altTextInput = $('textarea[name$="[alt_text]"]', panel);
+        const altTextBackupInput = $('input[name$="[alt_text_backup]"]', panel);
+
+        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('placeholder', isDecorative ? '' : i18n.t("blocks:resources:alt_text:placeholder"));
+        });
+
+        altTextInput.on('input', function() {
+          $(this).data('lastValue', $(this).val());
+        });
+      }
+    },
+
     onBlockRender: function() {
       Module.init($('[data-behavior="nestable"]', this.inner));
 
@@ -6235,7 +6323,7 @@ SirTrevor.Blocks.BrowseGroupCategories = (function(){
     },
 
     item_options: function() { return `
-      '<label>
+      <label>
         <input type="hidden" name="display-item-counts" value="false" />
         <input type="checkbox" name="display-item-counts" value="true" checked />
         ${i18n.t("blocks:browse_group_categories:item_counts")}
@@ -6670,7 +6758,7 @@ SirTrevor.Blocks.SolrDocumentsEmbed = (function(){
 
   return SirTrevor.Blocks.SolrDocumentsBase.extend({
     type: "solr_documents_embed",
-
+    show_alt_text: false,
     icon_name: "item_embed",
 
     item_options: function() { return "" },
@@ -6834,6 +6922,7 @@ SirTrevor.Blocks.UploadedItems = (function(){
                     <label for="${this.formId('link_' + dataId)}" class="col-form-label col-md-3">${i18n.t("blocks:uploaded_items:link")}</label>
                     <input type="text" class="form-control col" id="${this.formId('link_' + dataId)}" name="item[${index}][link]" data-field="link"/>
                   </div>
+                  ${this._altTextFieldsHTML(index, data)}
                 </div>
                 <div class="remove float-right float-end">
                   <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
@@ -6861,6 +6950,8 @@ SirTrevor.Blocks.UploadedItems = (function(){
       return `<div class="form oembed-text-admin clearfix">
         <div class="widget-header">
           ${this.description()}
+          ${this.alt_text_guidelines()}
+          ${this.alt_text_guidelines_link()}
         </div>
         <div class="row">
           <div class="form-group mb-3 col-md-8">
@@ -6880,6 +6971,24 @@ SirTrevor.Blocks.UploadedItems = (function(){
       </div>`
     },
 
+    altTextHTML: function(index, data) {
+      const { isDecorative, altText, altTextBackup, placeholderAttr, disabledAttr } = this._altTextData(data);
+      return `
+      <div class="field row mr-3 me-3">
+        <div class="col-lg-3 ps-md-2 pl-md-2">
+          <label class="col-form-label text-nowrap pb-0 pt-1 justify-content-md-start justify-content-lg-end d-flex" for="${this.formId(this.alt_text_textarea + '_' + data.id)}">${i18n.t("blocks:resources:alt_text:alternative_text")}</label>
+          <div class="form-check d-flex justify-content-md-start justify-content-lg-end">
+            <input class="form-check-input" type="checkbox" 
+              id="${this.formId(this.decorative_checkbox + '_' + data.id)}" name="item[${index}][decorative]" ${isDecorative ? 'checked' : ''}>
+            <label class="form-check-label" for="${this.formId(this.decorative_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:alt_text:decorative")}</label>
+          </div>
+        </div>
+        <input type="hidden" name="item[${index}][alt_text_backup]" value="${altTextBackup}" />
+        <textarea class="col-lg-9" rows="2" ${placeholderAttr}
+          id="${this.formId(this.alt_text_textarea + '_' + data.id)}" name="item[${index}][alt_text]" ${disabledAttr}>${altText}</textarea>
+      </div>`
+    },
+
     zpr_key: 'zpr_link'
   });
 })();
@@ -7090,6 +7199,11 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
       drag: "Drag",
       display: "Display?",
       remove: "Remove"
+    },
+    alt_text: {
+      decorative: "Decorative",
+      alternative_text: "Alternative text",
+      placeholder: "Enter alt text for this item..."
     }
   },
 
@@ -7155,6 +7269,12 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
   group: {
     undefined: "Standard 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/' 
   }
 });
 
@@ -7165,7 +7285,6 @@ class AdminIndex {
   connect() {
     new AddAnother().connect();
     new AddNewButton().connect();
-    new Appearance().connect();
     new CopyEmailAddress().connect();
     new Croppable().connect();
     new EditInPlace().connect();