spotlight-frontend 4.2.0 → 4.3.0

package/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

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

@@ -5135,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(){
@@ -5601,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"]')) {
@@ -5927,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") },
 
@@ -5940,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,
 
@@ -5947,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;
@@ -5977,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>
@@ -6013,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');
     },
@@ -6045,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));
 
@@ -6239,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")}
@@ -6674,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 "" },
@@ -6838,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>
@@ -6865,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">
@@ -6884,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'
   });
 })();
@@ -7094,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..."
     }
   },
 
@@ -7159,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/' 
   }
 });