feat: ion side menu opening on ion slide box sliding

Type: feat

Platform: ios 8 webview

Hi,

I just found a bug that i'd like to share a tutorial for those who are facing the same problem (and please, solve this problem on the next version):

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: '

' + '

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(''); $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); }

ionic-team / ionic-framework

feat: ion side menu opening on ion slide box sliding #4487