Ember SwipeView for mobile devices based on SwipeView's approach of @cubiq

swipe.css

.swipe_item {
  position: absolute; 
  -webkit-transform: translateZ(0);
  top: 0px; 
  height: 100%; 
  width: 100%; 
}

.swipe_slider {
  position: relative; 
  top: 0px; 
  height: 100%; 
  width: 100%;  
}

swipe_slider_view.js

/* Based on SwipeView approach of Matteo Spinelli
 */
Luh.Ui.SwipeSliderView = Ember.ContainerView.extend({
  
  itemViewClass: Em.View,

  /**
    Defines the item based that will be shown at startup based on index content. 

    @type Integer
    @default 0
  */
  contentIndex: 0,

  content: null,
  duration: '0.5s',

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

  //--- private properties
  
  isMoving: false,
  classNames: ['swipe_slider'],
  width: null,
  translatePosition: null,


  activeIndex: null,
  activeLeftCss: null,


  init: function(){

    this._super();

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

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

    var contentIndex = get(this, 'contentIndex'); 
    
    index = this._getContentIndex(false); 

    view = this.createChildView(itemViewClass, {
      classNames: ['swipe_item'],
      content: content[index]
    });
    this._appendView(view);

    index = contentIndex;

    view = this.createChildView(itemViewClass, {
      classNames: ['swipe_item'],
      content: content[index]
    });
    this._appendView(view);


    index = this._getContentIndex(true); 

    view = this.createChildView(itemViewClass, {
      classNames: ['swipe_item'],
      content: content[index]
    });
    this._appendView(view);

  },

  didInsertElement: function() {

    var child = this.get('childViews');

    set(this, 'activeLeftCss', 0);
    set(this, 'activeIndex', 1);

    child[0].$().css("left", "-100%"); 
    child[1].$().css("left", "0%"); 
    child[2].$().css("left", "100%"); 

    var width = this.$().width();   
    set(this, 'width', width);
    set(this, 'translatePosition', 0);

  },

  moveBack: function(){

    if ( !this.get('isMoving') ) {

      this.set('isMoving', true );
      this.set('activeIndex', this._getIndex(false) );
      this.set('contentIndex', this._getContentIndex(false) );

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

      var that = this;
      // if after callback, user can click several times
      this.move(false, function() { 

        that.set('isMoving', false );

      });
    }

  },

  moveNext: function(){

    if ( !this.get('isMoving') ) {

      this.set('isMoving', true );
      this.set('activeIndex', this._getIndex(true) );
      this.set('contentIndex', this._getContentIndex(true) );

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

      var that = this;
      this.move(true, function() { 
      
        that.set('isMoving', false );

      });
    }
   },

  swipeEnd: function(recognizer) {
     
    if ( recognizer.swipeDirection === Em.SwipeGestureDirection.Left ) {
        this.moveBack();
    } else if ( recognizer.swipeDirection === Em.SwipeGestureDirection.Right ) {
        this.moveNext();
    }

  },

  move: function(next, callback) {

    var id = this.get('elementId');
    var width = this.get('width');

    var translatePosition = this.get('translatePosition');
		translatePosition += (next) ? width*(-1): width;

    var that = this;
    move('#'+id)
	.x(translatePosition)
	.duration(this.duration)
	.end( function() {
        
        // update Left Css on Left/Right Pages
        var activeLeftCss = that.get('activeLeftCss');
        var left, leftIndex, rightIndex, leftContentIndex, rightContentIndex;

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

        leftIndex = that._getIndex(false);
        rightIndex = that._getIndex(true);

        left = (activeLeftCss-1)*100+'%';
        child[leftIndex].$().css("left", left); 

        left = (activeLeftCss+1)*100+'%';
        child[rightIndex].$().css("left", left); 

        leftContentIndex = that._getContentIndex(false);
        rightContentIndex = that._getContentIndex(true);

        set( child[leftIndex], 'content', content[leftContentIndex] );
        set( child[rightIndex], 'content', content[rightContentIndex] );

        set(that, 'translatePosition', translatePosition);
        if ( callback ) {
          callback();
        }

   });


  },

  _getIndex: function( next ) {

    var result = this.get('activeIndex');
    result +=(next) ? 1:-1; 

    if ( result < 0 ) { 
      result = 2;
    } else if ( result > 2 ) { 
      result = 0;
    }

    return result;
  },

  _getContentIndex: function( next ) {

    var length = this.get('content').get('length');
    var result = this.get('contentIndex');
    result +=(next) ? 1:-1; 

    if ( result < 0 ) { 
      result = length-1;
    } else if ( result > length-1 ) { 
      result = 0;
    }

    return result;
  },

  _appendView: function(newView) {

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

   }


});