A molecule table should be displayed as the loading of the page is finished. See below the commented code
Preparation of the page is in progress ...
Perform asMarvinReady() when the loading of the page is finished:
<body onLoad="asMarvinReady();">
Define a function that is invoked as the marvin JS package is ready.
function asMarvinReady() {
marvin.onReady(function(){
createTableContent();
});
}
The createTableContent method converts predefined molecules into images and renders them into a table. The generate method is responsible for image generation.
function generate(mol) {
if(typeof marvin != 'undefined') { // marvin package is available
var dataUrl = marvin.ImageExporter.molToDataUrl(mol);
return dataUrl;
}
return null;
}
function createTableContent() {
var molecules = getMolecules();
var container = document.getElementById("imageContainer");
var divContent = "";
for(i=0; i<molecules.length;i++) {
var imgData = generate(molecules[i]);
if(imgData != null) {
divContent +="<div class=\"mol-cell\"><span>Compound #"+(i+1)+"</span><img name=\"pict\" src=\""+imgData+"\" alt=\""+escape(molecules[i])+"\" onClick=\"clickOnImage(this);\"/></div>\n";
}
}
divContent += '<div class="table-bottom"></div>';
container.innerHTML = divContent;
}
The clickOnImage(pict) function is called when you select an image. It detaches the sketcher with the desired molecule.
As you close it, the current structure is retrieved from the editor and the selected image is regenerated.
var currentPict = null;
function clickOnImage(pict) {
currentPict = pict;
showPopup(true);
}
var sketchFrame = null;
var sketchObject = null;
/**
* Load the given molecule into the sketcher, initalizes sketcher if it is not loaded yet and place it into the popup window.
* @param mol the source of the molecule to import
*/
function getSketchFrame(mol) {
if((typeof sketchFrame == 'undefined') || sketchFrame == null) {
var _iframe = document.createElement('iframe');
_iframe.src = '../editor.html'
_iframe.id = 'sketchImg';
sketchFrame = _iframe;
sketchFrame.addEventListener("load", function() {
if(typeof sketchFrame.contentWindow.marvin != 'undefined') {
sketchFrame.contentWindow.marvin.onReady(function() {
sketchObject = sketchFrame.contentWindow.marvin.sketch;
sketchObject.importAsMol(unescape(mol));
});
}
});
var _popup = document.getElementById("popup");
_popup.appendChild(sketchFrame);
} else {
sketchObject.importAsMol(unescape(mol));
}
return sketchFrame;
}
/**
* Displays and hide popup window with the sketcher.
*/
function showPopup(visible) {
var v = (visible == false)? 'hidden' : 'visible';
if(currentPict != null) {
if(visible) {
var _iframe = getSketchFrame(unescape(currentPict.alt));
} else {
if(sketchObject != null) {
var s = sketchObject.exportAsMol();
if(s != null) {
currentPict.alt = escape(s);
currentPict.src = generate(s);
} else {
alert("exportAsMol returned with null");
}
}
}
}
if(sketchFrame != null) {
sketchFrame.style.visibility = v;
}
document.getElementById("close").style.visiblility = v;
document.getElementById("popup").style.visibility = v;
}