spotlight-frontend 3.5.0-beta.1

package/app/assets/javascripts/spotlight/admin/blocks/uploaded_items_block.js

@@ -0,0 +1,145 @@
+SirTrevor.Blocks.UploadedItems = (function(){
+  return Spotlight.Block.Resources.extend({
+    plustextable: true,
+    uploadable: true,
+    autocompleteable: false,
+
+    id_key: 'file',
+
+    type: 'uploaded_items',
+
+    icon_name: 'items',
+
+    blockGroup: 'undefined',
+
+    // Clear out the default Uploadable upload options
+    // since we will be using our own custom controls
+    upload_options: { html: '' },
+
+    fileInput: function() { return $(this.inner).find('input[type="file"]'); },
+
+    onBlockRender: function(){
+      SpotlightNestable.init($(this.inner).find('[data-behavior="nestable"]'));
+
+      this.fileInput().on('change', (function(ev) {
+        this.onDrop(ev.currentTarget);
+      }).bind(this));
+    },
+
+    onDrop: function(transferData){
+      var file = transferData.files[0],
+          urlAPI = (typeof URL !== "undefined") ? URL : (typeof webkitURL !== "undefined") ? webkitURL : null;
+
+      // Handle one upload at a time
+      if (/image/.test(file.type)) {
+        this.loading();
+
+        this.uploader(
+          file,
+          function(data) {
+            this.createItemPanel(data);
+            this.fileInput().val('');
+            this.ready();
+          },
+          function(error) {
+            this.addMessage(i18n.t('blocks:image:upload_error'));
+            this.ready();
+          }
+        );
+      }
+    },
+
+    title: function() { return i18n.t('blocks:uploaded_items:title'); },
+    description: function() { return i18n.t('blocks:uploaded_items:description'); },
+
+    globalIndex: 0,
+
+    _itemPanel: function(data) {
+      var index = "file_" + this.globalIndex++;
+      var checked = 'checked="checked"';
+
+      if (data.display == 'false') {
+        checked = '';
+      }
+
+      var dataId = data.id || data.uid;
+      var dataTitle = data.title || data.name;
+      var dataUrl = data.url || data.file.url;
+
+      var markup = [
+          '<li class="field form-inline dd-item dd3-item" data-id="' + index + '" id="' + this.formId("item_" + dataId) + '">',
+            '<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 + '"/>',
+            '<input data-property="weight" type="hidden" name="item[' + index + '][weight]" value="' + data.weight + '" />',
+            '<div class="card d-flex dd3-content">',
+              '<div class="dd-handle dd3-handle"><%= i18n.t("blocks:resources:panel:drag") %></div>',
+              '<div class="card-header d-flex item-grid">',
+                '<div class="checkbox">',
+                  '<input name="item[' + index + '][display]" type="hidden" value="false" />',
+                  '<input name="item[' + index + '][display]" id="'+ this.formId(this.display_checkbox + '_' + dataId) + '" type="checkbox" ' + checked + ' class="item-grid-checkbox" value="true"  />',
+                  '<label class="sr-only" for="'+ this.formId(this.display_checkbox + '_' + dataId) +'"><%= i18n.t("blocks:resources:panel:display") %></label>',
+                '</div>',
+                '<div class="pic">',
+                  '<img class="img-thumbnail" src="' + dataUrl + '" />',
+                '</div>',
+                '<div class="main form-horizontal">',
+                  '<div class="title card-title">' + dataTitle + '</div>',
+                  '<div class="field row mr-3">',
+                    '<label for="' + this.formId('caption_' + dataId) + '" class="col-form-label col-md-3"><%= i18n.t("blocks:uploaded_items:caption") %></label>',
+                    '<input type="text" class="form-control col" id="' + this.formId('caption_' + dataId) + '" name="item[' + index + '][caption]" data-field="caption"/>',
+                  '</div>',
+                  '<div class="field row mr-3">',
+                    '<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>',
+                '</div>',
+                '<div class="remove float-right">',
+                  '<a data-item-grid-panel-remove="true" href="#"><%= i18n.t("blocks:resources:panel:remove") %></a>',
+                '</div>',
+              '</div>',
+            '</li>'
+      ].join("\n");
+
+      var panel = $(_.template(markup)(this));
+      panel.find('[data-field="caption"]').val(data.caption);
+      panel.find('[data-field="link"]').val(data.link);
+      var context = this;
+
+      $('.remove a', panel).on('click', function(e) {
+        e.preventDefault();
+        $(this).closest('.field').remove();
+        context.afterPanelDelete();
+      });
+
+      this.afterPanelRender(data, panel);
+
+      return panel;
+    },
+
+    template: [
+      '<div class="form oembed-text-admin clearfix">',
+        '<div class="widget-header">',
+          '<%= description() %>',
+        '</div>',
+        '<div class="row">',
+          '<div class="form-group col-md-8">',
+            '<div class="panels dd nestable-item-grid" data-behavior="nestable" data-max-depth="1">',
+              '<ol class="dd-list">',
+              '</ol>',
+            '</div>',
+            '<input type="file" id="uploaded_item_url" name="file[file_0][file_data]" />',
+          '</div>',
+          '<div class="col-md-4">',
+            '<input name="<%= zpr_key %>" type="hidden" value="false" />',
+            '<input name="<%= zpr_key %>" id="<%= formId(zpr_key) %>" data-key="<%= zpr_key %>" type="checkbox" value="true" />',
+            '<label for="<%= formId(zpr_key) %>"><%= i18n.t("blocks:solr_documents:zpr:title") %></label>',
+          '</div>',
+        '</div>',
+        '<%= text_area() %>',
+      '</div>'
+    ].join("\n"),
+
+    zpr_key: 'zpr_link'
+  });
+})();

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

