metismenu Feature: add cookie for menu state

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

Jun 03 '14 18:06 lenamtl

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

Jun 03 '14 20:06 onokumus

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);

Jun 12 '14 02:06 valgen

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?

Jun 25 '14 09:06 zaki1

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.

Jun 28 '14 02:06 valgen

Great feature added ;) thanks

Nov 04 '14 02:11 mwinandy

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

Dec 18 '14 10:12 rygel

@valgen Thanks! Works great.

Jan 12 '15 19:01 FreeAsInBeer

Thanks

Jan 13 '15 14:01 lenamtl

Works great. Why it's not in master?

Mar 27 '15 10:03 imshenitsky

I would like to see this in master perhaps 2.0.1 ASAP

Apr 08 '15 04:04 mteichtahl

+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?

May 05 '15 19:05 lenamtl

You will need to patch this manually.

Sent from my iPhone

On 6 May 2015, at 05:04, lenamtl [email protected] 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.

May 05 '15 21:05 mteichtahl

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

Thanks!