Marvin JS Example - Overwrite custom templates toolbar

In this example, you can change the content of the custom template toolbar without reloading of the editor. To do this, type the URL of a template source file into the given input field and submit the Update Templates button.

When you take a look at the source code, you can see that a listener function is bind to the submit button. (URLs are relative to the root directory of Marvin JS package.) When the click event is invoked, the updateToolbars(value) function is performed unless the input field is empty. This function creates a JavaScript object that contains a templateurl property . To update toolbar pass this object to the setDisplaySettings(settings) function of the sketcher.

		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			// after editor in the sketch iframe is ready store its reference 
			// and activate controls
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				initControls();
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

		function initControls () {
			// overwrite custom templates toolbar
			$("#updateCustomTemplates").on("click", function(e) {
				var s = $("#templateurl").val();
				if(typeof s != "undefined" && s.length > 0) {
					updateCustomToolbar(s);	
				}
			});
		}

		function updateCustomToolbar(url) {
			var settings = {
					"templateurl": url
			};
			marvinSketcherInstance.setDisplaySettings(settings);
		}