input-save.html

<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<link rel="import" href="../markdown-edit/markdown-edit.html">
<link rel="import" href="../html-edit/html-edit.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<!--
`<input-save>` saves you work as you type 
-->

<dom-module id="input-save">
  <template>
    <style>
      .paper-input-container {width: 100%}
      .iron-selected {color:#555}
    </style>
    <template is="dom-if" if="{{text}}">
      <paper-input invalid="{{invalid}}" type="{{type}}" label="{{label}}" value="{{value}}" pattern="{{pattern}}" error-message="{{errorMessage}}" auto-validate="{{autoValidate}}"></paper-input>
    </template>
    <template is="dom-if" if="{{textarea}}">
      <template is="dom-if" if="{{code}}">
        <html-edit list-of-elements="{{listOfElements}}" label="{{label}}" value="{{value}}"></html-edit>
      </template>
      <template is="dom-if" if="{{markdown}}">
        <markdown-edit label="{{label}}" value="{{value}}" text-value="{{textValue}}"></markdown-edit>
      </template>
      <template is="dom-if" if="{{!markdown}}">
        <template is="dom-if" if="{{!code}}">
          <paper-textarea label="{{label}}" value="{{value}}" pattern="{{pattern}}" error-message="{{errorMessage}}" auto-validate="{{autoValidate}}"></paper-textarea>
        </template>
      </template>
    </template> 
    <template is="dom-if" if="{{optionsInput}}">
      <h4>type: {{value}}</h4>
      <iron-selector attr-for-selected="name" selected="{{value}}">
        <button name="Object">Object</button>
        <button name="Array">Array</button>
        <button name="Boolean">Boolean</button>
        <button name="Number">Number</button>
        <button name="String">String</button>
        <button name="">Not Set</button>
      </iron-selector>
    </template>
  </template>
</dom-module>
<script>
  
var js_data = {}
;(function() { 
  Polymer({
    is: 'input-save',
    properties: {
      name: String,
      text: {type:Boolean,computed:"isText(textarea,optionsInput)"},
      markdown: {type:Boolean,value:false},
      code: {type:Boolean,value:false},
      changed: {type:Boolean,notify:true,value:false},
      textarea: {type:Boolean,value:false},
      optionsInput: {type:Boolean,value:false},
      selectedOption:{type:Array},
      type: String,
      label: String,
      pattern: String,
      autoValidate: Boolean,
      errorMessage: String,
      value: {type:String,notify:true},
      textValue: {type:String,notify:true},
      invalid: {notify:true},
      data: {type:Object,notify:true,observer:"dataChanged"},
      asdf: {
        computed: 'setOptions(optionsInput,selectedOption,path)'
      },
      dataFromString: {type:Object, observer:"dataFromStringChanged"},
    },
    isText: function(textarea,optionsInput){
      return !textarea && !optionsInput;
    },
    saveThis: function(path,value) {
      js_data[path] = value
      return js_data
    },
    dataChanged: function(data) { 
      console.log("testing all data ",data)
      if (data) {
        if (data !== undefined || data !== null){ 
          if (data.hasOwnProperty(this.path) && this.value !== data[this.path]) {
            if (this.optionsInput) {
              this.selectedOption = data[this.path].split(',')
            } else {
              this.value = data[this.path]
            }
          }
        }
        this.loaded = true;
      } 
    },
    saveOptions: function(e) {
      values = []
      for (x=0;x<e.currentTarget.length;x++) {
        if (e.currentTarget[x].selected) {
          values.push( e.currentTarget[x].value)
        }
      }
      if (js_data[e.currentTarget.name] !== values.join(',')) {
        this.saveThis(e.currentTarget.name,values.join(','))
      }
    },
    setOptions: function(optionsInput,selectedOption) {
      if (optionsInput) {
        var e = this.$$("selecter")
        if (e) {
          for (x=0;x<e.length;x++) {
            if (selectedOption !== "") {
              for (y=0;y<selectedOption.length;y++) {
                if (e[x].text === selectedOption[y]) {
                  e[x].selected = true
                }
              }
            }
          }
        }
      }
    }
  })
  function clone(obj) {
    return JSON.parse(JSON.stringify(obj))
  }
})()
</script>