-
-
Save johanvalcoog/1575355 to your computer and use it in GitHub Desktop.
Ember SwipeView for mobile devices based on SwipeView's approach of @cubiq
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.swipe_item { | |
position: absolute; | |
-webkit-transform: translateZ(0); | |
top: 0px; | |
height: 100%; | |
width: 100%; | |
} | |
.swipe_slider { | |
position: relative; | |
top: 0px; | |
height: 100%; | |
width: 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment