Isolate annotorious addition

app/assets/config/manifest.js

@@ -21,4 +21,4 @@
 //= link landing/slick.min.js
 //= link landing/slider.js
 //= link datatables.min.js
-
+//= link annotorious/annotorious-openseadragon.js

app/views/shared/_osd_div.html.slim

@@ -1,6 +1,6 @@
 =javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/3.0.0/openseadragon.min.js"
 =javascript_include_tag "openseadragon-filtering.js"
-
+=javascript_include_tag "annotorious/annotorious-openseadragon.js"
 
 .image-toolbar(id="image_toolbar")
   a#osd_zoom_in =svg_symbol "#icon-zoom-in", class: 'icon'
@@ -110,6 +110,16 @@
         }, 100);
       });
 
+      var anno = AnnotoriousOSD.createOSDAnnotator(viewer, {
+        // make sure that the boxes over the text annotations are inert
+        pointerSelectAction: 'NONE'
+      });
+      anno.setFormatter(function() { 
+        // make the annotation boxes transparent rather than opaque
+        return { fillOpacity: 0 };
+      });
+
+
       $('[data-filter]').on('input', updateFilters);
 
       var filters = {

app/views/transcribe/translate.html.slim

@@ -66,7 +66,7 @@
               p.nodata_text
                 ==t('.please_help_this_page', help_link: help_link)
                 ==t('.or_mark_blank', mark_blank: mark_blank) unless @page.status == Page::STATUS_BLANK
-      .page-imagescan(style="display:none")
+      .page-imagescan(style=("display:none" unless @fromImage))
         =render :partial => '/shared/osd_div'
     .page-column
       -if @preview_xml
@@ -90,10 +90,17 @@ h2.legend =t('.page_notes')
   javascript:
 
     var lang = "#{@collection.language}";
+    var fromImage = JSON.parse("#{@fromImage}") || false;
+    function updateTranscriptionOrImageDisplay(){
+      $('.page-imagescan').toggle(fromImage);
+      $('.page-preview').toggle(!fromImage);
+
+      var buttonText = (fromImage) ? "#{t('.show_transcription')}" : "#{t('.show_image')}";
+      $('#toggleImage').html(buttonText);
+    };
 
     $(function(){
-      var fromImage = JSON.parse("#{@fromImage}") || false;
-      updateDisplay(fromImage);
+      updateTranscriptionOrImageDisplay(fromImage);
 
       $('#page_needs_review').click(function(){
         $('#page_mark_blank').prop('checked', false);
@@ -106,15 +113,8 @@ h2.legend =t('.page_notes')
       $('#toggleImage').click(function(){
         fromImage = !fromImage;
 
-        updateDisplay(fromImage)
+        updateTranscriptionOrImageDisplay(fromImage)
         Cookies.set('fromImage', fromImage, { expires: 365, path: '/' });
       });
 
-      function updateDisplay(){
-        $('.page-imagescan').toggle(fromImage);
-        $('.page-preview').toggle(!fromImage);
-
-        var buttonText = (fromImage) ? "#{t('.show_transcription')}" : "#{t('.show_image')}";
-        $('#toggleImage').html(buttonText);
-      }
     });