@@ -0,0 +1,16 @@
+Spotlight.onLoad(function() {
+  $(".visiblity_toggle").blCheckboxSubmit({
+    //css_class is added to elements added, plus used for id base
+    cssClass: "toggle_visibility",
+    //success is called at the end of the ajax success callback
+    success: function (isPublic){
+      // We store the selector of the label to toggle in a data attribute in the form
+      var docTarget = $($(this).data("label-toggle-target"));
+      if ( isPublic ) {
+        docTarget.removeClass("blacklight-private");
+      } else {
+        docTarget.addClass("blacklight-private");
+      }
+    }
+  });
+});

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

@@ -0,0 +1,9 @@
+(function($) {
+    $.fn.copyEmailAddresses = function( options ) {
+        var clip = new Clipboard('.copy-email-addresses');
+    };
+})( jQuery );
+
+Spotlight.onLoad(function() {
+    $('.copy-email-addresses').copyEmailAddresses();
+});

package/app/assets/javascripts/spotlight/admin/crop.es6

@@ -0,0 +1,310 @@
+export default class Crop {
+  constructor(cropArea) {
+    this.cropArea = cropArea;
+    this.cropArea.data('iiifCropper', this);
+    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');
+
+    this.form = cropArea.closest('form');
+    this.tileSource = null;
+  }
+
+  // Render the cropper environment and add hooks into the autocomplete and upload forms
+  render() {
+    this.setupAutoCompletes();
+    this.setupAjaxFileUpload();
+    this.setupExistingIiifCropper();
+  }
+
+  // Setup the cropper on page load if the field
+  // that holds the IIIF url is populated
+  setupExistingIiifCropper() {
+    if(this.iiifUrlField.val() === '') {
+      return;
+    }
+
+    this.addImageSelectorToExistingCropTool();
+    this.setTileSource(this.iiifUrlField.val());
+  }
+
+  // Display the IIIF Cropper map with the current IIIF Layer (and cropbox, once the layer is available)
+  setupIiifCropper() {
+    this.loaded = false;
+
+    this.renderCropperMap();
+
+    if (this.imageLayer) {
+      // Force a broken layer's container to be an element before removing.
+      // Code in leaflet-iiif land calls delete on the image layer's container when removing,
+      // which errors if there is an issue fetching the info.json and stops further necessary steps to execute.
+      if(!this.imageLayer._container) {
+        this.imageLayer._container = $('<div></div>');
+      }
+      this.cropperMap.removeLayer(this.imageLayer);
+    }
+
+    this.imageLayer = L.tileLayer.iiif(this.tileSource).addTo(this.cropperMap);
+
+    var self = this;
+    this.imageLayer.on('load', function() {
+      if (!self.loaded) {
+        var region = self.getCropRegion();
+        self.positionIiifCropBox(region);
+        self.loaded = true;
+      }
+    });
+
+    this.cropArea.data('initiallyVisible', this.cropArea.is(':visible'));
+  }
+
+  // Get (or initialize) the current crop region from the form data
+  getCropRegion() {
+    var regionFieldValue = this.iiifRegionField.val();
+    if(!regionFieldValue || regionFieldValue === '') {
+      var region = this.defaultCropRegion();
+      this.iiifRegionField.val(region);
+      return region;
+    } else {
+      return regionFieldValue.split(',');
+    }
+  }
+
+  // Calculate a default crop region in the center of the image using the correct aspect ratio
+  defaultCropRegion() {
+    var imageWidth = this.imageLayer.x;
+    var imageHeight = this.imageLayer.y;
+
+    var boxWidth = Math.floor(imageWidth / 2);
+    var boxHeight = Math.floor(boxWidth / this.aspectRatio());
+
+    return [
+      Math.floor((imageWidth - boxWidth) / 2),
+      Math.floor((imageHeight - boxHeight) / 2),
+      boxWidth,
+      boxHeight
+    ];
+  }
+
+  // Calculate the required aspect ratio for the crop area
+  aspectRatio() {
+    var cropWidth = parseInt(this.cropArea.data('crop-width'));
+    var cropHeight = parseInt(this.cropArea.data('crop-height'));
+    return cropWidth / cropHeight;
+  }
+
+  // Position the IIIF Crop Box at the given IIIF region
+  positionIiifCropBox(region) {
+    var bounds = this.unprojectIIIFRegionToBounds(region);
+
+    if (!this.cropBox) {
+      this.renderCropBox(bounds);
+    }
+
+    this.cropBox.setBounds(bounds);
+    this.cropperMap.invalidateSize();
+    this.cropperMap.fitBounds(bounds);
+
+    this.cropBox.editor.editLayer.clearLayers();
+    this.cropBox.editor.refresh();
+    this.cropBox.editor.initVertexMarkers();
+  }
+
+  // Set all of the various input fields to
+  // the appropriate IIIF URL or identifier
+  setIiifFields(iiifObject) {
+    this.setTileSource(iiifObject.tilesource);
+    this.iiifManifestField.val(iiifObject.manifest);
+    this.iiifCanvasField.val(iiifObject.canvasId);
+    this.iiifImageField.val(iiifObject.imageId);
+  }
+
+  // Set the Crop tileSource and setup the cropper
+  setTileSource(source) {
+    if (source == this.tileSource) {
+      return;
+    }
+
+    if (source === null || source === undefined) {
+      console.error('No tilesource provided when setting up IIIF Cropper');
+      return;
+    }
+
+    if (this.cropBox) {
+      this.iiifRegionField.val("");
+    }
+
+    this.tileSource = source;
+    this.iiifUrlField.val(source);
+    this.setupIiifCropper();
+  }
+
+  // Render the Leaflet Map into the crop area
+  renderCropperMap() {
+    if (this.cropperMap) {
+      return;
+    }
+    this.cropperMap = L.map(this.cropArea.attr('id'), {
+      editable: true,
+      center: [0, 0],
+      crs: L.CRS.Simple,
+      zoom: 0,
+      editOptions: {
+        rectangleEditorClass: this.aspectRatioPreservingRectangleEditor(this.aspectRatio())
+      }
+    });
+    this.invalidateMapSizeOnTabToggle();
+  }
+
+  // Render the crop box (a Leaflet editable rectangle) onto the canvas
+  renderCropBox(initialBounds) {
+    this.cropBox = L.rectangle(initialBounds);
+    this.cropBox.addTo(this.cropperMap);
+    this.cropBox.enableEdit();
+    this.cropBox.on('dblclick', L.DomEvent.stop).on('dblclick', this.cropBox.toggleEdit);
+
+    var self = this;
+    this.cropperMap.on('editable:dragend editable:vertex:dragend', function(e) {
+      var bounds = e.layer.getBounds();
+      var region = self.projectBoundsToIIIFRegion(bounds);
+
+      self.iiifRegionField.val(region.join(','));
+    });
+  }
+
+  // Get the maximum zoom level for the IIIF Layer (always 1:1 image pixel to canvas?)
+  maxZoom() {
+    if(this.imageLayer) {
+      return this.imageLayer.maxZoom;
+    }
+  }
+
+  // Take a Leaflet LatLngBounds object and transform it into a IIIF [x, y, w, h] region
+  projectBoundsToIIIFRegion(bounds) {
+    var min = this.cropperMap.project(bounds.getNorthWest(), this.maxZoom());
+    var max = this.cropperMap.project(bounds.getSouthEast(), this.maxZoom());
+    return [
+      Math.max(Math.floor(min.x), 0),
+      Math.max(Math.floor(min.y), 0),
+      Math.floor(max.x - min.x),
+      Math.floor(max.y - min.y)
+    ];
+  }
+
+  // Take a IIIF [x, y, w, h] region and transform it into a Leaflet LatLngBounds
+  unprojectIIIFRegionToBounds(region) {
+    var minPoint = L.point(parseInt(region[0]), parseInt(region[1]));
+    var maxPoint = L.point(parseInt(region[0]) + parseInt(region[2]), parseInt(region[1]) + parseInt(region[3]));
+
+    var min = this.cropperMap.unproject(minPoint, this.maxZoom());
+    var max = this.cropperMap.unproject(maxPoint, this.maxZoom());
+    return L.latLngBounds(min, max);
+  }
+
+  // TODO: Add accessors to update hidden inputs with IIIF uri/ids?
+
+  // Setup autocomplete inputs to have the iiif_cropper context
+  setupAutoCompletes() {
+    var input = $('[data-behavior="autocomplete"]', this.cropTool);
+    input.data('iiifCropper', this);
+  }
+
+  setupAjaxFileUpload() {
+    this.fileInput = $('input[type="file"]', this.cropTool);
+    this.fileInput.change(() => this.uploadFile());
+  }
+
+  addImageSelectorToExistingCropTool() {
+    if(this.iiifManifestField.val() === '') {
+      return;
+    }
+
+    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());
+  }
+
+  invalidateMapSizeOnTabToggle() {
+    var tabs = $('[role="tablist"]', this.form);
+    var self = this;
+    tabs.on('shown.bs.tab', function() {
+      if(self.cropArea.data('initiallyVisible') === false && self.cropArea.is(':visible')) {
+        self.cropperMap.invalidateSize();
+        // Because the map size is 0,0 when image is loading (not visible) we need to refit the bounds of the layer
+        self.imageLayer._fitBounds();
+        self.cropArea.data('initiallyVisible', null);
+      }
+    });
+  }
+
+  // Get all the form data with the exception of the _method field.
+  getData() {
+    var data = new FormData(this.form[0]);
+    data.append('_method', null);
+    return data;
+  }
+
+  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.
+    $.ajax({
+      url: url,  //Server script to process data
+      type: 'POST',
+      success: (data, stat, xhr) => this.successHandler(data, stat, xhr),
+      // error: errorHandler,
+      // Form data
+      data: this.getData(),
+      headers: {
+        'X-CSRF-Token': ujs.csrfToken() || ''
+      },
+      //Options to tell jQuery not to process data or worry about content-type.
+      cache: false,
+      contentType: false,
+      processData: false
+    });
+  }
+
+  successHandler(data, stat, xhr) {
+    this.setIiifFields({ tilesource: data.tilesource });
+    this.setUploadId(data.id);
+  }
+
+  setUploadId(id) {
+    $('#' + this.formPrefix + "_upload_id").val(id);
+  }
+
+  aspectRatioPreservingRectangleEditor(aspect) {
+    return L.Editable.RectangleEditor.extend({
+      extendBounds: function (e) {
+        var index = e.vertex.getIndex(),
+            next = e.vertex.getNext(),
+            previous = e.vertex.getPrevious(),
+            oppositeIndex = (index + 2) % 4,
+            opposite = e.vertex.latlngs[oppositeIndex];
+
+        if ((index % 2) == 1) {
+          // calculate horiz. displacement
+          e.latlng.update([opposite.lat + ((1 / aspect) * (opposite.lng - e.latlng.lng)), e.latlng.lng]);
+        } else {
+          // calculate vert. displacement
+          e.latlng.update([e.latlng.lat, (opposite.lng - (aspect * (opposite.lat - e.latlng.lat)))]);
+        }
+        var bounds = new L.LatLngBounds(e.latlng, opposite);
+        // Update latlngs by hand to preserve order.
+        previous.latlng.update([e.latlng.lat, opposite.lng]);
+        next.latlng.update([opposite.lat, e.latlng.lng]);
+        this.updateBounds(bounds);
+        this.refreshVertexMarkers();
+      }
+    });
+  }
+}

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

