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

Slide box velocity fix both directions

Browse Source
This commit is contained in:
Max Lynch
2013-10-16 08:24:31 -05:00
parent b3cd02b5c9
commit 77d9ef53d1
5 changed files with 85 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/css/ionic.css vendored
View File

@ -3025,7 +3025,7 @@ a.button {
position: relative;
overflow: hidden; }
.slide-box-items {
.slide-box-slides {
position: relative;
white-space: nowrap;
-webkit-transition: -webkit-transform 0 ease-in-out;
@ -3034,12 +3034,12 @@ a.button {
.slide-box-animating {
-webkit-transition-duration: 0.2s; }
.slide-box-content {
.slide {
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%; }
.slide-box-content img {
.slide img {
width: 100%; }
.slide-box-pager {

23
dist/js/ionic.js vendored
View File

@ -2302,6 +2302,16 @@ window.ionic = {
};
ionic.views.SlideBox.prototype = {
/**
* Tell the pager to update itself if content is added or
* removed.
*/
update: function() {
this._updatePager();
},
prependSlide: function(el) {
},
/**
* Slide to the given slide index.
@ -2406,16 +2416,15 @@ window.ionic = {
// TODO: Do we need this anymore?
finalOffsetX = 0;
} else if(ratio >= -0.5) {
// We are more than half-way through a drag
// We are less than half-way through a drag
// Sliiide to the left
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
} else {
// We are less than half-way through a drag
// We are more than half-way through a drag
// Sliiide to the right
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
}
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
if(e.gesture.velocityX > _this.velocityXThreshold) {
if(e.gesture.direction == 'left') {
@ -2424,6 +2433,9 @@ window.ionic = {
_this.slideToSlide(_this.slideIndex - 1);
}
} else {
// Calculate the new slide index (or "page")
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
// Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
}
@ -2442,7 +2454,7 @@ window.ionic = {
this._initDrag();
// Make sure to grab the element we will slide as our target
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items');
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-slides');
if(!content) {
return;
}
@ -2488,7 +2500,6 @@ window.ionic = {
if(_this._isDragging) {
content = _this._drag.content;
// Grab the new X point, capping it at zero
var newX = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist);
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));
@ -2499,7 +2510,7 @@ window.ionic = {
} else if(newX < rightMostX) {
// Dragging past the rightmost pane, rubber band
//newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) + 1.4;
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) - 0.6;
}
_this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';

23
js/views/slideBox.js
View File

@ -36,6 +36,16 @@
};
ionic.views.SlideBox.prototype = {
/**
* Tell the pager to update itself if content is added or
* removed.
*/
update: function() {
this._updatePager();
},
prependSlide: function(el) {
},
/**
* Slide to the given slide index.
@ -140,16 +150,15 @@
// TODO: Do we need this anymore?
finalOffsetX = 0;
} else if(ratio >= -0.5) {
// We are more than half-way through a drag
// We are less than half-way through a drag
// Sliiide to the left
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
} else {
// We are less than half-way through a drag
// We are more than half-way through a drag
// Sliiide to the right
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
}
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
if(e.gesture.velocityX > _this.velocityXThreshold) {
if(e.gesture.direction == 'left') {
@ -158,6 +167,9 @@
_this.slideToSlide(_this.slideIndex - 1);
}
} else {
// Calculate the new slide index (or "page")
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
// Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
}
@ -176,7 +188,7 @@
this._initDrag();
// Make sure to grab the element we will slide as our target
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items');
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-slides');
if(!content) {
return;
}
@ -222,7 +234,6 @@
if(_this._isDragging) {
content = _this._drag.content;
// Grab the new X point, capping it at zero
var newX = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist);
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));
@ -233,7 +244,7 @@
} else if(newX < rightMostX) {
// Dragging past the rightmost pane, rubber band
//newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) + 1.4;
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) - 0.6;
}
_this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';

4
scss/ionic/_slideBox.scss
View File

@ -4,7 +4,7 @@
// Make sure items don't scroll over ever
overflow: hidden;
}
.slide-box-items {
.slide-box-slides {
position: relative;
white-space: nowrap;
-webkit-transition: -webkit-transform 0 ease-in-out;
@ -15,7 +15,7 @@
.slide-box-animating {
-webkit-transition-duration: 0.2s;
}
.slide-box-content {
.slide {
display: inline-block;
vertical-align: top;
width: 100%;

50
test/slideBox.html
View File

@ -22,15 +22,17 @@
<main class="content-wrapper">
<div class="content has-header">
<button id="prepend" class="button button-primary">Prepend content</button>
<button id="append" class="button button-primary">Append content</button>
<div class="slide-box" id="slide-box">
<div class="slide-box-items">
<div class="slide-box-content">
<div class="slide-box-slides">
<div class="slide">
<img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
</div>
<div class="slide-box-content">
<div class="slide">
<img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
</div>
<div class="slide-box-content">
<div class="slide">
<img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
</div>
</div>
@ -52,6 +54,46 @@
var box = new ionic.views.SlideBox({
el: b
});
document.getElementById('prepend').addEventListener('click', function(e) {
var content = document.createElement('div');
content.className = 'slide-box-content';
content.innerHTML = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">';
box.prependSlide(content);
/*
var items = b.querySelector('.slide-box-items');
items.insertBefore(content, items.firstChild);
var pager = document.querySelector('.slide-box-pager');
for(var i = 0; i < pager.children.length; i++) {
pager.children[i].innerHTML = parseInt(pager.children[i].innerHTML) + 1;
}
var count = document.createElement('span');
count.innerHTML = "1";
pager.insertBefore(count, pager.firstChild);
*/
});
document.getElementById('append').addEventListener('click', function(e) {
var content = document.createElement('div');
content.className = 'slide-box-content';
content.innerHTML = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">';
var items = b.querySelector('.slide-box-items');
box.appendSlide(content);
/*
var pager = document.querySelector('.slide-box-pager');
var count = document.createElement('span');
count.innerHTML = pager.children.length + 1;
pager.appendChild(count);
*/
});
/*
*/
</script>
</body>
</html>