blockly-factory-editor.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../acelymer/ace-editor-stack.html">

<dom-module id="blockly-factory-editor">
	<template>
		<style>
			:host {
				position: relative;
			}

			#stack {
				overflow: scroll;
				background-color: #272822;
			}

			#editor ::content #editor {
				padding-bottom: 12px;
			}

			/* give some gap between the editor and the top nav so that shadow of the nav won't cover the code */
			ace-editor:first-child ::content .ace_gutter .ace_gutter-cell:first-child,
			ace-editor:first-child ::content .ace_scroller .ace_line_group:first-child {
				padding-top: 8px;
			}
			ace-editor:first-child ::content .ace_marker-layer {
				margin-top: 8px;
			}
		</style>

		<!-- <ace-editor id="editor" class="fl-full" readonly disable-syntax-check wrap hide-print-margin></ace-editor> -->
		<ace-editor-stack id="stack" class="fl-full" readonly disable-syntax-check wrap hide-print-margin>
			<ace-editor id="defCodeEditor"></ace-editor>
			<ace-editor id="implPrefixEditor">// Here is the actual implementation\nfunction foo(opts) {</ace-editor>
			<ace-editor id="implCodeEditor" ignore-stack-prop wrap hide-print-margin>	</ace-editor>
			<ace-editor>}</ace-editor>
		</ace-editor-stack>
	</template>

	<script>
		'use strict';

		Polymer({
			is: 'blockly-factory-editor',

			properties: {
				defCode: {
					type: Object,
					notify: true,
					observer: 'onDefCodeChange_'
				},
				blockType: String
			},

			get code() {
				return this.$.stack.code;
			},

			onDefCodeChange_(defCode) {
				this.$.defCodeEditor.code = defCode.code;
				this.$.implPrefixEditor.code = `// Here is the actual implementation\nfunction ${defCode.blockType}(opts) {`;
			}
		});
	</script>
</dom-module>