blacklight-spotlight 3.5.0.1 → 3.6.0.beta1

data/app/javascript/spotlight/admin/checkbox_submit.es6

@@ -0,0 +1,75 @@
+/*
+NOTE: this is copied & adapted from BL8's checkbox_submit.js in order to have
+it accessible in a BL7-based spotlight. Once we drop support for BL7, this file
+can be deleted and we can change visibility_toggle.es6 to import CheckboxSubmit
+from Blacklight.
+
+See https://github.com/projectblacklight/blacklight/blob/main/app/javascript/blacklight/checkbox_submit.js
+*/
+export default class CheckboxSubmit {
+  constructor(form) {
+    this.form = form
+  }
+
+  async clicked(evt) {
+    this.spanTarget.innerHTML = this.form.getAttribute('data-inprogress')
+    this.labelTarget.setAttribute('disabled', 'disabled');
+    this.checkboxTarget.setAttribute('disabled', 'disabled');
+    const csrfMeta = document.querySelector('meta[name=csrf-token]')
+    const response = await fetch(this.formTarget.getAttribute('action'), {
+      body: new FormData(this.formTarget),
+      method: this.formTarget.getAttribute('method').toUpperCase(),
+      headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': csrfMeta ? csrfMeta.content : ''
+      }
+    })
+    this.labelTarget.removeAttribute('disabled')
+    this.checkboxTarget.removeAttribute('disabled')
+    if (response.ok) {
+      this.updateStateFor(!this.checked)
+      // Not used for our case in Spotlight (visibility toggle)
+      // const json = await response.json()
+      // document.querySelector('[data-role=bookmark-counter]').innerHTML = json.bookmarks.count
+    } else {
+      alert('Error')
+    }
+  }
+
+  get checked() {
+    return (this.form.querySelectorAll('input[name=_method][value=delete]').length != 0)
+  }
+
+  get formTarget() {
+    return this.form
+  }
+
+  get labelTarget() {
+    return this.form.querySelector('[data-checkboxsubmit-target="label"]')
+  }
+
+  get checkboxTarget() {
+    return this.form.querySelector('[data-checkboxsubmit-target="checkbox"]')
+  }
+
+  get spanTarget() {
+    return this.form.querySelector('[data-checkboxsubmit-target="span"]')
+  }
+
+  updateStateFor(state) {
+    this.checkboxTarget.checked = state
+
+    if (state) {
+      this.labelTarget.classList.add('checked')
+      //Set the Rails hidden field that fakes an HTTP verb
+      //properly for current state action.
+      this.formTarget.querySelector('input[name=_method]').value = 'delete'
+      this.spanTarget.innerHTML = this.form.getAttribute('data-present')
+    } else {
+      this.labelTarget.classList.remove('checked')
+      this.formTarget.querySelector('input[name=_method]').value = 'put'
+      this.spanTarget.innerHTML = this.form.getAttribute('data-absent')
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export default class {
+    connect() {
+        new Clipboard('.copy-email-addresses');
+    }
+}

data/app/{assets/javascripts/spotlight/admin/crop.es6 → javascript/spotlight/admin/crop.js}

@@ -1,3 +1,6 @@
+import { addImageSelector } from 'add_image_selector'
+import Spotlight from 'spotlight'
+
 export default class Crop {
   constructor(cropArea) {
     this.cropArea = cropArea;
@@ -226,7 +229,7 @@ export default class Crop {
 
     var input = $('[data-behavior="autocomplete"]', this.cropTool);
     var panel = $(input.data('target-panel'));
-    // This is defined in search_typeahead.js
+
     addImageSelector(input, panel, this.iiifManifestField.val(), !this.iiifImageField.val());
   }
 
@@ -251,8 +254,6 @@ export default class Crop {
   }
 
   uploadFile() {
-    // Set a ujs adapter to support both rails-ujs and jquery-ujs
-    var ujs = typeof Rails === 'undefined' ? $.rails : Rails;
     var url = this.fileInput.data('endpoint')
     // Every post creates a new image/masthead.
     // Because they create IIIF urls which are heavily cached.
@@ -264,7 +265,7 @@ export default class Crop {
       // Form data
       data: this.getData(),
       headers: {
-        'X-CSRF-Token': ujs.csrfToken() || ''
+        'X-CSRF-Token': Spotlight.csrfToken() || ''
       },
       //Options to tell jQuery not to process data or worry about content-type.
       cache: false,

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

@@ -0,0 +1,10 @@
+import Crop from 'crop';
+
+export default class {
+  connect() {
+    $('[data-behavior="iiif-cropper"]').each(function() {
+      var cropElement = $(this)
+      new Crop(cropElement).render()
+    })
+  }
+}

data/app/{assets/javascripts/spotlight/admin/edit_in_place.js → javascript/spotlight/admin/edit_in_place.es6}

@@ -1,14 +1,9 @@
-Spotlight.onLoad(function() {
-  $('[data-in-place-edit-target]').spotlightEditInPlace();
-});
 /*
   Simple plugin add edit-in-place behavior
 */
-(function($) {
-  $.fn.spotlightEditInPlace = function() {
-    var clickElements = this;
-
-    $(clickElements).each(function() {
+export default class {
+  connect() {
+    $('[data-in-place-edit-target]').each(function() {
       $(this).on('click.inplaceedit', function() {
         var $label = $(this).find($(this).data('in-place-edit-target'));
         var $input = $(this).find($(this).data('in-place-edit-field-target'));
@@ -47,8 +42,6 @@ Spotlight.onLoad(function() {
 
         return false;
       });
-    });
-
-    return this;
-  };
-})(jQuery);
+    })
+  }
+}

data/app/javascript/spotlight/admin/exhibit_tag_autocomplete.es6

@@ -0,0 +1,39 @@
+export default class {
+  connect() {
+    $('[data-autocomplete-tag="true"]').each(function(_i, el) {
+      var $el = $(el);
+      // By default tags input binds on page ready to [data-role=tagsinput],
+      // however, that doesn't work with Turbolinks. So we init manually:
+      $el.tagsinput();
+
+      var tags = new Bloodhound({
+        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        limit: 100,
+        prefetch: {
+          url: $el.data('autocomplete-url'),
+          ttl: 1,
+          filter: function(list) {
+            // Let the dom know that the response has been returned
+            $el.attr('data-autocomplete-fetched', true);
+            return $.map(list, function(tag) { return { name: tag }; });
+          }
+        }
+      });
+
+      tags.initialize();
+
+      $el.tagsinput('input').typeahead({highlight: true, hint: false}, {
+        name: 'tags',
+        displayKey: 'name',
+        source: tags.ttAdapter()
+      }).bind('typeahead:selected', $.proxy(function (obj, datum) {
+        $el.tagsinput('add', datum.name);
+        $el.tagsinput('input').typeahead('val', '');
+      })).bind('blur', function() {
+        $el.tagsinput('add', $el.tagsinput('input').typeahead('val'));
+        $el.tagsinput('input').typeahead('val', '');
+      })
+    })
+  }
+}

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

@@ -0,0 +1,59 @@
+export default class {
+  connect() {
+    // auto-fill the exhibit slug on the new exhibit form
+    $('#new_exhibit').each(function() {
+      $('#exhibit_title').on('change keyup', function() {
+        $('#exhibit_slug').attr('placeholder', URLify($(this).val(), $(this).val().length));
+      });
+
+      $('#exhibit_slug').on('focus', function() {
+        if ($(this).val() === '') {
+          $(this).val($(this).attr('placeholder'));
+        }
+      });
+    });
+
+    $("#another-email").on("click", function(e) {
+      e.preventDefault();
+
+      var container = $(this).closest('.form-group');
+      var contacts = container.find('.contact');
+      var inputContainer = contacts.first().clone();
+
+      // wipe out any values from the inputs
+      inputContainer.find('input').each(function() {
+        $(this).val('');
+        $(this).attr('id', $(this).attr('id').replace('0', contacts.length));
+        $(this).attr('name', $(this).attr('name').replace('0', contacts.length));
+        if ($(this).attr('aria-label')) {
+          $(this).attr('aria-label', $(this).attr('aria-label').replace('1', contacts.length + 1));
+        }
+      });
+
+      inputContainer.find('.contact-email-delete-wrapper').remove();
+      inputContainer.find('.confirmation-status').remove();
+
+      // bootstrap does not render input-groups with only one value in them correctly.
+      inputContainer.find('.input-group input:only-child').closest('.input-group').removeClass('input-group');
+
+      $(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]);
+    });
+
+    $('.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();
+    });
+  }
+}

data/app/{assets/javascripts/spotlight/admin/form_observer.js → javascript/spotlight/admin/form_observer.es6}

@@ -1,24 +1,3 @@
-Spotlight.onLoad(function() {
-  // Instantiate the singleton SerializedForm plugin
-  var serializedForm = $.SerializedForm();
-  $(window).on('beforeunload page:before-change turbolinks:before-visit', function(event) {
-    // Don't handle the same event twice #turbolinks
-    if (event.handled !== true) {
-      if ( serializedForm.observedFormsStatusHasChanged() ) {
-        event.handled = true;
-        var message = "You have unsaved changes. Are you sure you want to leave this page?";
-        // There are variations in how Webkit browsers may handle this:
-        // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
-        if ( event.type == "beforeunload" ) {
-          return message;
-        }else{
-          
-          return confirm(message)
-        }
-      }
-    }
-  });
-});
 
 (function($, undefined) {
   'use strict';
@@ -84,3 +63,26 @@ Spotlight.onLoad(function() {
     return plugin;
   };
 })(jQuery);
+
+export default class {
+  connect() {
+    // Instantiate the singleton SerializedForm plugin
+    var serializedForm = $.SerializedForm();
+    $(window).on('beforeunload page:before-change turbolinks:before-visit', function(event) {
+      // Don't handle the same event twice #turbolinks
+      if (event.handled !== true) {
+        if ( serializedForm.observedFormsStatusHasChanged() ) {
+          event.handled = true;
+          var message = "You have unsaved changes. Are you sure you want to leave this page?";
+          // There are variations in how Webkit browsers may handle this:
+          // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
+          if ( event.type == "beforeunload" ) {
+            return message;
+          } else {
+            return confirm(message)
+          }
+        }
+      }
+    });
+  }
+}

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

@@ -0,0 +1,85 @@
+// import '../../../../vendor/assets/javascripts/sir-trevor'
+import '../../../../vendor/assets/javascripts/nestable'
+import '../../../../vendor/assets/javascripts/parameterize'
+import '../../../../vendor/assets/javascripts/bootstrap-tagsinput'
+import '../../../../vendor/assets/javascripts/jquery.serializejson'
+// import '../../../../vendor/assets/javascripts/clipboard'
+// import '../../../../vendor/assets/javascripts/leaflet'
+import '../../../../vendor/assets/javascripts/leaflet-iiif'
+import '../../../../vendor/assets/javascripts/Leaflet.Editable'
+import '../../../../vendor/assets/javascripts/Path.Drag'
+
+import AddAnother from 'add_another'
+import AddNewButton from 'add_new_button'
+import Appearance from 'appearance'
+import BlacklightConfiguration from 'blacklight_configuration'
+import CopyEmailAddress from 'copy_email_addresses'
+import Croppable from 'croppable'
+import EditInPlace from 'edit_in_place'
+import ExhibitTagAutocomplete from 'exhibit_tag_autocomplete'
+import Exhibits from 'exhibits'
+import FormObserver from 'form_observer'
+import Locks from 'locks'
+import 'multi_image_selector'
+import Pages from 'pages'
+import ProgressMonitor from 'progress_monitor'
+import ReadonlyCheckbox from 'readonly_checkbox'
+import { addAutocompletetoFeaturedImage } from 'search_typeahead'
+import SelectRelatedInput from 'select_related_input'
+import SpotlightNestable from 'spotlight_nestable'
+import Tabs from 'tabs'
+import TranslationProgress from 'translation_progress'
+import 'visibility_toggle'
+import Users from 'users'
+
+import 'block_mixins/autocompleteable'
+import 'block_mixins/formable'
+import 'block_mixins/plustextable'
+
+import 'blocks/block'
+import 'blocks/resources_block' // This is a base class of several other blocks, so must come first
+import 'blocks/browse_block'
+import 'blocks/browse_group_categories_block'
+import 'blocks/iframe_block'
+import 'blocks/link_to_search_block'
+import 'blocks/oembed_block'
+import 'blocks/pages_block'
+import 'blocks/rule_block'
+import 'blocks/search_result_block'
+import 'blocks/solr_documents_base_block'
+import 'blocks/solr_documents_block'
+import 'blocks/solr_documents_carousel_block'
+import 'blocks/solr_documents_embed_block'
+import 'blocks/solr_documents_features_block'
+import 'blocks/solr_documents_grid_block'
+import 'blocks/uploaded_items_block'
+
+import 'sir-trevor/block_controls'
+import 'sir-trevor/block_limits'
+import 'sir-trevor/locales'
+
+
+export default class {
+  connect() {
+    new AddAnother().connect()
+    new AddNewButton().connect()
+    new Appearance().connect()
+    new CopyEmailAddress().connect()
+    new Croppable().connect()
+    new EditInPlace().connect()
+    new ExhibitTagAutocomplete().connect()
+    new Exhibits().connect()
+    new FormObserver().connect()
+    new Locks().connect()
+    new BlacklightConfiguration().connect()
+    new Pages().connect()
+    new ProgressMonitor().connect()
+    new ReadonlyCheckbox().connect()
+    new SelectRelatedInput().connect()
+    new Tabs().connect()
+    new TranslationProgress().connect()
+    new Users().connect()
+    addAutocompletetoFeaturedImage()
+    SpotlightNestable.init();
+  }
+}

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

@@ -0,0 +1,12 @@
+export default class {
+  delete_lock(el) {
+    $.ajax({ url: $(el).data('lock'), type: 'POST', data: { _method: "delete" }, async: false});
+    $(el).removeAttr('data-lock');
+  }
+
+  connect() {
+    $('[data-lock]').on('click', (e) => {
+      this.delete_lock(e.target);
+    })
+  }
+}

data/app/{assets/javascripts → javascript}/spotlight/admin/multi_image_selector.js

@@ -36,7 +36,8 @@
     }
 
     function indexOf(thumb){
-      if( (index = imageIds.indexOf(thumb)) > -1 ){
+      const index = imageIds.indexOf(thumb)
+      if (index > -1) {
         return index + 1;
       } else {
         return 1;

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

@@ -0,0 +1,42 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+import Spotlight from 'spotlight'
+
+export default class {
+  connect(){
+    SirTrevor.setDefaults({
+      iconUrl: Spotlight.sirTrevorIcon,
+      uploadUrl: $('[data-attachment-endpoint]').data('attachment-endpoint'),
+      ajaxOptions: {
+        headers: {
+          'X-CSRF-Token': Spotlight.csrfToken() || ''
+        },
+        credentials: 'same-origin'
+      }
+    });
+
+    SirTrevor.Blocks.Heading.prototype.toolbarEnabled = true;
+    SirTrevor.Blocks.Quote.prototype.toolbarEnabled = true;
+    SirTrevor.Blocks.Text.prototype.toolbarEnabled = true;
+
+    var instance = $('.js-st-instance').first();
+
+    if (instance.length) {
+      var editor = new SirTrevor.Editor({
+        el: instance[0],
+        blockTypes: instance.data('blockTypes'),
+        defaultType:["Text"],
+        onEditorRender: function() {
+          $.SerializedForm();
+        },
+        blockTypeLimits: {
+          "SearchResults": 1
+        }
+      });
+
+      editor.blockControls = Spotlight.BlockControls.create(editor);
+
+      new Spotlight.BlockLimits(editor).enforceLimits(editor);
+    }
+  }
+}

data/app/{assets/javascripts/spotlight/admin/progress_monitor.js → javascript/spotlight/admin/progress_monitor.es6}

@@ -1,10 +1,6 @@
-Spotlight.onLoad(function() {
-  $('[data-behavior="progress-panel"]').progressMonitor();
-});
-
-(function($) {
-  $.fn.progressMonitor = function() {
-    var monitorElements = this;
+export default class {
+  connect() {
+    var monitorElements = $('[data-behavior="progress-panel"]');
     var defaultRefreshRate = 3000;
     var panelContainer;
     var pollers = [];
@@ -144,5 +140,5 @@ Spotlight.onLoad(function() {
     }
 
     return this;
-  };
-})(jQuery);
+  }
+}

data/app/javascript/spotlight/admin/readonly_checkbox.es6

@@ -0,0 +1,8 @@
+export default class {
+  connect() {
+    // Don't allow unchecking of checkboxes with the data-readonly attribute 
+    $("input[type='checkbox'][data-readonly]").on("click", function(event) {
+      event.preventDefault();
+    })
+  }
+}

data/app/{assets/javascripts → javascript}/spotlight/admin/search_typeahead.js

@@ -1,5 +1,4 @@
-//= require typeahead.bundle.min.js
-//= require handlebars
+import { addImageSelector } from 'add_image_selector'
 
 (function($){
   $.fn.spotlightSearchTypeAhead = function( options ) {
@@ -52,7 +51,7 @@ function itemsTemplate() {
   return '<div class="autocomplete-item{{#if private}} blacklight-private{{/if}}">{{#if thumbnail}}<div class="document-thumbnail"><img class="img-thumbnail" src="{{thumbnail}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>';
 }
 
-function addAutocompletetoFeaturedImage(){
+export function addAutocompletetoFeaturedImage(){
   if($('[data-featured-image-typeahead]').length > 0) {
     $('[data-featured-image-typeahead]').spotlightSearchTypeAhead({bloodhound: itemsBloodhound(), template: itemsTemplate()}).on('click', function() {
       $(this).select();
@@ -63,46 +62,4 @@ function addAutocompletetoFeaturedImage(){
       $(this).attr('type', 'text');
     });
   }
-}
-
-function addImageSelector(input, panel, manifestUrl, initialize) {
-  if (!manifestUrl) {
-    showNonIiifAlert(input);
-    return;
-  }
-  var cropper = input.data('iiifCropper');
-  $.ajax(manifestUrl).done(
-    function(manifest) {
-      var Iiif = spotlightAdminIiif;
-      var iiifManifest = new Iiif(manifestUrl, manifest);
-
-      var thumbs = iiifManifest.imagesArray();
-
-      hideNonIiifAlert(input);
-
-      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());
-      }
-    }
-  );
-}
-
-function showNonIiifAlert(input){
-  input.parent().prev('[data-behavior="non-iiif-alert"]').show();
-}
-
-function hideNonIiifAlert(input){
-  input.parent().prev('[data-behavior="non-iiif-alert"]').hide();
-}
-
-Spotlight.onLoad(function(){
-  addAutocompletetoFeaturedImage();
-});
+}

data/app/{assets/javascripts/spotlight/admin/select_related_input.js → javascript/spotlight/admin/select_related_input.es6}

@@ -1,6 +1,3 @@
-Spotlight.onLoad(function() {
-  $('[data-input-select-target]').selectRelatedInput();
-});
 /*
   Simple plugin to select form elements
   when other elements are clicked.
@@ -32,3 +29,9 @@ Spotlight.onLoad(function() {
     return this;
   };
 })(jQuery);
+
+export default class {
+  connect() {
+    $('[data-input-select-target]').selectRelatedInput();
+  }
+}

data/app/{assets/javascripts → javascript}/spotlight/admin/sir-trevor/block_controls.js

@@ -1,4 +1,6 @@
-(function(global) {
+import Spotlight from 'spotlight'
+
+(function() {
   var BLOCK_REPLACER_CONTROL_TEMPLATE = function(block) {
     var el = document.createElement('button');
     el.className = "st-block-controls__button";
@@ -75,8 +77,8 @@
     return elButtons;
   }
 
-  global.Spotlight.BlockControls = function() { };
-  global.Spotlight.BlockControls.create = function(editor) {
+  Spotlight.BlockControls = function() { };
+  Spotlight.BlockControls.create = function(editor) {
     // REFACTOR - should probably not know about blockManager
     var el = render(SirTrevor.Blocks, editor.blockManager.blockTypes);
 
@@ -117,4 +119,4 @@
       destroy: destroy
     };
   };
-})(this);
+})();

data/app/{assets/javascripts → javascript}/spotlight/admin/sir-trevor/block_limits.js

@@ -1,3 +1,5 @@
+import Spotlight from 'spotlight'
+
 Spotlight.BlockLimits = function(editor) {
   this.editor = editor;
 };

data/app/{assets/javascripts → javascript}/spotlight/admin/spotlight_nestable.js

@@ -1,6 +1,4 @@
-
-(function( global ) {
-  var Module = (function() {
+const Module = (function() {
     var nestableSelector = '[data-behavior="nestable"]';
     return {
       init: function(selector){
@@ -23,7 +21,7 @@
         var weight = 0;
         for(var i in data){
           var parent_id = data[i]['id'];
-          parent_node = findNode(parent_id, container);
+          const parent_node = findNode(parent_id, container);
           setWeight(parent_node, weight++);
           if(data[i]['children']){
             var children = data[i]['children'];
@@ -65,8 +63,6 @@
     function find_property(node, property) {
       return node.find("input[data-property=" + property + "]");
     }
-  })();
-
-  global.SpotlightNestable = Module;
+})();
 
-})( this );
+export default Module

data/app/javascript/spotlight/admin/tabs.es6

@@ -0,0 +1,8 @@
+export default class {
+  connect() {
+    if ($('[role=tabpanel]').length > 0 && window.location.hash) {
+      var tabpanel = $(window.location.hash).closest('[role=tabpanel]');
+      $('a[role=tab][href="#'+tabpanel.attr('id')+'"]').tab('show');
+    }
+  }
+}