Added modal for images preview [SCI-694]

app/assets/javascripts/my_modules/image_preview.js

@@ -0,0 +1,27 @@
+$(document).ready(function() {
+  var modal = $('#imagePreviewModal');
+
+  function initPreviewModal() {
+    $('.image-preview-link').click(function(e) {
+      e.preventDefault();
+      var name = $(this).find('p').text();
+      var url = $(this).find('img').attr('src');
+      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();
+});

app/assets/stylesheets/my_modules.scss

@@ -2,6 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+@import 'constants';
+
 /* Results index page */
 
 #results {
@@ -28,3 +30,86 @@
     word-wrap: break-word;
   }
 }
+
+.modal-image-preview {
+  background: transparent;
+  font-size: 16px;
+
+  .preview-close {
+    background: transparent;
+    border: 0;
+    color: $color-white;
+    display: inline-block;
+    float: right;
+  }
+
+  .modal-content {
+    background: transparent;
+    border: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: $color-white;
+  }
+
+  .modal-dialog {
+    margin: 0;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+    width: 100%;
+  }
+
+  .modal-content {
+    height: 100%;
+  }
+
+  .modal-header {
+    background: $color-black;
+    border: 0;
+  }
+
+  .modal-body {
+    height: 100%;
+    text-align: center;
+  }
+
+  .modal-footer {
+    background: $color-black;
+    border: 0;
+    text-align: center;
+  }
+
+  .image-download-link {
+    color: $color-white;
+    display: inline-block;
+    float: right;
+    margin-right: 20px;
+  }
+}
+
+.modal-backdrop.modal-image-preview {
+  background: $color-black;
+
+  .in {
+    filter: alpha(opacity = 99);
+    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/views/my_modules/protocols.html.erb

@@ -43,5 +43,9 @@
 <!-- Import protocol elements -->
 <%= render partial: "protocols/import_export/import_elements.html.erb" %>
 
+<!-- Image preview modal -->
+<%= render partial: "shared/image_preview_modal.html.erb" %>
+
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag("my_modules/protocols") %>
+<%= javascript_include_tag("my_modules/image_preview") %>

app/views/shared/_image_preview_modal.html.erb

@@ -0,0 +1,19 @@
+<div id="imagePreviewModal" class="modal modal-image-preview fade" role="dialog" tabindex="-1" aria-labelledby="imagePreviewModal" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="preview-close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button>
+        <span class="image-name"></span>
+        <a class="image-download-link" href='#'>
+          <p><span class="glyphicon glyphicon-download-alt"></span> <%= t('Download')%></p>
+        </a>
+      </div>
+      <div class="modal-body">
+        <img>
+      </div>
+      <div class="modal-footer">
+        <span class="image-description"></span>
+      </div>
+    </div>
+  </div>
+</div>

app/views/steps/_step.html.erb

@@ -66,7 +66,10 @@
                   <li>
                     <% if can_view_or_download_step_assets(@protocol) %>
                       <% if asset.file_present %>
-                        <%= link_to download_asset_path(asset), data: {no_turbolink: true, id: true, status: "asset-present"} do %>
+                        <%= 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? %>
                             <span data-status='asset-loading'
                                   data-present-url='<%= file_present_asset_path(asset) %>'>

config/initializers/assets.rb

@@ -59,6 +59,7 @@ 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)