Add image preview to protocol repository [SCI-877]

app/assets/javascripts/protocols/index.js

@@ -212,6 +212,7 @@ function initProtocolPreviewModal() {
           initHandsOnTable(modalBody);
           modal.modal("show");
           initHandsOnTable(modalBody);
+          initPreviewModal();
         },
         error: function (error) {
           // TODO

app/assets/javascripts/sitewide/image_preview.js

@@ -34,6 +34,7 @@ function openPreviewModal(name, url, downloadUrl, description) {
         modal.modal('hide');
       });
       modal.modal();
+      $('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
     },
     error: function(ev) {
       // TODO

app/assets/stylesheets/my_modules.scss

@@ -46,86 +46,3 @@
     word-wrap: break-word;
   }
 }
-
-.modal-image-preview {
-  background: transparent;
-  font-size: 16px;
-  padding-right: 0 !important;
-
-  .preview-close {
-    background: transparent;
-    border: 0;
-    color: $color-white;
-    display: inline-block;
-    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;
-    height: 100%;
-    width: auto;
-  }
-
-  img {
-    height: auto;
-    max-width: 100%;
-
-    @media (max-height: 520px) {
-      height: 80%;
-      max-width: 100%;
-    }
-  }
-
-  .modal-header {
-    background: $color-black;
-    border: 0;
-    height: 60px;
-  }
-
-  .modal-body {
-    align-items: center;
-    display: -moz-flex;
-    display: -webkit-flex;
-    display: flex;
-    height: calc(100% - 120px);
-    justify-content: center;
-    overflow: hidden;
-  }
-
-  .modal-footer {
-    background: $color-black;
-    border: 0;
-    bottom: 0;
-    height: 60px;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-  }
-
-  .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;
-  }
-}

app/assets/stylesheets/themes/scinote.scss

@@ -1594,6 +1594,82 @@ html.turbolinks-progress-bar::before {
   }
 }
 
+// Image preview modal
+.modal-image-preview {
+  background: transparent;
+  font-size: 16px;
+  padding-right: 0 !important;
+  z-index: 1060;
+
+  .preview-close {
+    background: transparent;
+    border: 0;
+    color: $color-white;
+    display: inline-block;
+    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;
+    height: 100%;
+    width: auto;
+  }
+
+  img {
+    height: auto;
+    max-width: 100%;
+
+    @media (max-height: 520px) {
+      height: 80%;
+      max-width: 100%;
+    }
+  }
+
+  .modal-header {
+    background: $color-black;
+    border: 0;
+    height: 60px;
+  }
+
+  .modal-body {
+    align-items: center;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    height: calc(100% - 120px);
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .modal-footer {
+    background: $color-black;
+    border: 0;
+    bottom: 0;
+    height: 60px;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+  }
+
+  .image-download-link {
+    color: $color-white;
+    display: inline-block;
+    float: right;
+    margin-right: 20px;
+  }
+}
+
 // Disable textarea resizing throughout application
 // (will be done via autosize JS plugin)
 textarea {

app/views/protocols/index.html.erb

@@ -131,6 +131,7 @@
 <%= render partial: "protocols/index/import_results_modal.html.erb" %>
 <%= render partial: "protocols/index/linked_children_modal.html.erb" %>
 <%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
+<%= render partial: "shared/image_preview_modal.html.erb" %>
 
 <%= render partial: "protocols/import_export/import_elements.html.erb" %>
 

app/views/protocols/index/_protocol_preview_modal_body.html.erb

@@ -113,24 +113,42 @@
                       <% assets.each do |asset| %>
                         <li>
                           <% if can_view_or_download_step_assets(@protocol) %>
-                            <% if asset.is_image? %>
+                            <% if asset.file_present %>
-                              <%= link_to download_asset_path(asset),
+                              <% if asset.file.processing? %>
-                                class: 'image-preview-link',
+                                <span data-status='asset-loading'
-                                id: "modal_link#{asset.id}",
+                                      data-present-url='<%= file_present_asset_path(asset) %>'>
-                                data: {no_turbolink: true, id: true, status: "asset-present",
+                                  <%= image_tag 'medium/processing.gif' %>
-                                  description: "#{step.position + 1}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
+                                </span>
-                                <%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
+                              <% else %>
-                                <p><%= truncate(asset.file_file_name,
+                                <% if asset.is_image? %>
-                                                length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+                                  <%= 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}. #{truncate(step.name, length: Constants::FILENAME_TRUNCATION_LENGTH)}"} do %>
+                                    <%= image_tag asset.url(:medium), data: {'preview-url': large_image_url_asset_path(asset)} %>
+                                    <p><%= truncate(asset.file_file_name,
+                                                    length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+                                  <% end %>
+                                <% else %>
+                                  <%= render partial: 'steps/wopi_controlls.html.erb', locals: { asset: asset } %>
+                                <% end %>
                               <% end %>
                             <% else %>
-                              <%= link_to download_asset_path(asset), data: {no_turbolink: true} do %>
+                              <span data-status='asset-loading'
-                                <p><%= truncate(asset.file_file_name,
+                                    data-present-url='<%= file_present_asset_path(asset) %>'>
-                                                length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+                                <%= image_tag 'medium/processing.gif' %>
-                              <% end %>
+                              </span>
                             <% end %>
                           <% else %>
-                            <%= image_tag asset.url(:medium) if asset.is_image? %>
+                            <% if asset.file.processing? %>
+                              <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) if asset.is_image? %>
+                            <% end %>
                             <p><%= truncate(asset.file_file_name,
                                             length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
                           <% end %>