form-fire.html

<!--
@license
Copyright (c) 2016 Convoo All Rights Reserved.
Use of this source code is governed by a MIT license that can be found in the
LICENSE file or at https://github.com/convoo/login-fire/blob/master/LICENSE.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymerfire/firebase-document.html">

<!--
`form-fire`
A collection of elements for inserting text and image data to firebase database

@demo demo/index.html 
-->

<dom-module id="form-fire">
<template>

<firebase-document
    app-name="[[appName]]"
    id="form"
    path="[[path]]"
    data="{{data}}">
</firebase-document>

    <style>
    :host {
        display: block;
    }
    </style>
    <content></content>
</template>

<script>

Polymer({
    is: 'form-fire',
    properties: {
        path: {
            type: String,
        }, 
        data:{
            type: Object,
            observer: '_setValues',
        },
    },

    attached: function() {
        this.nodes = Polymer.dom(this).children;
        for (var i = 0; i < this.nodes.length; i++) {
            if(this.nodes[i].type == 'submit') {
                this.nodes[i].addEventListener('click', function (event) {
                this.submit();  
            }.bind(this)) 
            }
        }
    },

    submit: function(){
        this.nodes = Polymer.dom(this).children;
        var input = new Object;
        for (var i = 0; i < this.nodes.length; i++) {
            if (this.nodes[i].value && this.nodes[i].name){
                input[this.nodes[i].name] = this.nodes[i].value;
            }
        }
        this.$.form.ref.update(input);    
    },

    _setValues: function(){
        this.nodes = Polymer.dom(this).children;
        for (var i = 0; i < this.nodes.length; i++) {
            if(this.data[this.nodes[i].name]){
                this.nodes[i].value = this.data[this.nodes[i].name]
            }        
        }
    },
});
</script>
</dom-module>