mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
126 lines
4.0 KiB
JavaScript
126 lines
4.0 KiB
JavaScript
/**
|
|
* @ngdoc directive
|
|
* @name ionSideMenuContent
|
|
* @module ionic
|
|
* @restrict E
|
|
* @parent ionic.directive:ionSideMenus
|
|
*
|
|
* @description
|
|
* A container for the main visible content, sibling to one or more
|
|
* {@link ionic.directive:ionSideMenu} directives.
|
|
*
|
|
* @usage
|
|
* ```html
|
|
* <ion-side-menu-content
|
|
* drag-content="true">
|
|
* </ion-side-menu-content>
|
|
* ```
|
|
* For a complete side menu example, see the
|
|
* {@link ionic.directive:ionSideMenus} documentation.
|
|
*
|
|
* @param {boolean=} drag-content Whether the content can be dragged. Default true.
|
|
*
|
|
*/
|
|
IonicModule
|
|
.directive('ionSideMenuContent', [
|
|
'$timeout',
|
|
'$ionicGesture',
|
|
function($timeout, $ionicGesture) {
|
|
|
|
return {
|
|
restrict: 'EA', //DEPRECATED 'A'
|
|
require: '^ionSideMenus',
|
|
scope: true,
|
|
compile: function(element, attr) {
|
|
return { pre: prelink };
|
|
function prelink($scope, $element, $attr, sideMenuCtrl) {
|
|
|
|
$element.addClass('menu-content pane');
|
|
|
|
if (angular.isDefined(attr.dragContent)) {
|
|
$scope.$watch(attr.dragContent, function(value) {
|
|
sideMenuCtrl.canDragContent(value);
|
|
});
|
|
} else {
|
|
sideMenuCtrl.canDragContent(true);
|
|
}
|
|
|
|
var defaultPrevented = false;
|
|
var isDragging = false;
|
|
|
|
// Listen for taps on the content to close the menu
|
|
function contentTap(e) {
|
|
if(sideMenuCtrl.getOpenAmount() !== 0) {
|
|
sideMenuCtrl.close();
|
|
e.gesture.srcEvent.preventDefault();
|
|
}
|
|
}
|
|
ionic.on('tap', contentTap, $element[0]);
|
|
|
|
var dragFn = function(e) {
|
|
if(defaultPrevented || !sideMenuCtrl.isDraggableTarget(e)) return;
|
|
isDragging = true;
|
|
sideMenuCtrl._handleDrag(e);
|
|
e.gesture.srcEvent.preventDefault();
|
|
};
|
|
|
|
var dragVertFn = function(e) {
|
|
if(isDragging) {
|
|
e.gesture.srcEvent.preventDefault();
|
|
}
|
|
};
|
|
|
|
//var dragGesture = Gesture.on('drag', dragFn, $element);
|
|
var dragRightGesture = $ionicGesture.on('dragright', dragFn, $element);
|
|
var dragLeftGesture = $ionicGesture.on('dragleft', dragFn, $element);
|
|
var dragUpGesture = $ionicGesture.on('dragup', dragVertFn, $element);
|
|
var dragDownGesture = $ionicGesture.on('dragdown', dragVertFn, $element);
|
|
|
|
var dragReleaseFn = function(e) {
|
|
isDragging = false;
|
|
if(!defaultPrevented) {
|
|
sideMenuCtrl._endDrag(e);
|
|
}
|
|
defaultPrevented = false;
|
|
};
|
|
|
|
var releaseGesture = $ionicGesture.on('release', dragReleaseFn, $element);
|
|
|
|
sideMenuCtrl.setContent({
|
|
onDrag: function(e) {},
|
|
endDrag: function(e) {},
|
|
getTranslateX: function() {
|
|
return $scope.sideMenuContentTranslateX || 0;
|
|
},
|
|
setTranslateX: ionic.animationFrameThrottle(function(amount) {
|
|
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + amount + 'px, 0, 0)';
|
|
$timeout(function() {
|
|
$scope.sideMenuContentTranslateX = amount;
|
|
});
|
|
}),
|
|
enableAnimation: function() {
|
|
//this.el.classList.add(this.animateClass);
|
|
$scope.animationEnabled = true;
|
|
$element[0].classList.add('menu-animated');
|
|
},
|
|
disableAnimation: function() {
|
|
//this.el.classList.remove(this.animateClass);
|
|
$scope.animationEnabled = false;
|
|
$element[0].classList.remove('menu-animated');
|
|
}
|
|
});
|
|
|
|
// Cleanup
|
|
$scope.$on('$destroy', function() {
|
|
$ionicGesture.off(dragLeftGesture, 'dragleft', dragFn);
|
|
$ionicGesture.off(dragRightGesture, 'dragright', dragFn);
|
|
$ionicGesture.off(dragUpGesture, 'dragup', dragFn);
|
|
$ionicGesture.off(dragDownGesture, 'dragdown', dragFn);
|
|
$ionicGesture.off(releaseGesture, 'release', dragReleaseFn);
|
|
ionic.off('tap', contentTap, $element[0]);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
}]);
|