Add new graph button to step

.gitignore

@@ -74,3 +74,8 @@ spec/addons
 
 # RVM/rbenv ruby version for local development
 .ruby-version
+
+#ignore marvinJs
+
+public/marvinjs
+public/marvin4js-license.cxl

app/assets/javascripts/application.js.erb

@@ -41,6 +41,7 @@
 //= require select2_customization
 //= require shared/inline_editing
 //= require turbolinks
+//= require marvinjslauncher
 
 
 // Initialize links for submitting forms. This is useful for submitting

app/assets/javascripts/my_modules/protocols.js.erb

@@ -18,6 +18,7 @@ function init() {
   initRefreshStatusBar();
   initImport();
   setupAssetsLoading();
+  MarvinJsEditor().initNewButton('.new-marvinjs-upload-button');
 }
 
 function initEditMyModuleDescription() {

app/assets/javascripts/sitewide/marvinjs_editor.js

@@ -4,14 +4,51 @@ var MarvinJsEditor = (function() {
   var marvinJsContainer = $('#marvinjs-editor');
   var marvinJsObject = $('#marvinjs-sketch');
 
+  var loadEditor = () => {
+    return MarvinJSUtil.getEditor('#marvinjs-sketch')
+  }
+
   return Object.freeze({
-    open: function() {
+    open: function(config) {
+      MarvinJsEditor().reset()
       $(marvinJsModal).modal('show');
       $(marvinJsObject)
         .css('width', marvinJsContainer.width() + 'px')
         .css('height', marvinJsContainer.height() + 'px')
 
+      marvinJsContainer[0].dataset.objectId = config.objectId;
+      marvinJsContainer[0].dataset.objectType = config.objectType;
+      marvinJsContainer[0].dataset.mode = config.mode;
+      marvinJsModal.find('.file-save-link').off('click').on('click', () => {
+        MarvinJsEditor().save()
+      })
+
+    },
+
+    initNewButton: function(selector) {
+      $(selector).off('click').on('click', function(){
+        var objectId = this.dataset.objectId;
+        var objectType = this.dataset.objectType;
+        MarvinJsEditor().open({
+          mode: 'new',
+          objectId: objectId,
+          objectType: objectType
+        })
+      })
+    },
+
+    save: function(){
+      loadEditor().then(function(sketcherInstance) {
+        sketcherInstance.exportStructure("mrv").then(function(source) {
+          console.log(source);
+        });
+      })
+    },
+
+    reset: function(){
+      marvinJsContainer[0].dataset.objectId = '';
+      marvinJsContainer[0].dataset.objectType = '';
+      marvinJsContainer[0].dataset.mode = '';
     }
   });
 });
-MarvinJsEditor();

app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb

@@ -1,4 +1,8 @@
-<span class="btn btn-default new-marvinjs-upload-button">
+<span 
+  class="btn btn-default new-marvinjs-upload-button"
+  data-object-id="<%= element_id %>"
+  data-object-type="<%= element_type %>"
+>
   <span class="fas fa-file-invoice new-marvinjs-upload-icon"></span>
   New chemical drawing
 </span>

app/views/shared/_marvinjs_modal.html.erb

@@ -10,13 +10,11 @@
       <div class="modal-header">
         <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
         <span class="file-name"></span>
-        <a class="file-save-link" href='#'>
-          <p><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
-        </a>
+        <p class="file-save-link"><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
       </div>
       <div class="modal-body">
         <div id="marvinjs-editor">
-          <iframe id="marvinjs-sketch" src="https://marvinjs-demo.chemaxon.com/latest/editor.html" 
+          <iframe id="marvinjs-sketch" src="/marvinjs/editor.html" 
   style="overflow: hidden; min-width: 500px; min-height: 450px"  ></iframe>
         </div>
       </div>

app/views/steps/attachments/_list.html.erb

@@ -8,7 +8,7 @@
 <div class="col-xs-12 attachments-actions">
   <div class="col-md-4 drag_n_drop_label">
   </div>
-  <div class="col-md-8">
+  <div class="col-xl-8 col-md-12">
     <div class="attachemnts-header pull-right">
       <%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb',
                  locals: {  element_id: step.id, element_type: 'Step' } %>

vendor/assets/javascripts/marvinjslauncher.js

@@ -0,0 +1,120 @@
+(function (win) {
+	
+	function _getWrapperElement (id) {
+		var re = new RegExp(/^#.*/);
+		if (typeof id !== "string") {
+			return null;
+		}
+		// remove hash mark if present
+		return document.getElementById( (re.test(id)) ? id.substr(1) : id );
+	}
+
+	function _getPackage (wrapperElement) {
+		if (typeof wrapperElement.contentWindow.marvin != "undefined") {
+			return wrapperElement.contentWindow.marvin;
+		}
+		return null;
+	}
+	
+	function _createPackage(elementId, resolve, reject) {
+		if(elementId == null){
+			reject("Element id can not be null.");
+			return;
+		}
+	
+		var	wrapperElement = _getWrapperElement(elementId);
+
+		if (wrapperElement == null) {
+			reject("Unable to get element with id: " + elementId);
+			return;
+		}
+
+		var marvinPackage = _getPackage(wrapperElement);
+		if (marvinPackage) {
+			marvinPackage.onReady(function() {
+				resolve(marvinPackage);
+			});
+		} else { // use listener
+			wrapperElement.addEventListener("load", function handleSketchLoad (e) {
+				var marvin = _getPackage(wrapperElement);
+				if (marvin) {
+					marvin.onReady(function() {
+						resolve(marvin);
+					});
+				} else {
+					reject("Unable to find marvin package");
+				}
+
+			});
+		}
+	}
+	
+	function _createEditor(elementId, resolve, reject) {
+		if(elementId == null){
+			reject("Element id can not be null.");
+			return;
+		}
+	
+		var	wrapperElement = _getWrapperElement(elementId);
+
+		if (wrapperElement == null) {
+			reject("Unable to get element with id: " + elementId);
+			return;
+		}
+
+		var marvinPackage = _getPackage(wrapperElement);
+		if (marvinPackage) {
+			marvinPackage.onReady(function() {
+				if (typeof marvinPackage.sketcherInstance != "undefined") {
+						resolve(_getPackage(wrapperElement).sketcherInstance);
+					return;
+				} else {
+						reject("Unable to find sketcherInstance in element with id: " + elementId);
+					return;
+				}
+			});
+		} else { // use listener
+			wrapperElement.addEventListener("load", function handleSketchLoad (e) {
+				var marvin = _getPackage(wrapperElement);
+				if (marvin) {
+					marvin.onReady(function() {
+						if (typeof marvin.sketcherInstance != 'undefined') {
+							resolve(marvin.sketcherInstance);
+						} else {
+							reject("Unable to find sketcherInstance in iframe with id: " + elementId);
+						}
+					});
+				} else {
+					reject("Unable to find marvin package, cannot retrieve sketcher instance");
+				}
+
+			});
+		}
+	}
+
+	if (!("Promise" in win) && ("ES6Promise" in win) && ("polyfill" in win.ES6Promise)) {
+		win.ES6Promise.polyfill();
+	}
+	
+	win.MarvinJSUtil = {
+		"getEditor": function getEditor (elementId) {
+			
+	 		function createEditor (resolve, reject) {
+	 			_createEditor(elementId, resolve, reject);
+	 		};
+			
+			return new Promise(createEditor);				
+		}
+		,"getPackage": function getPackage (elementId) {
+
+			function createPackage (resolve, reject) {
+				_createPackage(elementId, resolve, reject);
+			};
+		
+			return new Promise(createPackage);				
+		}
+	};;
+	
+	
+}(window));
+