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

Slide box with start and end bounds

Browse Source
This commit is contained in:
Max Lynch
2013-10-15 17:04:48 -05:00
parent 246fee2436
commit 53af99c054
4 changed files with 50 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/css/ionic.css vendored
View File

@ -3090,7 +3090,11 @@ a.button {
.slide-box { .slide-box {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
-webkit-transition: -webkit-transform 0 ease-in-out; } -webkit-transition: -webkit-transform 0 ease-in-out;
font-size: 0; }
.slide-box-animating {
-webkit-transition-duration: 0.2s; }
.slide-box-content { .slide-box-content {
display: inline-block; display: inline-block;

33
dist/js/ionic.js vendored
View File

@ -2307,7 +2307,7 @@ window.ionic = {
} }
// Disable transitions during drag // Disable transitions during drag
content.style.webkitTransitionDuration = '0'; content.classList.remove('slide-box-animating');
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start) // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
@ -2320,6 +2320,8 @@ window.ionic = {
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
var _this = this; var _this = this;
var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
// We didn't have a drag, so just init and leave // We didn't have a drag, so just init and leave
if(!this._currentDrag) { if(!this._currentDrag) {
@ -2329,25 +2331,29 @@ window.ionic = {
// Snap to the correct spot // Snap to the correct spot
var content = this._currentDrag.content; content = this._currentDrag.content;
// Enable transition duration // Enable transition duration
content.style.webkitTransitionDuration = '0.2s'; content.classList.add('slide-box-animating');
var offsetX = Math.abs(parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0); offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
var slideWidth = content.offsetWidth; slideWidth = content.offsetWidth;
var totalWidth = content.offsetWidth * content.children.length; totalWidth = content.offsetWidth * content.children.length;
// Calculate how far in this slide we've dragged // Calculate how far in this slide we've dragged
var ratio = (offsetX % slideWidth) / slideWidth; ratio = (offsetX % slideWidth) / slideWidth;
var finalOffsetX = Math.min(totalWidth, Math.ceil(offsetX / slideWidth) * slideWidth); if(ratio >= 0) {
// Anything greater than zero is too far left
if(ratio < 0.5) { finalOffsetX = 0;
finalOffsetX = Math.max(0, Math.floor(offsetX / slideWidth) * slideWidth); } else if(ratio >= -0.5) {
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
} else {
// Sliiide to the right
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
} }
// Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
this._initDrag(); this._initDrag();
@ -2373,7 +2379,8 @@ window.ionic = {
if(_this._isDragging) { if(_this._isDragging) {
// Grab the new X point, capping it at zero // Grab the new X point, capping it at zero
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX); var newX = Math.min(_this._currentDrag.content.offsetWidth, _this._currentDrag.startOffsetX + e.gesture.deltaX);
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
} }

33
js/views/slideBox.js
View File

@ -41,7 +41,7 @@
} }
// Disable transitions during drag // Disable transitions during drag
content.style.webkitTransitionDuration = '0'; content.classList.remove('slide-box-animating');
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start) // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
@ -54,6 +54,8 @@
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
var _this = this; var _this = this;
var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
// We didn't have a drag, so just init and leave // We didn't have a drag, so just init and leave
if(!this._currentDrag) { if(!this._currentDrag) {
@ -63,25 +65,29 @@
// Snap to the correct spot // Snap to the correct spot
var content = this._currentDrag.content; content = this._currentDrag.content;
// Enable transition duration // Enable transition duration
content.style.webkitTransitionDuration = '0.2s'; content.classList.add('slide-box-animating');
var offsetX = Math.abs(parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0); offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
var slideWidth = content.offsetWidth; slideWidth = content.offsetWidth;
var totalWidth = content.offsetWidth * content.children.length; totalWidth = content.offsetWidth * content.children.length;
// Calculate how far in this slide we've dragged // Calculate how far in this slide we've dragged
var ratio = (offsetX % slideWidth) / slideWidth; ratio = (offsetX % slideWidth) / slideWidth;
var finalOffsetX = Math.min(totalWidth, Math.ceil(offsetX / slideWidth) * slideWidth); if(ratio >= 0) {
// Anything greater than zero is too far left
if(ratio < 0.5) { finalOffsetX = 0;
finalOffsetX = Math.max(0, Math.floor(offsetX / slideWidth) * slideWidth); } else if(ratio >= -0.5) {
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
} else {
// Sliiide to the right
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
} }
// Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
this._initDrag(); this._initDrag();
@ -107,7 +113,8 @@
if(_this._isDragging) { if(_this._isDragging) {
// Grab the new X point, capping it at zero // Grab the new X point, capping it at zero
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX); var newX = Math.min(_this._currentDrag.content.offsetWidth, _this._currentDrag.startOffsetX + e.gesture.deltaX);
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
} }

7
scss/ionic/_slideBox.scss
View File

@ -1,10 +1,13 @@
.slide-box { .slide-box {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
-webkit-transition: -webkit-transform 0 ease-in-out; -webkit-transition: -webkit-transform 0 ease-in-out;
// Remove the gaps between slide content items
font-size: 0;
} }
.slide-box.animate { .slide-box-animating {
-webkit-transition-duration: 0.2s;
} }
.slide-box-content { .slide-box-content {
display: inline-block; display: inline-block;