scinote-web/app/assets/javascripts/sitewide/marvinjs_editor.js

349 lines
11 KiB
JavaScript
Raw Normal View History

2020-10-22 19:41:17 +08:00
/* global TinyMCE, ChemicalizeMarvinJs, MarvinJSUtil, I18n, tinymce, HelperModule */
2019-04-29 01:11:41 +08:00
/* eslint-disable no-param-reassign */
/* eslint-disable wrap-iife */
2019-06-23 06:09:49 +08:00
/* eslint-disable no-use-before-define */
var marvinJsRemoteLastMrv;
2019-06-23 06:48:50 +08:00
var marvinJsRemoteEditor;
var MarvinJsEditor;
var MarvinJsEditorApi = (function() {
2019-04-27 00:24:21 +08:00
var marvinJsModal = $('#MarvinJsModal');
var marvinJsContainer = $('#marvinjs-editor');
var marvinJsObject = $('#marvinjs-sketch');
2019-04-29 01:11:41 +08:00
var emptySketch = '<cml><MDocument></MDocument></cml>';
var sketchName = marvinJsModal.find('.file-name input');
var marvinJsMode = marvinJsContainer.data('marvinjsMode');
// Facade api actions
2019-06-23 06:09:49 +08:00
var marvinJsExportImage = (childFuction, options = {}) => {
if (marvinJsMode === 'remote') {
remoteExportImage(childFuction, options);
} else {
2019-06-23 06:09:49 +08:00
localExportImage(childFuction, options);
}
};
// ///////////////
var loadEditor = () => {
if (marvinJsMode === 'remote') {
2019-06-23 06:48:50 +08:00
return marvinJsRemoteEditor;
2019-05-08 21:00:36 +08:00
}
2019-06-23 06:09:49 +08:00
return MarvinJSUtil.getEditor('#marvinjs-sketch');
2019-04-29 01:11:41 +08:00
};
2019-04-27 04:59:38 +08:00
var loadPackages = () => {
2019-04-29 01:11:41 +08:00
return MarvinJSUtil.getPackage('#marvinjs-sketch');
};
2019-04-27 04:59:38 +08:00
// Local marvinJS installation
2019-06-23 06:09:49 +08:00
var localExportImage = (childFuction, options = {}) => {
loadEditor().then(function(sketcherInstance) {
sketcherInstance.exportStructure('mrv').then(function(source) {
loadPackages().then(function(sketcherPackage) {
sketcherPackage.onReady(function() {
var exporter = createExporter(sketcherPackage, 'image/jpeg');
exporter.render(source).then(function(image) {
2019-06-23 06:09:49 +08:00
childFuction(source, image, options);
});
});
});
});
});
};
// Web services installation
2019-06-23 06:09:49 +08:00
var remoteImage = (childFuction, source, options = {}) => {
2019-06-23 06:48:50 +08:00
var params = {
carbonLabelVisible: false,
implicitHydrogen: 'TERMINAL_AND_HETERO',
displayMode: 'WIREFRAME',
width: 900,
height: 900,
'background-color': '#ffffff'
2019-06-23 06:48:50 +08:00
};
if (typeof (marvinJsRemoteEditor) === 'undefined') {
setTimeout(() => { remoteImage(childFuction, source, options); }, 100);
return false;
}
2019-07-16 19:40:54 +08:00
marvinJsRemoteEditor.exportMrvToImageDataUri(source, 'image/jpeg', params).then(function(image) {
2019-06-23 06:48:50 +08:00
childFuction(source, image, options);
2019-06-23 06:09:49 +08:00
});
2019-06-23 06:48:50 +08:00
return true;
2019-06-23 06:09:49 +08:00
};
var remoteExportImage = (childFuction, options = {}) => {
remoteImage(childFuction, marvinJsRemoteLastMrv, options);
};
// Support actions
2019-04-27 04:59:38 +08:00
function preloadActions(config) {
2019-06-23 06:48:50 +08:00
if (marvinJsMode === 'remote') {
if (config.mode === 'new' || config.mode === 'new-tinymce') {
2019-06-23 06:48:50 +08:00
marvinJsRemoteEditor.importStructure('mrv', emptySketch);
2019-07-16 19:40:54 +08:00
sketchName.val('');
} else if (config.mode === 'edit') {
2019-07-02 19:15:57 +08:00
marvinJsRemoteLastMrv = config.data;
2019-06-23 06:48:50 +08:00
marvinJsRemoteEditor.importStructure('mrv', config.data);
2019-04-29 01:11:41 +08:00
sketchName.val(config.name);
} else if (config.mode === 'edit-tinymce') {
2019-07-02 19:15:57 +08:00
marvinJsRemoteLastMrv = config.data;
$.get(config.marvinUrl, { object_type: 'TinyMceAsset', show_action: 'start_edit' }, function(result) {
2019-06-23 06:48:50 +08:00
marvinJsRemoteEditor.importStructure('mrv', result.description);
2019-04-29 01:11:41 +08:00
sketchName.val(result.name);
});
}
2019-06-23 06:48:50 +08:00
marvinJsRemoteEditor.on('molchange', () => {
marvinJsRemoteEditor.exportStructure('mrv').then(function(source) {
2019-06-23 06:09:49 +08:00
marvinJsRemoteLastMrv = source;
});
2019-04-29 01:11:41 +08:00
});
2019-06-23 06:48:50 +08:00
} else {
loadEditor().then(function(marvin) {
if (config.mode === 'new' || config.mode === 'new-tinymce') {
marvin.importStructure('mrv', emptySketch);
sketchName.val(I18n.t('marvinjs.new_sketch'));
} else if (config.mode === 'edit') {
marvin.importStructure('mrv', config.data);
sketchName.val(config.name);
} else if (config.mode === 'edit-tinymce') {
$.get(config.marvinUrl, { object_type: 'TinyMceAsset', show_action: 'start_edit' }, function(result) {
2019-06-23 06:48:50 +08:00
marvin.importStructure('mrv', result.description);
sketchName.val(result.name);
});
}
});
}
2019-04-27 04:59:38 +08:00
}
2019-04-29 01:11:41 +08:00
function createExporter(marvin, imageType) {
var inputFormat = 'mrv';
var settings = {
2019-04-29 01:11:41 +08:00
width: 900,
height: 900
};
2019-04-27 04:59:38 +08:00
var params = {
2019-04-29 01:11:41 +08:00
imageType: imageType,
settings: settings,
inputFormat: inputFormat
};
2019-04-27 04:59:38 +08:00
return new marvin.ImageExporter(params);
}
2019-04-28 04:54:59 +08:00
function TinyMceBuildHTML(json) {
var imgstr = "<img src='" + json.image.url + "'";
imgstr += " width='300' height='300'";
2019-04-28 04:54:59 +08:00
imgstr += " data-mce-token='" + json.image.token + "'";
2019-04-29 01:11:41 +08:00
imgstr += " data-source-type='" + json.image.source_type + "'";
2019-04-28 04:54:59 +08:00
imgstr += " alt='description-" + json.image.token + "' />";
return imgstr;
}
2019-07-02 19:15:57 +08:00
function saveFunction(source, image, config) {
$.post(config.marvinUrl, {
description: source,
object_id: config.objectId,
object_type: config.objectType,
2019-07-02 19:15:57 +08:00
name: sketchName.val(),
image: image
}, function(result) {
var newAsset = $(result.html);
2019-07-16 19:40:54 +08:00
var json;
if (config.objectType === 'Step') {
newAsset.find('.file-preview-link').css('top', '-300px');
newAsset.addClass('new').prependTo($(config.container));
setTimeout(function() {
newAsset.find('.file-preview-link').css('top', '0px');
}, 200);
} else if (config.objectType === 'Result') {
2020-07-28 21:39:29 +08:00
location.reload();
2019-07-16 19:40:54 +08:00
} else if (config.objectType === 'TinyMceAsset') {
json = tinymce.util.JSON.parse(result);
config.editor.execCommand('mceInsertContent', false, TinyMceBuildHTML(json));
TinyMCE.updateImages(config.editor);
}
$(marvinJsModal).modal('hide');
2019-09-18 17:18:44 +08:00
config.button.dataset.inProgress = false;
if (MarvinJsEditor.saveCallback) MarvinJsEditor.saveCallback();
2020-09-23 18:26:26 +08:00
}).error((response) => {
if (response.status === 403) {
HelperModule.flashAlertMsg(I18n.t('general.no_permissions'), 'danger');
}
});
}
2019-07-02 19:15:57 +08:00
function updateFunction(source, image, config) {
$.ajax({
url: config.marvinUrl,
data: {
description: source,
2019-07-02 19:15:57 +08:00
name: sketchName.val(),
2019-07-16 19:40:54 +08:00
object_type: config.objectType,
2019-07-02 19:15:57 +08:00
image: image
},
dataType: 'json',
type: 'PUT',
success: function(json) {
2019-07-16 19:40:54 +08:00
if (config.objectType === 'TinyMceAsset') {
TinyMCE.makeItDirty(config.editor);
2019-07-16 19:40:54 +08:00
config.image[0].src = json.url;
config.image[0].dataset.mceSrc = json.url;
2019-09-26 17:25:34 +08:00
$(`img[data-mce-token=${config.image[0].dataset.mceToken}]`)
.attr('src', json.url);
2019-07-16 19:40:54 +08:00
} else {
$('#modal_link' + json.id + ' img').attr('src', json.url);
2019-10-03 21:44:03 +08:00
$('#modal_link' + json.id + ' img').css('opacity', '0');
2019-07-16 19:40:54 +08:00
$('#modal_link' + json.id + ' .attachment-label').html(json.file_name);
}
2019-09-18 17:18:44 +08:00
$(marvinJsModal).modal('hide');
config.button.dataset.inProgress = false;
2020-09-23 18:26:26 +08:00
},
error: function(response) {
if (response.status === 403) {
HelperModule.flashAlertMsg(I18n.t('general.no_permissions'), 'danger');
}
}
});
}
// MarvinJS Methods
return {
enabled: function() {
return ($('#MarvinJsModal').length > 0);
},
2019-04-27 02:33:20 +08:00
open: function(config) {
if (!MarvinJsEditor.enabled()) {
$('#MarvinJsPromoModal').modal('show');
return false;
}
2019-06-23 06:48:50 +08:00
if (marvinJsMode === 'remote' && typeof (marvinJsRemoteEditor) === 'undefined') {
setTimeout(() => { MarvinJsEditor.open(config); }, 100);
2019-06-23 06:48:50 +08:00
return false;
}
2019-04-29 01:11:41 +08:00
preloadActions(config);
2019-04-27 00:24:21 +08:00
$(marvinJsModal).modal('show');
$(marvinJsObject)
2019-06-23 06:09:49 +08:00
.css('width', marvinJsContainer.width() + 'px')
2019-04-29 01:11:41 +08:00
.css('height', marvinJsContainer.height() + 'px');
2019-09-18 17:18:44 +08:00
marvinJsModal.find('.file-save-link').off('click').on('click', function() {
if (this.dataset.inProgress === 'true') return;
this.dataset.inProgress = true;
config.button = this;
2019-04-29 01:11:41 +08:00
if (config.mode === 'new') {
MarvinJsEditor.save(config);
2019-04-29 01:11:41 +08:00
} else if (config.mode === 'edit') {
2019-07-16 19:40:54 +08:00
config.objectType = 'Asset';
MarvinJsEditor.update(config);
2019-04-29 01:11:41 +08:00
} else if (config.mode === 'new-tinymce') {
config.objectType = 'TinyMceAsset';
2019-07-16 19:40:54 +08:00
MarvinJsEditor.save(config);
2019-04-29 01:11:41 +08:00
} else if (config.mode === 'edit-tinymce') {
2019-07-16 19:40:54 +08:00
config.objectType = 'TinyMceAsset';
MarvinJsEditor.update(config);
2019-04-28 01:08:40 +08:00
}
2019-04-29 01:11:41 +08:00
});
2019-06-23 06:48:50 +08:00
return true;
2019-04-27 02:33:20 +08:00
},
initNewButton: function(selector, saveCallback) {
2019-04-29 01:11:41 +08:00
$(selector).off('click').on('click', function() {
2019-04-27 02:33:20 +08:00
var objectId = this.dataset.objectId;
var objectType = this.dataset.objectType;
2019-04-27 04:59:38 +08:00
var marvinUrl = this.dataset.marvinUrl;
2019-04-29 01:11:41 +08:00
var container = this.dataset.sketchContainer;
MarvinJsEditor.open({
2019-04-27 02:33:20 +08:00
mode: 'new',
objectId: objectId,
2019-04-27 04:59:38 +08:00
objectType: objectType,
2019-04-28 01:08:40 +08:00
marvinUrl: marvinUrl,
container: container
2019-04-29 01:11:41 +08:00
});
});
MarvinJsEditor.saveCallback = saveCallback;
2019-04-27 02:33:20 +08:00
},
2019-04-29 01:11:41 +08:00
save: function(config) {
2019-07-02 19:15:57 +08:00
marvinJsExportImage(saveFunction, config);
2019-04-27 02:33:20 +08:00
},
2019-04-29 01:11:41 +08:00
update: function(config) {
2019-07-02 19:15:57 +08:00
marvinJsExportImage(updateFunction, config);
2019-04-27 00:24:21 +08:00
}
};
2019-04-27 00:24:21 +08:00
});
2019-04-28 04:54:59 +08:00
// TinyMCE plugin
2019-04-28 04:54:59 +08:00
(function() {
'use strict';
tinymce.PluginManager.requireLangPack('MarvinJsPlugin');
tinymce.create('tinymce.plugins.MarvinJsPlugin', {
2019-04-29 01:11:41 +08:00
MarvinJsPlugin: function(ed) {
2019-04-28 04:54:59 +08:00
var editor = ed;
2019-04-29 01:11:41 +08:00
function openMarvinJs() {
MarvinJsEditor.open({
2019-04-28 04:54:59 +08:00
mode: 'new-tinymce',
marvinUrl: '/tiny_mce_assets/marvinjs',
2019-04-28 04:54:59 +08:00
editor: editor
2019-04-29 01:11:41 +08:00
});
2019-04-28 04:54:59 +08:00
}
// Add a button that opens a window
editor.addButton('marvinjsplugin', {
tooltip: I18n.t('marvinjs.new_button'),
icon: 'marvinjs',
2019-04-28 04:54:59 +08:00
onclick: openMarvinJs
});
// Adds a menu item to the tools menu
editor.addMenuItem('marvinjsplugin', {
text: I18n.t('marvinjs.new_button'),
icon: 'marvinjs',
2019-04-28 04:54:59 +08:00
context: 'insert',
onclick: openMarvinJs
});
}
});
tinymce.PluginManager.add(
'marvinjsplugin',
tinymce.plugins.MarvinJsPlugin
);
})();
// Initialization
2020-10-22 19:41:17 +08:00
$(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();
if (MarvinJsEditor.enabled()) {
if ($('#marvinjs-editor')[0].dataset.marvinjsMode === 'remote' && typeof(ChemicalizeMarvinJs) !== 'undefined') {
ChemicalizeMarvinJs.createEditor('#marvinjs-sketch').then(function(marvin) {
2019-10-03 17:07:19 +08:00
marvin.setDisplaySettings({ toolbars: 'reporting' });
marvinJsRemoteEditor = marvin;
});
}
}
MarvinJsEditor.initNewButton('.new-marvinjs-upload-button');
});