famo.us MeteorView

MeteorView.js

(function() {

    // import dependencies
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Modifier = require('famous/core/Modifier');
    var StateModifier = require('famous/modifiers/StateModifier');
    var Transform = require('famous/core/Transform');

    var Timer    = require('famous/utilities/Timer');

    var Easing = require('famous/transitions/Easing');

    function MeteorView() {
      View.apply(this, arguments);
      var self = this;

      _setup.call(this);
    }

    MeteorView.prototype = Object.create(View.prototype);
    MeteorView.prototype.constructor = MeteorView;

    MeteorView.DEFAULT_OPTIONS = {
      template: null,
      surfaceClass: 'meteor-view',
    };

    MeteorView.prototype._getContent = function() {
      var templateName = this.options.template;
      if (!this.options.template) {
        throw new Error('You need to initialise MeteorView with a meteor template');
      }
      var meteorTemplate = Template[templateName];

      if (!meteorTemplate) {
        throw new Error('No meteor template with name `'+templateName+'` exists');
      }

      var div = document.createElement('div');
      UI.insert(UI.render(meteorTemplate), div);
      return div;
    };

    function _setup() {
      var self = this;

      this._surface = new Surface({
        classes: [this.options.surfaceClass],
        content: this._getContent()
      });

      this.add(this._surface);

      // keep it simple yeh?
      this._eventInput.pipe(this._eventOutput);
    }

    MeteorView.prototype.addState = function(state) {
      this._surface.addClass('is-' + state);
    };
    MeteorView.prototype.removeState = function(state) {
      this._surface.removeClass('is-' + state);
    };

    this.MeteorView = MeteorView;
})();