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

Rubber band effect on slider box

Browse Source
This commit is contained in:
Max Lynch
2013-10-16 06:26:17 -05:00
parent fc969ef043
commit 390d3b70bf
4 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
dist/css/ionic-scoped.css vendored
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
.ionic { .ionic {
@font-face { @font-face {
font-family: 'ionicons'; font-family: 'ionicons';
@ -990,7 +991,7 @@
.ionic fieldset { .ionic fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; } border: 1px solid silver; }
.ionic legend { .ionic legend {
padding: 0; padding: 0;
/* 2 */ /* 2 */
@ -2040,7 +2041,7 @@
.ionic input[type="file"]:focus, .ionic input[type="file"]:focus,
.ionic input[type="radio"]:focus, .ionic input[type="radio"]:focus,
.ionic input[type="checkbox"]:focus { .ionic input[type="checkbox"]:focus {
outline: thin dotted #333; outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; } outline-offset: -2px; }
.ionic input:-moz-placeholder, .ionic input:-moz-placeholder,
@ -2098,7 +2099,7 @@
border: 1px solid #049cdb; border: 1px solid #049cdb;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
transition: background-color .1s ease-in-out; } transition: background-color 0.1s ease-in-out; }
.ionic .checkbox .handle:after { .ionic .checkbox .handle:after {
position: absolute; position: absolute;
top: 37%; top: 37%;
@ -2110,7 +2111,7 @@
border-right: none; border-right: none;
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity .1s ease-in-out; transition: opacity 0.1s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked + .handle { .ionic .checkbox input:checked + .handle {
@ -2389,7 +2390,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active { .ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px #fff; } text-shadow: 0px 0px 10px white; }
.ionic a.button { .ionic a.button {
text-decoration: none; } text-decoration: none; }
.ionic .margin.button, .ionic .margin.button,
@ -2495,7 +2496,7 @@
width: 100%; width: 100%;
background-color: white; background-color: white;
border-radius: 2px; border-radius: 2px;
border: 1px solid #ddd; } border: 1px solid #dddddd; }
.ionic .card-header { .ionic .card-header {
padding: 10px; padding: 10px;
background-color: white; } background-color: white; }

13
dist/css/ionic.css vendored
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: 'ionicons'; font-family: 'ionicons';
src: url("fonts/ionicons.eot"); src: url("fonts/ionicons.eot");
@ -1245,7 +1246,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; } border: 1px solid silver; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -2496,7 +2497,7 @@ select:focus,
input[type="file"]:focus, input[type="file"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
input[type="checkbox"]:focus { input[type="checkbox"]:focus {
outline: thin dotted #333; outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; } outline-offset: -2px; }
@ -2559,7 +2560,7 @@ input[type="checkbox"][readonly] {
border: 1px solid #049cdb; border: 1px solid #049cdb;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
transition: background-color .1s ease-in-out; } transition: background-color 0.1s ease-in-out; }
.checkbox .handle:after { .checkbox .handle:after {
position: absolute; position: absolute;
top: 37%; top: 37%;
@ -2571,7 +2572,7 @@ input[type="checkbox"][readonly] {
border-right: none; border-right: none;
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity .1s ease-in-out; transition: opacity 0.1s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.checkbox input:checked + .handle { .checkbox input:checked + .handle {
@ -2867,7 +2868,7 @@ input[type="checkbox"][readonly] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px #fff; } text-shadow: 0px 0px 10px white; }
a.button { a.button {
text-decoration: none; } text-decoration: none; }
@ -2993,7 +2994,7 @@ a.button {
width: 100%; width: 100%;
background-color: white; background-color: white;
border-radius: 2px; border-radius: 2px;
border: 1px solid #ddd; } border: 1px solid #dddddd; }
.card-header { .card-header {
padding: 10px; padding: 10px;

31
dist/js/ionic.js vendored
View File

@ -2293,7 +2293,7 @@ window.ionic = {
ionic.views.SlideBox.prototype = { ionic.views.SlideBox.prototype = {
_initDrag: function() { _initDrag: function() {
this._isDragging = false; this._isDragging = false;
this._currentDrag = null; this._drag = null;
}, },
_startDrag: function(e) { _startDrag: function(e) {
var offsetX, content; var offsetX, content;
@ -2313,9 +2313,10 @@ window.ionic = {
// 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;
this._currentDrag = { this._drag = {
content: content, content: content,
startOffsetX: offsetX startOffsetX: offsetX,
resist: 1
}; };
}, },
@ -2327,14 +2328,14 @@ window.ionic = {
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
// 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._drag) {
_this._initDrag(); _this._initDrag();
return; return;
} }
// Snap to the correct spot // Snap to the correct spot
content = _this._currentDrag.content; content = _this._drag.content;
// Enable transition duration // Enable transition duration
content.classList.add('slide-box-animating'); content.classList.add('slide-box-animating');
@ -2372,12 +2373,15 @@ window.ionic = {
var content; var content;
// We really aren't dragging // We really aren't dragging
if(!_this._currentDrag) { if(!_this._drag) {
_this._startDrag(e); _this._startDrag(e);
} }
// Sanity // Sanity
if(!_this._currentDrag) { return; } if(!_this._drag) { return; }
// Stop any default events during the drag
e.preventDefault();
// Check if we should start dragging. Check if we've dragged past the threshold. // Check if we should start dragging. Check if we've dragged past the threshold.
if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) { if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) {
@ -2385,24 +2389,23 @@ window.ionic = {
} }
if(_this._isDragging) { if(_this._isDragging) {
content = _this._currentDrag.content; content = _this._drag.content;
// 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 = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist);
/*
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1)); var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));
if(newX > 0) { if(newX > 0) {
// We are dragging past the leftmost pane, rubber band // We are dragging past the leftmost pane, rubber band
newX *= 0.4; _this._drag.resist = (newX / content.offsetWidth) + 1.4;
} else if(newX < rightMostX) { } else if(newX < rightMostX) {
// Dragging past the rightmost pane, rubber band // Dragging past the rightmost pane, rubber band
newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4))); //newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) + 1.4;
} }
*/
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; _this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
} }
}); });
} }

31
js/views/slideBox.js
View File

@ -27,7 +27,7 @@
ionic.views.SlideBox.prototype = { ionic.views.SlideBox.prototype = {
_initDrag: function() { _initDrag: function() {
this._isDragging = false; this._isDragging = false;
this._currentDrag = null; this._drag = null;
}, },
_startDrag: function(e) { _startDrag: function(e) {
var offsetX, content; var offsetX, content;
@ -47,9 +47,10 @@
// 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;
this._currentDrag = { this._drag = {
content: content, content: content,
startOffsetX: offsetX startOffsetX: offsetX,
resist: 1
}; };
}, },
@ -61,14 +62,14 @@
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
// 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._drag) {
_this._initDrag(); _this._initDrag();
return; return;
} }
// Snap to the correct spot // Snap to the correct spot
content = _this._currentDrag.content; content = _this._drag.content;
// Enable transition duration // Enable transition duration
content.classList.add('slide-box-animating'); content.classList.add('slide-box-animating');
@ -106,12 +107,15 @@
var content; var content;
// We really aren't dragging // We really aren't dragging
if(!_this._currentDrag) { if(!_this._drag) {
_this._startDrag(e); _this._startDrag(e);
} }
// Sanity // Sanity
if(!_this._currentDrag) { return; } if(!_this._drag) { return; }
// Stop any default events during the drag
e.preventDefault();
// Check if we should start dragging. Check if we've dragged past the threshold. // Check if we should start dragging. Check if we've dragged past the threshold.
if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) { if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) {
@ -119,24 +123,23 @@
} }
if(_this._isDragging) { if(_this._isDragging) {
content = _this._currentDrag.content; content = _this._drag.content;
// 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 = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist);
/*
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1)); var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));
if(newX > 0) { if(newX > 0) {
// We are dragging past the leftmost pane, rubber band // We are dragging past the leftmost pane, rubber band
newX *= 0.4; _this._drag.resist = (newX / content.offsetWidth) + 1.4;
} else if(newX < rightMostX) { } else if(newX < rightMostX) {
// Dragging past the rightmost pane, rubber band // Dragging past the rightmost pane, rubber band
newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4))); //newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) + 1.4;
} }
*/
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; _this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
} }
}); });
} }