mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
257 lines
8.2 KiB
HTML
257 lines
8.2 KiB
HTML
<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>
|
|
|