attribute-editor.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../iron-signals/iron-signals.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<dom-module id="attribute-editor">
    <template>
        <style>
            :host {
                display: inline:block;
                padding: 5px;
                background: white;
                position: relative;
                top: -10px;
                left: -30px;
                border-radius: 5px;
            }
            iron-icon {
                cursor: pointer;
            }
        </style>
        <iron-icon icon="icons:create" on-click="open"></iron-icon>
        <paper-dialog>
            <h2>Edit Attributes</h2>
            <paper-dialog-scrollable>
                <template is="dom-repeat" items="{{localusercontent}}">
                    <paper-input label$="{{item.key}}" value$="[[item.value]]" on-change="_handleValueChange"></paper-input>
                </template>
            </paper-dialog-scrollable>
            <div class="buttons">
                <paper-button dialog-dismiss>Cancel</paper-button>
                <paper-button  on-click="_handleSave">Accept</paper-button>
            </div>
        </paper-dialog>
        <iron-signals on-iron-signal-attribute-save="_initiateAttributeSave"></iron-signals>
    </template>
    <script>
        Polymer({
            is: 'attribute-editor',

            properties: {
                usercontent: {
                    type: Object,
                    notify: true,
                },

                localusercontent: {
                    type: Object,
                    notify: true
                },

                path: {
                    type: String,
                    value: '',
                    notify: true,
                    reflectToAttribute: true
                }

            },

            open: function() {

                this.set('localusercontent',[]);
                this._convertObjToArray(this.usercontent)
                this.$$('paper-dialog').open();
            },

            _handleSave: function() {
                for(var i=0; i< this.localusercontent.length; i++) {
                    let data = this.localusercontent[i];
                    this.set('usercontent.' + data.key, data.value);
                }
                this.fire('value-changed', {
                    usercontent: this.usercontent,
                    contentId: this.contentId
                });

                // close the dialog box
                this.$$('paper-dialog').close();
            },

            _convertObjToArray: function(obj) {
                for(var key in obj) {
                    this.push('localusercontent', {
                        key: key,
                        value: obj[key]
                    });
                }
            },

            _handleValueChange: function(e, detail) {
                this.localusercontent[e.model.index]['value'] = e.target.value;
            },

            _initiateAttributeSave: function() {
                this.fire('iron-signal', {
                    name: 'page-operation',
                    data: {
                        operation: 'save',
                        path: this.path,
                        contentnode: this.contentId,
                        value: this.usercontent
                    }
                });
            }
        })
    </script>
</dom-module>