Add an alert message when a non-iiif item is autocompleted for cropping.

app/assets/javascripts/spotlight/search_typeahead.js

@@ -84,7 +84,8 @@ function addAutocompletetoFeaturedImage() {
 }
 
 function addImageSelector(input, panel, manifestUrl) {
-  if (manifestUrl === undefined) {
+  if (!manifestUrl) {
+    showNonIiifAlert(input);
     return;
   }
   var cropper = input.data('iiifCropper');
@@ -105,6 +106,8 @@ function addImageSelector(input, panel, manifestUrl) {
         });
       });
 
+      hideNonIiifAlert(input);
+
       if(thumbs.length == 1) {
         cropper.setTileSource(thumbs[0].tilesource);
       } else {
@@ -117,6 +120,14 @@ function addImageSelector(input, panel, manifestUrl) {
   );
 }
 
+function showNonIiifAlert(input){
+  input.parent().prev('[data-behavior="non-iiif-alert"]').show();
+}
+
+function hideNonIiifAlert(input){
+  input.parent().prev('[data-behavior="non-iiif-alert"]').hide();
+}
+
 function swapInputForPanel(input, panel, data){
   $(".pic.thumbnail img", panel).attr("src", data['thumbnail']).show();
   $("[data-item-grid-thumbnail]", panel).attr('value', data['thumbnail']);

app/views/spotlight/featured_images/_form.html.erb

@@ -12,6 +12,10 @@
     <div>
       <%= f.hidden_field(:document_global_id) %>
       <%= f.hidden_field(:remote_image_url) %>
+      <div class="alert alert-danger" data-behavior="non-iiif-alert" role="alert" style="display:none;">
+        <span class="glyphicon glyphicon-alert"></span>
+        <%= t(:'.non_iiif_alert_html') %>
+      </div>
       <%= text_field_tag(:document_title, (presenter(f.object.document).document_show_html_title if f.object.document), class: "form-control", data: { input_select_target: "##{form_prefix}_source_exhibit", 'behavior': 'autocomplete', masthead_typeahead: true, 'cropper': image_form.name, target_panel: "##{form_prefix}-target-panel", :'id-field' => "##{form_prefix}_document_global_id", remote_url_field: "##{form_prefix}_remote_image_url" }) %>
       <div id="<%= form_prefix %>-target-panel" style="display:none">
         <div class="panel-heading">

config/locales/spotlight.en.yml

@@ -498,6 +498,10 @@ en:
         published: "Publish"
     featured_images:
       form: &featured_images_form
+        non_iiif_alert_html: >
+          The image source must be a IIIF image.
+          Contact your exhibits adminstrator or see the
+          <a href="http://iiif.io">IIIF website</a> for more information about IIIF.
         source:
           header: "Image source"
           exhibit:

spec/features/autocomplete_typeahead_spec.rb

@@ -0,0 +1,36 @@
+describe 'Autocomplete typeahead', type: :feature, js: true do
+  let(:exhibit) { FactoryGirl.create(:exhibit) }
+  let(:admin) { FactoryGirl.create(:exhibit_admin, exhibit: exhibit) }
+
+  before { login_as admin }
+
+  describe 'IIIF Integration' do
+    context 'for items that include a IIIF manifest' do
+      it 'instantiates a cropper' do
+        visit spotlight.edit_exhibit_appearance_path(exhibit)
+
+        expect(page).not_to have_css('.leaflet-container')
+
+        fill_in_typeahead_field(with: 'gk446cj2442', type: 'masthead')
+
+        expect(page).to have_css('.leaflet-container', visible: true)
+      end
+    end
+
+    context 'for items that do not include a IIIF manifest' do
+      before do
+        Spotlight::Engine.config.iiif_manifest_field = 'not_a_real_field'
+      end
+
+      it 'provides an alert informing the user that they cannot crop from that item' do
+        visit spotlight.edit_exhibit_appearance_path(exhibit)
+
+        expect(page).not_to have_css('[data-behavior="non-iiif-alert"]', visible: true)
+
+        fill_in_typeahead_field(with: 'gk446cj2442', type: 'masthead')
+
+        expect(page).to have_css('[data-behavior="non-iiif-alert"]', visible: true)
+      end
+    end
+  end
+end

spec/support/features/test_features_helpers.rb

@@ -1,11 +1,12 @@
 module Spotlight
   module TestFeaturesHelpers
     def fill_in_typeahead_field(opts = {})
+      type = opts[:type] || 'twitter'
       # Poltergeist / Capybara doesn't fire the events typeahead.js
       # is listening for, so we help it out a little:
       page.execute_script <<-EOF
-        $("[data-twitter-typeahead]").val("#{opts[:with]}").trigger("input");
-        $("[data-twitter-typeahead]").typeahead("open");
+        $("[data-#{type}-typeahead]:visible").val("#{opts[:with]}").trigger("input");
+        $("[data-#{type}-typeahead]:visible").typeahead("open");
         $(".tt-suggestion").click();
       EOF