To be able to embed the Marvin4JS editor into a web page, you need one of the following HTML files:
First of all, create an iframe that loads the proper HTML file. (In this example, the editorws.html file is preferred to be able to use extra functionalities that webservices provides.)
The editor component fill the iframe. As you resize the iframe, editor follows the changing of the iframe width and height.
In this example, the iframe size is determined its css class, which is defined in docs.css: sketcher-frame
<div class="resizable"> <iframe src="../editorws.html" id="sketch" class="sketcher-frame"></iframe> </div>
The host page is where the iframe is inserted.
The loading of editor is not synchronized with the loading of the hosted page. Thus, if you want to perform
any function of the editor at startup, an event listener has to be bound to the iframe that contains the editor.
The below code demonstrates how to hook an event listener to the sketch titled iframe. A function is assigned to the load event of the iframe.
Use the getMarvin function (defined in the util.js) to check whether the marvin JavaScript package is available.
If the package is available, and there is not any security
restriction by the browser to access it from external JavaScript code, you can call its onReady function to define your custom JavaScript function
that is evaluated when the editor component is initialized
properly.
The getMarvin function expects the ID of the iframe that loads the editorws.html. It can return with null if there is no iframe with this ID, or the document
in this iframe is not accessible from the hosted page. The second case can happen if the request violates the same origin policy.
If the browser recognizes that a JavaScript code refers to anything from another document located on a domain different from the current page, the browser can throw security error.
If the hosted page is opened via file protocol (e.g.: C://Downloads/marvin4js/examples/example-setmol.html), the browser may reject accessing of any component from a file other than the current one (example-setmol.html vs. editorws.html).
Therefore, we recommend that you open examples through web server (URL has to starts with http or https) and place your example and Marvin4JS resources to the same web server (domain).
The custom checkboxes on the page control the display settings of the editor (CPK coloring and carbon label visibility).
<script>
document.getElementById("sketch").addEventListener("load", function() {
var marvin = getMarvin("sketch");
if(marvin != null) {
marvin.onReady(function() {
if(typeof marvin.sketch != 'undefined') {
marvin.sketch.importAsMol(s);
}
});
}
});
function updateDisplaySettings(key, value) {
var marvin = getMarvin("sketch");
if(marvin != null && (typeof marvin.sketch != 'undefined')) {
var settings = marvin.sketch.getDisplaySettings();
settings[key] = value;
marvin.sketch.setDisplaySettings(settings);
}
}
document.getElementById("chbx-carbonVis").addEventListener("change", function() {
updateDisplaySettings('carbonLabelVisible', this.checked);
});
document.getElementById("chbx-coloring").addEventListener("change", function() {
updateDisplaySettings('cpkColoring', this.checked);
});
document.getElementById("btn-setmol").addEventListener("click", function() {
var marvin = getMarvin("sketch");
if(marvin != null) {
marvin.onReady(function() {
if(typeof marvin.sketch != 'undefined') {
marvin.sketch.importAsMol(s);
}
});
}
});
var s = "\n\n\n"+
" 14 15 0 0 0 0 0 0 0 0999 V2000\n"+
" 0.5089 7.8316 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 1.2234 6.5941 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 1.2234 7.4191 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.2055 6.5941 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.9200 7.8316 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 0.5089 5.3566 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.2055 7.4191 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 0.5089 6.1816 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.9200 6.1816 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 0.5089 8.6566 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.4929 7.0066 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.0080 7.6740 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.0080 6.3391 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.2630 8.4586 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 1 7 1 0 0 0 0\n"+
" 8 2 1 0 0 0 0\n"+
" 1 3 1 0 0 0 0\n"+
" 2 3 2 0 0 0 0\n"+
" 7 4 1 0 0 0 0\n"+
" 4 8 1 0 0 0 0\n"+
" 4 9 2 0 0 0 0\n"+
" 7 5 1 0 0 0 0\n"+
" 8 6 1 0 0 0 0\n"+
" 1 10 2 0 0 0 0\n"+
" 3 12 1 0 0 0 0\n"+
" 2 13 1 0 0 0 0\n"+
" 13 11 2 0 0 0 0\n"+
" 12 11 1 0 0 0 0\n"+
" 12 14 1 0 0 0 0\n"+
"M END\n";
</script>