designer

designer.html

<link rel="import" href="../ace-element/ace-element.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #layout {
        height: 100%;
      }
      #input {
        height: 100%;
        float: left;
        position: relative !important;
      }
      #operation {
        height: 100%;
        float: left;
        position: relative !important;
      }
      #output {
        height: 100%;
        float: left;
        position: relative !important;
      }
    </style>
    <div id="layout" horizontal layout>
      <ace-element value="function test() {
    var x = true;
  }" wrap editorvalue="function test() {
    var x = true;
  }" id="input">function test() {
    var x = true;
  }</ace-element>
      <core-splitter direction="left" on-track="{{ track }}"></core-splitter>
      <ace-element value="function test() {
    var x = true;
  }" wrap editorvalue="function test() {
    var x = true;
  }" id="operation" flex>function test() {
    var x = true;
  }</ace-element>
      <core-splitter direction="right"></core-splitter>
      <ace-element value="function test() {
    var x = true;
  }" wrap editorvalue="function test() {
    var x = true;
  }" id="output">function test() {
    var x = true;
  }</ace-element>
    </div>
  </template>

  <script>

    Polymer({
      track: function () {
      	console.log("ahoj!")
      }
    });

  </script>

</polymer-element>