Feature: add cookie for menu state

[lenamtl]

Are you planning to add a way to remember menu state using cookie
or localstrorage?

[onokumus]

@lenamtl
I'm not planning to this in near future.

[valgen]

I have added a basic cookie support as I needed it for my open source CMS (http://www.mvcwcms.com).

If you have more than one menu in a single page you need to specify the cookieName attribute as in the following example:

        $('#menu').metisMenu({
            cookieName: "MetisMenuState1"
        });
        $('#menu2').metisMenu({
            toggle: false,
            cookieName: "MetisMenuState2"
        });

This is the modified plugin:

;(function ($, window, document, undefined) {

    var pluginName = "metisMenu",
        defaults = {
            toggle: true,
            cookieName: "MetisMenuState"
        };

    function Plugin(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {
        init: function () {

            var $this = $(this.element),
                $toggle = this.settings.toggle,
                $cookieName = this.settings.cookieName;

            //Restores the menu state from cookies
            var documentCookie = document.cookie;
            $this.find('li').has('ul').each(function (i) {
                var pos = documentCookie.indexOf($cookieName + "_" + i + "=");
                if (pos > -1) {
                    documentCookie.substr(pos).split('=')[1].indexOf('false') ? $(this).addClass('active') : $(this).removeClass('active');
                }
            });

            if (this.isIE() <= 9) {
                $this.find('li.active').has('ul').children('ul').collapse('show');
                $this.find('li').not('.active').has('ul').children('ul').collapse('hide');
            } else {
                $this.find('li.active').has('ul').children('ul').addClass('collapse in');
                $this.find('li').not('.active').has('ul').children('ul').addClass('collapse');
            }

            $this.find('li').has('ul').children('a').on('click', function (e) {
                e.preventDefault();

                $(this).parent('li').toggleClass('active').children('ul').collapse('toggle');

                if ($toggle) {
                    $(this).parent('li').siblings().removeClass('active').children('ul.in').collapse('hide');
                }

                //Stores the menu state in cookies
                $this.find('li').has('ul').each(function (i) {
                    document.cookie = $cookieName + "_" + i + "=" + $(this).hasClass('active');
                });
            });
        },

        isIE: function() {//https://gist.github.com/padolsey/527683
            var undef,
                v = 3,
                div = document.createElement('div'),
                all = div.getElementsByTagName('i');

            while (
                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]
            );
            return v > 4 ? v : undef;
        }
    };

    $.fn[ pluginName ] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };

})(jQuery, window, document);

[zaki1]

I have two or more menus as below :

• Manage Artists
  • Add Artist
  • All Artists
• Manage Lyric
  • Add Lyrics
  • All Lyrics

And as you suggested I am giving each menu an id and passing a cookie name :

 
        (function ($) {
         $('#artistMenu').metisMenu({
                cookieName: "MetisMenuState1"
            });
            $('#lyricsMenu').metisMenu({
                toggle: false,
                cookieName: "MetisMenuState2"
            });
        })(jQuery);

But when I click on "Add Artist" sub menu the first time it is fine, then open "Manage lyrics" and click on "All lyrics" the view changes but menu would be still "Add Lyrics"...if I click once more it seems to be fine..any solutions?

[valgen]

I have fixed the above issue by adding a cookie expiration.

Change has been submitted here: https://github.com/onokumus/metisMenu/pull/10/files

Now you can also specify the cookieExpiration (number of days) that by default is 1.

[mwinandy]

Great feature added ;) thanks

[rygel]

@valgen thanks for the great feature.
@onokumus please add this to your release.

[FreeAsInBeer]

@valgen Thanks! Works great.

[lenamtl]

Thanks

[imshenitsky]

Works great. Why it's not in master?

[mteichtahl]

I would like to see this in master perhaps 2.0.1 ASAP

[lenamtl]

+1 Yes please add it to the latest version.

I'm trying to use this code with the actual JS code but the JS code is different, anyone have done the modification yet?

[mteichtahl]

You will need to patch this manually.

Sent from my iPhone

On 6 May 2015, at 05:04, lenamtl notifications@github.com wrote:

+1 Yes please add it to the latest version.

I'm trying to use this code with the actual JS code but the JS code is different, anyone have done the modification yet?

—
Reply to this email directly or view it on GitHub.

[Webkungen]

Any change someone can add the feature to "find" the current selected item by location/url rather than with cookies?

Thanks!

[amastaneh]

+1

[3xxx]

how to use this plugin?

[esfomeado]

Any update?