blacklight-spotlight 4.7.1 → 5.0.0.pre.alpha1

data/app/javascript/spotlight/admin/blocks/browse_group_categories_block.js

@@ -8,30 +8,26 @@ SirTrevor.Blocks.BrowseGroupCategories = (function(){
   return Core.Block.Resources.extend({
     type: "browse_group_categories",
     icon_name: "browse",
-    bloodhoundOptions: function() {
-      var that = this;
-      return {
-        prefetch: {
-          url: this.autocomplete_url(),
-          ttl: 0,
-          filter: function(response) {
-            // Let the dom know that the response has been returned
-            $(that.inner).attr('data-browse-groups-fetched', true);
-            return response;
-          }
-        }
-      };
-    },
 
     autocomplete_control: function() {
-      return `<input type="text" class="st-input-string form-control item-input-field" data-twitter-typeahead="true" placeholder="${i18n.t("blocks:browse_group_categories:autocomplete")}"/>`
+      const autocompleteID = this.blockID + '-autocomplete';
+      return `<auto-complete src="${this.autocomplete_url()}" for="${autocompleteID}-popup" fetch-on-empty>
+        <input type="text" name="${autocompleteID}" placeholder="${i18n.t("blocks:browse_group_categories:autocomplete")}" data-default-typeahead>
+        <ul id="${autocompleteID}-popup"></ul>
+        <div id="${autocompleteID}-popup-feedback" class="sr-only visually-hidden"></div>
+      </auto-complete>`
     },
     autocomplete_template: function(obj) {
       return `<div class="autocomplete-item${!obj.published ? ' blacklight-private' : ''}">
-      <span class="autocomplete-title">${obj.title}</span><br/></div>`
+      <span class="autocomplete-title">${this.highlight(obj.title)}</span><br/></div>`
     },
 
-    autocomplete_url: function() { return $(this.inner).closest('form[data-autocomplete-exhibit-browse-groups-path]').data('autocomplete-exhibit-browse-groups-path').replace("%25QUERY", "%QUERY"); },
+    autocomplete_url: function() {
+      return document.getElementById(this.instanceID).closest('form[data-autocomplete-exhibit-browse-groups-path]').dataset.autocompleteExhibitBrowseGroupsPath;
+    },
+    autocomplete_fetch: function(url) {
+      return this.fetchOnceAndFilterLocalResults(url);
+    },
     _itemPanel: function(data) {
       var index = "item_" + this.globalIndex++;
       var checked;
@@ -42,7 +38,7 @@ SirTrevor.Blocks.BrowseGroupCategories = (function(){
       }
       var resource_id = data.slug || data.id;
       var markup = `
-        <li class="field form-inline dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId(index)}">
+        <li class="field dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId(index)}">
           <input type="hidden" name="item[${index}][id]" value="${resource_id}" />
           <input type="hidden" name="item[${index}][title]" value="${data.title}" />
           <input data-property="weight" type="hidden" name="item[${index}][weight]" value="${data.weight}" />

data/app/javascript/spotlight/admin/blocks/pages_block.js

@@ -7,20 +7,16 @@ SirTrevor.Blocks.FeaturedPages = (function(){
 
     icon_name: "pages",
 
-    autocomplete_url: function() { return $(this.inner).closest('form[data-autocomplete-exhibit-pages-path]').data('autocomplete-exhibit-pages-path').replace("%25QUERY", "%QUERY"); },
+    autocomplete_url: function() { return document.getElementById(this.instanceID).closest('form[data-autocomplete-exhibit-pages-path]').dataset.autocompleteExhibitPagesPath; },
+    autocomplete_fetch: function(url) {
+      return this.fetchOnceAndFilterLocalResults(url);
+    },
     autocomplete_template: function(obj) {
+      const description = obj.description ? `<small>&nbsp;&nbsp;${obj.description}</small>` : '';
       const thumbnail = obj.thumbnail_image_url ? `<div class="document-thumbnail"><img class="img-thumbnail" src="${obj.thumbnail_image_url}" /></div>` : ''
       return `<div class="autocomplete-item${!obj.published ? ' blacklight-private' : ''}">${thumbnail}
-      <span class="autocomplete-title">${obj.title}</span><br/><small>&nbsp;&nbsp;${obj.description}</small></div>`
+      <span class="autocomplete-title">${this.highlight(obj.title)}</span><br/>${description}</div>`
     },
-    bloodhoundOptions: function() {
-      return {
-        prefetch: {
-          url: this.autocomplete_url(),
-          ttl: 0
-        }
-      };
-    }
   });
 
 })();

data/app/javascript/spotlight/admin/blocks/resources_block.js

@@ -8,11 +8,12 @@ Core.Block.Resources = (function(){
     formable: true,
     autocompleteable: true,
     show_heading: true,
+    show_image_selection: 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.showAltText()) {
-        return i18n.t("blocks:alt_text_guidelines:intro"); 
+        return i18n.t("blocks:alt_text_guidelines:intro");
       }
       return "";
     },
@@ -20,7 +21,7 @@ Core.Block.Resources = (function(){
       if (this.showAltText()) {
         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 '<a target="_blank" href="' + link_url + '">' +  link_label + '</a>';
       }
       return "";
     },
@@ -59,7 +60,16 @@ Core.Block.Resources = (function(){
           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
           .join('');
     },
-
+    _itemSelectImageLink: function(block_item_id, doc_id, index) {
+      // If image selection is not possible for this block, then do not show
+      // image selection link
+      if (!this.show_image_selection) return ``;
+      var url = $('form[data-exhibit-path]').data('exhibit-path') + '/select_image?';
+      var markup = `
+          <a name="selectimage" href="${url}block_item_id=${block_item_id}&index_id=${index}" data-blacklight-modal="trigger">Select image area</a>
+        `;
+      return markup;
+    },
     _itemPanel: function(data) {
       var index = "item_" + this.globalIndex++;
       var checked;
@@ -69,8 +79,9 @@ Core.Block.Resources = (function(){
         checked = "";
       }
       var resource_id = data.slug || data.id;
+      var block_item_id = this.formId(index);
       var markup = `
-          <li class="field form-inline dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId(index)}">
+          <li class="field dd-item dd3-item" data-cropper="select_image_${block_item_id}" data-resource-id="${resource_id}" data-id="${index}" id="${block_item_id}" data-input-prefix="item[${index}]">
             <input type="hidden" name="item[${index}][id]" value="${resource_id}" />
             <input type="hidden" name="item[${index}][title]" value="${data.title}" />
             ${this._itemPanelIiifFields(index, data)}
@@ -79,13 +90,20 @@ Core.Block.Resources = (function(){
                 <div class="dd-handle dd3-handle">${i18n.t("blocks:resources:panel:drag")}</div>
                 <div class="card-header item-grid">
                   <div class="d-flex">
-                    <div class="checkbox">
-                      <input name="item[${index}][display]" type="hidden" value="false" />
-                      <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
-                      <label class="sr-only visually-hidden" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
-                    </div>
-                    <div class="pic">
-                      <img class="img-thumbnail" src="${(data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg")))}" />
+                    <div class="d-inline-block">
+                      <div class="d-flex">
+                        <div class="checkbox">
+                          <input name="item[${index}][display]" type="hidden" value="false" />
+                          <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
+                          <label class="sr-only visually-hidden" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
+                        </div>
+                        <div class="pic">
+                          <img class="img-thumbnail" src="${(data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg")))}" />
+                        </div>
+                      </div>
+                      <div class="d-inline-block">
+                        ${this._itemSelectImageLink(block_item_id,data.id, index)}
+                      </div>
                     </div>
                     <div class="main">
                       <div class="title card-title">${data.title}</div>
@@ -118,7 +136,7 @@ Core.Block.Resources = (function(){
     },
 
     afterPanelRender: function(data, panel) {
-
+       
     },
 
     afterPanelDelete: function() {
@@ -183,7 +201,7 @@ Core.Block.Resources = (function(){
           <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" 
+              <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>
@@ -223,7 +241,6 @@ Core.Block.Resources = (function(){
 
     onBlockRender: function() {
       SpotlightNestable.init($('[data-behavior="nestable"]', this.inner));
-
       $('[data-input-select-target]', this.inner).selectRelatedInput();
     },
 
@@ -232,7 +249,8 @@ Core.Block.Resources = (function(){
       $.each(Object.keys(data.item || {}).map(function(k) { return data.item[k]}).sort(function(a,b) { return a.weight - b.weight; }), function(index, item) {
         context.createItemPanel(item);
       });
-    },
+     
+    }
   });
 
 })();

data/app/javascript/spotlight/admin/blocks/solr_documents_base_block.js

@@ -5,11 +5,11 @@ SirTrevor.Blocks.SolrDocumentsBase = (function(){
 
   return Core.Block.Resources.extend({
     plustextable: true,
-    autocomplete_url: function() { return this.$instance().closest('form[data-autocomplete-exhibit-catalog-path]').data('autocomplete-exhibit-catalog-path').replace("%25QUERY", "%QUERY"); },
+    autocomplete_url: function() { return this.$instance().closest('form[data-autocomplete-exhibit-catalog-path]').data('autocomplete-exhibit-catalog-path') },
     autocomplete_template: function(obj) {
       const thumbnail = obj.thumbnail ? `<div class="document-thumbnail"><img class="img-thumbnail" src="${obj.thumbnail}" /></div>` : ''
       return `<div class="autocomplete-item${obj.private ? ' blacklight-private' : ''}">${thumbnail}
-      <span class="autocomplete-title">${obj.title}</span><br/><small>&nbsp;&nbsp;${obj.description}</small></div>`
+      <span class="autocomplete-title">${this.highlight(obj.title)}</span><br/><small>&nbsp;&nbsp;${this.highlight(obj.description)}</small></div>`
     },
     transform_autocomplete_results: function(response) {
       return $.map(response['docs'], function(doc) {
@@ -50,16 +50,21 @@ SirTrevor.Blocks.SolrDocumentsBase = (function(){
 
     // Sets the first version of the IIIF information from autocomplete data.
     _itemPanelIiifFields: function(index, autocomplete_data) {
-      return [
-        // '<input type="hidden" name="item[' + index + '][iiif_region]" value="' + (data.iiif_region) + '"/>',
-        // for legacy compatiblity:
+      var iiifFields = [
         '<input type="hidden" name="item[' + index + '][thumbnail_image_url]" value="' + (autocomplete_data.thumbnail_image_url || autocomplete_data.thumbnail || "") + '"/>',
         '<input type="hidden" name="item[' + index + '][full_image_url]" value="' + (autocomplete_data.full_image_url || autocomplete_data.thumbnail_image_url || autocomplete_data.thumbnail || "") + '"/>',
         '<input type="hidden" name="item[' + index + '][iiif_tilesource]" value="' + (autocomplete_data.iiif_tilesource) + '"/>',
         '<input type="hidden" name="item[' + index + '][iiif_manifest_url]" value="' + (autocomplete_data.iiif_manifest_url) + '"/>',
         '<input type="hidden" name="item[' + index + '][iiif_canvas_id]" value="' + (autocomplete_data.iiif_canvas_id) + '"/>',
         '<input type="hidden" name="item[' + index + '][iiif_image_id]" value="' + (autocomplete_data.iiif_image_id) + '"/>',
-      ].join("\n");
+      ];
+
+      // The region input is required for widgets that enable image cropping but not otherwise
+      if(this.show_image_selection) {
+        iiifFields.push('<input type="hidden" name="item[' + index + '][iiif_region]" value="' + (autocomplete_data.iiif_region || "") + '"/>');
+      }
+
+      return iiifFields.join("\n");
     },
     // Overwrites the hidden inputs from _itemPanelIiifFields with data from the
     // manifest. Called by afterPanelRender - the manifest_data here is built

data/app/javascript/spotlight/admin/blocks/solr_documents_embed_block.js

@@ -5,6 +5,7 @@ SirTrevor.Blocks.SolrDocumentsEmbed = (function(){
   return SirTrevor.Blocks.SolrDocumentsBase.extend({
     type: "solr_documents_embed",
     icon_name: "item_embed",
+    show_image_selection: false,
 
     item_options: function() { return "" },
 

data/app/javascript/spotlight/admin/blocks/uploaded_items_block.js

@@ -6,7 +6,8 @@ SirTrevor.Blocks.UploadedItems = (function(){
     plustextable: true,
     uploadable: true,
     autocompleteable: false,
-
+    show_image_selection: false,
+    
     id_key: 'file',
 
     type: 'uploaded_items',
@@ -70,7 +71,7 @@ SirTrevor.Blocks.UploadedItems = (function(){
       var dataUrl = data.url || data.file.url;
 
       var markup = `
-          <li class="field form-inline dd-item dd3-item" data-id="${index}" id="${this.formId(index)}">
+          <li class="field dd-item dd3-item" data-id="${index}" id="${this.formId(index)}">
             <input type="hidden" name="item[${index}][id]" value="${dataId}" />
             <input type="hidden" name="item[${index}][title]" value="${dataTitle}" />
             <input type="hidden" name="item[${index}][url]" data-item-grid-thumbnail="true"  value="${dataUrl}"/>
@@ -152,7 +153,7 @@ SirTrevor.Blocks.UploadedItems = (function(){
         <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" 
+            <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>

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

@@ -1,3 +1,5 @@
+import Clipboard from 'clipboard';
+
 export default class {
     connect() {
         new Clipboard('.copy-email-addresses');

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

@@ -2,22 +2,37 @@ import { addImageSelector } from 'spotlight/admin/add_image_selector'
 import Core from 'spotlight/core'
 
 export default class Crop {
-  constructor(cropArea) {
+  constructor(cropArea, preserveAspectRatio = true) {
     this.cropArea = cropArea;
     this.cropArea.data('iiifCropper', this);
+    // This element will also have the IIIF input elements contained
+    // There may be multiple elements with data-cropper attributes, but
+    // there should only one element with this data-cropper attribute value.
     this.cropSelector = '[data-cropper="' + cropArea.data('cropperKey') + '"]';
     this.cropTool = $(this.cropSelector);
-    this.formPrefix = this.cropTool.data('form-prefix');
-    this.iiifUrlField = $('#' + this.formPrefix + '_iiif_tilesource');
-    this.iiifRegionField = $('#' + this.formPrefix + '_iiif_region');
-    this.iiifManifestField = $('#' + this.formPrefix + '_iiif_manifest_url');
-    this.iiifCanvasField = $('#' + this.formPrefix + '_iiif_canvas_id');
-    this.iiifImageField = $('#' + this.formPrefix + '_iiif_image_id');
-
+    // Exhibit and masthead cropping requires the ratio between image width and height
+    // to be consistent, whereas item widget cropping allows any combination of 
+    // image width and height.
+    this.preserveAspectRatio = preserveAspectRatio;
+    // Get the IIIF input elements used to store/reference IIIF information
+    this.inputPrefix = this.cropTool.data('input-prefix');
+    this.iiifUrlField = this.iiifInputElement(this.inputPrefix, 'iiif_tilesource', this.cropTool);
+    this.iiifRegionField = this.iiifInputElement(this.inputPrefix, 'iiif_region', this.cropTool);
+    this.iiifManifestField = this.iiifInputElement(this.inputPrefix, 'iiif_manifest_url', this.cropTool);
+    this.iiifCanvasField = this.iiifInputElement(this.inputPrefix, 'iiif_canvas_id', this.cropTool);
+    this.iiifImageField = this.iiifInputElement(this.inputPrefix, 'iiif_image_id', this.cropTool);
+    // Get the closest form element
     this.form = cropArea.closest('form');
     this.tileSource = null;
   }
 
+  // Return the iiif input element based on the fieldname.
+  // Multiple input fields with the same name on the page may be related 
+  // to a cropper. We thus need to pass in a parent element. 
+  iiifInputElement(inputPrefix, fieldName, inputParentElement) {
+    return $('input[name="' + inputPrefix + '[' + fieldName + ']"]', inputParentElement);
+  }
+
   // Render the cropper environment and add hooks into the autocomplete and upload forms
   render() {
     this.setupAutoCompletes();
@@ -152,15 +167,21 @@ export default class Crop {
     if (this.cropperMap) {
       return;
     }
-    this.cropperMap = L.map(this.cropArea.attr('id'), {
+
+    var cropperOptions = {
       editable: true,
       center: [0, 0],
       crs: L.CRS.Simple,
-      zoom: 0,
-      editOptions: {
+      zoom: 0
+    }
+
+    if(this.preserveAspectRatio) {
+      cropperOptions['editOptions'] = {
         rectangleEditorClass: this.aspectRatioPreservingRectangleEditor(this.aspectRatio())
-      }
-    });
+      };
+    }
+
+    this.cropperMap = L.map(this.cropArea.attr('id'), cropperOptions);
     this.invalidateMapSizeOnTabToggle();
   }
 
@@ -228,9 +249,12 @@ export default class Crop {
     }
 
     var input = $('[data-behavior="autocomplete"]', this.cropTool);
-    var panel = $(input.data('target-panel'));
-
-    addImageSelector(input, panel, this.iiifManifestField.val(), !this.iiifImageField.val());
+    
+    // Not every page which uses this module has autocomplete linked directly to the cropping tool
+    if(input.length) {
+      var panel = $(input.data('target-panel'));
+      addImageSelector(input, panel, this.iiifManifestField.val(), !this.iiifImageField.val());
+    }
   }
 
   invalidateMapSizeOnTabToggle() {
@@ -280,7 +304,11 @@ export default class Crop {
   }
 
   setUploadId(id) {
-    $('#' + this.formPrefix + "_upload_id").val(id);
+    // This input is currently used for exhibit masthead or thumbnail image upload.
+    // The name should be sufficient in this case, as we don't use this part of the
+    // code for solr document widgets where we enable cropping. 
+    // If we require more specificity, we can scope this to this.cropTool. 
+    $('input[name="' + this.inputPrefix + '[upload_id]"]').val(id);
   }
 
   aspectRatioPreservingRectangleEditor(aspect) {

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

@@ -1,10 +1,17 @@
 import Crop from 'spotlight/admin/crop';
+import CroppableModal from 'spotlight/admin/croppable_modal';
 
-export default class {
+export default class Croppable {
   connect() {
+    // For exhibit masthead or thumbnail pages, where
+    // the div exists on page load
     $('[data-behavior="iiif-cropper"]').each(function() {
       var cropElement = $(this)
       new Crop(cropElement).render()
     })
+
+    // In the case of individual document thumbnails, selection
+    // of the image is through a modal. Here we attach the event
+    new CroppableModal().attachModalHandlers();
   }
 }

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

@@ -0,0 +1,68 @@
+import Crop from 'spotlight/admin/crop';
+
+export default class CroppableModal {
+
+  attachModalHandlers() {
+    // Attach handler for when modal first loads, to show the cropper
+    this.attachModalLoadBehavior();
+    // Attach handler for save by checking if clicking in the modal is on a save button
+    this.attachModalSaveHandler();
+  }
+
+  attachModalLoadBehavior() {
+    // Listen for event thrown when modal is displayed with content
+    document.addEventListener('loaded.blacklight.blacklight-modal', function(e) {
+      var dataCropperDiv = $('#blacklight-modal [data-behavior="iiif-cropper"]');
+      
+      if(dataCropperDiv) {
+        new Crop(dataCropperDiv, false).render();
+      }
+    });
+  }
+
+  // Field names are of the format item[item_0][iiif_image_id]
+  iiifInputField(itemIndex, fieldName, parentElement) {
+    var itemPrefix = 'item[' + itemIndex + ']';
+    var selector = 'input[name="' + itemPrefix + '[' + fieldName + ']"]';
+    return $(selector, parentElement);
+  }
+
+  attachModalSaveHandler() {
+    var context = this;
+   
+    document.addEventListener('show.blacklight.blacklight-modal', function(e) {
+      $('#save-cropping-selection').on('click', () => {
+        context.saveCroppedRegion();
+      });
+    });
+  }
+
+  saveCroppedRegion() {
+    //On hitting "save changes", we need to copy over the value
+    //to the iiif thumbnail url input field as well as the image source itself
+    var context = this;
+    var dataCropperDiv = $('#blacklight-modal [data-behavior="iiif-cropper"]');
+
+    if(dataCropperDiv) {
+      var dataCropperKey = dataCropperDiv.data("cropper-key");
+      var itemIndex = dataCropperDiv.data("index-id");
+      // Get the element on the main edit page whose select image link opened up the modal
+      var itemElement = $('[data-cropper="' + dataCropperKey + '"]');
+      // Get the hidden input field on the main edit page corresponding to this item
+      var thumbnailSaveField = context.iiifInputField(itemIndex, 'thumbnail_image_url', itemElement);
+      var fullimageSaveField = context.iiifInputField(itemIndex, 'full_image_url', itemElement);
+      var iiifTilesource = context.iiifInputField(itemIndex, 'iiif_tilesource', itemElement).val();
+      var regionValue = context.iiifInputField(itemIndex, 'iiif_region', itemElement).val();
+      // Extract the region string to incorporate into the thumbnail URL
+      var urlPrefix = iiifTilesource.substring(0, iiifTilesource.lastIndexOf('/info.json'));
+      var thumbnailUrl = urlPrefix + '/' + regionValue + '/!400,400/0/default.jpg';
+      // Set the hidden input value to the thumbnail URL
+      // Also set the full image - which is used by widgets like carousel or slideshow
+      thumbnailSaveField.val(thumbnailUrl);
+      fullimageSaveField.val(urlPrefix + '/' + regionValue + '/!800,800/0/default.jpg');
+      // Also change img url for thumbnail image
+      var itemImage = $('img.img-thumbnail', itemElement);      
+      itemImage.attr('src', thumbnailUrl);
+    }
+  }
+}

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

@@ -41,21 +41,26 @@ export default class {
       $(inputContainer).insertAfter(contacts.last());
     });
 
-    $('.contact-email-delete').on('ajax:success', function() {
-      $(this).closest('.contact').fadeOut(250, function() { $(this).remove(); });
-    });
-
-    $('.contact-email-delete').on('ajax:error', function(event, _xhr, _status, error) {
-      var errSpan = $(this).closest('.contact').find('.contact-email-delete-error');
-      errSpan.show();
-      errSpan.find('.error-msg').first().text(error || event.detail[1]);
-    });
+    if (document.getElementById('another-email')) {
+      document.addEventListener('turbo:submit-end', this.contactToDeleteNotFoundHandler);
+    }
 
-    $('.btn-with-tooltip').tooltip();
+    if ($.fn.tooltip) {
+      $('.btn-with-tooltip').tooltip();
+    }
 
     // Put focus in saved search title input when Save this search modal is shown
     $('#save-modal').on('shown.bs.modal', function () {
         $('#search_title').focus();
     });
   }
+
+  contactToDeleteNotFoundHandler(e) {
+    const contact = e.detail.formSubmission?.delegate?.element?.querySelector('.contact')
+    if (contact && e.detail?.fetchResponse?.response?.status === 404) {
+      const error = contact.querySelector('.contact-email-delete-error');
+      error.style.display = 'block';
+      error.querySelector('.error-msg').textContent = 'Not Found';
+    }
+  }
 }

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

@@ -68,7 +68,7 @@ export default class {
   connect() {
     // Instantiate the singleton SerializedForm plugin
     var serializedForm = $.SerializedForm();
-    $(window).on('beforeunload page:before-change turbolinks:before-visit', function(event) {
+    $(window).on('beforeunload page:before-change turbolinks:before-visit turbo:before-visit', function(event) {
       // Don't handle the same event twice #turbolinks
       if (event.handled !== true) {
         if ( serializedForm.observedFormsStatusHasChanged() ) {

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

@@ -1,18 +1,9 @@
-// These scripts are in the vendor directory
-import 'nestable'
-import 'bootstrap-tagsinput'
-import 'jquery.serializejson'
-import 'leaflet-iiif'
-import 'Leaflet.Editable'
-import 'Path.Drag'
-
 import AddAnother from 'spotlight/admin/add_another'
 import AddNewButton from 'spotlight/admin/add_new_button'
 import BlacklightConfiguration from 'spotlight/admin/blacklight_configuration'
 import CopyEmailAddress from 'spotlight/admin/copy_email_addresses'
 import Croppable from 'spotlight/admin/croppable'
 import EditInPlace from 'spotlight/admin/edit_in_place'
-import ExhibitTagAutocomplete from 'spotlight/admin/exhibit_tag_autocomplete'
 import Exhibits from 'spotlight/admin/exhibits'
 import FormObserver from 'spotlight/admin/form_observer'
 import Locks from 'spotlight/admin/locks'
@@ -62,7 +53,6 @@ export default class {
     new CopyEmailAddress().connect()
     new Croppable().connect()
     new EditInPlace().connect()
-    new ExhibitTagAutocomplete().connect()
     new Exhibits().connect()
     new FormObserver().connect()
     new Locks().connect()

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

@@ -1,12 +1,22 @@
 export default class {
   delete_lock(el) {
-    $.ajax({ url: $(el).data('lock'), type: 'POST', data: { _method: "delete" }, async: false});
-    $(el).removeAttr('data-lock');
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+    
+    fetch(el.dataset.lock, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-Token': csrfToken
+      }
+    });
+    
+    el.removeAttribute('data-lock');
   }
 
   connect() {
-    $('[data-lock]').on('click', (e) => {
-      this.delete_lock(e.target);
-    })
+    document.querySelectorAll('[data-lock]').forEach(element => {
+      element.addEventListener('click', (e) => {
+        this.delete_lock(e.target);
+      });
+    });
   }
 }

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

@@ -5,7 +5,7 @@ import Core from 'spotlight/core'
 export default class {
   connect(){
     SirTrevor.setDefaults({
-      iconUrl: Spotlight.sirTrevorIcon || window.sirTrevorIcon,
+      iconUrl: Spotlight.sirTrevorIcon,
       uploadUrl: $('[data-attachment-endpoint]').data('attachment-endpoint'),
       ajaxOptions: {
         headers: {