Hammer.js - Swipe in an off canvas element?

I'm using the plugin offCanvasMenu to basically do what the plugin says.. hide and show an off canvas menu which works fine as a click event but I'm trying to integrate hammer.js so the menu will hide/show on a right swipe

So I've got this:

(function() {
    jQuery(function() {
        var $, configureMenus, menu, menuTrigger;

        $ = jQuery;
        menuTrigger = $('#menu-trigger');
        menu = $.offCanvasMenu({
            direction: 'right',
            coverage: '85%'
        });
        (configureMenus = function(display) {
            switch (display) {
                case 'block':
                menu.on();
                break;
                case 'none':
                menu.off();
                break;
                default:
                return;
            }
        })(menuTrigger.css('display'));
        menuTrigger.csswatch({
            props: 'display'
        }).on('css-change', function(event, change) {
            return configureMenus(change.display);
        });
    });
}).call(this);

I thought pasting the above into the following would have worked?

window.addEventListener('load', function() { 
    var element = document.getElementById('body');
    var hammertime = Hammer(element).on("swipe", function(event) {
        //here
    })
}, false);

But I haven't been able to call it in correctly, just wondering if anyone knows how to do this?

If it helps the basic markup is something like

<body id="body">
    <div id="menu-trigger" class="panel-arrow right"><a href="#menu">click me</a></div>

    <div id="menu" class="right-panel panel">
        <p>off canvas menu</p>
    </div>
</body>

Thanks!

Solution

It should go the other way around. Add the swipe event listener into the first block of code. And where your second block says //here, you should do something like menu.toggle().