mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Rubber band effect on slider box
This commit is contained in:
Max Lynch
13
dist/css/ionic-scoped.css
vendored
13
dist/css/ionic-scoped.css
vendored
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
.ionic {
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
@ -990,7 +991,7 @@
|
||||
.ionic fieldset {
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
border: 1px solid #c0c0c0; }
|
||||
border: 1px solid silver; }
|
||||
.ionic legend {
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
@ -2040,7 +2041,7 @@
|
||||
.ionic input[type="file"]:focus,
|
||||
.ionic input[type="radio"]:focus,
|
||||
.ionic input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: thin dotted #333333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
.ionic input:-moz-placeholder,
|
||||
@ -2098,7 +2099,7 @@
|
||||
border: 1px solid #049cdb;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
transition: background-color .1s ease-in-out; }
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
.ionic .checkbox .handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
@ -2110,7 +2111,7 @@
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease-in-out;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.ionic .checkbox input:checked + .handle {
|
||||
@ -2389,7 +2390,7 @@
|
||||
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
text-shadow: 0px 0px 10px white; }
|
||||
.ionic a.button {
|
||||
text-decoration: none; }
|
||||
.ionic .margin.button,
|
||||
@ -2495,7 +2496,7 @@
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #ddd; }
|
||||
border: 1px solid #dddddd; }
|
||||
.ionic .card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
|
||||
13
dist/css/ionic.css
vendored
13
dist/css/ionic.css
vendored
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
src: url("fonts/ionicons.eot");
|
||||
@ -1245,7 +1246,7 @@ sub {
|
||||
fieldset {
|
||||
margin: 0 2px;
|
||||
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.
|
||||
@ -2496,7 +2497,7 @@ select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: thin dotted #333333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
|
||||
@ -2559,7 +2560,7 @@ input[type="checkbox"][readonly] {
|
||||
border: 1px solid #049cdb;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
transition: background-color .1s ease-in-out; }
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
.checkbox .handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
@ -2571,7 +2572,7 @@ input[type="checkbox"][readonly] {
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease-in-out;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.checkbox input:checked + .handle {
|
||||
@ -2867,7 +2868,7 @@ input[type="checkbox"][readonly] {
|
||||
.button.button-icon:active, .button.button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
text-shadow: 0px 0px 10px white; }
|
||||
|
||||
a.button {
|
||||
text-decoration: none; }
|
||||
@ -2993,7 +2994,7 @@ a.button {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #ddd; }
|
||||
border: 1px solid #dddddd; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
|
||||
31
dist/js/ionic.js
vendored
31
dist/js/ionic.js
vendored
@ -2293,7 +2293,7 @@ window.ionic = {
|
||||
ionic.views.SlideBox.prototype = {
|
||||
_initDrag: function() {
|
||||
this._isDragging = false;
|
||||
this._currentDrag = null;
|
||||
this._drag = null;
|
||||
},
|
||||
_startDrag: function(e) {
|
||||
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)
|
||||
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
|
||||
|
||||
this._currentDrag = {
|
||||
this._drag = {
|
||||
content: content,
|
||||
startOffsetX: offsetX
|
||||
startOffsetX: offsetX,
|
||||
resist: 1
|
||||
};
|
||||
},
|
||||
|
||||
@ -2327,14 +2328,14 @@ window.ionic = {
|
||||
window.requestAnimationFrame(function() {
|
||||
|
||||
// We didn't have a drag, so just init and leave
|
||||
if(!_this._currentDrag) {
|
||||
if(!_this._drag) {
|
||||
_this._initDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
// Snap to the correct spot
|
||||
|
||||
content = _this._currentDrag.content;
|
||||
content = _this._drag.content;
|
||||
|
||||
// Enable transition duration
|
||||
content.classList.add('slide-box-animating');
|
||||
@ -2372,12 +2373,15 @@ window.ionic = {
|
||||
var content;
|
||||
|
||||
// We really aren't dragging
|
||||
if(!_this._currentDrag) {
|
||||
if(!_this._drag) {
|
||||
_this._startDrag(e);
|
||||
}
|
||||
|
||||
// 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.
|
||||
if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) {
|
||||
@ -2385,24 +2389,23 @@ window.ionic = {
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
content = _this._currentDrag.content;
|
||||
content = _this._drag.content;
|
||||
|
||||
// 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));
|
||||
|
||||
if(newX > 0) {
|
||||
// We are dragging past the leftmost pane, rubber band
|
||||
newX *= 0.4;
|
||||
_this._drag.resist = (newX / content.offsetWidth) + 1.4;
|
||||
} else if(newX < rightMostX) {
|
||||
// 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)';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
ionic.views.SlideBox.prototype = {
|
||||
_initDrag: function() {
|
||||
this._isDragging = false;
|
||||
this._currentDrag = null;
|
||||
this._drag = null;
|
||||
},
|
||||
_startDrag: function(e) {
|
||||
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)
|
||||
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
|
||||
|
||||
this._currentDrag = {
|
||||
this._drag = {
|
||||
content: content,
|
||||
startOffsetX: offsetX
|
||||
startOffsetX: offsetX,
|
||||
resist: 1
|
||||
};
|
||||
},
|
||||
|
||||
@ -61,14 +62,14 @@
|
||||
window.requestAnimationFrame(function() {
|
||||
|
||||
// We didn't have a drag, so just init and leave
|
||||
if(!_this._currentDrag) {
|
||||
if(!_this._drag) {
|
||||
_this._initDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
// Snap to the correct spot
|
||||
|
||||
content = _this._currentDrag.content;
|
||||
content = _this._drag.content;
|
||||
|
||||
// Enable transition duration
|
||||
content.classList.add('slide-box-animating');
|
||||
@ -106,12 +107,15 @@
|
||||
var content;
|
||||
|
||||
// We really aren't dragging
|
||||
if(!_this._currentDrag) {
|
||||
if(!_this._drag) {
|
||||
_this._startDrag(e);
|
||||
}
|
||||
|
||||
// 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.
|
||||
if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) {
|
||||
@ -119,24 +123,23 @@
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
content = _this._currentDrag.content;
|
||||
content = _this._drag.content;
|
||||
|
||||
// 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));
|
||||
|
||||
if(newX > 0) {
|
||||
// We are dragging past the leftmost pane, rubber band
|
||||
newX *= 0.4;
|
||||
_this._drag.resist = (newX / content.offsetWidth) + 1.4;
|
||||
} else if(newX < rightMostX) {
|
||||
// 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)';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user