Marvin JS Example - Toolbars

In this example, the sketcher is initalized with the standard toolbars.

This layout setting is defined in the data-toolbars attribute of the iframe, which loads the editor.

<div class="resizable">
<iframe src="../editorws.html" id="sketch" class="sketcher-frame" data-toolbars="standard"></iframe>
</div>

Further presets are enumerated above the sketcher. To switch another layout, select its radio button. It triggers the reload of the iframe with the new setting. If you select the Markush layout, the editor will be reloaded with the Markush layout.

When you take a look at the source code, you can see that a listener function is bind to the change events of radio buttons. When a change event is invoked, the value of data-toolbars attribute of the iframe tag is overwritten with the selected value and the reload of the iframe is triggered.

		$(document).ready(function handleDocumentReady (e) {
			initControls();
		});

		function initControls () {
			// bind event listener to all radio buttons from layout-group
			$("input[name='layout-group']").change(function(e) {
				var s = $(this).val();
				reload(s);
			});
		}
		
		function reload(layout) {
			$("#sketch").attr("data-toolbars", layout);
			$("#sketch")[0].contentWindow.location.reload(true);
		}