From 723024202e08267c61b703654b200a1b9b3f549a Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Fri, 22 Mar 2019 09:27:50 +0100
Subject: [PATCH] Image editor improvements [SCI - 3158, 3160, 3156, 3154]
(#1563)
* Improvments SCI - 3158, 3160, 3156, 3154
---
.../javascripts/sitewide/file_preview.js | 413 ++++++++++++++++++
.../javascripts/sitewide/file_preview.js.erb | 262 -----------
package.json | 6 +-
3 files changed, 416 insertions(+), 265 deletions(-)
create mode 100644 app/assets/javascripts/sitewide/file_preview.js
delete mode 100644 app/assets/javascripts/sitewide/file_preview.js.erb
diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js
new file mode 100644
index 000000000..2305061eb
--- /dev/null
+++ b/app/assets/javascripts/sitewide/file_preview.js
@@ -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($('![]()
')
+ .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($('![]()
')
+ .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));
diff --git a/app/assets/javascripts/sitewide/file_preview.js.erb b/app/assets/javascripts/sitewide/file_preview.js.erb
deleted file mode 100644
index f6dcbafb5..000000000
--- a/app/assets/javascripts/sitewide/file_preview.js.erb
+++ /dev/null
@@ -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($('![]()
')
- .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($('![]()
')
- .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);
diff --git a/package.json b/package.json
index 3fada9c7b..6f6838c6a 100644
--- a/package.json
+++ b/package.json
@@ -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"