Tutorial > Initializing Components after Closing the DOM
In the basic tutorial covering the initialization of Canvases, we discussed how to create ChemDoodle Web Components using the constructor functions. The examples created each component in the DOM as it was being written. While this process is very simple, you may be interested in developing a system that requires a bit more complexity. For instance, you need to be able to create ChemDoodle Web Components on actions by the user, or you are working with a framework that separates writing the DOM from any JavaScript code. Fortunately, the ChemDoodle Web Components library was written with this in mind, and you can initialize components after the DOM has been closed. Let us look at a few examples.
Initializing a Component on an Existing <canvas>
We can create a ChemDoodle Web Component on an existing <canvas> element by calling the exact same function as we did before, but now we will use the id of the element in the DOM in the ChemDoodle Web Component constructor.
When writing the DOM, we first create the <canvas> element. Notice that we define its id to initializeMeLater and set the width and height to 150. We also give it a border so we can see where it is, otherwise it would just be blank space.
<canvas id="initializeMeLater" width="150" height="150" style="border:1px solid black;">This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.</canvas>We can see the empty <canvas> element. Now we can call the JavaScript at any time to initialize the ChemDoodle Web Component.
<script>
// just check to make sure it wasn't already initialized
if(!window.myCanvas){
// we don't provide a width or height, as those values will be absorbed from the existing element
// place the object in the global scope so we can access it outside of this function by excluding the let keyword
myCanvas = new ChemDoodle.ViewerCanvas('initializeMeLater');
myCanvas.emptyMessage = 'No Data Loaded!';
let caffeineMolFile = 'Molecule Name\n CHEMDOOD08070920033D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 14 15 0 0 0 0 0 0 0 0 1 V2000\n -0.3318 2.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 1.0000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 0.5000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 1.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 -1.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -1.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0640 -0.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7910 1.7553 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -2.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 3 2 1 0 0 0 0\n 4 2 1 0 0 0 0\n 3 5 1 0 0 0 0\n 3 6 1 0 0 0 0\n 7 4 1 0 0 0 0\n 4 8 2 0 0 0 0\n 9 5 2 0 0 0 0\n 10 5 1 0 0 0 0\n 10 8 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 13 8 1 0 0 0 0\n 13 11 2 0 0 0 0\n 10 14 1 0 0 0 0\nM END\n> <DATE>\n07-08-2009\n';
let caffeine = ChemDoodle.readMOL(caffeineMolFile);
myCanvas.loadMolecule(caffeine);
}
</script>Give it a try:
Notice that we didn't give a width or height parameter to the constructor as we had already preset the size in the <canvas> element. The ChemDoodle Web Components know to absorb these values on initialization. We can also define or override those dimensions as shown in the next example.
Initializing a Component on an Existing <canvas> and Change Dimensions
We are going to do the same thing as the previous example, but this time, we will define a size in the ChemDoodle Web Components constructor to be used on initialization. The initial size of the <canvas> will be set to 0x0px so when initialized, it will appear to come out of no where. To this effect, we will also remove the border (which will later be added when the ChemDoodle Web Components API assigns its CSS class).
<canvas id="initializeMeLaterWithDimensions" width="0" height="0">This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.</canvas>We can see the empty <canvas> element. Now we can call the JavaScript at any time to initialize the ChemDoodle Web Component.
<script>
// just check to make sure it wasn't already initialized
if(!window.myCanvas2){
// we don't provide a width or height, as those values will be absorbed from the existing element
// place the object in the global scope so we can access it outside of this function by excluding the let keyword
myCanvas2 = new ChemDoodle.ViewerCanvas('initializeMeLaterWithDimensions', 150, 150);
myCanvas2.emptyMessage = 'No Data Loaded!';
let caffeineMolFile = 'Molecule Name\n CHEMDOOD08070920033D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 14 15 0 0 0 0 0 0 0 0 1 V2000\n -0.3318 2.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 1.0000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 0.5000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 1.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 -1.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -1.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0640 -0.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7910 1.7553 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -2.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 3 2 1 0 0 0 0\n 4 2 1 0 0 0 0\n 3 5 1 0 0 0 0\n 3 6 1 0 0 0 0\n 7 4 1 0 0 0 0\n 4 8 2 0 0 0 0\n 9 5 2 0 0 0 0\n 10 5 1 0 0 0 0\n 10 8 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 13 8 1 0 0 0 0\n 13 11 2 0 0 0 0\n 10 14 1 0 0 0 0\nM END\n> <DATE>\n07-08-2009\n';
let caffeine = ChemDoodle.readMOL(caffeineMolFile);
myCanvas2.loadMolecule(caffeine);
}
</script>Give it a try:
This works for UIs like the SketcherCanvas as well:
Creating a Component and <canvas> after the DOM has Closed
In advanced cases, you may not know where to first place a <canvas> object, as the location of the component may depend on a user action. We can use jQuery (bundled in ChemDoodle Web Components) to first place a <canvas> element in the DOM, then initialize the ChemDoodle Web Component on that <canvas>.
Click on the following button, and then click anywhere on this page to place and initialize a ChemDoodle Web Component after that element.
And this is the code to make that work:
<script>
let addCount = 0;
function clickToCreate(){
document.addEventListener('mousedown', function(event) {
// Only execute once per click
document.removeEventListener('mousedown', arguments.callee);
// id is 'created[x]', where [x] is a counter that is incremented on use, avoiding id clashes
let id = 'created' + (addCount++).toString();
// create the <canvas> element to be inserted
let canvasElement = document.createElement("canvas");
canvasElement.id = id;
canvasElement.width = '0';
canvasElement.height = '0';
canvasElement.textContent = 'This is a message that shows if the browser doesn\'t support HTML5 canvas, which all modern browsers should support now.';
// on the element that was clicked (event.target), append a canvas element with the above id
event.target.insertAdjacentElement('afterend', canvasElement);
// initialize the component
canvas = new ChemDoodle.ViewerCanvas(id, 50, 50);
canvas.emptyMessage = 'No Data Loaded!';
let caffeineMolFile = 'Molecule Name\n CHEMDOOD08070920033D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 14 15 0 0 0 0 0 0 0 0 1 V2000\n -0.3318 2.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 1.0000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 0.5000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 1.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 -1.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -1.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0640 -0.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7910 1.7553 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -2.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 3 2 1 0 0 0 0\n 4 2 1 0 0 0 0\n 3 5 1 0 0 0 0\n 3 6 1 0 0 0 0\n 7 4 1 0 0 0 0\n 4 8 2 0 0 0 0\n 9 5 2 0 0 0 0\n 10 5 1 0 0 0 0\n 10 8 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 13 8 1 0 0 0 0\n 13 11 2 0 0 0 0\n 10 14 1 0 0 0 0\nM END\n> <DATE>\n07-08-2009\n';
let caffeine = ChemDoodle.readMOL(caffeineMolFile);
canvas.loadMolecule(caffeine);
});
};
</script>
