mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Tweaks to panel and my drag panel demo
This commit is contained in:
Max Lynch
256
example/panel_controller.html
Normal file
256
example/panel_controller.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Panels</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">-->
|
||||
<link rel="stylesheet" href="../../dist/framework.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section id="page" class="full-section ion-panel-animated">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<button id="left-button" class="button">Left</button>
|
||||
<h1 class="title">Panels</h1>
|
||||
<button id="right-button" class="button">Left</button>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<p><button class="button button-primary">Other Left Side Panel</button></p>
|
||||
<p id="event-log"></p>
|
||||
</main>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title">Panels</h3>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section id="my-left-panel" class="ion-panel ion-panel-active-left">
|
||||
This is my default left side panel!
|
||||
</section>
|
||||
|
||||
<section id="my-right-panel" class="ion-panel ion-panel-active-right">
|
||||
This is my right side panel!
|
||||
</section>
|
||||
|
||||
<section id="my-other-left-panel" class="ion-panel">
|
||||
This is my other left side panel!
|
||||
</section>
|
||||
|
||||
|
||||
<script src="../../js/framework/framework-events.js"></script>
|
||||
<script src="../../js/framework/framework-gestures.js"></script>
|
||||
<script src="../../js/framework/ion-panel.js"></script>
|
||||
<script src="../../js/framework/handlers/panel-handler.js"></script>
|
||||
<script>
|
||||
var LeftRightPanelViewController = function(options) {
|
||||
var _this = this;
|
||||
|
||||
this.animateClass = options.animateClass;
|
||||
this.left = options.left;
|
||||
this.leftWidth = options.leftWidth;
|
||||
this.right = options.right;
|
||||
this.rightWidth = options.rightWidth;
|
||||
this.center = options.center;
|
||||
|
||||
this._rightShowing = false;
|
||||
this._leftShowing = false;
|
||||
|
||||
// Bind release and drag listeners
|
||||
window.FM.onGesture('release', function(e) {
|
||||
_this._endDrag(e);
|
||||
}, document.body);
|
||||
|
||||
window.FM.onGesture('drag', function(e) {
|
||||
_this._handleDrag(e);
|
||||
}, document.body);
|
||||
|
||||
window.FM.onGesture('swiperight', function(e) {
|
||||
console.log('SWIPERIGHT');
|
||||
//_this.openPercentage(-100);
|
||||
}, document.body);
|
||||
window.FM.onGesture('swipeleft', function(e) {
|
||||
console.log('SWIPELEFT');
|
||||
//_this.openPercentage(-100);
|
||||
}, document.body);
|
||||
};
|
||||
|
||||
LeftRightPanelViewController.prototype = {
|
||||
toggleLeft: function() {
|
||||
var openAmount = this.getOpenAmount();
|
||||
if(openAmount > 0) {
|
||||
this.openPercentage(0);
|
||||
} else {
|
||||
this.openPercentage(100);
|
||||
}
|
||||
},
|
||||
toggleRight: function() {
|
||||
var openAmount = this.getOpenAmount();
|
||||
if(openAmount < 0) {
|
||||
this.openPercentage(0);
|
||||
} else {
|
||||
this.openPercentage(-100);
|
||||
}
|
||||
},
|
||||
getOpenAmount: function() {
|
||||
var r = /translate3d\((-?\d+)px/;
|
||||
var d = r.exec(this.center.style.webkitTransform);
|
||||
|
||||
if(d && d.length > 0) {
|
||||
return parseInt(d[1]);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
getOpenRatio: function() {
|
||||
var amount = this.getOpenAmount();
|
||||
if(amount >= 0) {
|
||||
return amount / this.leftWidth;
|
||||
}
|
||||
return amount / this.rightWidth;
|
||||
},
|
||||
openPercentage: function(percentage) {
|
||||
var p = percentage / 100;
|
||||
var maxLeft = this.leftWidth;
|
||||
var maxRight = this.rightWidth;
|
||||
if(percentage >= 0) {
|
||||
this.openAmount(maxLeft * p);
|
||||
} else {
|
||||
this.openAmount(maxRight * p);
|
||||
}
|
||||
},
|
||||
openAmount: function(amount) {
|
||||
var maxLeft = this.leftWidth;
|
||||
var maxRight = this.rightWidth;
|
||||
|
||||
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.center.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
|
||||
|
||||
if(amount >= 0) {
|
||||
this._leftShowing = true;
|
||||
this._rightShowing = false;
|
||||
this.right.style.display = 'none';
|
||||
this.left.style.display = 'block';
|
||||
} else {
|
||||
this._rightShowing = true;
|
||||
this._leftShowing = false;
|
||||
this.right.style.display = 'block';
|
||||
this.left.style.display = 'none';
|
||||
}
|
||||
},
|
||||
snapToRest: function(e) {
|
||||
// We want to animate at the end of this
|
||||
this.center.classList.add(this.animateClass);
|
||||
this._isDragging = false;
|
||||
|
||||
// Check how much the panel is open after the drag, and
|
||||
// what the drag velocity is
|
||||
var ratio = this.getOpenRatio();
|
||||
|
||||
if(ratio == 0)
|
||||
return;
|
||||
|
||||
var velocityThreshold = 0.3;
|
||||
var velocityX = e.gesture.velocityX
|
||||
var direction = e.gesture.direction;
|
||||
|
||||
// Less than half, going left
|
||||
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
|
||||
//this.openPercentage(0);
|
||||
//}
|
||||
|
||||
// Going right, less than half, too slow (snap back)
|
||||
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
|
||||
this.openPercentage(0);
|
||||
}
|
||||
|
||||
// Going left, more than half, too slow (snap back)
|
||||
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
|
||||
this.openPercentage(100);
|
||||
}
|
||||
|
||||
// Going left, less than half, too slow (snap back)
|
||||
else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
|
||||
this.openPercentage(0);
|
||||
}
|
||||
|
||||
// Going right, more than half, too slow (snap back)
|
||||
else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
|
||||
this.openPercentage(-100);
|
||||
}
|
||||
|
||||
// Going right, more than half, or quickly (snap open)
|
||||
else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
|
||||
this.openPercentage(100);
|
||||
}
|
||||
|
||||
// Going left, more than half, or quickly (span open)
|
||||
else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
|
||||
this.openPercentage(-100);
|
||||
}
|
||||
|
||||
// Snap back for safety
|
||||
else {
|
||||
this.openPercentage(0);
|
||||
}
|
||||
},
|
||||
_endDrag: function(e) {
|
||||
this.snapToRest(e);
|
||||
},
|
||||
_initDrag: function(e) {
|
||||
this.center.classList.remove(this.animateClass);
|
||||
this._isDragging = true;
|
||||
this._startX = 0;
|
||||
this._offsetX = 0;
|
||||
this._lastX = 0;
|
||||
},
|
||||
_handleDrag: function(e) {
|
||||
if(!this._isDragging) {
|
||||
this._initDrag(e);
|
||||
|
||||
this._startX = e.gesture.touches[0].pageX;
|
||||
this._lastX = this._startX;
|
||||
|
||||
this._offsetX = this.getOpenAmount();
|
||||
}
|
||||
console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
|
||||
var newX = this._offsetX + (this._lastX - this._startX);
|
||||
|
||||
this.openAmount(newX);
|
||||
|
||||
this._lastX = e.gesture.touches[0].pageX;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Grab the sections
|
||||
var page = document.getElementById('page');
|
||||
var leftPanel = document.getElementById('my-left-panel');
|
||||
var rightPanel = document.getElementById('my-right-panel');
|
||||
var controller = new LeftRightPanelViewController({
|
||||
left: leftPanel,
|
||||
leftWidth: 270,
|
||||
right: rightPanel,
|
||||
rightWidth: 270,
|
||||
center: page,
|
||||
animateClass: 'ion-panel-animated'
|
||||
});
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
controller.toggleLeft();
|
||||
}, document.getElementById('left-button'));
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
controller.toggleRight();
|
||||
}, document.getElementById('right-button'));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user