firebase-document.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="firebase.html">
<link rel="import" href="firebase-query-behavior.html">

<!--
**Note: This element is for the older Firebase 2 API**
For the latest official Firebase 3.0-compatible component from the Firebase team,
see the [polymerfire](https://github.com/firebase/polymerfire) component.

An element wrapper for the Firebase API.

A `<firebase-document>` is a reference to a remote document somewhere on
Firebase. The element fetchs a document at a provided `location`, and exposes
it as an Object that is suitable for deep two-way databinding.

Example:

    <firebase-document
      location="https://dinosaur-facts.firebaseio.com/dinosaurs"
      data="{{dinosaurs}}"></firebase-document>

In the above example, if the `dinosaurs` object is data-bound elsewhere via
Polymer's data-binding system, changes to the document will be automatically
reflected in the remote document and any other clients referencing that
document.

@demo demo/index.html
-->

<script>
  Polymer({
    is: 'firebase-document',

    behaviors: [
      Polymer.FirebaseQueryBehavior
    ],

    properties: {

      /**
       * Firebase Query object corresponding to `location`.
       */
      query: {
        type: Object,
        notify: true,
        computed: '_computeQuery(location)',
        observer: '_queryChanged'
      },

      /**
       * The `data` object mapped to `location`.
       */
      data: {
        type: Object,
        notify: true
      }
    },

    listeners: {
      'firebase-value': '_onFirebaseValue'
    },

    _localDataChanged: function(change) {
      var pathFragments = change.path.split('.');

      if (pathFragments.length === 1) {
        this._updateRemoteDocument();
        return;
      }

      this._setRemoteDocumentChild(
        pathFragments[1],
        change.base[pathFragments[1]]
      );
    },

    _onFirebaseValue: function(event) {
      this._applyRemoteDataChange(function() {
        this.set('data', event.detail.val());
      });
    },

    _computeQuery: function(location) {
      if (!location) {
        return;
      }
      var query;
      try {

        query =  new Firebase(location);

      } catch(e) {

        this._fireQueryError('Query cannot be instantiated with location ' + location + ' (' + e.toString() + ')');

      } finally {
        return query;
      }
    },

    _updateRemoteDocument: function() {
      this._log('Updating remote document');

      if (!this.query) {

        this._fireQueryError('Query does not exist');
        return;

      }

      this.query.update(this.dataAsObject);

    },

    _setRemoteDocumentChild: function(key, value) {
      if (!this.query) {

        this._fireQueryError('Query does not exist');
        return;

      }

      this.debounce('set-' + key, function() {
        this._log('Setting child "' + key + '" to', value);
        this.query.child(key).set(value);
      });

    },

    _removeRemoteDocumentChild: function(key) {
      this._log('Removing child "' + key + '"');

      if (!this.query) {

        this._fireQueryError('Query does not exist');
        return;

      }

      this.query.child(key).remove();
    }
  });
</script>