From 0541253ffa482263a0749af824a1a69b0f92afc7 Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Fri, 16 Dec 2016 10:43:14 +0100
Subject: [PATCH] Added modal for images preview [SCI-694]

---
 .../javascripts/my_modules/image_preview.js   | 27 ++++++
 app/assets/stylesheets/my_modules.scss        | 85 +++++++++++++++++++
 app/views/my_modules/protocols.html.erb       |  4 +
 .../shared/_image_preview_modal.html.erb      | 19 +++++
 app/views/steps/_step.html.erb                |  5 +-
 config/initializers/assets.rb                 |  1 +
 6 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/my_modules/image_preview.js
 create mode 100644 app/views/shared/_image_preview_modal.html.erb

diff --git a/app/assets/javascripts/my_modules/image_preview.js b/app/assets/javascripts/my_modules/image_preview.js
new file mode 100644
index 000000000..30538da9a
--- /dev/null
+++ b/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();
+});
diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss
index 250029f54..f2749867b 100644
--- a/app/assets/stylesheets/my_modules.scss
+++ b/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;
+  }
+}
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index ff4b97a1a..bf6bc22f9 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/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") %>
diff --git a/app/views/shared/_image_preview_modal.html.erb b/app/views/shared/_image_preview_modal.html.erb
new file mode 100644
index 000000000..9baac98c1
--- /dev/null
+++ b/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>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index df3ef201f..1d55d407c 100644
--- a/app/views/steps/_step.html.erb
+++ b/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) %>'>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index f8be48c9d..0c4e8e486 100644
--- a/config/initializers/assets.rb
+++ b/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)