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'] + "'><p>" +
-              data.filename + "</p></a>"
+              "<img src='" + data['preview-url'] + "' data-large-url='"
+              + data['large-preview-url'] + "'><p>" +
+              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,27 +1,23 @@
-$(document).ready(function() {
+function initPreviewModal() {
+  $('.image-preview-link').off();
+  $('.image-preview-link').click(function(e) {
+    e.preventDefault();
+    var name = $(this).find('p').text();
+    var url = $(this).find('img').data('large-url');
+    var downloadUrl = $(this).attr('href');
+    var description = $(this).data('description');
+    openPreviewModal(name, url, downloadUrl, description);
+  });
+}
+
+function openPreviewModal(name, url, downloadUrl, description) {
   var modal = $('#imagePreviewModal');
-
-  function initPreviewModal() {
-    $('.image-preview-link').click(function(e) {
-      e.preventDefault();
-      var name = $(this).find('p').text();
-      var url = $(this).find('img').data('large-url');
-      var downloadUrl = $(this).attr('href');
-      var description = $(this).data('description');
-      openPreviewModal(name, url, downloadUrl, description);
-    });
-  }
-
-  function openPreviewModal(name, url, downloadUrl, description) {
-    modal.find('.image-name').text(name);
-    var link = modal.find('.image-download-link');
-    link.attr('href', downloadUrl);
-    var image = modal.find('.modal-body img');
-    image.attr('src', url);
-    image.attr('alt', name);
-    modal.find('.modal-footer .image-description').text(description);
-    modal.modal();
-  }
-
-  initPreviewModal();
-});
+  modal.find('.image-name').text(name);
+  var link = modal.find('.image-download-link');
+  link.attr('href', downloadUrl);
+  var image = modal.find('.modal-body img');
+  image.attr('src', url);
+  image.attr('alt', name);
+  modal.find('.modal-footer .image-description').text(description);
+  modal.modal();
+}

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 {
-    margin: 0;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0;
-    width: 100%;
+  img {
+    left: 50%;
+    margin-right: -50%;
+    max-height: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
   }
 
   .modal-header {
@@ -66,14 +77,18 @@
   }
 
   .modal-body {
-    padding: 0;
-    text-align: center;
+    height: 85%;
+    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,17 +1,17 @@
 <% if can_view_or_download_result_assets(result.my_module) %>
-  <% 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),
-      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? %>
+  <%= 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: {large_url: result.asset.url(:large)} if result.asset.is_image? %>
       <p><%= truncate(result.asset.file_file_name,
-                      length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+        length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
     <% end %>
   <% end %>
 <% else %>
@@ -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 %>