spotlight-frontend 4.2.0 → 4.3.0

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

@@ -5141,6 +5141,7 @@
   };
 
   // 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(){
@@ -5607,6 +5608,8 @@
   }
 
   // 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"]')) {
@@ -5933,10 +5936,24 @@
       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") },
 
@@ -5946,6 +5963,8 @@
       show_secondary_field_key: "show-secondary-caption",
 
       display_checkbox: "display-checkbox",
+      decorative_checkbox: "decorative-checkbox",
+      alt_text_textarea: "alt-text-textarea",
 
       globalIndex: 0,
 
@@ -5953,6 +5972,13 @@
         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;
@@ -5983,6 +6009,7 @@
                     <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>
@@ -6019,6 +6046,7 @@
 
       createItemPanel: function(data) {
         var panel = this._itemPanel(data);
+        this.attachAltTextHandlers(panel);
         $(panel).appendTo($('.panels > ol', this.inner));
         $('[data-behavior="nestable"]', this.inner).trigger('change');
       },
@@ -6051,11 +6079,67 @@
         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));
 
@@ -6245,7 +6329,7 @@
       },
 
       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")}
@@ -6680,7 +6764,7 @@
 
     return SirTrevor.Blocks.SolrDocumentsBase.extend({
       type: "solr_documents_embed",
-
+      show_alt_text: false,
       icon_name: "item_embed",
 
       item_options: function() { return "" },
@@ -6844,6 +6928,7 @@
                     <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>
@@ -6871,6 +6956,8 @@
         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">
@@ -6890,6 +6977,24 @@
       </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'
     });
   })();
@@ -7100,6 +7205,11 @@
         drag: "Drag",
         display: "Display?",
         remove: "Remove"
+      },
+      alt_text: {
+        decorative: "Decorative",
+        alternative_text: "Alternative text",
+        placeholder: "Enter alt text for this item..."
       }
     },
 
@@ -7165,6 +7275,12 @@
     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/' 
     }
   });