Enable image preview while editing steps and code style improvements [SCI-694]

app/assets/javascripts/assets.js

@@ -1,5 +1,3 @@
-//= require my_modules/image_preview
-
 function setupAssetsLoading() {
   var DELAY = 2500;
   var REPETITIONS = 60;
@@ -28,8 +26,8 @@ function setupAssetsLoading() {
 
           if (data.type === "image") {
             $el.html(
-              "<img src='" + data['preview-url'] + "' data-get-preview-url='"
+              "<img src='" + data['image-tag-url'] + "' data-preview-url='" +
-              + data['get-preview-url'] + "'><p>" +
+              data['preview-url'] + "'><p>" +
               data.filename + "</p>"
             );
           } else {
@@ -41,15 +39,15 @@ function setupAssetsLoading() {
           animateSpinner(null, false);
           initPreviewModal();
         },
-        error: function (ev) {
+        error: function(data) {
-          if (ev.status == 403) {
+          if (data.status == 403) {
             $el.find('img').hide();
             $el.next().hide();
             // Image/file exists, but user doesn't have
             // rights to download it
             if (type === "image") {
               $el.html(
-                "<img src='" + $data['preview-url'] + "'><p>" +
+                "<img src='" + data['image-tag-url'] + "'><p>" +
                 data.filename + "</p>"
               );
             } else {

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

@@ -3,7 +3,6 @@
 //= require canvas-to-blob.min
 //= require assets
 //= require comments
-//= require my_modules/image_preview
 
 // Sets callbacks for toggling checkboxes
 function applyCheckboxCallBack()  {
@@ -80,6 +79,7 @@ function applyCancelCallBack() {
 
     setTimeout(function() {
       initStepsComments();
+      initPreviewModal();
     }, 1000);
 
   })
@@ -104,6 +104,7 @@ function applyEditCallBack() {
     toggleButtons(false);
     initializeCheckboxSorting();
     animateSpinner(null, false);
+    initPreviewModal();
 
     $("#new-step-checklists fieldset.nested_step_checklists ul").each(function () {
       enableCheckboxSorting(this);

app/assets/javascripts/results/result_assets.js

@@ -1,5 +1,3 @@
-//= require my_modules/image_preview
-
 // New result asset behaviour
 $("#new-result-asset").on("ajax:success", function(e, data) {
   var $form = $(data.html);
@@ -39,6 +37,7 @@ function applyEditResultAssetCallback() {
       $form.remove();
       applyEditResultAssetCallback();
       toggleResultEditButtons(true);
+      initPreviewModal();
     });
 
     toggleResultEditButtons(false);

app/assets/javascripts/sitewide/image_preview.js

@@ -3,7 +3,7 @@ function initPreviewModal() {
   $('.image-preview-link').click(function(e) {
     e.preventDefault();
     var name = $(this).find('p').text();
-    var url = $(this).find('img').data('get-preview-url');
+    var url = $(this).find('img').data('preview-url');
     var downloadUrl = $(this).attr('href');
     var description = $(this).data('description');
     openPreviewModal(name, url, downloadUrl, description);
@@ -16,7 +16,7 @@ function openPreviewModal(name, url, downloadUrl, description) {
     url: url,
     type: 'GET',
     dataType: 'json',
-    success: function (data) {
+    success: function(data) {
       modal.find('.image-name').text(name);
       var link = modal.find('.image-download-link');
       link.attr('href', downloadUrl);
@@ -25,12 +25,17 @@ function openPreviewModal(name, url, downloadUrl, description) {
       var image = modal.find('.modal-body img');
       image.attr('src', data['large-preview-url']);
       image.attr('alt', name);
+      image.click(function(ev) {
+        ev.stopPropagation();
+      });
       modal.find('.modal-footer .image-description').text(description);
+      modal.find('.modal-body').click(function() {
+        modal.modal('hide');
+      });
       modal.modal();
     },
-    error: function (ev) {
+    error: function(ev) {
       // TODO
     }
   });
-
 }

app/controllers/assets_controller.rb

@@ -19,8 +19,8 @@ class AssetsController < ApplicationController
 
           # If check permission passes, return :ok
           render json: {
-            'preview-url' => @asset.url(:medium),
+            'image-tag-url' => @asset.url(:medium),
-            'get-preview-url' => large_image_url_asset_path(@asset),
+            'preview-url' => large_image_url_asset_path(@asset),
             'filename' => truncate(@asset.file_file_name,
                                    length:
                                      Constants::FILENAME_TRUNCATION_LENGTH),
@@ -32,14 +32,6 @@ class AssetsController < ApplicationController
     end
   end
 
-  def preview
-    if @asset.is_image?
-      redirect_to @asset.url(:medium), status: 307
-    else
-      render_400
-    end
-  end
-
   def large_image_url
     respond_to do |format|
       format.json do

app/models/asset.rb

@@ -7,8 +7,8 @@ class Asset < ActiveRecord::Base
 
   # Paperclip validation
   has_attached_file :file,
-                    styles: { medium: [Constants::MEDIUM_PIC_FORMAT, :jpg],
+                    styles: { large: [Constants::LARGE_PIC_FORMAT, :jpg],
-                              large: [Constants::LARGE_PIC_FORMAT, :jpg] },
+                              medium: [Constants::MEDIUM_PIC_FORMAT, :jpg] },
                     convert_options: { medium: '-quality 70 -strip' }
 
   validates_attachment :file,
@@ -29,7 +29,7 @@ class Asset < ActiveRecord::Base
                                            %r{^image/#{ Regexp.union(
                                              Constants::WHITELISTED_IMAGE_TYPES
                                            ) }}
-                                          [:medium, :large]
+                                          [:large, :medium]
                                         else
                                           {}
                                         end

app/views/results/_result_asset.html.erb

@@ -1,18 +1,25 @@
 <% if can_view_or_download_result_assets(result.my_module) %>
-  <%= link_to download_asset_path(result.asset),
-    class: 'image-preview-link',
-    id: "modal_link#{result.asset.id}",
-    data: {no_turbolink: true, description: "#{result.name}"} do %>
   <% if result.asset.file.processing? %>
     <span data-status='asset-loading'
       data-present-url='<%= file_present_asset_path(result.asset) %>'>
       <%= image_tag 'medium/processing.gif' %>
     </span>
   <% else %>
-      <%= image_tag result.asset.url(:medium), data: {'get-preview-url': large_image_url_asset_path(result.asset)} if result.asset.is_image? %>
+    <% if result.asset.is_image? %>
+      <%= link_to download_asset_path(result.asset),
+        class: 'image-preview-link',
+        id: "modal_link#{result.asset.id}",
+        data: {no_turbolink: true, description: "#{result.name}"} do %>
+        <%= image_tag result.asset.url(:medium), data: {'preview-url': large_image_url_asset_path(result.asset)} %>
         <p><%= truncate(result.asset.file_file_name,
         length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
       <% end %>
+    <% else %>
+      <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} do %>
+        <p><%= truncate(result.asset.file_file_name,
+        length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+      <% end %>
+    <% end %>
   <% end %>
 <% else %>
   <% if result.asset.file.processing? %>

app/views/steps/_empty_step.html.erb

@@ -42,7 +42,7 @@
   </div>
   <div class="tab-pane" role="tabpanel" id="new-step-assets">
     <%= f.nested_fields_for :assets do |ff| %>
-      <%= render "form_assets.html.erb", ff: ff %>
+      <%= render "form_assets.html.erb", ff: ff, step: step %>
     <% end %>
     <%= f.add_nested_fields_link :assets do %>
       <span class="glyphicon glyphicon-plus"></span>

app/views/steps/_form_assets.html.erb

@@ -11,12 +11,24 @@
   <div class="panel-body">
     <% if ff.object.file.exists? %>
       <% if can_view_or_download_step_assets(@protocol) %>
-        <%= link_to download_asset_path(ff.object), data: {no_turbolink: true} do %>
+        <% if ff.object.is_image? %>
-          <%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
+          <%= link_to download_asset_path(ff.object),
-          <p><%= ff.object.file_file_name %></p>
+            class: 'image-preview-link',
+            id: "modal_link#{ff.object.id}",
+            data: {no_turbolink: true, id: true, status: "asset-present", description: "#{step.position + 1}. #{step.name}"} do %>
+            <%= image_tag ff.object.url(:medium), data: {'preview-url': large_image_url_asset_path(ff.object)} %>
+            <p><%= truncate(ff.object.file_file_name,
+                            length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
           <% end %>
         <% else %>
-        <%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
+          <%= link_to download_asset_path(ff.object), data: {no_turbolink: true} do %>
+            <%= image_tag ff.object.url(:medium) if ff.object.is_image? %>
+            <p><%= truncate(ff.object.file_file_name,
+                            length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+          <% end %>
+        <% end %>
+      <% else %>
+        <%= image_tag image_tag ff.object.url(:medium) if ff.object.is_image? %>
         <p><%= ff.object.file_file_name %></p>
       <% end %>
     <% else %>

app/views/steps/_step.html.erb

@@ -66,21 +66,28 @@
                   <li>
                     <% if can_view_or_download_step_assets(@protocol) %>
                       <% if asset.file_present %>
+                        <% if asset.file.processing? %>
+                          <span data-status='asset-loading'
+                                data-present-url='<%= file_present_asset_path(asset) %>'>
+                            <%= image_tag 'medium/processing.gif' %>
+                          </span>
+                        <% else %>
+                          <% if asset.is_image? %>
                             <%= link_to download_asset_path(asset),
                               class: 'image-preview-link',
                               id: "modal_link#{asset.id}",
                               data: {no_turbolink: true, id: true, status: "asset-present", description: "#{step.position + 1}. #{step.name}"} do %>
-                          <% if asset.file.processing? %>
+                              <%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
-                            <span data-status='asset-loading'
-                                  data-present-url='<%= file_present_asset_path(asset) %>'>
-                              <%= image_tag 'medium/processing.gif' %>
-                            </span>
-                          <% else %>
-                            <%= image_tag asset.url(:medium), data: {'get-preview-url': large_image_url_asset_path(asset)} if asset.is_image? %>
-                          <% end %>
                               <p><%= truncate(asset.file_file_name,
                                               length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
                             <% end %>
+                          <% else %>
+                            <%= link_to download_asset_path(asset), data: {no_turbolink: true} do %>
+                            <p><%= truncate(asset.file_file_name,
+                                            length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+                            <% end %>
+                          <% end %>
+                        <% end %>
                       <% else %>
                         <span data-status='asset-loading'
                               data-present-url='<%= file_present_asset_path(asset) %>'>
@@ -94,7 +101,7 @@
                           <%= image_tag 'medium/processing.gif' %>
                         </span>
                       <% else %>
-                        <%= image_tag preview_asset_path(asset) if asset.is_image? %>
+                        <%= image_tag asset.url(:medium) if asset.is_image? %>
                       <% end %>
                       <p><%= truncate(asset.file_file_name,
                                       length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>

config/initializers/assets.rb

@@ -59,7 +59,6 @@ Rails.application.config.assets.precompile += %w(comments.js)
 Rails.application.config.assets.precompile += %w(projects/show.js)
 Rails.application.config.assets.precompile += %w(notifications.js)
 Rails.application.config.assets.precompile += %w(users/invite_users_modal.js)
-Rails.application.config.assets.precompile += %w(my_modules/image_preview.js)
 
 # Libraries needed for Handsontable formulas
 Rails.application.config.assets.precompile += %w(lodash.js)

config/initializers/constants.rb

@@ -72,8 +72,8 @@ class Constants
   #=============================================================================
 
   # Picture size formats
-  MEDIUM_PIC_FORMAT = '300x300>'.freeze
   LARGE_PIC_FORMAT = '800x600>'.freeze
+  MEDIUM_PIC_FORMAT = '300x300>'.freeze
   THUMB_PIC_FORMAT = '100x100>'.freeze
   ICON_PIC_FORMAT = '40x40>'.freeze
   ICON_SMALL_PIC_FORMAT = '30x30>'.freeze

config/routes.rb

@@ -282,9 +282,10 @@ Rails.application.routes.draw do
   # We cannot use 'resources :assets' because assets is a reserved route
   # in Rails (assets pipeline) and causes funky behavior
   get "files/:id/present", to: "assets#file_present", as: "file_present_asset"
-  get "files/:id/large_url", to: "assets#large_image_url", as: "large_image_url_asset"
+  get 'files/:id/large_url',
+      to: 'assets#large_image_url',
+      as: 'large_image_url_asset'
   get "files/:id/download", to: "assets#download", as: "download_asset"
-  get "files/:id/preview", to: "assets#preview", as: "preview_asset"
   post 'asset_signature' => 'assets#signature'
 
   devise_scope :user do