From d2b76d838527fd8348f8574b07c6e25f647f16a3 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Mon, 19 Dec 2016 17:36:18 +0100 Subject: [PATCH] Improved image preview modal [SCI-694] --- app/assets/javascripts/assets.js | 9 ++-- .../javascripts/my_modules/image_preview.js | 48 ++++++++--------- app/assets/javascripts/protocols/steps.js.erb | 2 + .../javascripts/results/result_assets.js | 4 ++ app/assets/stylesheets/my_modules.scss | 51 +++++++++---------- app/controllers/assets_controller.rb | 1 + app/views/my_modules/protocols.html.erb | 1 - app/views/my_modules/results.html.erb | 1 - app/views/results/_result_asset.html.erb | 26 +++++----- 9 files changed, 72 insertions(+), 71 deletions(-) diff --git a/app/assets/javascripts/assets.js b/app/assets/javascripts/assets.js index 4e863d5c7..5c8c81212 100644 --- a/app/assets/javascripts/assets.js +++ b/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( - "" + - "

" + - data.filename + "

" + "

" + + data.filename + "

" ); } else { $el.html( @@ -37,6 +39,7 @@ function setupAssetsLoading() { ); } animateSpinner(null, false); + initPreviewModal(); }, error: function (ev) { if (ev.status == 403) { diff --git a/app/assets/javascripts/my_modules/image_preview.js b/app/assets/javascripts/my_modules/image_preview.js index 007ce304e..7cc63b709 100644 --- a/app/assets/javascripts/my_modules/image_preview.js +++ b/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(); +} diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index ea89accf1..bd84f7770 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/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 () { diff --git a/app/assets/javascripts/results/result_assets.js b/app/assets/javascripts/results/result_assets.js index 1b51b4814..65a6dd87f 100644 --- a/app/assets/javascripts/results/result_assets.js +++ b/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(); diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index 216f73a63..8346bf5e2 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/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; - } -} diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index a5d19c8d5..72a242ea7 100644 --- a/app/controllers/assets_controller.rb +++ b/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), diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index bf6bc22f9..f40199dbe 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/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") %> diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb index e9b572ad6..cd9eecd0b 100644 --- a/app/views/my_modules/results.html.erb +++ b/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") %> <%= javascript_include_tag "lodash" %> diff --git a/app/views/results/_result_asset.html.erb b/app/views/results/_result_asset.html.erb index 806619231..f312b2917 100644 --- a/app/views/results/_result_asset.html.erb +++ b/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? %> - - <%= image_tag 'medium/processing.gif' %> - - <% 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? %> + + <%= image_tag 'medium/processing.gif' %> + + <% else %> + <%= image_tag result.asset.url(:medium), data: {large_url: result.asset.url(:large)} if result.asset.is_image? %>

<%= truncate(result.asset.file_file_name, - length: Constants::FILENAME_TRUNCATION_LENGTH) %>

+ length: Constants::FILENAME_TRUNCATION_LENGTH) %>

<% end %> <% end %> <% else %> @@ -21,7 +21,7 @@ <%= image_tag 'medium/processing.gif' %> <% 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? %>

<%= result.asset.file_file_name %>

<% end %> <% end %>