Appview code

gistfile1.txt

/*** AppView ***/

define(function(require, exports, module) {
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Easing = require('famous/transitions/Easing');
  var Transitionable = require('famous/transitions/Transitionable');
  var Modifier = require('famous/core/Modifier');

  var BeurzenView = require('views/BeurzenView');
  var DetailView = require('views/DetailView');

  function AppView() {
    View.apply(this, arguments);

    this.menuToggle = false;
    this.openPosition = 1500;
       
    this.detailViewPos = new Transitionable(this.openPosition);

    _createDetailView.call(this);
    _createBeurzenList.call(this);

    _setListeners.call(this);
  }

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

  AppView.DEFAULT_OPTIONS = {
    data: undefined,
    transition: {
      duration: 300,
      curve: Easing.outBack
    }
  };

  AppView.prototype.toggle = function() {
    if (this.menuToggle) {
      this.slideLeft();
    } else {
      this.slideRight();
      // this.menuView.animateStrips();
    }
    this.menuToggle = !this.menuToggle;
  };

  AppView.prototype.slideLeft = function() {
    this.detailViewPos.set(0, this.options.transition, function() {
      this.menuToggle = false;
    }.bind(this));
  };

  AppView.prototype.slideRight = function() {
    var size = this.getSize();
    
    this.detailViewPos.set(this.openPosition, this.options.transition, function() {
      this.menuToggle = true;
    }.bind(this));
  };

  function _createBeurzenList() {
    this.beurzenList = new BeurzenView({
      data: this.options.data
    });

    var beurzenModifier = new StateModifier({
      transform: Transform.behind
    });

    this.add(beurzenModifier).add(this.beurzenList);
  }

  function _createDetailView() {
    this.detailView = new DetailView();
    
    
    this.detailModifier = new Modifier({
      transform: function() {
        return Transform.translate(this.detailViewPos.get(), 0, 0);
      }.bind(this)
    });

    this.add(this.detailModifier).add(this.detailView);
  }

  function _setListeners() {
    this.detailView.on('toggleDetail', this.toggle.bind(this));
    this.beurzenList.on('showDetail', this.slideLeft.bind(this));
    this.beurzenList.on('hideDetail',  this.slideRight.bind(this));
  }

  module.exports = AppView;
});