Mmenu actions are not triggering

[chrisblakley]

mm.opening mm.closing etc

Are not triggering anything inside of their functions. I didn't change anything to this, so I have no idea why it just stopped... There are no console errors either.

You can tell because the "hamburger" icon does not turn into an "X" when mmenu is active.

[chrisblakley]

Just checked this on another server and it's also broken there :( Which means this needs to escalate to super duper high priority.

If you narrow your viewport until the hamburger icon appears in the upper right, click it. The main area should shade and the hamburger icon is supposed to turn into an "X". The issue is in main.js (or at least that is the initial location). Check the function mmenus().

https://github.com/chrisblakley/WP-Nebula/blob/master/js/main.js#L650-L661

@jefphg @PHGterence @phgjoe

[chrisblakley]

The answer is somewhere in here: http://mmenu.frebsite.nl/documentation/api.html

"opening.mm" and other events were deprecated as of 5.0

[chrisblakley]

Ok, got it. Please replace the mmenus() function with the following:

function mmenus() {
    if ( 'mmenu' in jQuery ) {
        jQuery("#mobilenav").mmenu({
            //Options
            "offCanvas": {
                "zposition": "back", //"back" (default), "front", "next"
                "position": "left" //"left" (default), "right", "top", "bottom"
            },
            "searchfield": { //This is for searching through the menu itself (NOT for site search)
                "add": true,
                "search": true,
                "placeholder": 'Search',
                "noResults": "No navigation items found.",
                "showLinksOnly": false //"true" searches only <a> links, "false" includes spans in search results. //@TODO "Nebula" 0: The option "searchfield.showLinksOnly" is deprecated as of version 5.0, use "!searchfield.showTextItems" instead.
            },
            "counters": true, //Display count of sub-menus
            "extensions": ["theme-light", "effect-slide-menu", "pageshadow"] //Theming, effects, and other extensions
        }, {
            //Configuration
            "classNames": {
                "selected": "current-menu-item"
            }
        });

        jQuery("#mobilenav").data('mmenu').bind('opening', function(){
            //When mmenu has started opening
            jQuery('a.mobilenavtrigger i').removeClass('fa-bars').addClass('fa-times');
        }).bind('opened', function(){
            //After mmenu has finished opening
            history.replaceState(null, document.title, location);
            history.pushState(null, document.title, location);
        }).bind('closing', function(){
            //When mmenu has started closing
            jQuery('a.mobilenavtrigger i').removeClass('fa-times').addClass('fa-bars');
        }).bind('closed', function(){
            //After mmenu has finished closing
        });

        jQuery('.mm-search input').wrap('<form method="get" action="' + bloginfo['home_url'] + '"></form>').attr('name', 's');
        jQuery('.mm-search input').on('keyup', function(){
            if ( jQuery(this).val().length > 0 ) {
                jQuery('.clearsearch').removeClass('hidden');
            } else {
                jQuery('.clearsearch').addClass('hidden');
            }
        });
        jQuery('.mm-panel').append('<div class="clearsearch hidden"><strong class="doasitesearch">Press enter to search the site!</strong><br/><a href="#"><i class="fa fa-times-circle"></i>Reset Search</a></div>');
        jQuery(document).on('click touch tap', '.clearsearch a', function(){
            jQuery('.mm-search input').val('').keyup();
            jQuery('.clearsearch').addClass('hidden');
            return false;
        });

        //Close mmenu on back button click
        if (window.history && window.history.pushState) {
            window.addEventListener("popstate", function(e) {
                if ( jQuery('html.mm-opened').is('*') ) {
                    jQuery(".mm-menu").trigger("close.mm");
                    e.stopPropagation();
                }
            }, false);
        }
    }
} //end mmenus()

[chrisblakley]

Just updating this since I came across it in my own Google search. The events have changed again. Here's an update:

if ( mobileNav.length ){
    mobileNav.data('mmenu').bind('open:start', function(){
        //When mmenu has started opening
        mobileNavTriggerIcon.removeClass('fa-bars').addClass('fa-times');
        jQuery('[data-toggle="tooltip"]').tooltip('hide');
        nebulaTimer('mmenu', 'start');
    }).bind('open:finish', function(){
        //After mmenu has finished opening
        history.replaceState(null, document.title, location);
        history.pushState(null, document.title, location);
    }).bind('close:start', function(){
        //When mmenu has started closing
        mobileNavTriggerIcon.removeClass('fa-times').addClass('fa-bars');
        ga('send', 'timing', 'Mmenu', 'Closed', Math.round(nebulaTimer('mmenu', 'lap')), 'From opening mmenu until closing mmenu');
    }).bind('close:finish', function(){
        //After mmenu has finished closing
    });
}   

What I find odd is that .bind() still works, but .on() does not for these events...