Improved image preview modal [SCI-694]

app/assets/javascripts/assets.js

@@ -1,3 +1,5 @@
+//= require my_modules/image_preview
+
 function setupAssetsLoading() {
   var DELAY = 2500;
   var REPETITIONS = 60;
@@ -26,9 +28,9 @@ function setupAssetsLoading() {
 
           if (data.type === "image") {
             $el.html(
-              "<a href='" + data['download-url'] + "'>" +
+              "<img src='" + data['preview-url'] + "' data-large-url='"
-              "<img src='" + data['preview-url'] + "'><p>" +
+              + data['large-preview-url'] + "'><p>" +
-              data.filename + "</p></a>"
+              data.filename + "</p>"
             );
           } else {
             $el.html(
@@ -37,6 +39,7 @@ function setupAssetsLoading() {
             );
           }
           animateSpinner(null, false);
+          initPreviewModal();
         },
         error: function (ev) {
           if (ev.status == 403) {

app/assets/javascripts/my_modules/image_preview.js

@@ -1,7 +1,5 @@
-$(document).ready(function() {
+function initPreviewModal() {
-  var modal = $('#imagePreviewModal');
+  $('.image-preview-link').off();
-
-  function initPreviewModal() {
   $('.image-preview-link').click(function(e) {
     e.preventDefault();
     var name = $(this).find('p').text();
@@ -10,9 +8,10 @@ $(document).ready(function() {
     var description = $(this).data('description');
     openPreviewModal(name, url, downloadUrl, description);
   });
-  }
+}
 
-  function openPreviewModal(name, url, downloadUrl, description) {
+function openPreviewModal(name, url, downloadUrl, description) {
+  var modal = $('#imagePreviewModal');
   modal.find('.image-name').text(name);
   var link = modal.find('.image-download-link');
   link.attr('href', downloadUrl);
@@ -21,7 +20,4 @@ $(document).ready(function() {
   image.attr('alt', name);
   modal.find('.modal-footer .image-description').text(description);
   modal.modal();
-  }
+}
-
-  initPreviewModal();
-});

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

@@ -3,6 +3,7 @@
 //= require canvas-to-blob.min
 //= require assets
 //= require comments
+//= require my_modules/image_preview
 
 // Sets callbacks for toggling checkboxes
 function applyCheckboxCallBack()  {
@@ -567,6 +568,7 @@ $(document).ready(function() {
   expandAllSteps();
   setupAssetsLoading();
   initStepsComments();
+  initPreviewModal();
 
   $(function () {
 

app/assets/javascripts/results/result_assets.js

@@ -1,3 +1,5 @@
+//= require my_modules/image_preview
+
 // New result asset behaviour
 $("#new-result-asset").on("ajax:success", function(e, data) {
   var $form = $(data.html);
@@ -64,6 +66,7 @@ function formAjaxResultAsset($form) {
     expandResult($newResult);
     $imgs = $newResult.find("img");
     reloadImages($imgs);
+    initPreviewModal();
   })
   .on("ajax:error", function(e, data) {
     $form.renderFormErrors("result", data.errors, true, e);
@@ -71,3 +74,4 @@ function formAjaxResultAsset($form) {
 }
 
 applyEditResultAssetCallback();
+initPreviewModal();

app/assets/stylesheets/my_modules.scss

@@ -34,6 +34,7 @@
 .modal-image-preview {
   background: transparent;
   font-size: 16px;
+  padding-right: 0px !important;
 
   .preview-close {
     background: transparent;
@@ -43,21 +44,31 @@
     float: right;
   }
 
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: auto;
+  }
+
   .modal-content {
     background: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
     color: $color-white;
-    padding: 0;
+    height: 100%;
+    width: auto;
   }
 
-  .modal-dialog {
+  img {
-    margin: 0;
+    left: 50%;
-    margin-left: auto;
+    margin-right: -50%;
-    margin-right: auto;
+    max-height: 100%;
-    padding: 0;
+    position: absolute;
-    width: 100%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
   }
 
   .modal-header {
@@ -66,14 +77,18 @@
   }
 
   .modal-body {
-    padding: 0;
+    height: 85%;
-    text-align: center;
+    position: relative;
+    width: auto;
   }
 
   .modal-footer {
     background: $color-black;
     border: 0;
+    bottom: 0;
+    position: fixed;
     text-align: center;
+    width: 100%;
   }
 
   .image-download-link {
@@ -92,21 +107,3 @@
     opacity: .99;
   }
 }
-
-@media (min-width: 768px) {
-  .modal-image-preview .modal-dialog {
-    width: 760px;
-  }
-}
-
-@media (min-width: 992px) {
-  .modal-image-preview .modal-dialog {
-    width: 980px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .modal-image-preview .modal-dialog {
-    width: 1180px;
-  }
-}

app/controllers/assets_controller.rb

@@ -20,6 +20,7 @@ class AssetsController < ApplicationController
           # If check permission passes, return :ok
           render json: {
             'preview-url' => @asset.url(:medium),
+            'large-preview-url' => @asset.url(:large),
             'filename' => truncate(@asset.file_file_name,
                                    length:
                                      Constants::FILENAME_TRUNCATION_LENGTH),

app/views/my_modules/protocols.html.erb

@@ -48,4 +48,3 @@
 
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag("my_modules/protocols") %>
-<%= javascript_include_tag("my_modules/image_preview") %>

app/views/my_modules/results.html.erb

@@ -55,7 +55,6 @@
 <%= javascript_include_tag "results/result_texts" %>
 <%= javascript_include_tag "results/result_tables" %>
 <%= javascript_include_tag "results/result_assets" %>
-<%= javascript_include_tag("my_modules/image_preview") %>
 
 <!-- Libraries for formulas -->
 <%= javascript_include_tag "lodash" %>

app/views/results/_result_asset.html.erb

@@ -1,15 +1,15 @@
 <% 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 %>
-    <%= link_to download_asset_path(result.asset),
+      <%= image_tag result.asset.url(:medium), data: {large_url: result.asset.url(:large)} if result.asset.is_image? %>
-      class: 'image-preview-link',
-      id: "modal_link#{result.asset.id}",
-      data: {no_turbolink: true, description: "#{result.name}"} do %>
-      <%= image_tag(preview_asset_path result.asset) if result.asset.is_image? %>
       <p><%= truncate(result.asset.file_file_name,
         length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
     <% end %>
@@ -21,7 +21,7 @@
       <%= image_tag 'medium/processing.gif' %>
     </span>
   <% else %>
-    <%= image_tag(result.asset.url(:medium), data: {large_url: result.asset.url(:large)}) if result.asset.is_image? %>
+    <%= image_tag result.asset.url(:medium) if result.asset.is_image? %>
     <p><%= result.asset.file_file_name %></p>
   <% end %>
 <% end %>