Simple pager for slider, needs styles

This commit is contained in:
Max Lynch
2013-10-16 07:43:26 -05:00
parent 6002991ba3
commit b3cd02b5c9
5 changed files with 112 additions and 1 deletions

29
dist/js/ionic.js vendored
View File

@ -2278,10 +2278,20 @@ window.ionic = {
var _this = this;
this.el = opts.el;
this.pager = this.el.querySelector('.slide-box-pager');
// The drag threshold is the pixel delta that will trigger a drag (to
// avoid accidental dragging)
this.dragThresholdX = opts.dragThresholdX || 10;
// The velocity threshold is a velocity of drag that indicates a "swipe". This
// number is taken from hammer.js's calculations
this.velocityXThreshold = opts.velocityXThreshold || 0.3;
// Initialize the slide index to the first page and update the pager
this.slideIndex = 0;
this._updatePager();
// Listen for drag and release events
window.ionic.onGesture('drag', function(e) {
_this._handleDrag(e);
@ -2324,6 +2334,8 @@ window.ionic = {
// Update the slide index
this.slideIndex = Math.ceil(offsetX / slideWidth);
this._updatePager();
},
/**
@ -2337,6 +2349,23 @@ window.ionic = {
return this.slideIndex;
},
/**
* If we have a pager, update the active page when the current slide
* changes.
*/
_updatePager: function() {
if(!this.pager) {
return;
}
for(var i = 0, j = this.pager.children.length; i < j; i++) {
if(i == this.slideIndex) {
this.pager.children[i].classList.add('active');
} else {
this.pager.children[i].classList.remove('active');
}
}
},
_initDrag: function() {
this._isDragging = false;
this._drag = null;