Paginated viewport in Meteor/Famo.us/Famono

viewport.js

if (Meteor.isClient) {

 // Rig some famo.us deps
  //famousPolyfills;
  famous.polyfills;
  famous.core.famous;

  // Make sure dom got a body...
  Meteor.startup(function() {

    famous.transitions.Transitionable.registerMethod('spring', famous.transitions.SnapTransition);

    // the position state
    position = new famous.transitions.Transitionable([0, 0]);

   famous.inputs.GenericSync.register({
      'mouse': famous.inputs.MouseSync,
      'touch': famous.inputs.TouchSync,
      'scroll': famous.inputs.ScrollSync
    });

    // create a Sync to listen to mouse events
    var sync = new famous.inputs.GenericSync({
      'mouse': {},
      'touch': {},
      'scroll': { scale: 0.5 }
    });

    //var sync = new famous.inputs.GenericSync(['scroll', 'touch'], { direction: 0 });

    // Prepare options
    var size = [undefined, undefined];
    var clip = true;
    var overdrive = true;
    var paginate = true;
    var transition = function(velocity) {
      return {
      method: 'spring',
      period: 150,
      velocity: velocity };
    };
    //transition = 'ease';
    var surfaces = [
      new library.meteor.core.Surface({
        template: Template.hello,
        data: { _id: 1 },
        properties : {background : 'red'},
      }),
      new library.meteor.core.Surface({
        template: Template.hello,
        data: { _id: 2 },
        properties : {background : 'blue'},
      }),
      new library.meteor.core.Surface({
        template: Template.hello,
        data: { _id: 3 },
        properties : {background : 'green'},
      })
    ];

    container = new famous.surfaces.ContainerSurface({
      size: size,
      properties: {
      overflow: clip ? 'hidden' : 'visible'
      }
    });

    // Surface provides events that the sync listens to
    container.pipe(sync);
    //surface2.pipe(sync);

    // Syncs have `start`, `update` and `end` events.
    // On `update` we increment the position state of the surface based
    // on the change in x- and y- displacements
    sync.on('update', function(data){
      var currentPosition = position.get();
      var x = currentPosition[0] + (data.delta[0] || 0);
      var y = currentPosition[1];// + data.delta[1]

      if (overdrive) {
        // No boundary limits
      } else {
        // Get the width
        var width = container._size && container._size[0] || 0;
        // Calculate the negative max width
        var maxWidth = -width * lastPage;

        if (x > 0) {
          x = 0;
        } else if (x < maxWidth) {
          x = maxWidth;
        }
      }
      // Follow the scroll or touch
      position.set([x, y]);
    });

    var currentPage = 0;
    var firstPage = 0;
    var lastPage = 1;

    goToPage = function(page, transition) {
      // XXX: do render / destroy of pages...
      // Get the width
      var width = container._size && container._size[0] || 0;      
      // Set the position
      position.set([-width * page, 0], transition);
    };

    // On end we check if we hit bounderies and/or paginate
    sync.on('end', function(data) {
      // Get the width
      var width = container._size && container._size[0] || 0;
      // Get the current position
      var currentPosition = position.get();
      // Get the current page
      var currentPage = -Math.round(width ? currentPosition[0] / width : 0);
      // Only use the x-axis of the velocity..
      var velocity = [data.velocity[0] || 0, 0];
      // Check boundaries
      if (currentPage < firstPage) {
        // Hit first boundary
        currentPage = firstPage;
      } else if (currentPage > lastPage) {
        // Hit last boundary
        currentPage = lastPage;
      } else {
        // No boundaries hit...
      }

      // Set the position
      if (paginate) goToPage(currentPage, (typeof transition == 'function' ? transition(velocity): transition));

      console.log('PAGE', currentPage);

    });

    var getModifier = function(page) {
      return new famous.core.Modifier({
        transform : function(){
          var currentPosition = position.get();
          var width = container._size && container._size[0] || 0;
          // Calc the x position
          var x = currentPosition[0] + (width * page);
          return famous.core.Transform.translate(x, currentPosition[1], 0);
          //return famous.core.Transform.translate(Math.max(x, 0), currentPosition[1], 0);
        }
      });
    };

    // Add surfaces to array
    for (var i = 0; i < surfaces.length; i++) {
      // Get the current element
      var surface = surfaces[i];

      var positionModifier = getModifier(i);

      container
        .add(positionModifier)
        .add(surface);
    }

    // Set the index of the last element
    lastPage = surfaces.length-1;

    // this modifier reads from the position state to create a translation
    // Transform that is applied to the surface
    var positionModifier = new famous.core.Modifier({
      transform : function(){
        var currentPosition = position.get();
        var x = currentPosition[0];
        return famous.core.Transform.translate(Math.max(x, 0), currentPosition[1], 0);
      }
    });


    // define the scene graph
    var mainContext = famous.core.Engine.createContext();

    mainContext.add(container);
  });

}