variables-input.html

<link rel="import" href="../vellum-chip/vellum-chip.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">

<!--
`<variables-input>` 
-->

<dom-module id="variables-input">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <template is="dom-repeat" items="{{asArray}}" restamp id="list">
      <vellum-chip elevation="1" title="Load [[item]]" value="[[item]]" on-tap="edit" name="[[item]]">[[item]]</vellum-chip>
    </template><br />
    <paper-dialog id="edit">
      <h2>Update {{_editing.name}}</h2>
      <paper-dialog-scrollable>
        <input-save value="{{_editing.rename}}" label="name" auto-validate pattern="[a-zA-Z_][0-9a-zA-Z_]*" error-message="is not a good name"></input-save>
        <input-save value="{{_editing.type}}" options-input ></input-save>
        <input-save textarea value="{{_editing.value}}" label$="default for {{_editing.name}}" pattern$="{{getRepType(_editing.type)}}" auto-validate error-message="needs to be a {{_editing.type}} so {{repType}}"></input-save>
        <input-save value="{{_editing.computed}}" label$="{{_editing.name}} is computed by" auto-validate pattern="{{reFunctionsAndVariables}}" error-message="needs to a function ({{functions}}) with input(s)"></input-save>
        <input-save value="{{_editing.observer}}" label="observer by" auto-validate pattern="{{reFunctions}}" error-message="needs to a function ( {{functions}} ) add to \'functions'\' if needed)"></input-save>
        <paper-toggle-button checked="{{_editing.notify}}">notify</paper-toggle-button>
        <paper-toggle-button checked="{{_editing.readOnly}}">readOnly</paper-toggle-button>
        <paper-toggle-button checked="{{_editing.reflectToAttribute}}">reflectToAttribute</paper-toggle-button>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-dismiss style="color:red" on-tap="del">Delete</paper-button>
        <paper-button dialog-confirm autofocus on-tap="save">Accept</paper-button>
      </div>
    </paper-dialog>
    <paper-input value="{{addMe}}" label="name the new variable" pattern="[a-zA-Z_][0-9a-zA-Z_]*" auto-validate><paper-button suffix on-tap="add">Add</paper-button></paper-input>
  </template>
</dom-module> 
<script>
    Polymer({
      is: 'variables-input',
      properties:{
        functions:{type:String},
        reFunctions: {computed:"getReFunctions(functions)"},
        reFunctionsAndVariables: {computed:"getReFunctionsAndVariables(reFunctions)"},
        value:{notify:true,value:{}},
        asArray:{computed:"getAsArray(value.*)"},
        _editing:{value:{}},
      },
      getKey: function(i) {
        return Object.keys(this.value)[i]
      },
      add: function(){
        if (this.addMe) {
          this.addMe = this.addMe.trim()
          
          if (Polymer.Base.hasOwnProperty(this.addMe)) {
            alert(this.addMe + " is taken (by Polymer.Base)")
          } else if (!/^[a-zA-Z_][0-9a-zA-Z_]*/.test(this.addMe)) {
            alert(this.addMe + " is not a good name")
          } else if (this.functions && this.functions.hasOwnProperty(this.addMe)) {
            alert(this.addMe + " is taken (by a method/function)")
          } else if (this.value && this.value.hasOwnProperty(this.addMe)) {
            alert(this.addMe + " is taken")
          } else {
            if (!this.value || !((typeof this.value === "object") && (this.value !== null))) {
              this.value = {}
            }
            this.set("value."+ this.addMe,{})
            this.set("_editing", {})
            this.set("_editing.name", this.addMe)
            this.set("_editing.rename", this.addMe)
            this.$.edit.open()
          }
        }
      },
      del: function() {
        var name = this._editing.name +""

        delete(this.value[name])

        this.set("value", JSON.parse(JSON.stringify(this.value)))
        this.$.list.render()
      },
      getAsArray: function(Obj) {
        if (Obj.base) {
          return Object.keys(Obj.base)
        }
      },
      getArray:  function(s) {
        if (s !== "") return toCamelCase(s).split(',');
      },
      edit: function(e) {
        this.set("_editing", this.value[e.currentTarget.name])
        this.set("_editing.name", e.currentTarget.name)
        this.set("_editing.rename", e.currentTarget.name)
        this.$.edit.open()
      },
      save: function() {
        var name = this._editing.name +""
        var rename = this._editing.rename +""
        delete(this._editing.name)
        delete(this._editing.rename)
        if (rename != name) {
          delete(this.value[name])
        }

        for (prop in this._editing) {
          if (!this._editing[prop]) {
            delete(this._editing[prop])
          }
        }
        
        if (rename) {
          this.value[rename] = this._editing
        }

        this.set("value", JSON.parse(JSON.stringify(this.value)))
        this.$.list.render()
      },
      getRepType: function(t) {
        switch(t) {
           // TODO Symbol Functions
          case 'Null': return 'null';break;
          case 'Array': return '^\\[.*\\]$';break;
          case 'Boolean': return '(true|false)';break;
          case 'Number': return '^[0-9\.]*$';break;
          case 'Object': return '^\{.*\}$';break;
          case 'String': return '^\".*\"$';break;
          default: return '';break;
        }
      },
      getReFunctions: function(functions){return '(' + Object.keys(functions).join('|') + ')';},
      getReFunctionsAndVariables: function(reFunctions) {return reFunctions+'\\([a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+\\)'}
    });
</script>