mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 14:45:56 +08:00
Add gallery to file preview
This commit is contained in:
aignatov-bio
parent
c56f7912ef
commit
d99e279ecc
|
|
@ -220,6 +220,7 @@ function initProtocolPreviewModal() {
|
|||
modal.modal("show");
|
||||
ProtocolRepositoryHeader.init();
|
||||
initHandsOnTable(modalBody);
|
||||
},
|
||||
error: function (error) {
|
||||
// TODO
|
||||
}
|
||||
|
|
|
|||
|
|
@ -361,12 +361,6 @@ var RepositoryDatatable = (function(global) {
|
|||
});
|
||||
}
|
||||
|
||||
function disableCheckboxToggleOnAssetDownload() {
|
||||
$('.file-preview-link').on('click', function(ev) {
|
||||
ev.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
// Adjust columns width in table header
|
||||
function adjustTableHeader() {
|
||||
TABLE.columns.adjust();
|
||||
|
|
@ -546,7 +540,6 @@ var RepositoryDatatable = (function(global) {
|
|||
});
|
||||
},
|
||||
fnInitComplete: function() {
|
||||
disableCheckboxToggleOnAssetDownload();
|
||||
initHeaderTooltip();
|
||||
disableCheckboxToggleOnCheckboxPreview();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,155 +1,31 @@
|
|||
/* eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/
|
||||
/* eslint no-use-before-define: ["error", { "functions": false }]*/
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
/* global Uint8Array fabric tui animateSpinner Assets ActiveStoragePreviews
|
||||
PerfectScrollbar MarvinJsEditor refreshProtocolStatusBar */
|
||||
|
||||
|
||||
var FilePreviewModal = (function() {
|
||||
'use strict';
|
||||
|
||||
//var readOnly = false;
|
||||
|
||||
function initPreviewModal(options = {}) {
|
||||
function initPreviewModal() {
|
||||
$(document).on('click', '.file-preview-link', function(e) {
|
||||
var params = {};
|
||||
var galleryViewId = $(this).data('gallery-view-id');
|
||||
e.preventDefault();
|
||||
$.get($(this).data('preview-url'), function(result) {
|
||||
e.stopPropagation();
|
||||
params.gallery = $(`.file-preview-link[data-gallery-view-id=${galleryViewId}]`)
|
||||
.toArray().sort((a, b) => $(a).closest('.step-asset').css('order') - $(b).closest('.step-asset').css('order'))
|
||||
.map(i => i.dataset.id);
|
||||
$.get($(this).data('preview-url'), params, function(result) {
|
||||
$('#filePreviewModal .modal-content').html(result.html);
|
||||
$('#filePreviewModal').modal('show');
|
||||
})
|
||||
})
|
||||
//var name;
|
||||
//var url;
|
||||
//var downloadUrl;
|
||||
//readOnly = options.readOnly;
|
||||
|
||||
//return false;
|
||||
//
|
||||
//$('.file-preview-link').off('click');
|
||||
//$('.file-preview-link').click(function(e) {
|
||||
// if ($(e.target.offsetParent).hasClass('change-preview-type')) return;
|
||||
// e.preventDefault();
|
||||
// name = $(this).find('.attachment-label').text();
|
||||
// url = $(this).data('preview-url');
|
||||
// downloadUrl = $(this).attr('href');
|
||||
// openPreviewModal(name, url, downloadUrl);
|
||||
// return true;
|
||||
//});
|
||||
//
|
||||
//$('#filePreviewModal').find('.preview-close').click(function() {
|
||||
// $('#filePreviewModal').find('.file-preview-container').html('');
|
||||
// $('#filePreviewModal').modal('hide');
|
||||
// if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar();
|
||||
//});
|
||||
}
|
||||
|
||||
// Adding rotation icon
|
||||
|
||||
|
||||
function openPreviewModal(name, url, downloadUrl) {
|
||||
|
||||
/*
|
||||
var modal = $('#filePreviewModal');
|
||||
updateFabricControls();
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
var link = modal.find('.file-download-link');
|
||||
clearPrevieModal();
|
||||
if (Object.prototype.hasOwnProperty.call(data, 'wopi-controls')) {
|
||||
modal.find('.file-wopi-controls').html(data['wopi-controls']);
|
||||
}
|
||||
link.attr('href', downloadUrl);
|
||||
link.attr('data-no-turbolink', true);
|
||||
link.attr('data-status', 'asset-present');
|
||||
if (data.type === 'previewable') {
|
||||
animateSpinner('.file-preview-container', false);
|
||||
if (data['wopi-preview-url']) {
|
||||
modal.find('.file-preview-container')
|
||||
.html(`<iframe class="wopi-file-preview" src="${data['wopi-preview-url']}"></iframe>`);
|
||||
} else {
|
||||
modal.find('.file-preview-container')
|
||||
.append($('<img>')
|
||||
.css('opacity', 0)
|
||||
.attr('src', data['large-preview-url'])
|
||||
.attr('alt', name)
|
||||
.on('error', ActiveStoragePreviews.reCheckPreview)
|
||||
.on('load', ActiveStoragePreviews.showPreview)
|
||||
.click(function(ev) {
|
||||
ev.stopPropagation();
|
||||
}));
|
||||
}
|
||||
if (!readOnly && data.editable) {
|
||||
modal.find('.file-edit-link').css('display', '');
|
||||
modal.find('.file-edit-link').off().click(function(ev) {
|
||||
$.post('/files/' + data.id + '/start_edit_image');
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
modal.modal('hide');
|
||||
//preInitImageEditor(data);
|
||||
});
|
||||
} else {
|
||||
modal.find('.file-edit-link').css('display', 'none');
|
||||
}
|
||||
} else if (data.type === 'marvinjs') {
|
||||
openMarvinEditModal(data, modal);
|
||||
} else {
|
||||
modal.find('.file-edit-link').css('display', 'none');
|
||||
modal.find('.file-preview-container').html(data['preview-icon']);
|
||||
}
|
||||
if (readOnly) {
|
||||
modal.find('#wopi_file_edit_button').remove();
|
||||
}
|
||||
modal.find('.file-name').text(name);
|
||||
modal.modal();
|
||||
modal.find('a[disabled=disabled]').click(function(ev) {
|
||||
ev.preventDefault();
|
||||
});
|
||||
$('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
|
||||
},
|
||||
error: function() {
|
||||
// TODO
|
||||
}
|
||||
});*/
|
||||
}
|
||||
|
||||
function clearPrevieModal() {
|
||||
var modal = $('#filePreviewModal');
|
||||
modal.find('.file-preview-container').empty();
|
||||
modal.find('.file-wopi-controls').empty();
|
||||
modal.find('.file-edit-link').css('display', 'none');
|
||||
}
|
||||
|
||||
function openMarvinEditModal(data, modal) {
|
||||
modal.find('.file-preview-container')
|
||||
.append($('<img>')
|
||||
.css('opacity', 0)
|
||||
.attr('src', data['large-preview-url'])
|
||||
.attr('alt', data.name)
|
||||
.on('error', ActiveStoragePreviews.reCheckPreview)
|
||||
.on('load', ActiveStoragePreviews.showPreview)
|
||||
.click(function(ev) {
|
||||
ev.stopPropagation();
|
||||
}));
|
||||
if (!readOnly && data.editable) {
|
||||
modal.find('.file-edit-link').css('display', '');
|
||||
modal.find('.file-edit-link').off().click(function(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
modal.modal('hide');
|
||||
$.post(data['update-url'] + '/start_editing');
|
||||
MarvinJsEditor.open({
|
||||
mode: 'edit',
|
||||
data: data.description,
|
||||
name: data.name,
|
||||
marvinUrl: data['update-url']
|
||||
});
|
||||
});
|
||||
} else {
|
||||
modal.find('.file-edit-link').css('display', 'none');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '#filePreviewModal .gallery-switcher', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$.get($(this).attr('href'), { gallery: $(this).data('gallery-elements') }, function(result) {
|
||||
$('#filePreviewModal .modal-content').html(result.html);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return Object.freeze({
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
/* global animateSpinner fabric PerfectScrollbar refreshProtocolStatusBar tui Uint8Array*/
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
var ImageEditorModal = (function() {
|
||||
function updateFabricControls() {
|
||||
fabric.Object.prototype.drawBorders = function(ctx, styleOverride = {}) {
|
||||
|
|
@ -141,17 +144,6 @@ var ImageEditorModal = (function() {
|
|||
};
|
||||
}
|
||||
|
||||
function preInitImageEditor(data) {
|
||||
$.ajax({
|
||||
url: data['download-url'],
|
||||
type: 'get',
|
||||
success: function(responseData) {
|
||||
var fileUrl = responseData;
|
||||
initImageEditor(data, fileUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initImageEditor(data, fileUrl) {
|
||||
var imageEditor;
|
||||
var ps;
|
||||
|
|
@ -389,12 +381,10 @@ var ImageEditorModal = (function() {
|
|||
contentType: false,
|
||||
processData: false,
|
||||
success: function(res) {
|
||||
$('#modal_link' + data.id).parent().html(res.html);
|
||||
initPreviewModal();
|
||||
$(`.step-asset[data-asset-id=${data.id}]`).replaceWith(res.html);
|
||||
$(`.step-asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder');
|
||||
closeEditor();
|
||||
}
|
||||
}).done(function() {
|
||||
closeEditor();
|
||||
|
||||
});
|
||||
if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar();
|
||||
});
|
||||
|
|
@ -404,4 +394,27 @@ var ImageEditorModal = (function() {
|
|||
};
|
||||
}
|
||||
|
||||
function preInitImageEditor() {
|
||||
$(document).on('click', '.image-edit-button', function() {
|
||||
var editButton = $(this);
|
||||
updateFabricControls();
|
||||
$.get(editButton.data('image-url'), function(responseData) {
|
||||
var fileUrl = responseData;
|
||||
var data = {
|
||||
id: editButton.data('image-id'),
|
||||
quality: editButton.data('image-quality'),
|
||||
filename: editButton.data('image-name'),
|
||||
'mime-type': editButton.data('image-mime-type')
|
||||
};
|
||||
$('#filePreviewModal').modal('hide');
|
||||
$.post(editButton.data('start-edit-url'));
|
||||
initImageEditor(data, fileUrl);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return Object.freeze({
|
||||
init: preInitImageEditor
|
||||
});
|
||||
}());
|
||||
ImageEditorModal.init();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
/* global TinyMCE, ChemicalizeMarvinJs, MarvinJSUtil, I18n, FilePreviewModal, tinymce */
|
||||
/* global Results, Comments */
|
||||
/* global TinyMCE, ChemicalizeMarvinJs, MarvinJSUtil, I18n, tinymce, HelperModule */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable wrap-iife */
|
||||
/* eslint-disable no-use-before-define */
|
||||
|
|
@ -318,7 +317,17 @@ var MarvinJsEditorApi = (function() {
|
|||
})();
|
||||
|
||||
// Initialization
|
||||
|
||||
$(document).on('click', '.marvinjs-edit-button', function() {
|
||||
var editButton = $(this);
|
||||
$.post(editButton.data('sketch-start-edit-url'));
|
||||
$('#filePreviewModal').modal('hide');
|
||||
MarvinJsEditor.open({
|
||||
mode: 'edit',
|
||||
data: editButton.data('sketch-description'),
|
||||
name: editButton.data('sketch-name'),
|
||||
marvinUrl: editButton.data('update-url')
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('turbolinks:load', function() {
|
||||
MarvinJsEditor = MarvinJsEditorApi();
|
||||
|
|
|
|||
141
app/assets/stylesheets/shared/file_preview.scss
Normal file
141
app/assets/stylesheets/shared/file_preview.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
// scss-lint:disable ImportantRule PropertyUnits NestingDepth SelectorDepth
|
||||
|
||||
// Image preview modal
|
||||
.modal-file-preview {
|
||||
background: transparent;
|
||||
font-size: $font-size-base;
|
||||
padding: 0 !important;
|
||||
|
||||
.modal-dialog {
|
||||
background: inherit;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.file-preview-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&.processing {
|
||||
background-image: url("/images/medium/processing.gif");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.wopi-file-preview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
background: url(asset-path("custom/checkerboard-pattern.png"));
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-height: 520px) {
|
||||
height: 80%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
align-items: center;
|
||||
background: $color-white;
|
||||
display: flex;
|
||||
height: 4em;
|
||||
padding: 0 1em;
|
||||
|
||||
.file-name {
|
||||
font-weight: bold;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
height: calc(100vh - 8em);
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: $color-white;
|
||||
height: 4em;
|
||||
padding: 0 1em;
|
||||
|
||||
.gallery {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
height: 100%;
|
||||
padding: 0 1em;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
max-height: 2em;
|
||||
max-width: 2em;
|
||||
}
|
||||
|
||||
|
||||
.file-counter {
|
||||
font-weight: bold;
|
||||
grid-column-start: 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gallery-switcher {
|
||||
align-items: center;
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: inline-block;
|
||||
max-width: 16em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.fa-angle-right,
|
||||
.fa-angle-left {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
&.previous-asset {
|
||||
grid-column-start: 1;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.next-asset {
|
||||
grid-column-start: 3;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,8 @@
|
|||
transition: .3s;
|
||||
user-select: none;
|
||||
|
||||
.fas {
|
||||
.fas,
|
||||
img {
|
||||
color: inherit;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,6 +183,12 @@
|
|||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&.processing {
|
||||
background-image: url("/images/medium/processing.gif");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -1458,139 +1458,6 @@ ul.content-activities {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Image preview modal
|
||||
.modal-file-preview {
|
||||
background: transparent;
|
||||
font-size: $font-size-large;
|
||||
padding-right: 0 !important;
|
||||
z-index: 1060;
|
||||
|
||||
.preview-close {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.file-wopi-controls {
|
||||
display: inline-block;
|
||||
|
||||
.btn {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.modal-body {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-preview-container {
|
||||
align-items: center;
|
||||
color: $gray-dark;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&.processing {
|
||||
background-image: url("/images/medium/processing.gif");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: $color-black;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.wopi-file-preview {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
background: url(asset-path("custom/checkerboard-pattern.png"));
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-height: 520px) {
|
||||
height: 80%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: $color-black;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
.file-name {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
align-items: center;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: $color-black;
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-download-link {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.file-edit-link {
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable textarea resizing throughout application
|
||||
// (will be done via autosize JS plugin)
|
||||
textarea {
|
||||
|
|
|
|||
|
|
@ -14,100 +14,21 @@ class AssetsController < ApplicationController
|
|||
include FileIconsHelper
|
||||
include MyModulesHelper
|
||||
|
||||
helper_method :wopi_file_edit_button_status
|
||||
|
||||
before_action :load_vars, except: :create_wopi_file
|
||||
before_action :check_read_permission, except: :edit
|
||||
before_action :check_edit_permission, only: %i(edit toggle_view_mode)
|
||||
|
||||
def file_preview
|
||||
can_edit = if @assoc.class == Step
|
||||
can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol)
|
||||
elsif @assoc.class == Result
|
||||
can_manage_module?(@my_module)
|
||||
elsif @assoc.class == RepositoryCell && !@repository.is_a?(RepositorySnapshot)
|
||||
can_manage_repository_rows?(@repository)
|
||||
end
|
||||
|
||||
render json: {html: render_to_string(
|
||||
{
|
||||
partial: "shared/file_preview/content.html.erb",
|
||||
locals: {
|
||||
asset: @asset,
|
||||
can_edit: can_edit
|
||||
}
|
||||
render json: { html: render_to_string(
|
||||
partial: 'shared/file_preview/content.html.erb',
|
||||
locals: {
|
||||
asset: @asset,
|
||||
can_edit: can_manage_asset?(@asset),
|
||||
gallery: params[:gallery]
|
||||
}
|
||||
)}
|
||||
|
||||
return true
|
||||
file_type = @asset.file.metadata[:asset_type] || (@asset.previewable? ? 'previewable' : false)
|
||||
response_json = {
|
||||
'id' => @asset.id,
|
||||
'type' => file_type,
|
||||
'filename' => truncate(escape_input(@asset.file_name),
|
||||
length: Constants::FILENAME_TRUNCATION_LENGTH),
|
||||
'download-url' => asset_file_url_path(@asset)
|
||||
}
|
||||
|
||||
|
||||
if response_json['type'] == 'previewable'
|
||||
if ['image/jpeg', 'image/pjpeg'].include? @asset.file.content_type
|
||||
response_json['quality'] = @asset.file_image_quality || 80
|
||||
end
|
||||
response_json.merge!(
|
||||
'editable' => @asset.editable_image? && can_edit,
|
||||
'mime-type' => @asset.file.content_type,
|
||||
'large-preview-url' => rails_representation_url(@asset.large_preview)
|
||||
)
|
||||
elsif response_json['type'] == 'marvinjs'
|
||||
response_json.merge!(
|
||||
'editable' => can_edit,
|
||||
'large-preview-url' => rails_representation_url(@asset.large_preview),
|
||||
'update-url' => marvin_js_asset_path(@asset.id),
|
||||
'description' => @asset.file.metadata[:description],
|
||||
'name' => @asset.file.metadata[:name]
|
||||
)
|
||||
else
|
||||
|
||||
response_json['preview-icon'] = render_to_string(partial: 'shared/file_preview_icon.html.erb',
|
||||
locals: { asset: @asset })
|
||||
end
|
||||
|
||||
if wopi_enabled? && wopi_file?(@asset)
|
||||
edit_supported, title = wopi_file_edit_button_status
|
||||
response_json['wopi-preview-url'] = @asset.get_action_url(current_user, 'embedview')
|
||||
response_json['wopi-controls'] = render_to_string(
|
||||
partial: 'assets/wopi/file_wopi_controls.html.erb',
|
||||
locals: {
|
||||
asset: @asset,
|
||||
can_edit: can_edit,
|
||||
edit_supported: edit_supported,
|
||||
title: title
|
||||
}
|
||||
)
|
||||
end
|
||||
respond_to do |format|
|
||||
format.json do
|
||||
render json: response_json
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
# Check whether the wopi file can be edited and return appropriate response
|
||||
def wopi_file_edit_button_status
|
||||
file_ext = @asset.file_name.split('.').last
|
||||
if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext)
|
||||
edit_supported = true
|
||||
title = ''
|
||||
else
|
||||
edit_supported = false
|
||||
title = if Constants::FILE_TEXT_FORMATS.include?(file_ext)
|
||||
I18n.t('assets.wopi_supported_text_formats_title')
|
||||
elsif Constants::FILE_TABLE_FORMATS.include?(file_ext)
|
||||
I18n.t('assets.wopi_supported_table_formats_title')
|
||||
else
|
||||
I18n.t('assets.wopi_supported_presentation_formats_title')
|
||||
end
|
||||
end
|
||||
return edit_supported, title
|
||||
) }
|
||||
end
|
||||
|
||||
def toggle_view_mode
|
||||
|
|
@ -139,7 +60,7 @@ class AssetsController < ApplicationController
|
|||
tkn = current_user.get_wopi_token
|
||||
@token = tkn.token
|
||||
@ttl = (tkn.ttl * 1000).to_s
|
||||
@asset.step&.protocol&.update(updated_at: Time.now)
|
||||
@asset.step&.protocol&.update(updated_at: Time.zone.now)
|
||||
|
||||
create_wopi_file_activity(current_user, true)
|
||||
|
||||
|
|
@ -173,7 +94,7 @@ class AssetsController < ApplicationController
|
|||
@asset.team.release_space(orig_file_size)
|
||||
# Post process file here
|
||||
@asset.post_process_file(@asset.team)
|
||||
@asset.step&.protocol&.update(updated_at: Time.now)
|
||||
@asset.step&.protocol&.update(updated_at: Time.zone.now)
|
||||
|
||||
render_html = if @asset.step || @asset.result
|
||||
render_to_string(
|
||||
|
|
@ -183,7 +104,7 @@ class AssetsController < ApplicationController
|
|||
)
|
||||
else
|
||||
render_to_string(
|
||||
partial: 'shared/asset_link',
|
||||
partial: 'assets/asset_link.html.erb',
|
||||
locals: { asset: @asset, display_image_tag: true },
|
||||
formats: :html
|
||||
)
|
||||
|
|
@ -222,7 +143,7 @@ class AssetsController < ApplicationController
|
|||
render_403 && return unless can_manage_protocol_in_module?(step.protocol) ||
|
||||
can_manage_protocol_in_repository?(step.protocol)
|
||||
step_asset = StepAsset.create!(step: step, asset: asset)
|
||||
step.protocol&.update(updated_at: Time.now)
|
||||
step.protocol&.update(updated_at: Time.zone.now)
|
||||
|
||||
edit_url = edit_asset_url(step_asset.asset_id)
|
||||
elsif params[:element_type] == 'Result'
|
||||
|
|
@ -270,25 +191,30 @@ class AssetsController < ApplicationController
|
|||
end
|
||||
|
||||
def check_read_permission
|
||||
if @assoc.class == Step
|
||||
render_403 && return unless can_read_protocol_in_module?(@protocol) ||
|
||||
can_read_protocol_in_repository?(@protocol)
|
||||
elsif @assoc.class == Result
|
||||
render_403 and return unless can_read_experiment?(@my_module.experiment)
|
||||
elsif @assoc.class == RepositoryCell
|
||||
render_403 and return unless can_read_repository?(@repository)
|
||||
end
|
||||
render_403 unless can_read_asset?(@asset)
|
||||
end
|
||||
|
||||
def check_edit_permission
|
||||
if @assoc.class == Step
|
||||
render_403 && return unless can_manage_protocol_in_module?(@protocol) ||
|
||||
can_manage_protocol_in_repository?(@protocol)
|
||||
elsif @assoc.class == Result
|
||||
render_403 and return unless can_manage_module?(@my_module)
|
||||
elsif @assoc.class == RepositoryCell
|
||||
render_403 and return unless can_manage_repository_rows?(@repository)
|
||||
render_403 unless can_manage_asset?(@asset)
|
||||
end
|
||||
|
||||
# Check whether the wopi file can be edited and return appropriate response
|
||||
def wopi_file_edit_button_status(asset)
|
||||
file_ext = asset.file_name.split('.').last
|
||||
if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext)
|
||||
edit_supported = true
|
||||
title = ''
|
||||
else
|
||||
edit_supported = false
|
||||
title = if Constants::FILE_TEXT_FORMATS.include?(file_ext)
|
||||
I18n.t('assets.wopi_supported_text_formats_title')
|
||||
elsif Constants::FILE_TABLE_FORMATS.include?(file_ext)
|
||||
I18n.t('assets.wopi_supported_table_formats_title')
|
||||
else
|
||||
I18n.t('assets.wopi_supported_presentation_formats_title')
|
||||
end
|
||||
end
|
||||
return edit_supported, title
|
||||
end
|
||||
|
||||
def append_wd_params(url)
|
||||
|
|
|
|||
33
app/permissions/asset.rb
Normal file
33
app/permissions/asset.rb
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
Canaid::Permissions.register_for(Asset) do
|
||||
can :read_asset do |user, asset|
|
||||
object ||= asset.step
|
||||
object ||= asset.result
|
||||
object ||= asset.repository_cell
|
||||
|
||||
if object.class == Step
|
||||
protocol = object.protocol
|
||||
can_read_protocol_in_module?(user, protocol) || can_read_protocol_in_repository?(user, protocol)
|
||||
elsif object.class == Result
|
||||
can_read_experiment?(user, object.my_module.experiment)
|
||||
elsif object.class == RepositoryCell
|
||||
can_read_repository?(user, object.repository_column.repository)
|
||||
end
|
||||
end
|
||||
|
||||
can :manage_asset do |user, asset|
|
||||
object ||= asset.step
|
||||
object ||= asset.result
|
||||
object ||= asset.repository_cell
|
||||
|
||||
if object.class == Step
|
||||
protocol = object.protocol
|
||||
can_manage_protocol_in_module?(user, protocol) || can_manage_protocol_in_repository?(user, protocol)
|
||||
elsif object.class == Result
|
||||
can_manage_experiment?(user, object.my_module.experiment)
|
||||
elsif object.class == RepositoryCell && !object.repository_column.repository.is_a?(RepositorySnapshot)
|
||||
can_manage_repository?(user, object.repository_column.repository)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<% gallery_view_id = nil unless defined? gallery_view_id %>
|
||||
<% if asset.inline? %>
|
||||
<%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset } %>
|
||||
<%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %>
|
||||
<% elsif asset.list? %>
|
||||
<%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset } %>
|
||||
<%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %>
|
||||
<% else %>
|
||||
<%= render partial: 'assets/asset_thumbnail.html.erb', locals: { edit_page: false, asset: asset } %>
|
||||
<%= render partial: 'assets/asset_thumbnail.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
<%= link_to rails_blob_path(asset.file, disposition: 'attachment'),
|
||||
class: "file-preview-link",
|
||||
id: "modal_link#{asset.id}",
|
||||
data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %>
|
||||
data: {
|
||||
no_turbolink: true,
|
||||
id: asset.id,
|
||||
gallery_view_id: gallery_view_id,
|
||||
preview_url: asset_file_preview_path(asset)
|
||||
} do %>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="inline"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
|
|
|
|||
|
|
@ -1,28 +1,18 @@
|
|||
<%= link_to view_asset_url(id: asset),
|
||||
id: 'wopi_file_view_button',
|
||||
class: 'btn btn-default btn-sm',
|
||||
target: '_blank',
|
||||
style: 'display: inline-block' do %>
|
||||
<%= file_application_icon(asset) %>
|
||||
<%= wopi_button_text(asset, 'view') %>
|
||||
<% end %>
|
||||
<% if can_edit && edit_supported %>
|
||||
<% if edit_supported %>
|
||||
<%= link_to edit_asset_url(id: asset),
|
||||
id: 'wopi_file_edit_button',
|
||||
class: 'btn btn-default btn-sm',
|
||||
target: '_blank',
|
||||
style: 'display: inline-block' do %>
|
||||
class: 'btn btn-light',
|
||||
target: '_blank' do %>
|
||||
<%= file_application_icon(asset) %>
|
||||
<%= wopi_button_text(asset, 'edit') %>
|
||||
<% end %>
|
||||
<% elsif can_edit %>
|
||||
<% else %>
|
||||
<%= link_to edit_asset_url(id: asset),
|
||||
id: 'wopi_file_edit_button',
|
||||
class: 'btn btn-default btn-sm',
|
||||
class: 'btn btn-light',
|
||||
target: '_blank',
|
||||
title: title,
|
||||
disabled: true,
|
||||
style: 'display: inline-block' do %>
|
||||
disabled: true do %>
|
||||
<%= file_application_icon(asset) %>
|
||||
<%= wopi_button_text(asset, 'edit') %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,102 @@
|
|||
<div class="modal-header">
|
||||
<button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
|
||||
<span class="file-name"><%= asset.file_name %></span>
|
||||
<span class="file-wopi-controls"></span>
|
||||
<a class="file-download-link" href="<%= asset_file_url_path(asset) %>" data-turbolinks="false">
|
||||
<p><span class="fas fa-download"></span> <%= t('Download')%></p>
|
||||
</a>
|
||||
<a class="file-edit-link" style="display:none" href='#'>
|
||||
<p><span class="fas fa-pencil-alt"></span> <%= t('Edit')%></p>
|
||||
</a>
|
||||
<div class="sci-btn-group">
|
||||
<% if can_edit %>
|
||||
<% if wopi_enabled? && wopi_file?(asset) %>
|
||||
<% edit_supported, title = wopi_file_edit_button_status(asset) %>
|
||||
<%= render partial: 'assets/wopi/file_wopi_controls.html.erb',
|
||||
locals: {
|
||||
asset: asset,
|
||||
edit_supported: edit_supported,
|
||||
title: title
|
||||
} %>
|
||||
<% elsif asset.file.metadata[:asset_type] == 'marvinjs' %>
|
||||
<button class="btn btn-light marvinjs-edit-button"
|
||||
data-sketch-id="<%= asset.id %>"
|
||||
data-update-url="<%= marvin_js_asset_path(asset) %>"
|
||||
data-sketch-start-edit-url="<%= start_editing_marvin_js_asset_path(asset) %>"
|
||||
data-sketch-name="<%= asset.file.metadata[:name] %>"
|
||||
data-sketch-description="<%= asset.file.metadata[:description] %>"
|
||||
>
|
||||
<span class="fas fa-pencil-alt"></span>
|
||||
<%= t('assets.file_preview.edit_in_marvinjs') %>
|
||||
</button>
|
||||
<% elsif asset.editable_image? %>
|
||||
<button class="btn btn-light image-edit-button"
|
||||
data-image-id="<%= asset.id %>"
|
||||
data-image-name="<%= asset.file_name %>"
|
||||
data-image-url="<%= asset_file_url_path(asset) %>"
|
||||
data-image-quality="<%= asset.file_image_quality || 80 %>"
|
||||
data-image-mime-type="<%= asset.file.content_type %>"
|
||||
data-image-start-edit-url="<%= start_edit_image_path(asset) %>"
|
||||
>
|
||||
<span class="fas fa-pencil-alt"></span>
|
||||
<%= t('assets.file_preview.edit_in_scinote') %>
|
||||
</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<a class="btn btn-light" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
|
||||
<span class="fas fa-download"></span> <%= t('Download')%>
|
||||
</a>
|
||||
<button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="fas fa-times"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="file-preview-container">
|
||||
<% if asset.previewable? %>
|
||||
<%= image_tag asset.large_preview,
|
||||
<% if wopi_enabled? && wopi_file?(asset) %>
|
||||
<iframe class="wopi-file-preview" src="<%= asset.get_action_url(current_user, 'embedview') %>"></iframe>
|
||||
<% else %>
|
||||
<%= image_tag asset.large_preview,
|
||||
onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
|
||||
onload: 'ActiveStoragePreviews.showPreview(event)',
|
||||
style: 'opacity: 0' %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render partial: 'shared/file_preview/file_icon.html.erb', locals: { asset: asset } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<% if gallery %>
|
||||
<div class="gallery">
|
||||
<% previous_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[0]&.last) %>
|
||||
<% next_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[1]&.first) %>
|
||||
<% if previous_asset && can_read_asset?(previous_asset) %>
|
||||
<%= link_to asset_file_preview_path(previous_asset),
|
||||
class: "previous-asset gallery-switcher",
|
||||
data: {id: previous_asset.id, gallery_elements: gallery} do %>
|
||||
<% if previous_asset.previewable? %>
|
||||
<%= image_tag previous_asset.medium_preview,
|
||||
onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
|
||||
onload: 'ActiveStoragePreviews.showPreview(event)',
|
||||
style: 'opacity: 0' %>
|
||||
<% else %>
|
||||
<i class="fas <%= file_fa_icon_class(previous_asset) if previous_asset.file_name %>"></i>
|
||||
<% end %>
|
||||
<i class="fas fa-angle-left"></i>
|
||||
<span class="file-name"><%= previous_asset.file_name %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<span class="file-counter">
|
||||
<%= gallery.split(asset.id.to_s)[0].length + 1 %> of <%= gallery.length %> attachments
|
||||
</span>
|
||||
<% if next_asset && can_read_asset?(next_asset) %>
|
||||
<%= link_to asset_file_preview_path(next_asset),
|
||||
class: "next-asset gallery-switcher",
|
||||
data: {id: next_asset.id, gallery_elements: gallery} do %>
|
||||
<span class="file-name"><%= next_asset.file_name %></span>
|
||||
<i class="fas fa-angle-right"></i>
|
||||
<% if next_asset.previewable? %>
|
||||
<%= image_tag next_asset.medium_preview,
|
||||
onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
|
||||
onload: 'ActiveStoragePreviews.showPreview(event)',
|
||||
style: 'opacity: 0' %>
|
||||
<% else %>
|
||||
<i class="fas <%= file_fa_icon_class(next_asset) if next_asset.file_name %>"></i>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
4
app/views/shared/file_preview/_file_icon.html.erb
Normal file
4
app/views/shared/file_preview/_file_icon.html.erb
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div>
|
||||
<i class="fas fa-10x <%= file_fa_icon_class(asset) %>"></i>
|
||||
<h3 class="file-name"></h3>
|
||||
</div>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<div class="col-xs-12 attachments" data-step-id="<%= step.id %>" data-order="<%= current_order %>">
|
||||
<% assets.each_with_index do |asset, i| %>
|
||||
<%= render partial: 'assets/asset.html.erb', locals: { asset: asset } %>
|
||||
<%= render partial: 'assets/asset.html.erb', locals: { asset: asset, gallery_view_id: step.id } %>
|
||||
<% end %>
|
||||
</div>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -2283,6 +2283,9 @@ en:
|
|||
errors:
|
||||
forbidden: 'You do not have permission to add files.'
|
||||
not_found: 'Element not found.'
|
||||
file_preview:
|
||||
edit_in_scinote: "Edit in SciNote"
|
||||
edit_in_marvinjs: "Edit in Marvin JS"
|
||||
atwho:
|
||||
no_results:
|
||||
projects: "Projects with this name were not found"
|
||||
|
|
|
|||
Loading…
Reference in a new issue