feathers-element.html

<link rel="import" href="../polymer/polymer.html">
<script type="text/javascript" src="../socket.io-client/socket.io.js"></script>
<!--
`feathers-element` is a polymer client for [feathers.js](http://feathersjs.com/).
To test the demo, run `node index.js` to start the API server.
@demo demo/index.html
-->

<script>
  Polymer({
    is: 'feathers-element',

    properties: {

      /**
       * The data interface for binding.
       */
      data: {
        type: Array,
        value: function() {
          return []
        },
        readOnly: true,
        notify: true
      },

      /**
       * Server address to connect
       */
      url: {
        type: String,
        value: '/',
        reflectToAttribute: true,
      },

      /**
       * Service API path. e.g. service="api/user"
       */
      service: {
        type: String,
        notify: true,
        reflectToAttribute: true
      },

      /**
       * unique key in the retrieved object
       */
      key: {
        type: String,
        reflectToAttribute: true,
        value: "id"
      },

      /**
       * query object
       **/
      query: {
        type: Object,
        notify: true,
        value: {},
        reflectToAttribute: true
      },


      // /**
      // * number of items in data. 
      // * 0: unlimited;
      // * positive number: limit to first result;
      // * negative number: limit to last result;
      // **/
      // limit: {
      //   type: Number,
      //   value: 0,
      //   reflectToAttribute: true,
      // }
    },

    /**
     * Events
     */

    created: function() {
      this._socket = io();
    },
    
    attached: function() {
      // observer is not guaranteed run before ready 
      this.startQuery();
    },

    /**
     * Observers
     **/
    observers: [
      '_urlChangeObserver(url, service)',
      '_queryChangeObserver(query)',
    ],

    _urlChangeObserver: function(url, service) {
      this._socket.connect('url');
      this._socket.on(this.service + ' created', this._createdHandler.bind(this));
      this._socket.on(this.service + ' updated', this._updatedHandler.bind(this));
      this._socket.on(this.service + ' patched', this._updatedHandler.bind(this));
      this._socket.on(this.service + ' removed', this._removedHandler.bind(this));
    },

    _queryChangeObserver: function(query) {
      if (!this.isAttached) {
        return;
      }     
    
      if (typeof query == "string") {
        if (query == "") {
          query = {};
        }
        else {
          try {
            query = JSON.parse(query);
          } catch (e) {
            throw new Error ("Can not parse query string " + query);
          }
        }
      }
      this._findCRUD(query, this._queryCallback.bind(this));
    },

    /**
     * Methods
     */

    /**
     * add new element. 
     */
    add: function(data) {
      this._createCRUD(data, this._createCallback);
    },

    /**
     * Remove the item by providing the reference
     **/
    remove: function(item) {
      var key = item[this.key];
      this._removeCRUD(key, {} /*, remove callback*/ );
    },

    /**
     * Execute query. if query object is not provided, query property will be used
     */
    startQuery: function() {
      var query;
      if (arguments[0])
        query = arguments[0];
      else
        query = this.query;
      
      this._queryChangeObserver(query);
    },

    /**
     * Update a item
     **/
      update: function(item, data) {
      var key = item[this.key];
      this._patchCRUD(key, data /*, update callback */ );
    },

    /**
     * CRUD
     */
    _findCRUD: function(param, cb) {
      this._socket.emit(this.service + "::find", param, cb);
    },

    _getCRUD: function(id, param, cb) {
      this._socket.emit(this.service + "::get", id, param, cb);
    },

    _createCRUD: function(param, cb) {
      this._socket.emit(this.service + "::create", param, cb);
    },

    _removeCRUD: function(id, param, cb) {
      this._socket.emit(this.service + "::remove", id, param, cb);
    },

    _updateCRUD: function(id, param, cb) {
      this._socket.emit(this.service + "::update", id, param, cb);
    },

    _patchCRUD: function(id, param, cb) {
      this._socket.emit(this.service + "::patch", id, param, cb);
    },


    /**
     * push handlers
     */

    /**
     * Default handler when new item is created
     **/
    _createdHandler: function(doc) {
      if (doc) {
        this.push('data', doc);
      }
    },

    /**
     * Default handler for updated and patched
     **/
    _updatedHandler: function(doc) {
      //updatedFilter
      for (var i = 0; i < this.data.length; i++) {
        if (this.data[i][this.key] == doc[this.key]) {
          this.set('data.' + i, doc);
          return; // only replace the first found
        }
      }

      // nothing found, need add to local?
    },

    _removedHandler: function(doc) {
      for (var i = 0; i < this.data.length; i++) {
        if (this.data[i][this.key] == doc[this.key]) {
          this.splice('data', i, 1);
        }
      }
    },

    /**
     * default handlers
     */

    /**
     * Callback function of query
     */
    _queryCallback: function(err, doc) {
      if (err) {
        this.fire('error', err);
        return;
      }
      // queryFilterCallback
      this._setData(doc);
    },

    _createCallback: function(err, doc) {
      if (err) {
        this.fire('error', err);
        return;
      }

    }
    /**
     * Triggered when socket.io communication raises an error.
     * 
     * @event error
     * @param {object} error object
     */

  })
</script>