scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-28 17:54:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

Enable image preview while editing steps and code style improvements [SCI-694]

Browse source
This commit is contained in:
Oleksii Kriuchykhin 2017-01-06 15:58:23 +01:00
parent 00ea3a027c
commit aa2b573278
13 changed files with 83 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/assets.js
View file

@ -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(
"<img src='" + data['preview-url'] + "' data-get-preview-url='"
+ data['get-preview-url'] + "'><p>" +
"<img src='" + data['image-tag-url'] + "' data-preview-url='" +
data['preview-url'] + "'><p>" +
data.filename + "</p>"
);
} 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(
"<img src='" + $data['preview-url'] + "'><p>" +
"<img src='" + data['image-tag-url'] + "'><p>" +
data.filename + "</p>"
);
} else {

3
app/assets/javascripts/protocols/steps.js.erb
View file

@ -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);

3
app/assets/javascripts/results/result_assets.js
View file

@ -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);

13
app/assets/javascripts/my_modules/image_preview.js → app/assets/javascripts/sitewide/image_preview.js
View file

@ -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
}
});
}

12
app/controllers/assets_controller.rb
View file

@ -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

6
app/models/asset.rb
View file

@ -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

17
app/views/results/_result_asset.html.erb
View file

@ -1,18 +1,25 @@
<% 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? %>
<span data-status='asset-loading'
data-present-url='<%= file_present_asset_path(result.asset) %>'>
<%= image_tag 'medium/processing.gif' %>
</span>
<% else %>
<%= image_tag result.asset.url(:medium), data: {'get-preview-url': large_image_url_asset_path(result.asset)} if result.asset.is_image? %>
<% 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 %>
<% if result.asset.file.processing? %>

2
app/views/steps/_empty_step.html.erb
View file

@ -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>

20
app/views/steps/_form_assets.html.erb
View file

@ -11,12 +11,24 @@
<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 %>
<%= image_tag(preview_asset_path ff.object) if ff.object.is_image? %>
<%= 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 image_tag ff.object.url(:medium) if ff.object.is_image? %>
<p><%= ff.object.file_file_name %></p>
<% end %>
<% else %>

25
app/views/steps/_step.html.erb
View file

@ -66,21 +66,28 @@
<li>
<% if can_view_or_download_step_assets(@protocol) %>
<% if asset.file_present %>
<% 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 %>
<% 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), data: {'get-preview-url': large_image_url_asset_path(asset)} if asset.is_image? %>
<% end %>
<%= 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 %>
<%= 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 %>
<% end %>
<% else %>
<span data-status='asset-loading'
data-present-url='<%= file_present_asset_path(asset) %>'>
@ -94,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>

1
config/initializers/assets.rb
View file

@ -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)

2
config/initializers/constants.rb
View file

@ -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

5
config/routes.rb
View file

@ -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