CODEWITHSUNDEEP
angularjsonsen-ui
Mahmoud Farahat
Mahmoud Farahat

Reputation: 5475

override "ons-sliding-menu" swipe behavior when using "ons-gesture-detector"

i'm making a quick demo on using "ons-gesture-detector" , i have a "ons-sliding-menu" which is swipable from the left side , so if i put for example a "ons-list-item" contained in a "ons-gesture-detector"

when i swipe left it works fine , but when i swipe right it fires ng-swiperight but also opens the sliding menu.

so what i want to do is to override opening side menu when i do "ng-swiperight"

here is a code sample:

<ons-sliding-menu menu-page="menu.html" main-page="balance.html" side="left"
              var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-list ng-controller="testController">
    <ons-gesture-detector ng-swipeleft="sayAlert('left')" ng-swiperight="sayAlert('right')">
        <ons-list-item ng-click="showPopup('list.html')" modifier="tappable">
            <center>
                List
                <br />
                List
                List
                <br />
                List
            </center>
        </ons-list-item>
    </ons-gesture-detector>
    <ons-gesture-detector ng-swipeleft="sayAlert('left')" ng-swiperight="sayAlert('right')">
        <ons-list-item ng-click="showPopup('list.html')" modifier="tappable">
            <center>
                List
                <br />
                List
                List
                <br />
                List
            </center>
        </ons-list-item>
    </ons-gesture-detector>
</ons-list>

Edit: i've tried to add "swipe-target-width" with a small value to the "ons-sliding-menu" but this disabled the swipeleft and swiperight events at all

Upvotes: 0

Views: 716

Answers (1)

Andreas Argelius
Andreas Argelius

Reputation: 3614

You can stop event propagation from the <ons-gesture-detector> element.

In this example I use the 'mousemove' event since I tried it on PC, however for a mobile device you should use the 'touchmove' event instead (or both).

ons.ready(function() {
  var gestureDetector = document.querySelector('ons-gesture-detector');

  gestureDetector.addEventListener('mousemove', function(ev) {
    ev.stopPropagation();
  });
});

I made an example on Codepen: http://codepen.io/argelius/pen/GgWYBj

Upvotes: 1

Related Questions