@@ -0,0 +1,25 @@
+Spotlight.onLoad(function() {
+  $('[data-behavior="iiif-cropper"]').croppable();
+});
+
+
+/*
+  IIIF image cropping plugin
+  Add iiif-crop data-attributes to file input (with data-behavior='iiif-cropper') to instantiate.
+*/
+
+(function($) {
+  $.fn.croppable = function() {
+    var croppables = this;
+
+    var Crop = spotlightAdminCrop;
+    $(croppables).each(function() {
+      var cropElement = $(this);
+      var c = new Crop(cropElement);
+
+      c.render();
+    });
+
+    return this;
+  };
+})(jQuery);

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

@@ -0,0 +1,54 @@
+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() {
+      $(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'));
+
+        // hide the edit-in-place affordance icon while in edit mode
+        $(this).addClass('hide-edit-icon');
+        $label.hide();
+        $input.val($label.text());
+        $input.attr('type', 'text');
+        $input.select();
+        $input.focus();
+
+        $input.on('keypress', function(e) {
+          if(e.which == 13) {
+            $input.trigger('blur.inplaceedit');
+            return false;
+          }
+        });
+
+        $input.on('blur.inplaceedit', function() {
+          var value = $input.val();
+
+          if ($.trim(value).length == 0) {
+            $input.val($label.text());
+          } else {
+            $label.text(value);
+          }
+
+          $label.show();
+          $input.attr('type', 'hidden');
+          // when leaving edit mode, should no longer hide edit-in-place affordance icon
+          $("[data-in-place-edit-target]").removeClass('hide-edit-icon');
+
+          return false;
+        });
+
+        return false;
+      });
+    });
+
+    return this;
+  };
+})(jQuery);

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

@@ -0,0 +1,37 @@
+Spotlight.onLoad(function() {
+  $('[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', '');
+    });
+  });
+});

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

@@ -0,0 +1,58 @@
+Spotlight.onLoad(function() {
+
+  // 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();
+  });
+});