Mango/slideout

Multiple sides

fortael opened this issue · 4 comments

fortael commented

With this library possible to do menu on both sides? Because i can't.
2 problems:

  • Swipe event working wrong with 2 sides. Maybe possible to handle that event by myself?
  • Both menus are visible

Will be useful if there would be mod for <html> tag.
slideout-open slideout-open--left
slideout-open slideout-open--right

It will be very painful for my project to change library to another one.
Thanks for any answer.

siddarthvader commented

did you find any solution? Because I have the same issue. @fortael

fortael commented

@siddarthvader Yes...more or less. The main problem with events, that both sides are exists. If you'll try to hide second one with display:none then laggs on closing.

.slideout-open--right .slideout-menu-left {
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

Try hide second one in this way. Then listen beforeopen.

.slideout-open--right will hide .slideout-menu-left. If you will open it very slow with swipe, then you will see left menu for a moment. For this i have only idea - use hammer.js to handle events by myself.

But for now at least both works okay.

  • 👍1
siddarthvader commented

worked like charm. Thanks.

[EDITED]: there are some edge cases where it creates problem, but i think that can be taken care of.

siddarthvader commented 
slideLeft.on('open', () => {
    document.getElementById('kickstart').classList.add('slideout-open--left');
    slideRight.disableTouch();
});

  slideLeft.on('close', () => {
     document.getElementById('kickstart').classList.remove('slideout-open--left');
    slideRight.enableTouch();
});


slideRight.on('open', () => {
     document.getElementById('kickstart').classList.add('slideout-open--right');        
    slideLeft.disableTouch();
});

slideRight.on('close', () => {
     document.getElementById('kickstart').classList.remove('slideout-open--right');
     slideLeft.enableTouch();
});`

I did something like this and it worked for me like charm.