From 0541253ffa482263a0749af824a1a69b0f92afc7 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Fri, 16 Dec 2016 10:43:14 +0100 Subject: [PATCH 1/8] 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 @@ <%= render partial: "protocols/import_export/import_elements.html.erb" %> + +<%= 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 @@ + 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 @@
  • <% 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? %> 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) From 8738b3e09d817fa84cc4e5871d9ce9b2db3fef1e Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Fri, 16 Dec 2016 15:44:47 +0100 Subject: [PATCH 2/8] Added image preview to Results [SCI-694] --- app/views/my_modules/results.html.erb | 3 +++ app/views/results/_result_asset.html.erb | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb index 8d90a8007..e9b572ad6 100644 --- a/app/views/my_modules/results.html.erb +++ b/app/views/my_modules/results.html.erb @@ -39,6 +39,8 @@
    +<%= render partial: "shared/image_preview_modal.html.erb" %> +
    @@ -53,6 +55,7 @@ <%= 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 992b08562..a0243759a 100644 --- a/app/views/results/_result_asset.html.erb +++ b/app/views/results/_result_asset.html.erb @@ -5,7 +5,10 @@ <%= image_tag 'medium/processing.gif' %> <% else %> - <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} do %> + <%= 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? %>

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

    From b537feb8a033e17459f270d2cfcb955fab29912b Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Fri, 16 Dec 2016 17:07:08 +0100 Subject: [PATCH 3/8] Added large preview [SCI-694] --- app/assets/javascripts/my_modules/image_preview.js | 2 +- app/assets/stylesheets/my_modules.scss | 7 ++----- app/models/asset.rb | 5 +++-- app/views/results/_result_asset.html.erb | 2 +- app/views/steps/_step.html.erb | 2 +- config/initializers/constants.rb | 1 + 6 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/my_modules/image_preview.js b/app/assets/javascripts/my_modules/image_preview.js index 30538da9a..007ce304e 100644 --- a/app/assets/javascripts/my_modules/image_preview.js +++ b/app/assets/javascripts/my_modules/image_preview.js @@ -5,7 +5,7 @@ $(document).ready(function() { $('.image-preview-link').click(function(e) { e.preventDefault(); var name = $(this).find('p').text(); - var url = $(this).find('img').attr('src'); + var url = $(this).find('img').data('large-url'); var downloadUrl = $(this).attr('href'); var description = $(this).data('description'); openPreviewModal(name, url, downloadUrl, description); diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index f2749867b..216f73a63 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -49,6 +49,7 @@ -webkit-box-shadow: none; box-shadow: none; color: $color-white; + padding: 0; } .modal-dialog { @@ -59,17 +60,13 @@ width: 100%; } - .modal-content { - height: 100%; - } - .modal-header { background: $color-black; border: 0; } .modal-body { - height: 100%; + padding: 0; text-align: center; } diff --git a/app/models/asset.rb b/app/models/asset.rb index 04322221f..263f9f8e4 100644 --- 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: { medium: [Constants::MEDIUM_PIC_FORMAT, :jpg], + large: [Constants::LARGE_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] + [:medium, :large] else {} end diff --git a/app/views/results/_result_asset.html.erb b/app/views/results/_result_asset.html.erb index a0243759a..806619231 100644 --- a/app/views/results/_result_asset.html.erb +++ b/app/views/results/_result_asset.html.erb @@ -21,7 +21,7 @@ <%= image_tag 'medium/processing.gif' %> <% else %> - <%= image_tag(preview_asset_path result.asset) if result.asset.is_image? %> + <%= image_tag(result.asset.url(:medium), data: {large_url: result.asset.url(:large)}) if result.asset.is_image? %>

    <%= result.asset.file_file_name %>

    <% end %> <% end %> diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb index 1d55d407c..e926727cc 100644 --- a/app/views/steps/_step.html.erb +++ b/app/views/steps/_step.html.erb @@ -76,7 +76,7 @@ <%= image_tag 'medium/processing.gif' %> <% else %> - <%= image_tag preview_asset_path(asset) if asset.is_image? %> + <%= image_tag asset.url(:medium), data: {large_url: asset.url(:large)} if asset.is_image? %> <% end %>

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

    diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb index c967bdb3e..e784d00b6 100644 --- a/config/initializers/constants.rb +++ b/config/initializers/constants.rb @@ -73,6 +73,7 @@ class Constants # Picture size formats MEDIUM_PIC_FORMAT = '300x300>'.freeze + LARGE_PIC_FORMAT = '800x600>'.freeze THUMB_PIC_FORMAT = '100x100>'.freeze ICON_PIC_FORMAT = '40x40>'.freeze ICON_SMALL_PIC_FORMAT = '30x30>'.freeze From d2b76d838527fd8348f8574b07c6e25f647f16a3 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Mon, 19 Dec 2016 17:36:18 +0100 Subject: [PATCH 4/8] 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 %> From cbef971d858d1c988b943b7abd77566a5e16a1ea Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Tue, 20 Dec 2016 15:36:07 +0100 Subject: [PATCH 5/8] Fix timeouts when fetching images from S3 [SCI-694] --- .../javascripts/my_modules/image_preview.js | 31 +++++++++++++------ app/assets/stylesheets/my_modules.scss | 2 +- app/controllers/assets_controller.rb | 15 +++++++++ app/views/steps/_step.html.erb | 2 +- config/routes.rb | 1 + 5 files changed, 40 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/my_modules/image_preview.js b/app/assets/javascripts/my_modules/image_preview.js index 7cc63b709..69b65d4ba 100644 --- a/app/assets/javascripts/my_modules/image_preview.js +++ b/app/assets/javascripts/my_modules/image_preview.js @@ -3,7 +3,7 @@ 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 url = $(this).find('img').data('get-preview-url'); var downloadUrl = $(this).attr('href'); var description = $(this).data('description'); openPreviewModal(name, url, downloadUrl, description); @@ -12,12 +12,25 @@ function initPreviewModal() { function openPreviewModal(name, url, downloadUrl, description) { var modal = $('#imagePreviewModal'); - 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(); + $.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); + modal.find('.modal-footer .image-description').text(description); + modal.modal(); + }, + error: function (ev) { + // TODO + } + }); + } diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index 8346bf5e2..31ec3c6c5 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -34,7 +34,7 @@ .modal-image-preview { background: transparent; font-size: 16px; - padding-right: 0px !important; + padding-right: 0 !important; .preview-close { background: transparent; diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 72a242ea7..dd60c48c1 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -40,6 +40,21 @@ class AssetsController < ApplicationController end end + 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 + def download if !@asset.file_present render_404 and return diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb index e926727cc..dc92cfc8a 100644 --- a/app/views/steps/_step.html.erb +++ b/app/views/steps/_step.html.erb @@ -76,7 +76,7 @@ <%= image_tag 'medium/processing.gif' %> <% else %> - <%= image_tag asset.url(:medium), data: {large_url: asset.url(:large)} if asset.is_image? %> + <%= image_tag asset.url(:medium), data: {'get-preview-url': large_image_url_asset_path(asset)} if asset.is_image? %> <% end %>

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

    diff --git a/config/routes.rb b/config/routes.rb index a2f8e2447..9c4b5d679 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -282,6 +282,7 @@ 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' From 00ea3a027cefb4b8f956b8d6b42f9683ee438b9c Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Tue, 20 Dec 2016 16:10:53 +0100 Subject: [PATCH 6/8] Fix generation of preview url for new steps and results [SCI-694] --- app/assets/javascripts/assets.js | 4 ++-- app/controllers/assets_controller.rb | 2 +- app/views/results/_result_asset.html.erb | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/assets.js b/app/assets/javascripts/assets.js index 5c8c81212..1447ca4b8 100644 --- a/app/assets/javascripts/assets.js +++ b/app/assets/javascripts/assets.js @@ -28,8 +28,8 @@ function setupAssetsLoading() { if (data.type === "image") { $el.html( - "

    " + + "

    " + data.filename + "

    " ); } else { diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index dd60c48c1..0e51af23f 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -20,7 +20,7 @@ class AssetsController < ApplicationController # If check permission passes, return :ok render json: { 'preview-url' => @asset.url(:medium), - 'large-preview-url' => @asset.url(:large), + 'get-preview-url' => large_image_url_asset_path(@asset), 'filename' => truncate(@asset.file_file_name, length: Constants::FILENAME_TRUNCATION_LENGTH), diff --git a/app/views/results/_result_asset.html.erb b/app/views/results/_result_asset.html.erb index f312b2917..73eee0edb 100644 --- a/app/views/results/_result_asset.html.erb +++ b/app/views/results/_result_asset.html.erb @@ -9,7 +9,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), data: {'get-preview-url': large_image_url_asset_path(result.asset)} if result.asset.is_image? %>

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

    <% end %> From aa2b5732788d0a951d251a3f4604c67314b4aa2a Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Fri, 6 Jan 2017 15:58:23 +0100 Subject: [PATCH 7/8] Enable image preview while editing steps and code style improvements [SCI-694] --- app/assets/javascripts/assets.js | 12 +++---- app/assets/javascripts/protocols/steps.js.erb | 3 +- .../javascripts/results/result_assets.js | 3 +- .../{my_modules => sitewide}/image_preview.js | 13 +++++--- app/controllers/assets_controller.rb | 12 ++----- app/models/asset.rb | 6 ++-- app/views/results/_result_asset.html.erb | 31 ++++++++++------- app/views/steps/_empty_step.html.erb | 2 +- app/views/steps/_form_assets.html.erb | 22 ++++++++++--- app/views/steps/_step.html.erb | 33 +++++++++++-------- config/initializers/assets.rb | 1 - config/initializers/constants.rb | 2 +- config/routes.rb | 5 +-- 13 files changed, 83 insertions(+), 62 deletions(-) rename app/assets/javascripts/{my_modules => sitewide}/image_preview.js (78%) diff --git a/app/assets/javascripts/assets.js b/app/assets/javascripts/assets.js index 1447ca4b8..e80c95e05 100644 --- a/app/assets/javascripts/assets.js +++ b/app/assets/javascripts/assets.js @@ -1,5 +1,3 @@ -//= require my_modules/image_preview - function setupAssetsLoading() { var DELAY = 2500; var REPETITIONS = 60; @@ -28,8 +26,8 @@ function setupAssetsLoading() { if (data.type === "image") { $el.html( - "

    " + + "

    " + data.filename + "

    " ); } else { @@ -41,15 +39,15 @@ 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( - "

    " + + "

    " + data.filename + "

    " ); } else { diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index bd84f7770..715b4071b 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -3,7 +3,6 @@ //= require canvas-to-blob.min //= require assets //= require comments -//= require my_modules/image_preview // Sets callbacks for toggling checkboxes function applyCheckboxCallBack() { @@ -80,6 +79,7 @@ function applyCancelCallBack() { setTimeout(function() { initStepsComments(); + initPreviewModal(); }, 1000); }) @@ -104,6 +104,7 @@ function applyEditCallBack() { toggleButtons(false); initializeCheckboxSorting(); animateSpinner(null, false); + initPreviewModal(); $("#new-step-checklists fieldset.nested_step_checklists ul").each(function () { enableCheckboxSorting(this); diff --git a/app/assets/javascripts/results/result_assets.js b/app/assets/javascripts/results/result_assets.js index 65a6dd87f..e489f02cc 100644 --- a/app/assets/javascripts/results/result_assets.js +++ b/app/assets/javascripts/results/result_assets.js @@ -1,5 +1,3 @@ -//= require my_modules/image_preview - // New result asset behaviour $("#new-result-asset").on("ajax:success", function(e, data) { var $form = $(data.html); @@ -39,6 +37,7 @@ function applyEditResultAssetCallback() { $form.remove(); applyEditResultAssetCallback(); toggleResultEditButtons(true); + initPreviewModal(); }); toggleResultEditButtons(false); diff --git a/app/assets/javascripts/my_modules/image_preview.js b/app/assets/javascripts/sitewide/image_preview.js similarity index 78% rename from app/assets/javascripts/my_modules/image_preview.js rename to app/assets/javascripts/sitewide/image_preview.js index 69b65d4ba..c761bfc00 100644 --- a/app/assets/javascripts/my_modules/image_preview.js +++ b/app/assets/javascripts/sitewide/image_preview.js @@ -3,7 +3,7 @@ function initPreviewModal() { $('.image-preview-link').click(function(e) { e.preventDefault(); var name = $(this).find('p').text(); - var url = $(this).find('img').data('get-preview-url'); + var url = $(this).find('img').data('preview-url'); var downloadUrl = $(this).attr('href'); var description = $(this).data('description'); openPreviewModal(name, url, downloadUrl, description); @@ -16,7 +16,7 @@ function openPreviewModal(name, url, downloadUrl, description) { url: url, type: 'GET', dataType: 'json', - success: function (data) { + success: function(data) { modal.find('.image-name').text(name); var link = modal.find('.image-download-link'); link.attr('href', downloadUrl); @@ -25,12 +25,17 @@ function openPreviewModal(name, url, downloadUrl, description) { 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) { + error: function(ev) { // TODO } }); - } diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 0e51af23f..9c0ff9c18 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -19,8 +19,8 @@ class AssetsController < ApplicationController # If check permission passes, return :ok render json: { - 'preview-url' => @asset.url(:medium), - 'get-preview-url' => large_image_url_asset_path(@asset), + '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), @@ -32,14 +32,6 @@ class AssetsController < ApplicationController end end - def preview - if @asset.is_image? - redirect_to @asset.url(:medium), status: 307 - else - render_400 - end - end - def large_image_url respond_to do |format| format.json do diff --git a/app/models/asset.rb b/app/models/asset.rb index 263f9f8e4..1ff696c60 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -7,8 +7,8 @@ class Asset < ActiveRecord::Base # Paperclip validation has_attached_file :file, - styles: { medium: [Constants::MEDIUM_PIC_FORMAT, :jpg], - large: [Constants::LARGE_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, @@ -29,7 +29,7 @@ class Asset < ActiveRecord::Base %r{^image/#{ Regexp.union( Constants::WHITELISTED_IMAGE_TYPES ) }} - [:medium, :large] + [:large, :medium] else {} end diff --git a/app/views/results/_result_asset.html.erb b/app/views/results/_result_asset.html.erb index 73eee0edb..fc85525b1 100644 --- a/app/views/results/_result_asset.html.erb +++ b/app/views/results/_result_asset.html.erb @@ -1,17 +1,24 @@ <% if can_view_or_download_result_assets(result.my_module) %> - <%= 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: {'get-preview-url': large_image_url_asset_path(result.asset)} if result.asset.is_image? %> -

    <%= truncate(result.asset.file_file_name, + <% if result.asset.file.processing? %> + + <%= image_tag 'medium/processing.gif' %> + + <% else %> + <% 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)} %> +

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

    + <% end %> + <% else %> + <%= link_to download_asset_path(result.asset), data: {no_turbolink: true} do %> +

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

    + <% end %> <% end %> <% end %> <% else %> diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb index d189c52ab..dd2c1c0a4 100644 --- a/app/views/steps/_empty_step.html.erb +++ b/app/views/steps/_empty_step.html.erb @@ -42,7 +42,7 @@
    <%= 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 %> diff --git a/app/views/steps/_form_assets.html.erb b/app/views/steps/_form_assets.html.erb index 34ad3656a..d3c5b069d 100644 --- a/app/views/steps/_form_assets.html.erb +++ b/app/views/steps/_form_assets.html.erb @@ -11,16 +11,28 @@
    <% 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? %> -

    <%= ff.object.file_file_name %>

    + <% 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)} %> +

    <%= truncate(ff.object.file_file_name, + length: Constants::FILENAME_TRUNCATION_LENGTH) %>

    + <% 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? %> +

    <%= truncate(ff.object.file_file_name, + length: Constants::FILENAME_TRUNCATION_LENGTH) %>

    + <% 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? %>

    <%= ff.object.file_file_name %>

    <% end %> <% else %> <%= ff.file_field :file %> <% end %>
    -
    \ No newline at end of file + diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb index dc92cfc8a..d418ad719 100644 --- a/app/views/steps/_step.html.erb +++ b/app/views/steps/_step.html.erb @@ -66,20 +66,27 @@
  • <% if can_view_or_download_step_assets(@protocol) %> <% if asset.file_present %> - <%= 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? %> - - <%= image_tag 'medium/processing.gif' %> - + <% if asset.file.processing? %> + + <%= image_tag 'medium/processing.gif' %> + + <% 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)} %> +

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

    + <% end %> <% else %> - <%= image_tag asset.url(:medium), data: {'get-preview-url': large_image_url_asset_path(asset)} if asset.is_image? %> + <%= link_to download_asset_path(asset), data: {no_turbolink: true} do %> +

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

    + <% end %> <% end %> -

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

    <% end %> <% else %> <% else %> - <%= image_tag preview_asset_path(asset) if asset.is_image? %> + <%= image_tag asset.url(:medium) if asset.is_image? %> <% end %>

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

    diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 0c4e8e486..f8be48c9d 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -59,7 +59,6 @@ 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) diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb index e784d00b6..f80545adf 100644 --- a/config/initializers/constants.rb +++ b/config/initializers/constants.rb @@ -72,8 +72,8 @@ class Constants #============================================================================= # Picture size formats - MEDIUM_PIC_FORMAT = '300x300>'.freeze LARGE_PIC_FORMAT = '800x600>'.freeze + MEDIUM_PIC_FORMAT = '300x300>'.freeze THUMB_PIC_FORMAT = '100x100>'.freeze ICON_PIC_FORMAT = '40x40>'.freeze ICON_SMALL_PIC_FORMAT = '30x30>'.freeze diff --git a/config/routes.rb b/config/routes.rb index 9c4b5d679..d40158a37 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -282,9 +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/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 From 89710d8782e0fa2ff1e771ec99ed14991679356f Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Fri, 6 Jan 2017 16:41:24 +0100 Subject: [PATCH 8/8] Enable image preview for newly uploaded images [SCI-694] --- app/assets/javascripts/assets.js | 5 ++++- app/controllers/assets_controller.rb | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/assets.js b/app/assets/javascripts/assets.js index e80c95e05..c0fa1e265 100644 --- a/app/assets/javascripts/assets.js +++ b/app/assets/javascripts/assets.js @@ -26,9 +26,12 @@ function setupAssetsLoading() { if (data.type === "image") { $el.html( + "" + "

    " + - data.filename + "

    " + data.filename + '

    ' ); } else { $el.html( diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 9c0ff9c18..badb98a9a 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -19,6 +19,7 @@ class AssetsController < ApplicationController # If check permission passes, return :ok render json: { + 'asset-id' => @asset.id, 'image-tag-url' => @asset.url(:medium), 'preview-url' => large_image_url_asset_path(@asset), 'filename' => truncate(@asset.file_file_name,