Merge pull request #364 from okriuchykhin/ok_SCI_694

Added modal for images preview [SCI-694]
2025-02-21 14:23:13 +08:00 · 2017-01-09 11:46:16 +01:00 · 2017-01-09 11:46:16 +01:00 · 57e1e1ec90
commit 57e1e1ec90
parent 90a115fff3 89710d8782
16 changed files with 236 additions and 37 deletions
--- a/app/assets/javascripts/assets.js
+++ b/app/assets/javascripts/assets.js
@ -26,9 +26,12 @@ function setupAssetsLoading() {

          if (data.type === "image") {
            $el.html(
-              "<a href='" + data['download-url'] + "'>" +
-              "<img src='" + data['preview-url'] + "'><p>" +
-              data.filename + "</p></a>"
+              "<a class='image-preview-link' id='modal_link" +
+              data['asset-id'] + "' data-status='asset-present' " +
+              "href='" + data['download-url'] + "'>" +
+              "<img src='" + data['image-tag-url'] + "' data-preview-url='" +
+              data['preview-url'] + "'><p>" +
+              data.filename + '</p></a>'
            );
          } else {
            $el.html(
@ -37,16 +40,17 @@ function setupAssetsLoading() {
            );
          }
          animateSpinner(null, false);
+          initPreviewModal();
        },
-        error: function (ev) {
-          if (ev.status == 403) {
+        error: function(data) {
+          if (data.status == 403) {
            $el.find('img').hide();
            $el.next().hide();
            // Image/file exists, but user doesn't have
            // rights to download it
            if (type === "image") {
              $el.html(
-                "<img src='" + $data['preview-url'] + "'><p>" +
+                "<img src='" + data['image-tag-url'] + "'><p>" +
                data.filename + "</p>"
              );
            } else {
--- a/app/assets/javascripts/protocols/steps.js.erb
+++ b/app/assets/javascripts/protocols/steps.js.erb
@ -79,6 +79,7 @@ function applyCancelCallBack() {

    setTimeout(function() {
      initStepsComments();
+      initPreviewModal();
    }, 1000);

  })
@ -103,6 +104,7 @@ function applyEditCallBack() {
    toggleButtons(false);
    initializeCheckboxSorting();
    animateSpinner(null, false);
+    initPreviewModal();

    $("#new-step-checklists fieldset.nested_step_checklists ul").each(function () {
      enableCheckboxSorting(this);
@ -567,6 +569,7 @@ $(document).ready(function() {
  expandAllSteps();
  setupAssetsLoading();
  initStepsComments();
+  initPreviewModal();

  $(function () {

--- a/app/assets/javascripts/results/result_assets.js
+++ b/app/assets/javascripts/results/result_assets.js
@ -37,6 +37,7 @@ function applyEditResultAssetCallback() {
      $form.remove();
      applyEditResultAssetCallback();
      toggleResultEditButtons(true);
+      initPreviewModal();
    });

    toggleResultEditButtons(false);
@ -64,6 +65,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 +73,4 @@ function formAjaxResultAsset($form) {
 }

 applyEditResultAssetCallback();
+initPreviewModal();
--- a/app/assets/javascripts/sitewide/image_preview.js
+++ b/app/assets/javascripts/sitewide/image_preview.js
@ -0,0 +1,41 @@
+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('preview-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');
+  $.ajax({
+    url: url,
+    type: 'GET',
+    dataType: 'json',
+    success: function(data) {
+      modal.find('.image-name').text(name);
+      var link = modal.find('.image-download-link');
+      link.attr('href', downloadUrl);
+      link.attr('data-no-turbolink', true);
+      link.attr('data-status', 'asset-present');
+      var image = modal.find('.modal-body img');
+      image.attr('src', data['large-preview-url']);
+      image.attr('alt', name);
+      image.click(function(ev) {
+        ev.stopPropagation();
+      });
+      modal.find('.modal-footer .image-description').text(description);
+      modal.find('.modal-body').click(function() {
+        modal.modal('hide');
+      });
+      modal.modal();
+    },
+    error: function(ev) {
+      // TODO
+    }
+  });
+}
--- 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,80 @@
    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 {
+    left: 50%;
+    margin-right: -50%;
+    max-height: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
+  }
+
+  .modal-header {
+    background: $color-black;
+    border: 0;
+  }
+
+  .modal-body {
+    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 {
+    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;
+  }
+}
--- a/app/controllers/assets_controller.rb
+++ b/app/controllers/assets_controller.rb
@ -19,7 +19,9 @@ class AssetsController < ApplicationController

          # If check permission passes, return :ok
          render json: {
-            'preview-url' => @asset.url(:medium),
+            'asset-id' => @asset.id,
+            'image-tag-url' => @asset.url(:medium),
+            'preview-url' => large_image_url_asset_path(@asset),
            'filename' => truncate(@asset.file_file_name,
                                   length:
                                     Constants::FILENAME_TRUNCATION_LENGTH),
@ -31,11 +33,18 @@ class AssetsController < ApplicationController
    end
  end

-  def preview
-    if @asset.is_image?
-      redirect_to @asset.url(:medium), status: 307
-    else
-      render_400
+  def large_image_url
+    respond_to do |format|
+      format.json do
+        render json: {
+          'large-preview-url' => @asset.url(:large),
+          'filename' => truncate(@asset.file_file_name,
+                                 length:
+                                   Constants::FILENAME_TRUNCATION_LENGTH),
+          'download-url' => download_asset_path(@asset),
+          'type' => (@asset.is_image? ? 'image' : 'file')
+        }
+      end
    end
  end

--- a/app/models/asset.rb
+++ b/app/models/asset.rb
@ -7,7 +7,8 @@ class Asset < ActiveRecord::Base

  # Paperclip validation
  has_attached_file :file,
-                    styles: { medium: [Constants::MEDIUM_PIC_FORMAT, :jpg] },
+                    styles: { large: [Constants::LARGE_PIC_FORMAT, :jpg],
+                              medium: [Constants::MEDIUM_PIC_FORMAT, :jpg] },
                    convert_options: { medium: '-quality 70 -strip' }

  validates_attachment :file,
@ -28,7 +29,7 @@ class Asset < ActiveRecord::Base
                                           %r{^image/#{ Regexp.union(
                                             Constants::WHITELISTED_IMAGE_TYPES
                                           ) }}
-                                          [:medium]
+                                          [:large, :medium]
                                        else
                                          {}
                                        end
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@ -43,5 +43,8 @@
 <!-- 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") %>
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@ -39,6 +39,8 @@

 <div style="height: 15px;"></div>

+<%= render partial: "shared/image_preview_modal.html.erb" %>
+
 <div id="results" data-module-id="<%= @my_module.id %>"
  data-module-protocols-step-text="<%=t 'tutorial.module_results_html' %>"
  data-module-protocols-click-samples-step-text="<%=t 'tutorial.module_results_click_samples_html' %>">
--- a/app/views/results/_result_asset.html.erb
+++ b/app/views/results/_result_asset.html.erb
@ -1,14 +1,24 @@
 <% 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) %>'>
+      data-present-url='<%= file_present_asset_path(result.asset) %>'>
      <%= image_tag 'medium/processing.gif' %>
    </span>
  <% else %>
-    <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} 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>
+    <% 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 %>
+        <%= image_tag result.asset.url(:medium), data: {'preview-url': large_image_url_asset_path(result.asset)} %>
+        <p><%= truncate(result.asset.file_file_name,
+        length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+      <% end %>
+    <% else %>
+      <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} do %>
+        <p><%= truncate(result.asset.file_file_name,
+        length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+      <% end %>
    <% end %>
  <% end %>
 <% else %>
@ -18,7 +28,7 @@
      <%= image_tag 'medium/processing.gif' %>
    </span>
  <% else %>
-    <%= image_tag(preview_asset_path result.asset) 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 %>
--- a/app/views/shared/_image_preview_modal.html.erb
+++ 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>
--- a/app/views/steps/_empty_step.html.erb
+++ b/app/views/steps/_empty_step.html.erb
@ -42,7 +42,7 @@
  </div>
  <div class="tab-pane" role="tabpanel" id="new-step-assets">
    <%= f.nested_fields_for :assets do |ff| %>
-      <%= render "form_assets.html.erb", ff: ff %>
+      <%= render "form_assets.html.erb", ff: ff, step: step %>
    <% end %>
    <%= f.add_nested_fields_link :assets do %>
      <span class="glyphicon glyphicon-plus"></span>
--- a/app/views/steps/_form_assets.html.erb
+++ b/app/views/steps/_form_assets.html.erb
@ -11,16 +11,28 @@
  <div class="panel-body">
    <% if ff.object.file.exists? %>
      <% if can_view_or_download_step_assets(@protocol) %>
-        <%= link_to download_asset_path(ff.object), data: {no_turbolink: true} do %>
-          <%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
-          <p><%= ff.object.file_file_name %></p>
+        <% if ff.object.is_image? %>
+          <%= link_to download_asset_path(ff.object),
+            class: 'image-preview-link',
+            id: "modal_link#{ff.object.id}",
+            data: {no_turbolink: true, id: true, status: "asset-present", description: "#{step.position + 1}. #{step.name}"} do %>
+            <%= image_tag ff.object.url(:medium), data: {'preview-url': large_image_url_asset_path(ff.object)} %>
+            <p><%= truncate(ff.object.file_file_name,
+                            length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+          <% end %>
+        <% else %>
+          <%= link_to download_asset_path(ff.object), data: {no_turbolink: true} do %>
+            <%= image_tag ff.object.url(:medium) if ff.object.is_image? %>
+            <p><%= truncate(ff.object.file_file_name,
+                            length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+          <% end %>
        <% end %>
      <% else %>
-        <%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
+        <%= image_tag image_tag ff.object.url(:medium) if ff.object.is_image? %>
        <p><%= ff.object.file_file_name %></p>
      <% end %>
    <% else %>
      <%= ff.file_field :file %>
    <% end %>
  </div>
-</div>
+</div>
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@ -66,17 +66,27 @@
                  <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 %>
-                          <% if asset.file.processing? %>
-                            <span data-status='asset-loading'
-                                  data-present-url='<%= file_present_asset_path(asset) %>'>
-                              <%= image_tag 'medium/processing.gif' %>
-                            </span>
+                        <% if asset.file.processing? %>
+                          <span data-status='asset-loading'
+                                data-present-url='<%= file_present_asset_path(asset) %>'>
+                            <%= image_tag 'medium/processing.gif' %>
+                          </span>
+                        <% else %>
+                          <% if asset.is_image? %>
+                            <%= 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 %>
+                              <%= 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 %>
-                            <%= image_tag preview_asset_path(asset) if asset.is_image? %>
+                            <%= link_to download_asset_path(asset), data: {no_turbolink: true} do %>
+                            <p><%= truncate(asset.file_file_name,
+                                            length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+                            <% end %>
                          <% end %>
-                          <p><%= truncate(asset.file_file_name,
-                                          length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
                        <% end %>
                      <% else %>
                        <span data-status='asset-loading'
@ -91,7 +101,7 @@
                          <%= image_tag 'medium/processing.gif' %>
                        </span>
                      <% else %>
-                        <%= image_tag preview_asset_path(asset) if asset.is_image? %>
+                        <%= image_tag asset.url(:medium) if asset.is_image? %>
                      <% end %>
                      <p><%= truncate(asset.file_file_name,
                                      length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@ -72,6 +72,7 @@ class Constants
  #=============================================================================

  # Picture size formats
+  LARGE_PIC_FORMAT = '800x600>'.freeze
  MEDIUM_PIC_FORMAT = '300x300>'.freeze
  THUMB_PIC_FORMAT = '100x100>'.freeze
  ICON_PIC_FORMAT = '40x40>'.freeze
--- a/config/routes.rb
+++ b/config/routes.rb
@ -282,8 +282,10 @@ Rails.application.routes.draw do
  # We cannot use 'resources :assets' because assets is a reserved route
  # in Rails (assets pipeline) and causes funky behavior
  get "files/:id/present", to: "assets#file_present", as: "file_present_asset"
+  get 'files/:id/large_url',
+      to: 'assets#large_image_url',
+      as: 'large_image_url_asset'
  get "files/:id/download", to: "assets#download", as: "download_asset"
-  get "files/:id/preview", to: "assets#preview", as: "preview_asset"
  post 'asset_signature' => 'assets#signature'

  devise_scope :user do