Marvin JS Example - Couple of Editors

Identify each IFRAME to be able to distinguish the sketcher instances.

		<iframe src="../editor.html" id="box1_sketch" class="sketcher-frame"></iframe>
	

		<iframe src="../editor.html" id="box2_sketch" class="sketcher-frame"></iframe>
	

Create SketchControlClass for each sketcher object. Bind controller to the sketcher when it is ready. The controller also manages checkboxes for display settings.

		
		var sk1Controller,
			sk2Controller;

		$(document).ready(function handleDocumentReady (e) {

			MarvinJSUtil.getEditor("#box1_sketch").then(function (sketcherInstance) {
				sk1Controller = new SketcherControllerClass(
					sketcherInstance,
					$("#box1_chbx-carbonVis"),
					$("#box1_chbx-coloring"),
					$("#box1_btn-setmol")
				);
			}, function () {
				alert("Failed to retrieve sketcher in box 1");
			});;

			MarvinJSUtil.getEditor("#box2_sketch").then(function (sketcherInstance) {
				sk2Controller = new SketcherControllerClass(
					sketcherInstance,
					$("#box2_chbx-carbonVis"),
					$("#box2_chbx-coloring"),
					$("#box2_btn-setmol")
				);
			}, function () {
				alert("Failed to retrieve sketcher in box 2");
			});

		});

		var SketcherControllerClass = (function () {

			function SketcherControllerClass (sketcherInstance, carbonCheckbox, cpkCheckbox, importButton) {
				this.sketcherInstance 	= sketcherInstance;
				this.carbonCheckbox 	= carbonCheckbox;
				this.cpkCheckbox 		= cpkCheckbox;
				this.importButton 		= importButton;

				this.init();
			}

			SketcherControllerClass.prototype.init = function init () {
				this.carbonCheckbox.on("change", $.proxy(this.handleCarbonCheckBoxChange, this));
				this.cpkCheckbox.on("change", $.proxy(this.handleCpkCheckBoxChange, this));
				this.importButton.on("click", $.proxy(this.handleImportButtonClick, this));
			};

			SketcherControllerClass.prototype.handleCarbonCheckBoxChange = function handleCarbonCheckBoxChange (e) {
				this.updateDisplaySettings("carbonLabelVisible", this.carbonCheckbox.is(':checked'));
			};

			SketcherControllerClass.prototype.handleCpkCheckBoxChange = function handleCpkCheckBoxChange (e) {
				this.updateDisplaySettings("cpkColoring", this.cpkCheckbox.is(':checked'));
			};

			SketcherControllerClass.prototype.handleImportButtonClick = function handleImportButtonClick (e) {
				this.sketcherInstance.importStructure("mol", caffeineStr);
			};

			SketcherControllerClass.prototype.updateDisplaySettings = function updateDisplaySettings (key, value) {
				var settings = this.sketcherInstance.getDisplaySettings();
				settings[key] = value;
				this.sketcherInstance.setDisplaySettings(settings);
			};

			return SketcherControllerClass;

		}());