javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Simple pager for slider, needs styles

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

29
js/views/slideBox.js
View File

@ -12,10 +12,20 @@
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);
@ -58,6 +68,8 @@
// Update the slide index
this.slideIndex = Math.ceil(offsetX / slideWidth);
this._updatePager();
},
/**
@ -71,6 +83,23 @@
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;