-
Notifications
You must be signed in to change notification settings - Fork 2
/
blockly-factory-editor.html
64 lines (54 loc) · 1.72 KB
/
blockly-factory-editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<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>