Allow opening menu by swiping from only far left/right

[swelther]

I had issues with the swipe slideout when there is a horizontal scrolling div, see issue #58 and issue #59.

This PR is based on PR #10 which has been closed and is no longer available.

It works for me. Any enhancements or ideas are welcome.

Would like to see this been merged :)

[tbleckert]

This would be very useful! +1

[garygreen]

@pazguille any news on this? I'm currently maintaining a separate fork just to have this kind of feature, bit a pain tbh.

As I reported in issue #59 it will be good to have some form of dragWidth which only allows opening the menu within the given width from the left / right side of the screen. This is critical when you have horizontal scrolling things like carousels, or overflow stuff on the page. At the moment its causing the menu to open when scrolling.

I know you can can get around this by using the beforeOpen events and detect whether to open or not based on the currentTarget etc, but that's a real pain and much harder than it needs to be.

[mauron85]

+1

[migburillo]

+1

[jamalx31]

+1

[cdeeter]

+1

[stefenphelps]

+1

[Sandidro]

+1 + 1 +1

[Jarzon]

I needed that feature to mimic native mobile apps menu.

Since I didn't want to maintain a fork I used the following code to update slideout._preventOpen. I reused _tolerance for the size of the padding, since it was so tiny.

let panel = document.getElementById('panel');

let slideout = new Slideout({
    'panel': panel,
    'menu': document.getElementById('sideMenu'),
    'padding': 256,
    'tolerance': 50
});

panel.addEventListener('touchstart', function(eve) {
    let offset = eve.touches[0].pageX;

    if (slideout._orientation !== 1) {
        offset = window.innerWidth - offset;
    }

    slideout._preventOpen = slideout._preventOpen || (offset > slideout._tolerance && !slideout.isOpen());
});