ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.94k stars 13.52k forks source link

Using the ion-slide sometimes causes the ion-side-menu to open. To simulate issue... #1687

Closed MarcinCebula closed 10 years ago

MarcinCebula commented 10 years ago

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.

perrygovier commented 10 years ago

Hey @MarcinCebula does this demonstrate what you are seeing? http://codepen.io/perrygovier/pen/LcECJ

ajoslin commented 10 years ago

Try using the new edge-drag-threshold attribute in the nightly build. http://ionicframework.com/docs/nightly/api/directive/ionSideMenuContent/

raulvbrito commented 8 years ago

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); }