mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-28 17:54:16 +08:00
Enable image preview while editing steps and code style improvements [SCI-694]
This commit is contained in:
parent
00ea3a027c
commit
aa2b573278
13 changed files with 83 additions and 62 deletions
app
assets/javascripts
controllers
models
views
config
|
@ -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,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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
}
|
||||
});
|
||||
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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? %>
|
||||
<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? %>
|
||||
<p><%= truncate(result.asset.file_file_name,
|
||||
<% 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 %>
|
||||
<% 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 %>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -66,20 +66,27 @@
|
|||
<li>
|
||||
<% 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? %>
|
||||
<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 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 %>
|
||||
<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'
|
||||
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue