mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Temporarily putting things into controllers folder, added disable feature otp anel
This commit is contained in:
Max Lynch
@ -245,194 +245,14 @@
|
|||||||
|
|
||||||
<script src="../../js/ionic-events.js"></script>
|
<script src="../../js/ionic-events.js"></script>
|
||||||
<script src="../../js/ionic-gestures.js"></script>
|
<script src="../../js/ionic-gestures.js"></script>
|
||||||
|
<script src="../../js/controllers/ionic-leftrightpanel.js"></script>
|
||||||
<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.ion.onGesture('release', function(e) {
|
|
||||||
_this._endDrag(e);
|
|
||||||
}, document.body);
|
|
||||||
|
|
||||||
window.ion.onGesture('drag', function(e) {
|
|
||||||
_this._handleDrag(e);
|
|
||||||
}, document.body);
|
|
||||||
|
|
||||||
window.ion.onGesture('swiperight', function(e) {
|
|
||||||
console.log('SWIPERIGHT');
|
|
||||||
//_this.openPercentage(-100);
|
|
||||||
}, document.body);
|
|
||||||
window.ion.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
|
// Grab the sections
|
||||||
var page = document.getElementById('page');
|
var page = document.getElementById('page');
|
||||||
var leftPanel = document.getElementById('my-left-panel');
|
var leftPanel = document.getElementById('my-left-panel');
|
||||||
var rightPanel = document.getElementById('my-right-panel');
|
var rightPanel = document.getElementById('my-right-panel');
|
||||||
var controller = new LeftRightPanelViewController({
|
var controller = new ion.controllers.LeftRightPanelViewController({
|
||||||
left: leftPanel,
|
left: leftPanel,
|
||||||
leftWidth: 270,
|
leftWidth: 270,
|
||||||
right: rightPanel,
|
right: rightPanel,
|
||||||
|
|||||||
199
js/controllers/ionic-leftrightpanel.js
Normal file
199
js/controllers/ionic-leftrightpanel.js
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
/**
|
||||||
|
* The LeftRightPanelViewController makes it easy to have an interface
|
||||||
|
* with two hidden menus: one on the left, and one on the right.
|
||||||
|
*
|
||||||
|
* The main content supports dragging to show either panel, or the panel can be
|
||||||
|
* show/hidden through buttons elsewhere in the app.
|
||||||
|
*
|
||||||
|
* Either panel can be disabled based on the context in the app.
|
||||||
|
*/
|
||||||
|
(function(window, document, ion) {
|
||||||
|
ion.controllers = ion.controllers || {};
|
||||||
|
|
||||||
|
ion.controllers.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;
|
||||||
|
|
||||||
|
this._isLeftEnabled = true;
|
||||||
|
this._isRightEnabled = true;
|
||||||
|
|
||||||
|
// Bind release and drag listeners
|
||||||
|
window.ion.onGesture('release', function(e) {
|
||||||
|
_this._endDrag(e);
|
||||||
|
}, this.center);
|
||||||
|
|
||||||
|
window.ion.onGesture('drag', function(e) {
|
||||||
|
_this._handleDrag(e);
|
||||||
|
}, this.center);
|
||||||
|
};
|
||||||
|
|
||||||
|
ion.controllers.LeftRightPanelViewController.prototype = {
|
||||||
|
setIsLeftEnabled: function(isLeftEnabled) {
|
||||||
|
this._isLeftEnabled = isLeftEnabled;
|
||||||
|
},
|
||||||
|
setIsRightEnabled: function(isRightEnabled) {
|
||||||
|
this._isRightEnabled = isRightEnabled;
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
|
||||||
|
// Check if we can move to that side, depending if the left/right panel is enabled
|
||||||
|
if((!this._isLeftEnabled && amount > 0) || (!this._isRightEnabled && amount < 0)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(this, document, ion = this.ion || {});
|
||||||
Reference in New Issue
Block a user