blacklight-spotlight 0.32.0 → 0.33.0

data/app/assets/javascripts/spotlight/croppable.js

@@ -1,118 +1,21 @@
 Spotlight.onLoad(function() {
-  $('[data-croppable="true"]').croppable();
+  $('[data-behavior="iiif-cropper"]').croppable();
 });
 
 
 /*
-  Croppable plugin
-  Implements http://deepliquid.com/content/Jcrop.html
-  Add jcrop data-attributes to file input (with data-croppable='true') to instantiate.
-  Adds initialSetSelect option to set a select box on the intial upload of an object.
+  IIIF image cropping plugin
+  Add iiif-crop data-attributes to file input (with data-behavior='iiif-cropper') to instantiate.
 */
 
 (function($) {
-  $.fn.croppable = function(opts) {
+  $.fn.croppable = function() {
     var croppables = this;
-    var opts = opts;
-    var pluginDefults = {
-      setSelect: "[0,0,200,200]"
-    }
 
+    var Crop = require('spotlight/crop');
     $(croppables).each(function() {
-      var fileUpload = $(this);
-      var cropid = fileUpload.data('selector') || this.id;
-      var cropinfo = $("#" + cropid + "_crop").val();
-      var cropbox = $("#" + cropid + "_cropbox");
-      var previewbox = $("#" + cropid + "_previewbox");
-      var jcropLoadingArea = cropbox.closest('.croppable-loading-area');
-
-      if(cropinfo == '[0,0,0,0]'){
-        cropinfo = null;
-      }
-
-      var defaults = {
-        setSelect: $.parseJSON(cropinfo || JSON.stringify(fileUpload.data('initialSetSelect')) || pluginDefults['setSelect']),
-        selector: cropid
-      }
-
-      var options = $.extend(defaults, fileUpload.data(), opts);
-
-      function updatePreview(coords) {
-        previewbox.css({
-          width: Math.round(100/coords.w * cropbox.width()) + 'px',
-          height: Math.round(100/coords.h * cropbox.height()) + 'px',
-          marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px',
-          marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'
-        });
-      };
-
-      function update(coords) {
-        $('#' + cropid + '_crop_x').val(coords.x);
-        $('#' + cropid + '_crop_y').val(coords.y);
-        $('#' + cropid + '_crop_w').val(coords.w);
-        $('#' + cropid + '_crop_h').val(coords.h);
-        updatePreview(coords);
-      };
-
-      if(!cropbox.data('jcropProcessed')){
-        // Hack to get cropbox image element to be loaded under turbolinks
-        if (cropbox[0].complete === false && cropbox[0].src == window.location.href) {
-           // add 1x1 gif to to img tag so it's loaded
-          cropbox[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
-        }
-
-        cropbox.Jcrop(
-          $.extend(options, {
-            onSelect: update,
-            onChange: update
-          })
-        );
-      }
-      cropbox.data('jcropProcessed', 'true');
-
-      cropbox.on('load', function(){
-        jcropLoadingArea.removeClass("loading-jcrop");
-        var jcrop_api = cropbox.data('Jcrop');
-        if(jcrop_api) {
-          jcrop_api.setSelect(options['setSelect']);
-          serializeObservedForms(observedForms());
-        }
-      });
-
-      fileUpload.on('change', function() {
-        var jcrop_api = cropbox.data('Jcrop');
-        jcropLoadingArea.addClass("loading-jcrop");
-        if(this.files){
-          var file = this.files[0];
-          var img = cropbox[0];
-
-          img.file = file;
-
-          var reader = new FileReader();
-
-          reader.onload = (function(aImg) { return function(e) {
-            jcrop_api.setImage(e.target.result);
-            cropbox.css({width: "", height: ""});
-            cropbox[0].src = e.target.result;
-            if(previewbox.length > 0) {
-              previewbox[0].src = e.target.result;
-            }
-            jcrop_api.setSelect(options['setSelect']);
-          }; })(img);
-          reader.readAsDataURL(file);
-        }else{
-          var url = $(this).attr('value');
-          jcrop_api.setImage(url);
-          cropbox.css({width: "", height: ""});
-          cropbox[0].src = url;
-          if(previewbox.length > 0) {
-            previewbox[0].src = url;
-          }
-          jcrop_api.setSelect(options['setSelect']);
-        }
-        cropbox.closest('.missing-croppable').removeClass('missing-croppable');
-      });
-
+      var cropElement = $(this);
+      new Crop(cropElement);
     });
 
     return this;

data/app/assets/javascripts/spotlight/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())
+  }
+}

data/app/assets/javascripts/spotlight/multi_image_selector.js

@@ -1,18 +1,20 @@
 // Module to add multi-image selector to widget panels
 
 (function(){
-  $.fn.multiImageSelector = function(image_versions) {
-    var changeLink          = $(" <a href='javascript:;'>Change</a>"),
+  $.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>"),
+        thumbList           = $("<ul class='pagination'></ul>"),
         panel;
 
-    var thumbnails = $.map(image_versions, function(e) { return e['thumb']; });
+    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();
@@ -20,16 +22,21 @@
     }
     function addChangeLink() {
       $('[data-panel-image-pagination]', panel)
-        .html("Image <span data-current-image='true'>" + indexOf(currentThumb()) + "</span> of " + image_versions.length)
+        .html("Image <span data-current-image='true'>" + indexOf(activeImageId) + "</span> of " + image_versions.length)
         .show()
+        .append(" ")
         .append(changeLink);
       addChangeLinkBehavior();
     }
-    function currentThumb(){
-      return $("[data-item-grid-thumbnail]", panel).attr('value');
+
+    function destroyExistingImageSelector() {
+      var pagination = $('[data-panel-image-pagination]', panel);
+      pagination.html('');
+      pagination.next('.' + thumbsListContainer.attr('class')).remove();
     }
+
     function indexOf(thumb){
-      if( (index = thumbnails.indexOf(thumb)) > -1 ){
+      if( (index = imageIds.indexOf(thumb)) > -1 ){
         return index + 1;
       } else {
         return 1;
@@ -91,28 +98,39 @@
     function updateActiveThumb(){
       $('li', thumbList).each(function(){
         var item = $(this);
-        if($('img', item).attr('data-src') == currentThumb()){
+        if($('img', item).data('image-id') == activeImageId){
           item.addClass('active');
         }
       });
     }
     function swapChangeLinkText(link){
       link.text(
-        link.text() == 'Change' ? 'Cancel' : 'Change'
+        link.text() == 'Change' ? 'Close' : 'Change'
       )
     }
+
     function addThumbsToList(){
       $.each(image_versions, function(i){
-        var listItem = $('<li><a href="javascript:;"><img data-full-image="' + image_versions[i]['full'] +'" data-src="' + image_versions[i]['thumb'] +'" /></a></li>');
+        var listItem = $('<li><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');
-          $('li', thumbList).removeClass('active');
+
+          // mark the current selection as active
+          $('li.active', thumbList).removeClass('active');
           $(this).addClass('active');
+
+          // update the multi-image selector image
           $(".pic.thumbnail img", panel).attr("src", src);
-          $("[data-item-grid-thumbnail]", panel).attr('value', src);
-          $("[data-item-grid-full-image]", panel).attr('value', $('img', $(this)).data('full-image'));
-          $('[data-panel-image-pagination] [data-current-image]', panel).text(indexOf(currentThumb()));
-          scrollToActiveThumb()
+
+          $('[data-panel-image-pagination] [data-current-image]', panel).text(
+            $('li', thumbList).index($(this)) + 1
+          );
+          scrollToActiveThumb();
+          if (typeof clickCallback === 'function' ) {
+            clickCallback(image_versions[i]);
+          }
         });
         $("img", listItem).on('load', function() {
           updateThumbListWidth();

data/app/assets/javascripts/spotlight/pages.js.erb

@@ -7,7 +7,7 @@ Spotlight.onLoad(function(){
     uploadUrl: $('[data-attachment-endpoint]').data('attachment-endpoint'),
     ajaxOptions: {
       headers: {
-        'X-CSRF-Token': $.rails.csrfToken()
+        'X-CSRF-Token': $.rails.csrfToken() || ''
       },
       credentials: 'same-origin'
     }

data/app/assets/javascripts/spotlight/reindex_monitor.js

@@ -23,8 +23,8 @@ Spotlight.onLoad(function() {
 
     function success(data) {
       if (data.recently_in_progress) {
-        monitorPanel().show();
         updateMonitorPanel(data);
+        monitorPanel().show();
       } else {
         monitorPanel().hide();
       }
@@ -48,6 +48,10 @@ Spotlight.onLoad(function() {
         .attr('aria-valuenow', percentage)
         .css('width', percentage + '%')
         .text(percentage + '%');
+
+      if (data.finished) {
+        progressBar().removeClass('active').removeClass('progress-bar-striped');
+      }
     }
 
     function updatePanelErrorMessage(data) {

data/app/assets/javascripts/spotlight/search_typeahead.js

@@ -52,71 +52,57 @@ function itemsTemplate() {
   return '<div class="autocomplete-item{{#if private}} blacklight-private{{/if}}">{{#if thumbnail}}<div class="document-thumbnail thumbnail"><img src="{{thumbnail}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>';
 }
 
-function addAutocompletetoMastheadUpload(){
-  if($('[data-masthead-typeahead]').length > 0) {
-    $('[data-masthead-typeahead]').spotlightSearchTypeAhead({bloodhound: itemsBloodhound(), template: itemsTemplate()}).on('click', function() {
+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 remoteUrlField = $($(this).data('remoteUrlField'));
       var panel = $($(this).data('target-panel'));
-      swapInputForPanel($(this), panel, data);
+      addImageSelector($(this), panel, data.iiif_manifest, true);
       $($(this).data('id-field')).val(data['global_id']);
-      remoteUrlField.val(data['full_images'][0]).trigger('change');
       $(this).attr('type', 'text');
-      $('.thumbs-list li', panel).on('click.masthead', function(){
-        var index = $('.thumbs-list li').index($(this));
-        remoteUrlField.val(data['full_images'][index]).trigger('change');
-      });
     });
   }
 }
 
-function addAutocompletetoFeaturedImage() {
-  if($('[data-featured-item-typeahead]').length > 0) {
-    $('[data-featured-item-typeahead]').spotlightSearchTypeAhead({bloodhound: itemsBloodhound(), template: itemsTemplate()}).on('click', function() {
-      $(this).select();
-    }).on('change', function() {
-      $($(this).data('id-field')).val("");
-    }).on('typeahead:selected typeahead:autocompleted', function(e, data) {
-      $($(this).data('id-field')).val(data['id']);
-    });
+function addImageSelector(input, panel, manifestUrl, initialize) {
+  if (!manifestUrl) {
+    showNonIiifAlert(input);
+    return;
   }
-}
-
-function swapInputForPanel(input, panel, data){
-  $(".pic.thumbnail img", panel).attr("src", data['thumbnail']).show();
-  $("[data-item-grid-thumbnail]", panel).attr('value', data['thumbnail']);
-  $("[data-panel-title]", panel).text(data['title']);
+  var cropper = input.data('iiifCropper');
+  $.ajax(manifestUrl).success(
+    function(manifest) {
+      var Iiif = require('spotlight/iiif');
+      var iiifManifest = new Iiif(manifestUrl, manifest);
 
-  if(data['private']) {
-    panel.addClass("blacklight-private");
-  }
+      var thumbs = iiifManifest.imagesArray();
 
-  $("[data-panel-id-display]", panel).text(data['id']);
-  $(input.data('id_field')).val(data['id']);
+      hideNonIiifAlert(input);
 
-  panel.multiImageSelector(data['image_versions']);
+      if (initialize) {
+        cropper.setIiifFields(thumbs[0]);
+        panel.multiImageSelector(); // Clears out existing selector
+      }
 
-  $(input.data('checkbox_field')).prop('checked', true);
-  input.attr('type', 'hidden');
-  panel.show();
+      if(thumbs.length > 1) {
+        panel.show();
+        panel.multiImageSelector(thumbs, function(selectorImage) {
+          cropper.setIiifFields(selectorImage);
+        }, cropper.iiifImageField.val());
+      }
+    }
+  );
 }
-function addRemoveAutocompletedPanelBehavior() {
-  $("[data-item-grid-panel-remove]").on('click', function(e){
-    e.preventDefault();
-    var listItem = $(this).closest('li.dd-item');
-    var textField = $("[data-target-panel='#" + listItem.attr('id') + "']");
-    $("input[type='hidden']", listItem).prop('value', '');
-    textField.attr('value', '');
-    textField.attr('type', 'text');
-    listItem.hide();
-  });
+
+function showNonIiifAlert(input){
+  input.parent().prev('[data-behavior="non-iiif-alert"]').show();
 }
-function replaceName(element, i) {
-  element.prop('name', element.prop('name').replace(/\d/, i));
+
+function hideNonIiifAlert(input){
+  input.parent().prev('[data-behavior="non-iiif-alert"]').hide();
 }
 
 Spotlight.onLoad(function(){
   addAutocompletetoFeaturedImage();
-  addAutocompletetoMastheadUpload();
 });

data/app/assets/javascripts/spotlight/sir-trevor/locales.js

@@ -27,8 +27,8 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
   },
 
   featured_pages: {
-    title:  "Feature Pages",
-    description: "This widget highlights feature pages. Each highlighted item links to the corresponding feature page."
+    title:  "Pages",
+    description: "This widget highlights pages from this exhibit. Each highlighted item links to the corresponding page."
   },
 
   resources: {
@@ -55,6 +55,9 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
       placeholder: "Select...",
       primary: "Primary caption",
       secondary: "Secondary caption"
+    },
+    zpr: {
+      title: 'Display ZPR link'
     }
   },
 

data/app/assets/javascripts/spotlight/zpr_links.js.erb

@@ -0,0 +1,30 @@
+Spotlight.onLoad(function(){
+  $('.zpr-link').on('click', function() {
+    $('#ajax-modal .modal-content').html('<div id="osd-modal-container"></div>');
+    var controls = [
+      '<div class="controls">',
+      '  <a id="osd-zoom-in"><span class="glyphicon glyphicon-plus-sign"></span></a>',
+      '  <a id="osd-zoom-out"><span class="glyphicon glyphicon-minus-sign"></span></a>',
+      '  <a id="osd-home"><span class="glyphicon glyphicon-resize-small"></span></a>',
+      '  <a id="osd-full-page"><span class="glyphicon glyphicon-fullscreen"></span></a>',
+      '</div>'
+    ].join("\n");
+
+    $('#osd-modal-container').append(controls);
+    $('#osd-modal-container').append('<div id="osd-div"></div>');
+    $('#osd-div').css('height', '400px');
+
+    $('#ajax-modal').modal('show');
+
+    OpenSeadragon({
+      id: 'osd-div',
+      zoomInButton:     "osd-zoom-in",
+      zoomOutButton:    "osd-zoom-out",
+      homeButton:       "osd-home",
+      fullPageButton:   "osd-full-page",
+      nextButton:       "osd-next",
+      previousButton:   "osd-previous",
+      tileSources: [$(this).data('iiif-tilesource')]
+    })
+  });
+});