spotlight-frontend 3.5.0-beta.1

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

@@ -0,0 +1,86 @@
+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';
+
+  /*
+  * SerializedForm is built as a singleton jQuery plugin. It needs to be able to
+  * handle instantiation from multiple sources, and use the [data-form-observer]
+  * as global state object.
+  */
+  $.SerializedForm = function () {
+    var $serializedForm;
+    var plugin = this;
+
+    // Store form serialization in data attribute
+    function serializeFormStatus () {
+      $serializedForm.data('serialized-form', formSerialization($serializedForm));
+    }
+
+    // Do custom serialization of the sir-trevor form data. This needs to be a
+    // passed in argument for comparison later on.
+    function formSerialization (form) {
+      var content_editable = [];
+      var i = 0;
+      $("[contenteditable='true']", form).each(function(){
+        content_editable.push('&contenteditable_' + i + '=' + $(this).text());
+      });
+      return form.serialize() + content_editable.join();
+    }
+
+    // Unbind observing form on submit (which we have to do because of turbolinks)
+    function unbindObservedFormSubmit () {
+      $serializedForm.on('submit', function () {
+        $(this).data('being-submitted', true);
+      });
+    }
+
+    // Get the stored serialized form status
+    function serializedFormStatus () {
+      return $serializedForm.data('serialized-form');
+    }
+
+    // Check all observed forms on page for status change
+    plugin.observedFormsStatusHasChanged = function () {
+      var unsaved_changes = false;
+      $('[data-form-observer]').each(function (){
+        if ( !$(this).data("being-submitted") ) {
+          if (serializedFormStatus() != formSerialization($(this))) {
+            unsaved_changes = true;
+          }
+        }
+      });
+      return unsaved_changes;
+    }
+
+    function init () {
+      $serializedForm = $('[data-form-observer]');
+      serializeFormStatus();
+      unbindObservedFormSubmit();
+    }
+
+    init();
+
+    return plugin;
+  };
+})(jQuery);

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

@@ -0,0 +1,54 @@
+export default class Iiif {
+  constructor(manifestUrl, manifest) {
+    this.manifestUrl = manifestUrl;
+    this.manifest = manifest;
+  }
+
+  sequences() {
+    var it = {};
+    var context = this;
+    it[Symbol.iterator] = function*() {
+      for (let sequence of context.manifest.sequences) {
+        yield sequence;
+      };
+    }
+    return it;
+  }
+
+  canvases() {
+    var it = {};
+    var context = this;
+    it[Symbol.iterator] = function*() {
+      for (let sequence of context.sequences()) {
+        for (let canvas of sequence.canvases) {
+          yield canvas;
+        }
+      }
+    }
+    return it;
+  }
+
+  images() {
+    var it = {};
+    var context = this;
+    it[Symbol.iterator] = function*() {
+      for (let canvas of context.canvases()) {
+        for (let image of canvas.images) {
+          var iiifService = image.resource.service['@id'];
+          yield {
+            'thumb': iiifService + '/full/!100,100/0/default.jpg',
+            'tilesource': iiifService + '/info.json',
+            'manifest': context.manifestUrl,
+            'canvasId': canvas['@id'],
+            'imageId': image['@id']
+          };
+        }
+      }
+    }
+    return it;
+  }
+
+  imagesArray() {
+    return Array.from(this.images())
+  }
+}

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

@@ -0,0 +1,16 @@
+//= require underscore
+//= require eventable
+//= require sir-trevor
+//= require nestable
+//= require parameterize
+//= require bootstrap-tagsinput
+//= require jquery.serializejson
+//= require clipboard
+//= require leaflet
+//= require leaflet-iiif
+//= require Leaflet.Editable
+//= require Path.Drag
+//= require MutationObserver
+
+//= require polyfill.min.js
+//= require_tree .

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

@@ -0,0 +1,12 @@
+Spotlight.onLoad(function(){
+
+
+  function delete_lock(el) {
+    $.ajax({ url: $(el).data('lock'), type: 'POST', data: { _method: "delete" }, async: false});
+    $(el).removeAttr('data-lock');
+  }
+
+  $('[data-lock]').on('click', function(e) {
+    delete_lock(this);
+  });
+});

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

