x-property-editor.html

<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../x-editors/x-editors.html">

<polymer-element name="x-property-editor" attributes="editorTag">
  <template>
    <style>
      :host {
        display: block;
        white-space: nowrap;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer('x-property-editor', {
      meta: null,
      metaChanged: function(type) {
        // create polymorphic editor
        this.editor = document.createElement(this.meta.editorTag);
        this.appendChild(this.editor);
        // bind propertyValue to property
        var p = this.meta.property;
        this.bindProperty('propertyValue', new PathObserver(p.obj, p.name));
        // bind this.editor.value to propertyValue
        // (imperative form of <editor value="{{editorValue}}">)
        this.editor.bindProperty('value', new PathObserver(this, 'propertyValue'));
        // update editor meta from property
        this.updateEditorMeta();
      },
      updateEditorMeta: function() {
        if (this.editor) {
          this.editor.meta = this.meta.property.meta || {};
          this.editor.meta.obj = this.meta.property.obj;
        }
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-binding-editor" extends="x-abstract-editor">
  <template>
    <style>
      :host {
        display: block;
        white-space: nowrap;
      }
    </style>
    <x-id-select-editor id="idSelect" style="width: 112px;" options="{{elements}}" value="{{target}}" on-editor-value-changed="{{editorValueChanged}}" ></x-id-select-editor>
    <!-- <x-select-editor style="width: 145px;" options="{{properties}}"></x-select-editor> -->
    <x-string-editor style="width: 161px;" value="{{workingValue}}" on-editor-value-changed="{{editorValueChanged}}" ></x-string-editor>
  </template>
  <script>
    Polymer('x-binding-editor', {
      target: null,
      meta: null,
      metaChanged: function() {
        this.$.idSelect.meta = {obj: this.meta.property.obj };
        this.value = this.meta.binding || '';
      },
      editorValueChanged: function(event) {
        event.stopPropagation();
        this.commit();
      },
      format: function(value) {
        var path = [];
        if (this.target == this.meta.property.obj.id) {
          this.target = '';
        }
        if (this.target) {
          path.push('$', this.target);
        }
        if (value) {
          path.push(value);
        }
        path = path.join('.');
        return path;
      },
      valueChanged: function() {
        if (this.value[0] == '$') {
          var values = this.value.splice ? this.value.slice(0) : 
              this.value.split('.');
          values.shift(); // remove $
          this.target = values.shift() // get object id
          this.workingValue = values.join('.');
        } else {
          this.workingValue = this.value;
        }
      },
      commit: function() {
        this.super();
        //console.log('binding-editor.bind-property: %s - %s', this.meta.property.name, this.value);
        this.fire('bind-property', {
          obj: this.meta.property.obj,
          name: this.meta.property.name,
          path: this.value
        });
      },
      /* commit an empty binding value when detached */
      unbind: function() {
        this.fire('bind-property', {
          obj: this.meta.property.obj,
          name: this.meta.property.name,
          path: ''
        });
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-id-select-editor" extends="x-select-editor">
  <template>
    <shadow></shadow>
  </template>
  <script>
    Polymer('x-id-select-editor', {
      root: null,
      idPrefix: '',
      metaChanged: function() {
        this.super();
        this.root = this.findRoot(this.meta.obj);
      },
      rootChanged: function() {
        this.buildOptions();
      },
      findRoot: function(node) {
        while (node && node.id !== 'canvas') {
          node = node.parentNode;
        }
        return node;
      },
      buildOptions: function() {
        var o = [''];
        if (this.root) {
          var pre = this.idPrefix;
          Array.prototype.forEach.call(this.root.querySelectorAll('[id]'), 
            function(n) {
              o.push(pre + n.id);
            });
        }
        this.options = o;
      },
      get selectedNode() {
        return this.root && this.value 
            && this.root.querySelector('#' + this.value);
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-target-select-editor" extends="x-id-select-editor">
  <script>
    Polymer('x-target-select-editor', {
      idPrefix: '#'
    });
  </script>
</polymer-element>

<polymer-element name="x-action-editor" extends="x-abstract-editor">
  <template>
    <button touch-action="none" on-pointerup="{{buttonClick}}">{{meta.label}}</button>
  </template>
  <script>
    Polymer('x-action-editor', {
      buttonClick: function() {
        var action = this.meta.action;
        if (this.meta.obj[action]) {
          this.meta.obj[action]();
        }
      }
    });
  </script>
</polymer-element>