Merge pull request #1115 from ZmagoD/zd_SCI_2321

fixes images preview in repository/library [fixes SCI-2321]

app/assets/javascripts/protocols/steps.js.erb

@@ -595,6 +595,7 @@
           animateSpinner(null, false);
           setupAssetsLoading();
           DragNDropSteps.clearFiles();
+          initPreviewModal();
         },
         error: function(xhr) {
           if (xhr.responseJSON['assets.file']) {

app/assets/javascripts/repositories/repository_datatable.js.erb

@@ -125,6 +125,7 @@ var RepositoryDatatable = (function(global) {
         changeToViewMode();
         updateButtons();
         updateDataTableSelectAllCtrl();
+        initPreviewModal();
         // Prevent row toggling when selecting user smart annotation link
         SmartAnnotation.preventPropagation('.atwho-user-popover');
 

app/assets/javascripts/sitewide/file_preview.js.erb

@@ -32,17 +32,25 @@
         link.attr('data-no-turbolink', true);
         link.attr('data-status', 'asset-present');
         if (data['type'] === 'image') {
-          modal.find('.file-preview-container')
-               .append($('<img>')
-                 .attr('src', data['large-preview-url'])
-                 .attr('alt', name)
-                 .click(function(ev) {
-                   ev.stopPropagation();
-                 })
-               );
+          if(data['processing']) {
+            animateSpinner('.file-preview-container', true);
+          } else {
+            animateSpinner('.file-preview-container', false);
+            modal.find('.file-preview-container')
+                 .append($('<img>')
+                   .attr('src', data['large-preview-url'])
+                   .attr('alt', name)
+                   .click(function(ev) {
+                     ev.stopPropagation();
+                   })
+                 );
+          }
         } else {
           modal.find('.file-preview-container').html(data['preview-icon']);
         }
+        if(data['processing']) {
+          checkFileReady(url, modal);
+        }
         modal.find('.file-name').text(name);
         modal.find('.modal-body').click(function() {
           modal.modal('hide');
@@ -55,4 +63,44 @@
       }
     });
   }
+
+  function checkFileReady(url, modal) {
+    $.get(url, function(data) {
+      if(data['processing']) {
+        $('.file-download-link')
+          .addClass('disabled-with-click-events')
+          .attr('title',
+                '<%= I18n.t('general.file.processing')%>')
+          .click(function(ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+          });
+        setTimeout(function() {
+          checkFileReady(url, modal);
+        }, 10000);
+      } else {
+        if(data['type'] === 'image') {
+          modal.find('.file-preview-container').empty();
+          modal.find('.file-preview-container')
+               .append($('<img>')
+                 .attr('src', data['large-preview-url'])
+                 .attr('alt', data['filename'])
+                 .click(function(ev) {
+                   ev.stopPropagation();
+                 })
+               );
+           modal.find('.file-name').text(data['filename']);
+           modal.find('.modal-body').click(function() {
+             modal.modal('hide');
+           });
+           modal.modal();
+           $('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
+        }
+        $('.file-download-link')
+          .removeClass('disabled-with-click-events')
+          .removeAttr('title')
+          .off();
+      }
+    })
+  }
 })(window);

app/assets/stylesheets/themes/scinote.scss

@@ -1780,6 +1780,17 @@ th.custom-field .modal-tooltiptext {
   max-height: 200px;
 }
 
+a.disabled {
+  opacity: .5;
+  pointer-events: none;
+  cursor: default;
+}
+
+a.disabled-with-click-events {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
 #alert-flash {
 
   button {

app/controllers/assets_controller.rb

@@ -53,11 +53,18 @@ class AssetsController < ApplicationController
     }
 
     if @asset.is_image?
-      response_json['large-preview-url'] = @asset.url(:large)
+      response_json.merge!(
+        'processing'        => @asset.file.processing?,
+        'large-preview-url' => @asset.url(:large),
+        'processing-url'    => image_tag('medium/processing.gif')
+      )
     else
-      response_json['preview-icon'] = render_to_string(
-        partial: 'shared/file_preview_icon.html.erb',
-        locals: { asset: @asset }
+      response_json.merge!(
+        'processing'   => @asset.file.processing?,
+        'preview-icon' => render_to_string(
+          partial: 'shared/file_preview_icon.html.erb',
+          locals: { asset: @asset }
+        )    
       )
     end
 

app/views/shared/_asset_link.html.erb

@@ -1,8 +1,15 @@
 <% if asset.file_present %>
-  <% if asset.file.processing? && display_image_tag %>
+  <% if asset.file.processing? && display_image_tag && asset.is_image? %>
     <span data-status='asset-loading'
           data-present-url='<%= file_present_asset_path(asset.id) %>'>
       <%= image_tag 'medium/processing.gif' %>
+      <%= link_to download_asset_path(asset),
+        class: 'file-preview-link',
+        id: "modal_link#{asset.id}",
+        data: { no_turbolink: true, id: true, status: 'asset-present', 'preview-url': asset_file_preview_path(asset) } do %>
+        <p><%= truncate(asset.file_file_name,
+                        length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+      <% end %>
     </span>
   <% else %>
     <%= link_to download_asset_path(asset),

config/locales/en.yml

@@ -1899,6 +1899,7 @@ en:
     private: "private"
     search: "Search"
     file:
+      processing: "File is still being processed and cannot be downloaded yet."
       total_size: "You can upload max %{size} MB of files at one time. Please remove one or more files and try to submit again."
       size_exceeded: "File size must be less than %{file_size} MB."
       blank: "You didn't select any file"