@@ -0,0 +1,158 @@
+// Module to add multi-image selector to widget panels
+
+(function(){
+  $.fn.multiImageSelector = function(image_versions, clickCallback, activeImageId) {
+    var changeLink          = $("<a href='javascript:;'>Change</a>"),
+        thumbsListContainer = $("<div class='thumbs-list' style='display:none'></div>"),
+        thumbList           = $("<ul></ul>"),
+        panel;
+
+    var imageIds = $.map(image_versions, function(e) { return e['imageId']; });
+
+    return init(this);
+
+    function init(el) {
+      panel = el;
+
+      destroyExistingImageSelector();
+      if(image_versions && image_versions.length > 1) {
+        addChangeLink();
+        addThumbsList();
+      }
+    }
+    function addChangeLink() {
+      $('[data-panel-image-pagination]', panel)
+        .html("Image <span data-current-image='true'>" + indexOf(activeImageId) + "</span> of " + image_versions.length)
+        .show()
+        .append(" ")
+        .append(changeLink);
+      addChangeLinkBehavior();
+    }
+
+    function destroyExistingImageSelector() {
+      var pagination = $('[data-panel-image-pagination]', panel);
+      pagination.html('');
+      pagination.next('.' + thumbsListContainer.attr('class')).remove();
+    }
+
+    function indexOf(thumb){
+      if( (index = imageIds.indexOf(thumb)) > -1 ){
+        return index + 1;
+      } else {
+        return 1;
+      }
+    }
+    function addChangeLinkBehavior() {
+      changeLink.on('click', function(){
+        thumbsListContainer.slideToggle();
+        updateThumbListWidth();
+        addScrollBehavior();
+        scrollToActiveThumb();
+        loadVisibleThumbs();
+        swapChangeLinkText($(this));
+      });
+    }
+    function updateThumbListWidth() {
+      var width = 0;
+      $('li', thumbList).each(function(){
+        width += $(this).outerWidth();
+      });
+      thumbList.width(width + 5);
+    }
+    function loadVisibleThumbs(){
+      var viewportWidth = thumbsListContainer.width();
+      var width = 0;
+      $('li', thumbList).each(function(){
+        var thisThumb  = $(this),
+            image      = $('img', thisThumb),
+            totalWidth = width += thisThumb.width();
+            position   = (thumbList.position().left + totalWidth) - thisThumb.width();
+
+        if(position >= 0 && position < viewportWidth) {
+          image.prop('src', image.data('src'));
+        }
+      });
+    }
+    function addScrollBehavior(){
+      thumbsListContainer.scrollStop(function(){
+        loadVisibleThumbs();
+      });
+    }
+    function scrollToActiveThumb(){
+      var halfContainerWidth      = (thumbsListContainer.width() / 2),
+          activeThumbLeftPosition = ($('.active', thumbList).position() || $('li', thumbList).first().position()).left,
+          halfActiveThumbWidth    = ($('.active', thumbList).width() / 2);
+      thumbsListContainer.scrollLeft(
+        (activeThumbLeftPosition - halfContainerWidth) + halfActiveThumbWidth
+      );
+    }
+    function addThumbsList() {
+      addThumbsToList();
+      updateActiveThumb();
+      $('.card-header', panel).append(
+        thumbsListContainer.append(
+          thumbList
+        )
+      );
+    }
+    function updateActiveThumb(){
+      $('li', thumbList).each(function(){
+        var item = $(this);
+        if($('img', item).data('image-id') == activeImageId){
+          item.addClass('active');
+        }
+      });
+    }
+    function swapChangeLinkText(link){
+      link.text(
+        link.text() == 'Change' ? 'Close' : 'Change'
+      )
+    }
+
+    function addThumbsToList(){
+      $.each(image_versions, function(i){
+        var listItem = $('<li data-index="' + i + '"><a href="javascript:;"><img src="' + image_versions[i]['thumb'] +'" data-image-id="' + image_versions[i]['imageId'] +'" /></a></li>');
+        listItem.on('click', function(){
+          // get the current image id
+          var imageid = $('img', $(this)).data('image-id');
+          var src = $('img', $(this)).attr('src');
+
+          if (typeof clickCallback === 'function' ) {
+            clickCallback(image_versions[i]);
+          }
+
+          // mark the current selection as active
+          $('li.active', thumbList).removeClass('active');
+          $(this).addClass('active');
+
+          // update the multi-image selector image
+          $(".pic img.img-thumbnail", panel).attr("src", src);
+
+          $('[data-panel-image-pagination] [data-current-image]', panel).text(
+            $('li', thumbList).index($(this)) + 1
+          );
+          scrollToActiveThumb();
+        });
+        $("img", listItem).on('load', function() {
+          updateThumbListWidth();
+        });
+        thumbList.append(listItem);
+      });
+    }
+  };
+
+})(jQuery);
+
+// source: http://stackoverflow.com/questions/14035083/jquery-bind-event-on-scroll-stops
+jQuery.fn.scrollStop = function(callback) {
+  $(this).scroll(function() {
+    var self  = this,
+    $this = $(self);
+
+    if ($this.data('scrollTimeout')) {
+      clearTimeout($this.data('scrollTimeout'));
+    }
+
+    $this.data('scrollTimeout', setTimeout(callback, 250, self));
+  });
+};

