blacklight-spotlight 0.32.0 → 0.33.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1fd2b950f32f603a3ee0f2db98c3b91e5cad5f9
-  data.tar.gz: 6cb02f70515f59a51422ef7cf1309216351b091f
+  metadata.gz: f7c69b50a875632bd6a6ae219dfc690711842fb4
+  data.tar.gz: ca0be34e748aaa13607f622de0044fe2d9150503
 SHA512:
-  metadata.gz: 113fc7cd7d398ecde9d12c8428aeee286b0604267ac11e4222656766760620a11f800a33484d6c1878590f94f367443794d9baa49facaeca9adfb318a26c6a04
-  data.tar.gz: c29d9d9a84bedd527d3c63fdc0fa6d2c9ca648d69f54eda3b0b1be77843649329efc526832e6bdc8a98570b9ca8ac02627433c9300f675640eba1469d165b092
+  metadata.gz: e59f8cde4f002e6bd2ae7c66530692e5ece3d34ac77ede0db11b9a66965683be4d6a9dd0cd7335ea824c328689e264a715f1f1f952639c9d3f1c6ae5d1e367b5
+  data.tar.gz: 40744c5a1dbf53d783feb0ba7a038b8b6373082762b3c207a965dc3b4381c017c49de43a434e9fec9cffae04fa6ed25ab73bccd944ed1f9454cb7baf8744f10b

data/README.md

@@ -50,6 +50,14 @@ $ rake spotlight:server
 
 Go to http://localhost:3000 in your browser.
 
+## Upgrade notes
+
+To convert your images to IIIF run the following command
+
+```shell
+$ rake spotlight:migrate_to_iiif[https://spotlight.myinstitution.org]
+```
+
 
 ## Configuration
 

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

@@ -24,5 +24,10 @@
 //= require bootstrap-tagsinput
 //= require jquery.serializejson
 //= require clipboard
-
+//= require leaflet
+//= require leaflet-iiif
+//= require leaflet-areaselect
+// Provide AMD module support
+//= require almond
+//= require polyfill.min.js
 //= require_tree .

data/app/assets/javascripts/spotlight/blocks/pages_block.js

