mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-01-26 17:51:47 +08:00
Image editor improvements [SCI - 3158, 3160, 3156, 3154] (#1563)
* Improvments SCI - 3158, 3160, 3156, 3154
This commit is contained in:
aignatov-bio
GitHub
parent
6eae12efab
commit
723024202e
3 changed files with 416 additions and 265 deletions
413
app/assets/javascripts/sitewide/file_preview.js
Normal file
413
app/assets/javascripts/sitewide/file_preview.js
Normal file
|
|
@ -0,0 +1,413 @@
|
|||
/* eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/
|
||||
/* eslint no-use-before-define: ["error", { "functions": false }]*/
|
||||
/* global fabric tui animateSpinner setupAssetsLoading I18n*/
|
||||
//= require assets
|
||||
|
||||
(function(global) {
|
||||
'use strict';
|
||||
|
||||
global.initPreviewModal = function initPreviewModal() {
|
||||
var name;
|
||||
var url;
|
||||
var downloadUrl;
|
||||
$('.file-preview-link').off('click');
|
||||
$('.file-preview-link').click(function(e) {
|
||||
e.preventDefault();
|
||||
name = $(this).find('p').text();
|
||||
url = $(this).data('preview-url');
|
||||
downloadUrl = $(this).attr('href');
|
||||
openPreviewModal(name, url, downloadUrl);
|
||||
});
|
||||
};
|
||||
|
||||
// Adding rotation icon
|
||||
function updateFabricControls() {
|
||||
fabric.Object.prototype.drawBorders = function(ctx, styleOverride = {}) {
|
||||
var wh = this._calculateCurrentDimensions();
|
||||
var strokeWidth = 1 / this.borderScaleFactor;
|
||||
var width = wh.x + strokeWidth;
|
||||
var height = wh.y + strokeWidth;
|
||||
var drawRotatingPoint = typeof styleOverride.hasRotatingPoint !== 'undefined'
|
||||
? styleOverride.hasRotatingPoint : this.hasRotatingPoint;
|
||||
var hasControls = typeof styleOverride.hasControls !== 'undefined'
|
||||
? styleOverride.hasControls : this.hasControls;
|
||||
var rotatingPointOffset = typeof styleOverride.rotatingPointOffset !== 'undefined'
|
||||
? styleOverride.rotatingPointOffset : this.rotatingPointOffset;
|
||||
var rotateHeight = -height / 2;
|
||||
ctx.save();
|
||||
ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
|
||||
this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);
|
||||
ctx.strokeRect(
|
||||
-width / 2,
|
||||
-height / 2,
|
||||
width,
|
||||
height
|
||||
);
|
||||
if (drawRotatingPoint && this.isControlVisible('mtr') && hasControls) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, rotateHeight);
|
||||
ctx.lineTo(0, rotateHeight - rotatingPointOffset + 10);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.restore();
|
||||
return this;
|
||||
};
|
||||
|
||||
fabric.Object.prototype.drawControls = function(ctx) {
|
||||
var rotationImage = 'data:image/png;base64,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';
|
||||
var rotate = new Image();
|
||||
var rotateLeft;
|
||||
var rotateTop;
|
||||
var wh = this._calculateCurrentDimensions();
|
||||
var width = wh.x;
|
||||
var height = wh.y;
|
||||
var scaleOffset = this.cornerSize;
|
||||
var left = -(width + scaleOffset) / 2;
|
||||
var top = -(height + scaleOffset) / 2;
|
||||
var methodName = this.transparentCorners ? 'stroke' : 'fill';
|
||||
|
||||
if (!this.hasControls) {
|
||||
return this;
|
||||
}
|
||||
ctx.save();
|
||||
ctx.strokeStyle = this.cornerColor;
|
||||
ctx.fillStyle = this.cornerColor;
|
||||
if (!this.transparentCorners) {
|
||||
ctx.strokeStyle = this.cornerStrokeColor;
|
||||
}
|
||||
this._setLineDash(ctx, this.cornerDashArray, null);
|
||||
|
||||
// top-left
|
||||
this._drawControl(
|
||||
'tl',
|
||||
ctx,
|
||||
methodName,
|
||||
left,
|
||||
top
|
||||
);
|
||||
|
||||
// top-right
|
||||
this._drawControl(
|
||||
'tr',
|
||||
ctx,
|
||||
methodName,
|
||||
left + width,
|
||||
top
|
||||
);
|
||||
|
||||
// bottom-left
|
||||
this._drawControl(
|
||||
'bl',
|
||||
ctx,
|
||||
methodName,
|
||||
left,
|
||||
top + height
|
||||
);
|
||||
|
||||
// bottom-right
|
||||
this._drawControl(
|
||||
'br',
|
||||
ctx,
|
||||
methodName,
|
||||
left + width,
|
||||
top + height
|
||||
);
|
||||
|
||||
if (!this.get('lockUniScaling')) {
|
||||
// middle-top
|
||||
this._drawControl(
|
||||
'mt',
|
||||
ctx,
|
||||
methodName,
|
||||
left + width / 2,
|
||||
top
|
||||
);
|
||||
|
||||
// middle-bottom
|
||||
this._drawControl(
|
||||
'mb',
|
||||
ctx,
|
||||
methodName,
|
||||
left + width / 2,
|
||||
top + height
|
||||
);
|
||||
|
||||
// middle-right
|
||||
this._drawControl(
|
||||
'mr',
|
||||
ctx,
|
||||
methodName,
|
||||
left + width,
|
||||
top + height / 2
|
||||
);
|
||||
|
||||
// middle-left
|
||||
this._drawControl(
|
||||
'ml',
|
||||
ctx,
|
||||
methodName,
|
||||
left,
|
||||
top + height / 2
|
||||
);
|
||||
}
|
||||
// middle-top-rotate
|
||||
if (this.hasRotatingPoint) {
|
||||
rotate.src = rotationImage;
|
||||
rotateLeft = left + width / 2 - 6;
|
||||
rotateTop = top - this.rotatingPointOffset - 6;
|
||||
ctx.drawImage(rotate, rotateLeft, rotateTop, 32, 32);
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
return this;
|
||||
};
|
||||
}
|
||||
|
||||
function initImageEditor(data) {
|
||||
var imageEditor;
|
||||
var blackTheme = {
|
||||
'common.bi.image': '',
|
||||
'common.bisize.width': '0',
|
||||
'common.bisize.height': '0',
|
||||
'common.backgroundImage': 'none',
|
||||
'common.backgroundColor': '#1e1e1e',
|
||||
'common.border': '0px',
|
||||
|
||||
// header
|
||||
'header.backgroundImage': 'none',
|
||||
'header.backgroundColor': 'transparent',
|
||||
'header.border': '0px',
|
||||
|
||||
// load button
|
||||
'loadButton.backgroundColor': '#fff',
|
||||
'loadButton.border': '1px solid #ddd',
|
||||
'loadButton.color': '#222',
|
||||
'loadButton.fontFamily': '\'Noto Sans\', sans-serif',
|
||||
'loadButton.fontSize': '12px',
|
||||
|
||||
// download button
|
||||
'downloadButton.backgroundColor': '#fdba3b',
|
||||
'downloadButton.border': '1px solid #fdba3b',
|
||||
'downloadButton.color': '#fff',
|
||||
'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
|
||||
'downloadButton.fontSize': '12px',
|
||||
|
||||
// main icons
|
||||
'menu.normalIcon.path': '/images/icon-d.svg',
|
||||
'menu.normalIcon.name': 'icon-d',
|
||||
'menu.activeIcon.path': '/images/icon-b.svg',
|
||||
'menu.activeIcon.name': 'icon-b',
|
||||
'menu.disabledIcon.path': '/images/icon-a.svg',
|
||||
'menu.disabledIcon.name': 'icon-a',
|
||||
'menu.hoverIcon.path': '/images/icon-c.svg',
|
||||
'menu.hoverIcon.name': 'icon-c',
|
||||
'menu.iconSize.width': '24px',
|
||||
'menu.iconSize.height': '24px',
|
||||
|
||||
// submenu primary color
|
||||
'submenu.backgroundColor': '#1e1e1e',
|
||||
'submenu.partition.color': '#3c3c3c',
|
||||
|
||||
// submenu icons
|
||||
'submenu.normalIcon.path': '/images/icon-d.svg',
|
||||
'submenu.normalIcon.name': 'icon-d',
|
||||
'submenu.activeIcon.path': '/images/icon-c.svg',
|
||||
'submenu.activeIcon.name': 'icon-c',
|
||||
'submenu.iconSize.width': '32px',
|
||||
'submenu.iconSize.height': '32px',
|
||||
|
||||
// submenu labels
|
||||
'submenu.normalLabel.color': '#8a8a8a',
|
||||
'submenu.normalLabel.fontWeight': 'lighter',
|
||||
'submenu.activeLabel.color': '#fff',
|
||||
'submenu.activeLabel.fontWeight': 'lighter',
|
||||
|
||||
// checkbox style
|
||||
'checkbox.border': '0px',
|
||||
'checkbox.backgroundColor': '#fff',
|
||||
|
||||
// range style
|
||||
'range.pointer.color': '#fff',
|
||||
'range.bar.color': '#666',
|
||||
'range.subbar.color': '#d1d1d1',
|
||||
|
||||
'range.disabledPointer.color': '#414141',
|
||||
'range.disabledBar.color': '#282828',
|
||||
'range.disabledSubbar.color': '#414141',
|
||||
|
||||
'range.value.color': '#fff',
|
||||
'range.value.fontWeight': 'lighter',
|
||||
'range.value.fontSize': '11px',
|
||||
'range.value.border': '1px solid #353535',
|
||||
'range.value.backgroundColor': '#151515',
|
||||
'range.title.color': '#fff',
|
||||
'range.title.fontWeight': 'lighter',
|
||||
|
||||
// colorpicker style
|
||||
'colorpicker.button.border': '1px solid #1e1e1e',
|
||||
'colorpicker.title.color': '#fff'
|
||||
};
|
||||
|
||||
imageEditor = new tui.ImageEditor('#tui-image-editor', {
|
||||
includeUI: {
|
||||
loadImage: {
|
||||
path: data['download-url'],
|
||||
name: data.filename
|
||||
},
|
||||
theme: blackTheme,
|
||||
initMenu: 'draw',
|
||||
menuBarPosition: 'bottom'
|
||||
},
|
||||
cssMaxWidth: 700,
|
||||
cssMaxHeight: 500,
|
||||
selectionStyle: {
|
||||
cornerSize: 20,
|
||||
rotatingPointOffset: 70,
|
||||
borderColor: '#333',
|
||||
cornerColor: '#333',
|
||||
cornerStyle: 'circle',
|
||||
borderScaleFactor: 3
|
||||
|
||||
},
|
||||
usageStatistics: false
|
||||
});
|
||||
|
||||
$('#fileEditModal').find('.file-name').text('Editing: ' + data.filename);
|
||||
$('#fileEditModal').modal('show');
|
||||
|
||||
$('.tui-image-editor-header').hide();
|
||||
|
||||
$('.file-save-link').off().click(function(ev) {
|
||||
var dataUpload = new FormData();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
dataUpload.append('image', imageEditor.toDataURL());
|
||||
animateSpinner(null, true);
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/files/' + data.id + '/update_image',
|
||||
data: dataUpload,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function(res) {
|
||||
$('#modal_link' + data.id).parent().html(res.html);
|
||||
setupAssetsLoading();
|
||||
}
|
||||
}).done(function() {
|
||||
animateSpinner(null, false);
|
||||
imageEditor.destroy();
|
||||
imageEditor = {};
|
||||
$('#tui-image-editor').html('');
|
||||
$('#fileEditModal').modal('hide');
|
||||
});
|
||||
});
|
||||
|
||||
window.onresize = function() {
|
||||
imageEditor.ui.resizeEditor();
|
||||
};
|
||||
}
|
||||
|
||||
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');
|
||||
modal.find('.file-preview-container').empty();
|
||||
modal.find('.file-wopi-controls').empty();
|
||||
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 === 'image') {
|
||||
if (data.processing) {
|
||||
animateSpinner('.file-preview-container', true);
|
||||
} else {
|
||||
animateSpinner('.file-preview-container', false);
|
||||
modal.find('.file-preview-container')
|
||||
.append($('<img>')
|
||||
.attr('src', data['large-preview-url'])
|
||||
.attr('alt', name)
|
||||
.click(function(ev) {
|
||||
ev.stopPropagation();
|
||||
}));
|
||||
if (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');
|
||||
initImageEditor(data);
|
||||
});
|
||||
} else {
|
||||
modal.find('.file-edit-link').css('display', 'none');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
modal.find('.file-preview-container').html(data['preview-icon']);
|
||||
}
|
||||
if (data.processing) {
|
||||
checkFileReady(url, modal);
|
||||
}
|
||||
modal.find('.file-name').text(name);
|
||||
modal.find('.preview-close').click(function() {
|
||||
modal.modal('hide');
|
||||
});
|
||||
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 checkFileReady(url, modal) {
|
||||
$.get(url, function(data) {
|
||||
if (data.processing) {
|
||||
$('.file-download-link')
|
||||
.addClass('disabled-with-click-events')
|
||||
.attr(
|
||||
'title',
|
||||
I18n.t('general.file.processing')
|
||||
)
|
||||
.click(function(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
setTimeout(function() {
|
||||
checkFileReady(url, modal);
|
||||
}, 10000);
|
||||
} else {
|
||||
if (data.type === 'image') {
|
||||
modal.find('.file-preview-container').empty();
|
||||
modal.find('.file-preview-container')
|
||||
.append($('<img>')
|
||||
.attr('src', data['large-preview-url'])
|
||||
.attr('alt', data.filename)
|
||||
.click(function(ev) {
|
||||
ev.stopPropagation();
|
||||
}));
|
||||
modal.find('.file-name').text(data.filename);
|
||||
modal.find('.modal-body').click(function() {
|
||||
modal.modal('hide');
|
||||
});
|
||||
modal.modal();
|
||||
$('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
|
||||
}
|
||||
$('.file-download-link')
|
||||
.removeClass('disabled-with-click-events')
|
||||
.removeAttr('title')
|
||||
.off();
|
||||
}
|
||||
});
|
||||
}
|
||||
}(window));
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
|
||||
//= require assets
|
||||
|
||||
(function(global) {
|
||||
'use strict';
|
||||
|
||||
global.initPreviewModal = function initPreviewModal() {
|
||||
var name;
|
||||
var url;
|
||||
var downloadUrl;
|
||||
$('.file-preview-link').off('click');
|
||||
$('.file-preview-link').click(function(e) {
|
||||
e.preventDefault();
|
||||
name = $(this).find('p').text();
|
||||
url = $(this).data('preview-url');
|
||||
downloadUrl = $(this).attr('href');
|
||||
openPreviewModal(name, url, downloadUrl);
|
||||
});
|
||||
}
|
||||
|
||||
function initImageEditor(data) {
|
||||
var imageEditor;
|
||||
var blackTheme = {
|
||||
'common.bi.image': '',
|
||||
'common.bisize.width': '0',
|
||||
'common.bisize.height': '0',
|
||||
'common.backgroundImage': 'none',
|
||||
'common.backgroundColor': '#1e1e1e',
|
||||
'common.border': '0px',
|
||||
|
||||
// header
|
||||
'header.backgroundImage': 'none',
|
||||
'header.backgroundColor': 'transparent',
|
||||
'header.border': '0px',
|
||||
|
||||
// load button
|
||||
'loadButton.backgroundColor': '#fff',
|
||||
'loadButton.border': '1px solid #ddd',
|
||||
'loadButton.color': '#222',
|
||||
'loadButton.fontFamily': '\'Noto Sans\', sans-serif',
|
||||
'loadButton.fontSize': '12px',
|
||||
|
||||
// download button
|
||||
'downloadButton.backgroundColor': '#fdba3b',
|
||||
'downloadButton.border': '1px solid #fdba3b',
|
||||
'downloadButton.color': '#fff',
|
||||
'downloadButton.fontFamily': '\'Noto Sans\', sans-serif',
|
||||
'downloadButton.fontSize': '12px',
|
||||
|
||||
// main icons
|
||||
'menu.normalIcon.path': '/images/icon-d.svg',
|
||||
'menu.normalIcon.name': 'icon-d',
|
||||
'menu.activeIcon.path': '/images/icon-b.svg',
|
||||
'menu.activeIcon.name': 'icon-b',
|
||||
'menu.disabledIcon.path': '/images/icon-a.svg',
|
||||
'menu.disabledIcon.name': 'icon-a',
|
||||
'menu.hoverIcon.path': '/images/icon-c.svg',
|
||||
'menu.hoverIcon.name': 'icon-c',
|
||||
'menu.iconSize.width': '24px',
|
||||
'menu.iconSize.height': '24px',
|
||||
|
||||
// submenu primary color
|
||||
'submenu.backgroundColor': '#1e1e1e',
|
||||
'submenu.partition.color': '#3c3c3c',
|
||||
|
||||
// submenu icons
|
||||
'submenu.normalIcon.path': '/images/icon-d.svg',
|
||||
'submenu.normalIcon.name': 'icon-d',
|
||||
'submenu.activeIcon.path': '/images/icon-c.svg',
|
||||
'submenu.activeIcon.name': 'icon-c',
|
||||
'submenu.iconSize.width': '32px',
|
||||
'submenu.iconSize.height': '32px',
|
||||
|
||||
// submenu labels
|
||||
'submenu.normalLabel.color': '#8a8a8a',
|
||||
'submenu.normalLabel.fontWeight': 'lighter',
|
||||
'submenu.activeLabel.color': '#fff',
|
||||
'submenu.activeLabel.fontWeight': 'lighter',
|
||||
|
||||
// checkbox style
|
||||
'checkbox.border': '0px',
|
||||
'checkbox.backgroundColor': '#fff',
|
||||
|
||||
// range style
|
||||
'range.pointer.color': '#fff',
|
||||
'range.bar.color': '#666',
|
||||
'range.subbar.color': '#d1d1d1',
|
||||
|
||||
'range.disabledPointer.color': '#414141',
|
||||
'range.disabledBar.color': '#282828',
|
||||
'range.disabledSubbar.color': '#414141',
|
||||
|
||||
'range.value.color': '#fff',
|
||||
'range.value.fontWeight': 'lighter',
|
||||
'range.value.fontSize': '11px',
|
||||
'range.value.border': '1px solid #353535',
|
||||
'range.value.backgroundColor': '#151515',
|
||||
'range.title.color': '#fff',
|
||||
'range.title.fontWeight': 'lighter',
|
||||
|
||||
// colorpicker style
|
||||
'colorpicker.button.border': '1px solid #1e1e1e',
|
||||
'colorpicker.title.color': '#fff'
|
||||
};
|
||||
|
||||
imageEditor = new tui.ImageEditor('#tui-image-editor', {
|
||||
includeUI: {
|
||||
loadImage: {
|
||||
path: data['download-url'],
|
||||
name: data.filename
|
||||
},
|
||||
theme: blackTheme, // or whiteTheme
|
||||
menu: ['draw', 'text', 'shape', 'crop', 'flip', 'icon', 'filter'],
|
||||
initMenu: 'draw',
|
||||
menuBarPosition: 'bottom'
|
||||
},
|
||||
cssMaxWidth: 700,
|
||||
cssMaxHeight: 500,
|
||||
selectionStyle: {
|
||||
cornerSize: 20,
|
||||
rotatingPointOffset: 70
|
||||
},
|
||||
usageStatistics: false
|
||||
});
|
||||
|
||||
$('#fileEditModal').find('.file-name').text('Editing: ' + data.filename);
|
||||
$('#fileEditModal').modal('show');
|
||||
|
||||
$('.tui-image-editor-header').hide();
|
||||
|
||||
$('.file-save-link').off().click(function(ev) {
|
||||
var dataUpload = new FormData();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
dataUpload.append('image', imageEditor.toDataURL());
|
||||
animateSpinner(null, true);
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/files/' + data.id + '/update_image',
|
||||
data: dataUpload,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function(res) {
|
||||
$('#modal_link' + data.id).parent().html(res.html);
|
||||
setupAssetsLoading();
|
||||
}
|
||||
}).done(function() {
|
||||
animateSpinner(null, false);
|
||||
imageEditor.destroy();
|
||||
imageEditor = {};
|
||||
$('#tui-image-editor').html('');
|
||||
$('#fileEditModal').modal('hide');
|
||||
});
|
||||
});
|
||||
|
||||
window.onresize = function() {
|
||||
imageEditor.ui.resizeEditor();
|
||||
};
|
||||
}
|
||||
|
||||
function openPreviewModal(name, url, downloadUrl) {
|
||||
var modal = $('#filePreviewModal');
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
modal.find('.file-preview-container').empty();
|
||||
modal.find('.file-wopi-controls').empty();
|
||||
if (data.hasOwnProperty('wopi-controls')) {
|
||||
modal.find('.file-wopi-controls').html(data['wopi-controls']);
|
||||
}
|
||||
var link = modal.find('.file-download-link');
|
||||
link.attr('href', downloadUrl);
|
||||
link.attr('data-no-turbolink', true);
|
||||
link.attr('data-status', 'asset-present');
|
||||
if (data['type'] === 'image') {
|
||||
if(data['processing']) {
|
||||
animateSpinner('.file-preview-container', true);
|
||||
} else {
|
||||
animateSpinner('.file-preview-container', false);
|
||||
modal.find('.file-preview-container')
|
||||
.append($('<img>')
|
||||
.attr('src', data['large-preview-url'])
|
||||
.attr('alt', name)
|
||||
.click(function(ev) {
|
||||
ev.stopPropagation();
|
||||
}));
|
||||
if (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');
|
||||
initImageEditor(data);
|
||||
});
|
||||
}else{
|
||||
modal.find('.file-edit-link').css('display','none');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
modal.find('.file-preview-container').html(data['preview-icon']);
|
||||
}
|
||||
if(data['processing']) {
|
||||
checkFileReady(url, modal);
|
||||
}
|
||||
modal.find('.file-name').text(name);
|
||||
modal.find('.preview-close').click(function() {
|
||||
modal.modal('hide');
|
||||
});
|
||||
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(ev) {
|
||||
// TODO
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function checkFileReady(url, modal) {
|
||||
$.get(url, function(data) {
|
||||
if(data['processing']) {
|
||||
$('.file-download-link')
|
||||
.addClass('disabled-with-click-events')
|
||||
.attr('title',
|
||||
'<%= I18n.t('general.file.processing')%>')
|
||||
.click(function(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
setTimeout(function() {
|
||||
checkFileReady(url, modal);
|
||||
}, 10000);
|
||||
} else {
|
||||
if(data['type'] === 'image') {
|
||||
modal.find('.file-preview-container').empty();
|
||||
modal.find('.file-preview-container')
|
||||
.append($('<img>')
|
||||
.attr('src', data['large-preview-url'])
|
||||
.attr('alt', data['filename'])
|
||||
.click(function(ev) {
|
||||
ev.stopPropagation();
|
||||
})
|
||||
);
|
||||
modal.find('.file-name').text(data['filename']);
|
||||
modal.find('.modal-body').click(function() {
|
||||
modal.modal('hide');
|
||||
});
|
||||
modal.modal();
|
||||
$('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1);
|
||||
}
|
||||
$('.file-download-link')
|
||||
.removeClass('disabled-with-click-events')
|
||||
.removeAttr('title')
|
||||
.off();
|
||||
}
|
||||
})
|
||||
}
|
||||
})(window);
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
"compression-webpack-plugin": "^1.1.11",
|
||||
"css-loader": "^0.28.11",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"fabric": "^1.6.7",
|
||||
"fabric": "1.6.7",
|
||||
"file-loader": "^0.11.2",
|
||||
"glob": "^7.1.2",
|
||||
"immutability-helper": "^2.7.1",
|
||||
|
|
@ -101,9 +101,9 @@
|
|||
"shortid": "^2.2.12",
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "^2.4.1",
|
||||
"tui-code-snippet": "^1.4.0",
|
||||
"tui-code-snippet": "^1.5.0",
|
||||
"tui-color-picker": "^2.2.0",
|
||||
"tui-image-editor": "^3.2.2",
|
||||
"tui-image-editor": "git://github.com/biosistemika/tui.image-editor",
|
||||
"webpack": "^3.12.0",
|
||||
"webpack-manifest-plugin": "^1.3.2",
|
||||
"webpack-merge": "^4.1.3"
|
||||
|
|
|
|||
Loading…
Reference in a new issue