Ember SwipeView for mobile devices ( using only three master pages with infinite content)

swipe_view.js

Luh.Ui.SwipeView = Ember.ContainerView.extend({

  width: null,
  height: null,

  content: null,
  duration: '1s',

  swipeOptions: {
		direction: Em.SwipeGestureDirection.Left | Em.SwipeGestureDirection.Right,
		cancelPeriod: 100,
		swipeThreshold: 10
  },

  itemViewClass: Luh.Ui.SwipeItemView,

  hasBack: Ember.computed( function() {
    return this.get('index') !== 0;
  }).property('content.@each', 'index'),

  hasNext: Ember.computed( function() {
    return this.get('index')+1 < this.get('content').get('length');
  }).property('content.@each', 'index'),

  
  index: null,

  init: function(){

    this._super();

    var itemViewClass = get(this, 'itemViewClass');
    var view;

    var content  = get(this, 'content');

    view = this.createChildView(itemViewClass, {
      //content: content[0]
    });
    this.appendView(view);

    view = this.createChildView(itemViewClass, {
      content: content[0]
    });
    this.appendView(view);

    view = this.createChildView(itemViewClass, {
      content: content[1]
    });
    this.appendView(view);

    set(this, 'index', 0);

  },

  didInsertElement: function() {

    //TODO: can be substituted for finding the next layout antecestor 
    var parentId = this.$().parent().attr("id");

    var height = $('#'+parentId).height();   
    var width = $('#'+parentId).width();   

    this.$().height(height);
    this.$().width(width*3);

    set(this, 'height', height);
    set(this, 'width', width);

    var parentId = this.$().parent().attr("id");

    set(this, 'parentId', parentId );

    // move to the middle
		move('#'+parentId)
			.x(width*(-1))
			.duration('0s')
			.end(); 

  },

  appendView: function(newView) {

    var child = this.get('childViews');
    set(newView, '_parentView', this);
    child.pushObject(newView);

  },

  moveBack: function(){

		if( !this.get('hasBack') ) return; 

		// if after callback, user can click several times
		var index = this.get('index');
		this.set('index', index-1);

		this.move(false, function() { 

		});
  },

  moveNext: function(){

		if( !this.get('hasNext') ) return;



		var index = this.get('index');
		this.set('index', index+1);

		this.move(true, function() { 

		});
		
  },

  swipeEnd: function(recognizer) {
     
    if ( recognizer.swipeDirection === Em.SwipeGestureDirection.Left && 
         this.get('hasBack') ) {

        this.moveBack();

    } else if ( recognizer.swipeDirection === Em.SwipeGestureDirection.Right && 
         this.get('hasNext') ) {

        this.moveNext();

    }
    

  },

  move: function(next, callback) {

    var parentId = this.get('parentId');

    var width = this.get('width');
    var position = (next) ? width*(-2): 0;

    var that = this;
		move('#'+parentId)
			.x(position)
			.duration(this.duration)
			.end( function() {

        var child = that.get('childViews');
        var content = that.get('content');
        var length = content.get('length');
        var index = that.get('index');

        set(child[1], 'content', content[index]);

        move('#'+parentId)
          .x(width*(-1))
          .duration('0s')
          .end( function() {

            if ( index+1 < length ) {
              set(child[2], 'content', content[index+1]);
            }

            if ( index-1 >= 0 ) {
              set(child[0], 'content', content[index-1]);
            }

            if ( callback ) {
              callback();
            }

          });
			});

  }

});