@@ -7,7 +7,7 @@ SirTrevor.Blocks.FeaturedPages = (function(){
 
     icon_name: "pages",
 
-    autocomplete_url: function() { return $(this.inner).closest('form[data-autocomplete-exhibit-feature-pages-path]').data('autocomplete-exhibit-feature-pages-path').replace("%25QUERY", "%QUERY"); },
+    autocomplete_url: function() { return $(this.inner).closest('form[data-autocomplete-exhibit-pages-path]').data('autocomplete-exhibit-pages-path').replace("%25QUERY", "%QUERY"); },
     autocomplete_template: function() { return '<div class="autocomplete-item{{#unless published}} blacklight-private{{/unless}}">{{log "Look at me"}}{{log thumbnail_image_url}}{{#if thumbnail_image_url}}<div class="document-thumbnail thumbnail"><img src="{{thumbnail_image_url}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' },
     bloodhoundOptions: function() {
       return {

data/app/assets/javascripts/spotlight/blocks/resources_block.js

@@ -21,6 +21,10 @@ Spotlight.Block.Resources = (function(){
 
     globalIndex: 0,
 
+    _itemPanelIiifFields: function(index, data) {
+      return [];
+    },
+
     _itemPanel: function(data) {
       var index = "item_" + this.globalIndex++;
       var checked;
@@ -33,8 +37,7 @@ Spotlight.Block.Resources = (function(){
           '<li class="field form-inline dd-item dd3-item" data-id="' + index + '" id="' + this.formId("item_" + data.id) + '">',
             '<input type="hidden" name="item[' + index + '][id]" value="' + (data.slug || data.id) + '" />',
             '<input type="hidden" name="item[' + index + '][title]" value="' + data.title + '" />',
-            '<input type="hidden" name="item[' + index + '][full_image_url]" data-item-grid-full-image="true"  value="' + (data.full_image_url || data.thumbnail_image_url || data.thumbnail) + '"/>',
-            '<input type="hidden" name="item[' + index + '][thumbnail_image_url]" data-item-grid-thumbnail="true"  value="' + (data.thumbnail_image_url || data.thumbnail) + '"/>',
+            this._itemPanelIiifFields(index, data),
             '<input data-property="weight" type="hidden" name="item[' + index + '][weight]" value="' + data.weight + '" />',
             '<div class="dd-handle dd3-handle"><%= i18n.t("blocks:resources:panel:drag") %></div>',
               '<div class="dd3-content panel panel-default">',
@@ -45,16 +48,16 @@ Spotlight.Block.Resources = (function(){
                     '<label class="sr-only" for="'+ this.formId(this.display_checkbox + '_' + data.id) +'"><%= i18n.t("blocks:resources:panel:display") %></label>',
                   '</div>',
                   '<div class="pic thumbnail">',
-                    '<img src="' + (data.thumbnail_image_url || data.thumbnail) + '" />',
+                    '<img src="' + (data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg"))) + '" />',
                   '</div>',
                   '<div class="main">',
                     '<div class="title panel-title">' + data.title + '</div>',
                     '<div>' + (data.slug || data.id) + '</div>',
-                    '<div data-panel-image-pagination="true"></div>',
                   '</div>',
                   '<div class="remove pull-right">',
                     '<a data-item-grid-panel-remove="true" href="#"><%= i18n.t("blocks:resources:panel:remove") %></a>',
                   '</div>',
+                  '<div class="h5" data-panel-image-pagination="true"></div>',
                 '</div>',
               '</div>',
             '</li>'

data/app/assets/javascripts/spotlight/blocks/solr_documents_base_block.js

@@ -0,0 +1,108 @@
+//= require spotlight/blocks/resources_block
+
+SirTrevor.Blocks.SolrDocumentsBase = (function(){
+
+  return Spotlight.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_template: function() { 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>' },
+
+    transform_autocomplete_results: function(response) {
+      return $.map(response['docs'], function(doc) {
+        return doc;
+      })
+    },
+
+    caption_option_values: function() {
+      var fields = $('[data-blacklight-configuration-index-fields]').data('blacklight-configuration-index-fields');
+
+      return $.map(fields, function(field) {
+        return $('<option />').val(field.key).text(field.label)[0].outerHTML;
+      }).join("\n");
+    },
+
+    item_options: function() { return this.caption_options(); },
+
+    caption_options: function() { return [
+      '<div class="field-select primary-caption" data-behavior="item-caption-admin">',
+        '<input name="<%= show_primary_field_key %>" type="hidden" value="false" />',
+        '<input data-input-select-target="#<%= formId(primary_field_key) %>" name="<%= show_primary_field_key %>" id="<%= formId(show_primary_field_key) %>" type="checkbox" value="true" />',
+        '<label for="<%= formId(show_primary_field_key) %>"><%= i18n.t("blocks:solr_documents:caption:primary") %></label>',
+        '<select data-input-select-target="#<%= formId(show_primary_field_key) %>" name="<%= primary_field_key %>" id="<%= formId(primary_field_key) %>">',
+          '<option value=""><%= i18n.t("blocks:solr_documents:caption:placeholder") %></option>',
+          '<%= caption_option_values() %>',
+        '</select>',
+      '</div>',
+      '<div class="field-select secondary-caption" data-behavior="item-caption-admin">',
+        '<input name="<%= show_secondary_field_key %>" type="hidden" value="false" />',
+        '<input data-input-select-target="#<%= formId(secondary_field_key) %>" name="<%= show_secondary_field_key %>" id="<%= formId(show_secondary_field_key) %>" type="checkbox" value="true" />',
+        '<label for="<%= formId(show_secondary_field_key) %>"><%= i18n.t("blocks:solr_documents:caption:secondary") %></label>',
+        '<select data-input-select-target="#<%= formId(show_secondary_field_key) %>" name="<%= secondary_field_key %>" id="<%= formId(secondary_field_key) %>">',
+        '<option value=""><%= i18n.t("blocks:solr_documents:caption:placeholder") %></option>',
+          '<%= caption_option_values() %>',
+        '</select>',
+      '</div>',
+    ].join("\n") },
+
+    _itemPanelIiifFields: function(index, data) {
+      return [
+        // '<input type="hidden" name="item[' + index + '][iiif_region]" value="' + (data.iiif_region) + '"/>',
+        // for legacy compatiblity:
+        '<input type="hidden" name="item[' + index + '][thumbnail_image_url]" value="' + (data.thumbnail_image_url || data.thumbnail || "") + '"/>',
+        '<input type="hidden" name="item[' + index + '][full_image_url]" value="' + (data.full_image_url || data.thumbnail_image_url || data.thumbnail || "") + '"/>',
+        '<input type="hidden" name="item[' + index + '][iiif_tilesource]" value="' + (data.iiif_tilesource) + '"/>',
+        '<input type="hidden" name="item[' + index + '][iiif_manifest_url]" value="' + (data.iiif_manifest_url) + '"/>',
+        '<input type="hidden" name="item[' + index + '][iiif_canvas_id]" value="' + (data.iiif_canvas_id) + '"/>',
+        '<input type="hidden" name="item[' + index + '][iiif_image_id]" value="' + (data.iiif_image_id) + '"/>',
+      ].join("\n");
+    },
+    setIiifFields: function(panel, data, initialize) {
+      var legacyThumbnailField = $(panel).find('[name$="[thumbnail_image_url]"]')
+      var legacyFullField = $(panel).find('[name$="[full_image_url]"]')
+
+      if (initialize && legacyThumbnailField.val().length > 0) {
+        return;
+      }
+
+      legacyThumbnailField.val("");
+      legacyFullField.val("");
+      $(panel).find('[name$="[iiif_image_id]"]').val(data.imageId);
+      $(panel).find('[name$="[iiif_tilesource]"]').val(data.tilesource);
+      $(panel).find('[name$="[iiif_manifest_url]"]').val(data.manifest);
+      $(panel).find('[name$="[iiif_canvas_id]"]').val(data.canvasId);
+      $(panel).find('.thumbnail img').attr('src', data.thumbnail_image_url || data.tilesource.replace("/info.json", "/full/100,100/0/default.jpg"));
+    },
+    afterPanelRender: function(data, panel) {
+      var context = this;
+      var manifestUrl = data.iiif_manifest || data.iiif_manifest_url;
+
+      if (!manifestUrl) {
+        $(panel).find('[name$="[thumbnail_image_url]"]').val(data.thumbnail);
+        $(panel).find('[name$="[full_image_url]"]').val(data.full_image_url);
+
+        return;
+      }
+
+      $.ajax(manifestUrl).success(
+        function(manifest) {
+          var Iiif = require('spotlight/iiif');
+          var iiifManifest = new Iiif(manifestUrl, manifest);
+
+          var thumbs = iiifManifest.imagesArray();
+
+          if (!data.iiif_image_id) {
+            context.setIiifFields(panel, thumbs[0], !!data.iiif_manifest_url);
+          }
+
+
+          if(thumbs.length > 1) {
+            panel.multiImageSelector(thumbs, function(selectorImage) {
+              context.setIiifFields(panel, selectorImage, false);
+            }, data.iiif_image_id);
+          }
+        }
+      );
+    }
+  });
+
+})();

data/app/assets/javascripts/spotlight/blocks/solr_documents_block.js

@@ -1,69 +1,25 @@
-//= require spotlight/blocks/resources_block
+//= require spotlight/blocks/solr_documents_base_block
 
 SirTrevor.Blocks.SolrDocuments = (function(){
 
-  return Spotlight.Block.Resources.extend({
+  return SirTrevor.Blocks.SolrDocumentsBase.extend({
     type: "solr_documents",
 
-    plustextable: true,
-
     icon_name: "items",
 
-    autocomplete_url: function() { return this.$instance().closest('form[data-autocomplete-exhibit-catalog-path]').data('autocomplete-exhibit-catalog-path').replace("%25QUERY", "%QUERY"); },
-    autocomplete_template: function() { 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>' },
-
-    transform_autocomplete_results: function(response) {
-      return $.map(response['docs'], function(doc) {
-        return doc;
-      })
-    },
-
-    caption_option_values: function() {
-      var fields = $('[data-blacklight-configuration-index-fields]').data('blacklight-configuration-index-fields');
+    item_options: function() { return this.caption_options() + this.zpr_option(); },
 
-      return $.map(fields, function(field) {
-        return $('<option />').val(field.key).text(field.label)[0].outerHTML;
-      }).join("\n");
+    zpr_option: function() {
+      return [
+        '<div>',
+        '<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>'
+      ].join("\n");
     },
 
-    item_options: function() { return this.caption_options(); },
-
-    caption_options: function() { return [
-      '<div class="field-select primary-caption" data-behavior="item-caption-admin">',
-        '<input name="<%= show_primary_field_key %>" type="hidden" value="false" />',
-        '<input data-input-select-target="#<%= formId(primary_field_key) %>" name="<%= show_primary_field_key %>" id="<%= formId(show_primary_field_key) %>" type="checkbox" value="true" />',
-        '<label for="<%= formId(show_primary_field_key) %>"><%= i18n.t("blocks:solr_documents:caption:primary") %></label>',
-        '<select data-input-select-target="#<%= formId(show_primary_field_key) %>" name="<%= primary_field_key %>" id="<%= formId(primary_field_key) %>">',
-          '<option value=""><%= i18n.t("blocks:solr_documents:caption:placeholder") %></option>',
-          '<%= caption_option_values() %>',
-        '</select>',
-      '</div>',
-      '<div class="field-select secondary-caption" data-behavior="item-caption-admin">',
-        '<input name="<%= show_secondary_field_key %>" type="hidden" value="false" />',
-        '<input data-input-select-target="#<%= formId(secondary_field_key) %>" name="<%= show_secondary_field_key %>" id="<%= formId(show_secondary_field_key) %>" type="checkbox" value="true" />',
-        '<label for="<%= formId(show_secondary_field_key) %>"><%= i18n.t("blocks:solr_documents:caption:secondary") %></label>',
-        '<select data-input-select-target="#<%= formId(show_secondary_field_key) %>" name="<%= secondary_field_key %>" id="<%= formId(secondary_field_key) %>">',
-        '<option value=""><%= i18n.t("blocks:solr_documents:caption:placeholder") %></option>',
-          '<%= caption_option_values() %>',
-        '</select>',
-      '</div>',
-    ].join("\n") },
-
-    afterPanelRender: function(data, panel) {
-      var context = this;
-
-      if (_.isUndefined(data['image_versions'])) {
-        $.getJSON(this.autocomplete_url().replace("%QUERY", "id:" + data.id), function(data) {
-          var doc = context.transform_autocomplete_results(data)[0];
-
-          if (!_.isUndefined(doc)) {
-            panel.multiImageSelector(doc['image_versions']);
-          }
-        });
-      } else {
-        panel.multiImageSelector(data['image_versions']);
-      }
-    }
+    zpr_key: 'zpr_link'
   });
 
 })();

data/app/assets/javascripts/spotlight/blocks/solr_documents_carousel_block.js

@@ -1,8 +1,8 @@
-//= require spotlight/blocks/solr_documents_block
+//= require spotlight/blocks/solr_documents_base_block
 
 SirTrevor.Blocks.SolrDocumentsCarousel = (function(){
 
-  return SirTrevor.Blocks.SolrDocuments.extend({
+  return SirTrevor.Blocks.SolrDocumentsBase.extend({
     plustextable: false,
     type: "solr_documents_carousel",
 
@@ -100,4 +100,4 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function(){
 
   });
 
-})();
+})();

data/app/assets/javascripts/spotlight/blocks/solr_documents_embed_block.js

@@ -1,8 +1,8 @@
-//= require spotlight/blocks/solr_documents_block
+//= require spotlight/blocks/solr_documents_base_block
 
 SirTrevor.Blocks.SolrDocumentsEmbed = (function(){
 
-  return SirTrevor.Blocks.SolrDocuments.extend({
+  return SirTrevor.Blocks.SolrDocumentsBase.extend({
     type: "solr_documents_embed",
 
     icon_name: "item_embed",
@@ -14,4 +14,4 @@ SirTrevor.Blocks.SolrDocumentsEmbed = (function(){
     }
   });
 
-})();
+})();

data/app/assets/javascripts/spotlight/blocks/solr_documents_features_block.js

@@ -1,8 +1,8 @@
-//= require spotlight/blocks/solr_documents_block
+//= require spotlight/blocks/solr_documents_base_block
 
 SirTrevor.Blocks.SolrDocumentsFeatures = (function(){
 
-  return SirTrevor.Blocks.SolrDocuments.extend({
+  return SirTrevor.Blocks.SolrDocumentsBase.extend({
     plustextable: false,
     type: "solr_documents_features",
 
@@ -38,4 +38,4 @@ SirTrevor.Blocks.SolrDocumentsFeatures = (function(){
 
   });
 
-})();
+})();

data/app/assets/javascripts/spotlight/blocks/solr_documents_grid_block.js

@@ -1,8 +1,8 @@
-//= require spotlight/blocks/solr_documents_block
+//= require spotlight/blocks/solr_documents_base_block
 
 SirTrevor.Blocks.SolrDocumentsGrid = (function(){
 
-  return SirTrevor.Blocks.SolrDocuments.extend({
+  return SirTrevor.Blocks.SolrDocumentsBase.extend({
     type: "solr_documents_grid",
 
     icon_name: "item_grid",
@@ -11,4 +11,4 @@ SirTrevor.Blocks.SolrDocumentsGrid = (function(){
     item_options: function() { return "" }
   });
 
-})();
+})();

data/app/assets/javascripts/spotlight/crop.es6

@@ -0,0 +1,205 @@
+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.initialCropRegion = [0, 0, cropArea.data('crop-width'), cropArea.data('crop-height')];
+    this.tileSource = null;
+
+    this.setupAutoCompletes();
+    this.setupAjaxFileUpload();
+    this.setupExistingIiifCropper();
+    this.invalidateMapSizeOnTabToggle();
+  }
+
+  // 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;
+    } else if(this.previousCropBox) {
+      this.previousCropBox.remove();
+    }
+
+    this.tileSource = source;
+    this.iiifUrlField.val(source);
+    this.setupIiifCropper();
+  }
+
+  // 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());
+  }
+
+  // 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());
+  }
+
+  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());
+  }
+
+  setupIiifCropper() {
+    if (this.tileSource === null || this.tileSource === undefined) {
+      console.error('No tilesource provided when setting up IIIF Cropper');
+      return;
+    }
+
+    if(this.iiifCropper) {
+      this.iiifCropper.removeLayer(this.iiifLayer);
+      this.iiifLayer = L.tileLayer.iiif(this.tileSource).addTo(this.iiifCropper);
+      return;
+    }
+
+    this.iiifCropper = L.map(this.cropArea.attr('id'), {
+      center: [0, 0],
+      crs: L.CRS.Simple,
+      zoom: 0
+    });
+    this.iiifLayer = L.tileLayer.iiif(this.tileSource).addTo(this.iiifCropper);
+
+    this.iiifCropBox = L.areaSelect({
+      width: this.cropArea.data('crop-width') / 2,
+      height: this.cropArea.data('crop-height') / 2,
+      keepAspectRatio: true
+    });
+
+    this.iiifCropBox.addTo(this.iiifCropper);
+
+    this.positionIiifCropBox();
+
+    var self = this;
+    this.iiifCropBox.on('change', function(){
+      var bounds = this.getBounds();
+      var zoom = self.iiifCropper.getZoom();
+      var min = self.iiifCropper.project(bounds.getSouthWest(), zoom);
+      var max = self.iiifCropper.project(bounds.getNorthEast(), zoom);
+      var imageSize = self.iiifLayer._imageSizes[zoom];
+      var xRatio = self.iiifLayer.x / imageSize.x;
+      var yRatio = self.iiifLayer.y / imageSize.y;
+      var region = [
+        Math.max(Math.floor(min.x * xRatio), 0),
+        Math.max(Math.floor(max.y * yRatio), 0),
+        Math.min(Math.floor((max.x - min.x) * xRatio), self.iiifLayer.x),
+        Math.min(Math.floor((min.y - max.y) * yRatio), self.iiifLayer.y),
+      ];
+      if (self.existingCropBoxSet) {
+        self.iiifRegionField.val(region.join(','));
+      }
+    });
+    this.cropArea.data('initiallyVisible', this.cropArea.is(':visible'));
+  }
+
+  positionIiifCropBox() {
+    var self = this;
+    this.iiifLayer.on('load', function() {
+      var regionFieldValue = self.iiifRegionField.val();
+      if(!regionFieldValue || regionFieldValue === '' || self.existingCropBoxSet) {
+        self.existingCropBoxSet = true;
+        return;
+      }
+      var maxZoom = self.iiifLayer.maxZoom;
+      var b = regionFieldValue.split(',');
+      var minPoint = L.point(parseInt(b[0]), parseInt(b[1]));
+      var maxPoint = L.point(parseInt(b[0]) + parseInt(b[2]), parseInt(b[1]) + parseInt(b[3]));
+
+      var min = self.iiifCropper.unproject(minPoint, maxZoom);
+      var max = self.iiifCropper.unproject(maxPoint, maxZoom);
+
+      var y = max.lat - min.lat;
+      var x = max.lng - min.lng;
+
+      // Pop a rectangle on there to show where it goes
+      var bounds = L.latLngBounds(min, max);
+      self.previousCropBox = L.rectangle(bounds);
+      self.previousCropBox.addTo(self.iiifCropper);
+      self.iiifCropper.panTo(bounds.getCenter());
+
+      self.iiifCropBox.setDimensions({
+        width: Math.abs(x),
+        height: Math.abs(y)
+      });
+
+      self.existingCropBoxSet = true;
+    });
+  }
+
+  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.iiifCropper.invalidateSize();
+        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() {
+    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(),
+      //Options to tell jQuery not to process data or worry about content-type.
+      cache: false,
+      contentType: false,
+      processData: false
+    });
+  }
+
+  successHandler(data, stat, xhr) {
+    this.setTileSource(data.tilesource);
+  }
+}