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

/* global MarvinJSUtil, I18n, FilePreviewModal, tinymce */
/* global TinyMCE, ChemicalizeMarvinJs */
/* eslint-disable no-param-reassign */
/* eslint-disable wrap-iife */
/* eslint-disable no-use-before-define */
var marvinJsRemoteLastMrv;


var MarvinJsEditor = (function() {
  var marvinJsModal = $('#MarvinJsModal');
  var marvinJsContainer = $('#marvinjs-editor');
  var marvinJsObject = $('#marvinjs-sketch');
  var emptySketch = '<cml><MDocument></MDocument></cml>';
  var sketchName = marvinJsModal.find('.file-name input');
  var marvinJsMode = marvinJsContainer[0].dataset.marvinjsMode;

  // Facade api actions

  var marvinJsExport = (childFunction, options = {}) => {
    if (marvinJsMode === 'remote') {
      remoteExport(childFunction, options);
    } else {
      localExport(childFunction, options);
    }
  };

  var marvinJsImage = (childFunction, source, options = {}) => {
    if (marvinJsMode === 'remote') {
      remoteImage(childFunction, source, options);
    } else {
      localImage(childFunction, source, options);
    }
  };

  var marvinJsExportImage = (childFuction, options = {}) => {
    if (marvinJsMode === 'remote') {
      remoteExportImage(childFuction, options);
    } else {
      localExportImage(childFuction, options);
    }
  };
  // ///////////////

  var loadEditor = () => {
    if (marvinJsMode === 'remote') {
      marvinJsObject.find('iframe').remove();
      return ChemicalizeMarvinJs.createEditor('#marvinjs-sketch');
    }
    return MarvinJSUtil.getEditor('#marvinjs-sketch');
  };
  var loadPackages = () => {
    return MarvinJSUtil.getPackage('#marvinjs-sketch');
  };

  // Local marvinJS installation

  var localExport = (childFuction, options = {}) => {
    loadEditor().then(function(sketcherInstance) {
      sketcherInstance.exportStructure('mrv').then(function(source) {
        childFuction(source, options);
      });
    });
  };

  var localImage = (childFuction, source, options = {}) => {
    loadPackages().then(function(sketcherInstance) {
      sketcherInstance.onReady(function() {
        var exporter = createExporter(sketcherInstance, 'image/jpeg');
        exporter.render(source).then(function(image) {
          childFuction(source, image, options);
        });
      });
    });
  };

  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) {
              childFuction(source, image, options);
            });
          });
        });
      });
    });
  };

  // Web services installation

  var remoteExport = (childFuction, options = {}) => {
    childFuction(marvinJsRemoteLastMrv, options);
  };

  var remoteImage = (childFuction, source, options = {}) => {
    ChemicalizeMarvinJs.createEditor('#marvinjs-sketch').then(function(marvin) {
      var params = {
        carbonLabelVisible: false,
        implicitHydrogen: 'TERMINAL_AND_HETERO',
        displayMode: 'WIREFRAME',
        width: 900,
        height: 900
      };
      marvin.exportMrvToImageDataUri(source, 'jpeg', params).then(function(image) {
        childFuction(source, image, options);
      });
    });
  };

  var remoteExportImage = (childFuction, options = {}) => {
    remoteImage(childFuction, marvinJsRemoteLastMrv, options);
  };

  // Support actions
  function preloadActions(config) {
    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, function(result) {
          marvin.importStructure('mrv', result.description);
          sketchName.val(result.name);
        });
      }

      marvin.on('molchange', () => {
        marvin.exportStructure('mrv').then(function(source) {
          marvinJsRemoteLastMrv = source;
        });
      });
    });
  }

  function createExporter(marvin, imageType) {
    var inputFormat = 'mrv';
    var settings = {
      width: 900,
      height: 900
    };

    var params = {
      imageType: imageType,
      settings: settings,
      inputFormat: inputFormat
    };
    return new marvin.ImageExporter(params);
  }

  function assignImage(source, data, target) {
    target.attr('src', data);
    return data;
  }

  function TinyMceBuildHTML(json) {
    var imgstr = "<img src='" + json.image.url + "'";
    imgstr += " data-mce-token='" + json.image.token + "'";
    imgstr += " data-source-id='" + json.image.source_id + "'";
    imgstr += " data-source-type='" + json.image.source_type + "'";
    imgstr += " alt='description-" + json.image.token + "' />";
    return imgstr;
  }

  function saveFunction(source, config) {
    $.post(config.marvinUrl, {
      description: source,
      object_id: config.objectId,
      object_type: config.objectType,
      name: sketchName.val()
    }, function(result) {
      var newAsset;
      if (config.objectType === 'Step') {
        newAsset = $(result.html);
        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);
        FilePreviewModal.init();
      }
      $(marvinJsModal).modal('hide');
    });
  }

  function saveTinymceFunction(source, image, config) {
    $.post(config.marvinUrl, {
      description: source,
      object_id: config.objectId,
      object_type: config.objectType,
      name: sketchName.val(),
      image: image
    }, function(result) {
      var json = tinymce.util.JSON.parse(result);
      config.editor.execCommand('mceInsertContent', false, TinyMceBuildHTML(json));
      TinyMCE.updateImages(config.editor);
      $(marvinJsModal).modal('hide');
    });
  }

  function updateFunction(source, config) {
    $.ajax({
      url: config.marvinUrl,
      data: {
        description: source,
        name: sketchName.val()
      },
      dataType: 'json',
      type: 'PUT',
      success: function(json) {
        $(marvinJsModal).modal('hide');
        config.reloadImage.src.val(json.description);
        $(config.reloadImage.sketch).find('.attachment-label').text(json.name);
        MarvinJsEditor().create_preview(
          config.reloadImage.src,
          $(config.reloadImage.sketch).find('img')
        );
      }
    });
  }

  function updateTinymceFunction(source, image, config) {
    $.ajax({
      url: config.marvinUrl,
      data: {
        description: source,
        name: sketchName.val(),
        object_type: 'TinyMceAsset',
        image: image
      },
      dataType: 'json',
      type: 'PUT',
      success: function(json) {
        config.image[0].src = json.url;
        $(marvinJsModal).modal('hide');
      }
    });
  }

  // MarvinJS Methods

  return Object.freeze({
    open: function(config) {
      preloadActions(config);
      $(marvinJsModal).modal('show');
      $(marvinJsObject)
        .css('width', marvinJsContainer.width() + 'px')
        .css('height', marvinJsContainer.height() + 'px');
      marvinJsModal.find('.file-save-link').off('click').on('click', () => {
        if (config.mode === 'new') {
          MarvinJsEditor().save(config);
        } else if (config.mode === 'edit') {
          MarvinJsEditor().update(config);
        } else if (config.mode === 'new-tinymce') {
          config.objectType = 'TinyMceAsset';
          MarvinJsEditor().save_with_image(config);
        } else if (config.mode === 'edit-tinymce') {
          MarvinJsEditor().update_tinymce(config);
        }
      });
    },

    initNewButton: function(selector) {
      $(selector).off('click').on('click', function() {
        var objectId = this.dataset.objectId;
        var objectType = this.dataset.objectType;
        var marvinUrl = this.dataset.marvinUrl;
        var container = this.dataset.sketchContainer;
        MarvinJsEditor().open({
          mode: 'new',
          objectId: objectId,
          objectType: objectType,
          marvinUrl: marvinUrl,
          container: container
        });
      });
    },

    save: function(config) {
      marvinJsExport(saveFunction, config);
    },

    save_with_image: function(config) {
      marvinJsExportImage(saveTinymceFunction, config);
    },

    update: function(config) {
      marvinJsExport(updateFunction, config);
    },

    update_tinymce: function(config) {
      marvinJsExportImage(updateTinymceFunction, config);
    },

    create_preview: function(source, target) {
      marvinJsImage(assignImage, source.val(), target);
    },

    create_download_link: function(source, link, filename) {
      var downloadLink = (mrv, image, option) => {
        option.link.attr('href', image);
        option.link.attr('download', option.filename);
      };
      marvinJsImage(downloadLink, source.val(), { link: link, filename: filename });
    },

    delete_sketch: function(url, object) {
      $.ajax({
        url: url,
        dataType: 'json',
        type: 'DELETE',
        success: function() {
          $(object).remove();
        }
      });
    }
  });
});

(function() {
  'use strict';

  tinymce.PluginManager.requireLangPack('MarvinJsPlugin');

  tinymce.create('tinymce.plugins.MarvinJsPlugin', {
    MarvinJsPlugin: function(ed) {
      var editor = ed;

      function openMarvinJs() {
        MarvinJsEditor().open({
          mode: 'new-tinymce',
          marvinUrl: '/marvin_js_assets',
          editor: editor
        });
      }
      // Add a button that opens a window
      editor.addButton('marvinjsplugin', {
        tooltip: I18n.t('marvinjs.new_button'),
        icon: 'file-invoice',
        onclick: openMarvinJs
      });

      // Adds a menu item to the tools menu
      editor.addMenuItem('marvinjsplugin', {
        text: I18n.t('marvinjs.new_button'),
        icon: 'file-invoice',
        context: 'insert',
        onclick: openMarvinJs
      });
    }
  });

  tinymce.PluginManager.add(
    'marvinjsplugin',
    tinymce.plugins.MarvinJsPlugin
  );
})();