playground/index.html at master · SelectTransform/playground · GitHub

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<script src='https://rawgit.com/intercellular/cell/inherit/cell.js'></script>
<script src='https://rawgit.com/SelectTransform/st.js/develop/st.js'></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel='stylesheet'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css" rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/theme/railscasts.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script src='https://tojson.co/node_modules/jsonlint/lib/jsonlint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/lint/lint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/lint/javascript-lint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/lint/json-lint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/edit/closebrackets.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/edit/matchbrackets.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/javascript/javascript.js"></script>
<style>
.container-fluid, .row, .col {
  height: 100%;
}
html, body {
  height: 100%;
  overflow: hidden;
}
</style>
<script>
var content = {
  source: "var data = {\n  items: [1,2,3,100,10,19]\n};\nvar template = {\n  labels: {\n    \"{{#each items}}\": {\n      type: \"label\",\n      text: \"{{this}}\"\n    }\n  }\n}",
  code: "ST.select(data)\n\t.transformWith(template)\n\t.root()"
};

var editor = {
  $cell: {
    codemirror: function(options) {
      return {
        $type: "textarea",
        id: options.id,
        _ed: null,
        $init: function(){
          for(var key in options) { if (key !== '$inherit') this[key] = options[key]; }
          this._ed = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            lineWrapping: true,
            lint: true,
            styleActiveLine: true,
            autoCloseBrackets: true,
            matchBrackets: true,
            viewportMargin: true,
            theme: "railscasts",
            gutters: ["CodeMirror-lint-markers"]
          })
          if (options.onchange) this._ed.on('change', options.onchange.bind(this))
          var wrapper = this._ed.getWrapperElement()
          wrapper.setAttribute("class", wrapper.getAttribute("class") + " " + options.class)
          if (options.style) wrapper.style = options.style
          if (options.$init) options.$init.call(this);
        },
        _update: function(o){
          if (this._ed) {
            this._ed.getDoc().setValue(o)
          } else {
            setTimeout(function() {
              this._ed.getDoc().setValue(o)
            }.bind(this), 0);
          }
        },
        _get: function(){
          if (this._ed) return this._ed.getDoc().getValue()
          else return null;
        }
      }
    }
  }
};

var app = {
  $cell: true,
  class: 'container-fluid',
  _u: function() {
    var source = document.querySelector("#source")._get();
    var evaluation = document.querySelector("#code")._get();
    if (source && evaluation) {
      var result = eval(source + "\n" + evaluation);
      document.querySelector("#result")._update(JSON.stringify(result, null, 2));
    }
  },
  $components: [{
    class: 'row',
    $components: [
      { id: 'source', $inherit: 'codemirror', class: 'col', value: content.source, $init: function() { this._u(); }, onchange: function(e) { this._u(); } },
      { id: 'code', $inherit: 'codemirror', class: 'col', value: content.code, $init: function() { this._u(); }, onchange: function(e) { this._u(); } },
      { id: 'result', $inherit: 'codemirror', class: 'col' }
    ]
  }]
};
</script>
</html>