How do I set different mmenu options by screen size?

Question

I'm using mmenu (http://mmenu.frebsite.nl) to create my mobile menu. I implement my jQuery code like this :

 $('.mobile-menu .menu-block-wrapper').attr('id', 'menu-left');
 $('.mobile-menu .menu-block-wrapper').mmenu({
     configuration: {
         selectedClass: "active",
         menuNodetype: "div",
     },  
     dragOpen : { 
         open: false,
         threshold  : 100 
     }   
 }); 
 $(".mobile-menu-trigger").trigger("open");

I'd like, when my browser window is less than, say, 720px, to set dragOpen to true, and when I switch back to a normal resolution, to set it back to false.

Any help is greatly appreciated.

Thanks

Answer 1

The plugin initializes the dragging when it is fired. So you can't update the option after the plugin has been fired.

I guess you could bind a function to the dragleft, dragright, dragup and dragdown events that measures the browser width and, if larger than 720px, prevents propagation. Something like this:

$("#page").on("dragleft dragright dragup dragdown", function( event ) {
    if ( $(window).width() > 720 ) {
        event.stopImmediatePropagation();
        event.gesture.stopImmediatePropagation();
    } else {
        // the plugin will fire its events bound to dragleft/dragright/dragup/dragdown
    }
});
$('.mobile-menu .menu-block-wrapper').mmenu({
    drag: {
        open: true,
        treshold: 100
    }
});

Not sure if this will work though, having seen this issue with hammer.js: https://github.com/EightMedia/hammer.js/issues/333