Closed MarcinCebula closed 10 years ago
Hey @MarcinCebula does this demonstrate what you are seeing? http://codepen.io/perrygovier/pen/LcECJ
Try using the new edge-drag-threshold
attribute in the nightly build. http://ionicframework.com/docs/nightly/api/directive/ionSideMenuContent/
find this part of code inside your ionic.bundle.js:
.directive('ionSlideBox', [ '$timeout', '$compile', '$ionicSideMenuDelegate', '$ionicSlideBoxDelegate', '$ionicHistory', '$ionicScrollDelegate', function($timeout, $compile, $ionicSideMenuDelegate, $ionicSlideBoxDelegate, $ionicHistory, $ionicScrollDelegate) { return { restrict: 'E', replace: true, transclude: true, scope: { autoPlay: '=', doesContinue: '@', slideInterval: '@', showPager: '@', pagerClick: '&', disableScroll: '@', onSlideChanged: '&', activeSlide: '=?' }, controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { var _this = this;
var continuous = $scope.$eval($scope.doesContinue) === true;
var shouldAutoPlay = isDefined($attrs.autoPlay) ? !!$scope.autoPlay : false;
var slideInterval = shouldAutoPlay ? $scope.$eval($scope.slideInterval) || 4000 : 0;
var slider = new ionic.views.Slider({
el: $element[0],
auto: slideInterval,
continuous: continuous,
startSlide: $scope.activeSlide,
slidesChanged: function() {
$scope.currentSlide = slider.currentIndex();
// Try to trigger a digest
$timeout(function() {});
},
callback: function(slideIndex) {
$scope.currentSlide = slideIndex;
$scope.onSlideChanged({ index: $scope.currentSlide, $index: $scope.currentSlide});
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
$scope.activeSlide = slideIndex;
// Try to trigger a digest
$timeout(function() {});
},
//Author: Raul
//Add a restrition for dragging menu while dragging slide
onDrag: function() {
$ionicSideMenuDelegate.canDragContent(false);
freezeAllScrolls(true);
},
onDragEnd: function() {
$ionicSideMenuDelegate.canDragContent(true);
freezeAllScrolls(false);
}
});
function freezeAllScrolls(shouldFreeze) {
if (shouldFreeze && !_this.isScrollFreeze) {
$ionicScrollDelegate.freezeAllScrolls(shouldFreeze);
} else if (!shouldFreeze && _this.isScrollFreeze) {
$ionicScrollDelegate.freezeAllScrolls(false);
}
_this.isScrollFreeze = shouldFreeze;
}
slider.enableSlide($scope.$eval($attrs.disableScroll) !== true);
$scope.$watch('activeSlide', function(nv) {
if (isDefined(nv)) {
slider.slide(nv);
}
});
$scope.$on('slideBox.nextSlide', function() {
slider.next();
});
$scope.$on('slideBox.prevSlide', function() {
slider.prev();
});
$scope.$on('slideBox.setSlide', function(e, index) {
slider.slide(index);
});
//Exposed for testing
this.__slider = slider;
var deregisterInstance = $ionicSlideBoxDelegate._registerInstance(
slider, $attrs.delegateHandle, function() {
return $ionicHistory.isActiveScope($scope);
}
);
$scope.$on('$destroy', function() {
deregisterInstance();
slider.kill();
});
this.slidesCount = function() {
return slider.slidesCount();
};
this.onPagerClick = function(index) {
void 0;
$scope.pagerClick({index: index});
};
$timeout(function() {
slider.load();
});
}],
template: '<div class="slider">' +
'<div class="slider-slides" ng-transclude>' +
'</div>' +
'</div>',
link: function($scope, $element, $attr) {
// if showPager is undefined, show the pager
if (!isDefined($attr.showPager)) {
$scope.showPager = true;
getPager().toggleClass('hide', !true);
}
$attr.$observe('showPager', function(show) {
if (show === undefined) return;
show = $scope.$eval(show);
getPager().toggleClass('hide', !show);
});
var pager;
function getPager() {
if (!pager) {
var childScope = $scope.$new();
pager = jqLite('<ion-pager></ion-pager>');
$element.append(pager);
pager = $compile(pager)(childScope);
}
return pager;
}
}
}; }])
and add the following:
'$ionicSideMenuDelegate', in
.directive('ionSlideBox', [ '$timeout', '$compile', '$ionicSideMenuDelegate', '$ionicSlideBoxDelegate', '$ionicHistory', '$ionicScrollDelegate',
$ionicSideMenuDelegate in
function($timeout, $compile, $ionicSideMenuDelegate, $ionicSlideBoxDelegate, $ionicHistory, $ionicScrollDelegate) {
$ionicSideMenuDelegate.canDragContent(false); in
onDrag: function() { $ionicSideMenuDelegate.canDragContent(false); freezeAllScrolls(true); },
$ionicSideMenuDelegate.canDragContent(true); in
onDragEnd: function() { $ionicSideMenuDelegate.canDragContent(true); freezeAllScrolls(false); }
To simulate the issue you need have a app with a ion-side-menu and ion-slide-box.
Touch and swipe the ion-slide to the left of right and quickly before the animation has time to go back to original state, click on the ion-slide again. This time you will be opening the ion-nav-bar, instead of moving the ion-slide.