package/app/assets/javascripts/spotlight/admin/pages.js.erb

@@ -0,0 +1,40 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+Spotlight.onLoad(function(){
+  // Set a ujs adapter to support both rails-ujs and jquery-ujs
+  var ujs = typeof Rails === 'undefined' ? $.rails : Rails;
+  SirTrevor.setDefaults({
+    iconUrl: <%= asset_path('spotlight/blocks/sir-trevor-icons.svg').to_json %>,
+    uploadUrl: $('[data-attachment-endpoint]').data('attachment-endpoint'),
+    ajaxOptions: {
+      headers: {
+        'X-CSRF-Token': ujs.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);
+  }
+});

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

@@ -0,0 +1,148 @@
+Spotlight.onLoad(function() {
+  $('[data-behavior="progress-panel"]').progressMonitor();
+});
+
+(function($) {
+  $.fn.progressMonitor = function() {
+    var monitorElements = this;
+    var defaultRefreshRate = 3000;
+    var panelContainer;
+    var pollers = [];
+
+    $(monitorElements).each(function() {
+      panelContainer = $(this);
+      panelContainer.hide();
+      var monitorUrl = panelContainer.data('monitorUrl');
+      var refreshRate = panelContainer.data('refreshRate') || defaultRefreshRate;
+      pollers.push(
+        setInterval(function() {
+          checkMonitorUrl(monitorUrl);
+        }, refreshRate)
+      );
+    });
+
+    // Clear the intervals on turbolink:click event (e.g. when the user navigates away from the page)
+    $(document).on('turbolinks:click', function() {
+      if (pollers.length > 0) {
+        $.each(pollers, function() {
+          clearInterval(this);
+        });
+        pollers = [];
+      }
+    });
+
+    function checkMonitorUrl(url) {
+      $.ajax(url).done(success).fail(fail);
+    }
+
+    function success(data) {
+      if (data.recently_in_progress) {
+        updateMonitorPanel(data);
+        monitorPanel().show();
+      } else {
+        monitorPanel().hide();
+      }
+    }
+
+    function fail() { monitorPanel().hide(); }
+
+    function updateMonitorPanel(data) {
+      panelStartDate().text(data.started_at);
+      panelCurrentDate().text(data.updated_at);
+      panelCompletedDate().text(data.updated_at);
+      panelCurrent().text(data.completed);
+      setPanelCompleted(data.finished);
+      updatePanelTotals(data);
+      updatePanelErrorMessage(data);
+      updateProgressBar(data);
+
+      panelContainer.show();
+    }
+
+    function updateProgressBar(data) {
+      var percentage = calculatePercentage(data);
+      progressBar()
+        .attr('aria-valuemax', data.total)
+        .attr('aria-valuenow', percentage)
+        .css('width', percentage + '%')
+        .text(percentage + '%');
+
+      if (data.finished) {
+        progressBar().removeClass('active').removeClass('progress-bar-striped');
+      }
+    }
+
+    function updatePanelErrorMessage(data) {
+      // We currently do not store this state,
+      // but with this code we can in the future.
+      if ( data.errored ) {
+        panelErrorMessage().show();
+      } else {
+        panelErrorMessage().hide();
+      }
+    }
+
+    function updatePanelTotals(data) {
+      panelTotals().each(function() {
+        $(this).text(data.total);
+      });
+    }
+
+    function calculatePercentage(data) {
+      if (data.total == 0) return 0;
+      return Math.floor((data.completed / data.total) * 100);
+    }
+
+    function monitorPanel() {
+      return panelContainer.find('.index-status');
+    }
+
+    function panelStartDate() {
+      return monitorPanel()
+               .find('[data-behavior="monitor-start"]')
+               .find('[data-behavior="date"]');
+    }
+
+    function panelCurrentDate() {
+      return monitorPanel()
+               .find('[data-behavior="monitor-current"]')
+               .find('[data-behavior="date"]');
+    }
+
+    function panelCompletedDate() {
+      return monitorPanel()
+               .find('[data-behavior="monitor-completed"]')
+               .find('[data-behavior="date"]');
+    }
+
+    function panelTotals() {
+      return monitorPanel().find('[data-behavior="total"]');
+    }
+
+    function panelCurrent() {
+      return monitorPanel()
+               .find('[data-behavior="monitor-current"]')
+               .find('[data-behavior="completed"]');
+    }
+
+    function progressBar() {
+      return monitorPanel().find('.progress-bar');
+    }
+
+    function panelErrorMessage() {
+      return monitorPanel().find('[data-behavior="monitor-error"]');
+    }
+
+    function setPanelCompleted(finished) {
+      var panel = monitorPanel().find('[data-behavior="monitor-completed"]');
+
+      if (finished) {
+        panel.show();
+      } else {
+        panel.hide();
+      }
+    }
+
+    return this;
+  };
+})(jQuery);

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

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

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

@@ -0,0 +1,108 @@
+//= require typeahead.bundle.min.js
+//= require handlebars
+
+(function($){
+  $.fn.spotlightSearchTypeAhead = function( options ) {
+    $.each(this, function(){
+      addAutocompleteBehavior($(this));
+    });
+
+    function addAutocompleteBehavior( typeAheadInput, settings ) {
+      var settings = $.extend({
+        displayKey: 'title',
+        minLength: 0,
+        highlight: (typeAheadInput.data('autocomplete-highlight') || true),
+        hint: (typeAheadInput.data('autocomplete-hint') || false),
+        autoselect: (typeAheadInput.data('autocomplete-autoselect') || true)
+      }, options);
+
+      typeAheadInput.typeahead(settings, {
+        displayKey: settings.displayKey,
+        source: settings.bloodhound.ttAdapter(),
+        templates: {
+          suggestion: Handlebars.compile(settings.template)
+        }
+      })
+    }
+    return this;
+  }
+})( jQuery );
+
+function itemsBloodhound() {
+  var results = new Bloodhound({
+    datumTokenizer: function(d) {
+      return Bloodhound.tokenizers.whitespace(d.title);
+    },
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    limit: 100,
+    remote: {
+      url: $('form[data-autocomplete-exhibit-catalog-path]').data('autocomplete-exhibit-catalog-path').replace("%25QUERY", "%QUERY"),
+      filter: function(response) {
+        return $.map(response['docs'], function(doc) {
+          return doc;
+        })
+      }
+    }
+  });
+  results.initialize();
+  return results;
+};
+
+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(){
+  if($('[data-featured-image-typeahead]').length > 0) {
+    $('[data-featured-image-typeahead]').spotlightSearchTypeAhead({bloodhound: itemsBloodhound(), template: itemsTemplate()}).on('click', function() {
+      $(this).select();
+    }).on('typeahead:selected typeahead:autocompleted', function(e, data) {
+      var panel = $($(this).data('target-panel'));
+      addImageSelector($(this), panel, data.iiif_manifest, true);
+      $($(this).data('id-field')).val(data['global_id']);
+      $(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();
+});

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

@@ -0,0 +1,34 @@
+Spotlight.onLoad(function() {
+  $('[data-input-select-target]').selectRelatedInput();
+});
+/*
+  Simple plugin to select form elements
+  when other elements are clicked.
+*/
+(function($) {
+  $.fn.selectRelatedInput = function() {
+    var clickElements = this;
+
+    $(clickElements).each(function() {
+      var target = $($(this).data('input-select-target'));
+
+      var event;
+
+      if ($(this).is("select")) {
+        event = 'change';
+      } else {
+        event = 'click';
+      }
+
+      $(this).on(event, function() {
+        if (target.is(":checkbox") || target.is(":radio")) {
+          target.prop('checked', true);
+        } else {
+          target.focus();
+        }
+      });
+    });
+
+    return this;
+  };
+})(jQuery);