openproject/app/assets/javascripts/specific/main_menu.js.erb

<%#-- copyright
OpenProject is a project management system.
Copyright (C) 2012-2014 the OpenProject Foundation (OPF)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License version 3.

OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
Copyright (C) 2006-2013 Jean-Philippe Lang
Copyright (C) 2010-2013 the ChiliProject Team

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

See doc/COPYRIGHT.rdoc for more details.

++#%>

function setExpandStatus(expanderObject) {
  var expander = jQuery(expanderObject);
  var menuItemWrapper = jQuery(expander).parent();
  var expanded = jQuery(menuItemWrapper).hasClass('open');
  var span = expander.find('span.hidden-for-sighted');
  var title = expanded ? I18n.t('js.label_menu_collapse') : I18n.t('js.label_menu_expand');

  expander.attr('title', title);
  span.text(title);
}

function initMainMenuExpandStatus() {
  jQuery('#main-menu .toggler').each(function(index) {
    var menu_expander = jQuery(this);
    var menu_item = menu_expander.closest('li').find('a.selected');

    if (menu_item.length == 1) {
      menu_expander.trigger('click');
    } else {
      setExpandStatus(menu_expander);
    }
  });
}

jQuery(document).ready(function($) {
  // rejigger the main-menu sub-menu functionality.
  $("#main-menu .toggler").remove(); // remove the togglers so they're inserted properly later.

  var toggler = $('<a class="toggler" href="#"><span class="icon6 icon-toggler icon-arrow-right5-2"/><span class="hidden-for-sighted"></span></a>')
    .click(function(event) {
      var target = $(this);

      if (target.hasClass('toggler')) {
        var menuItemWrapper = target.parent();
        var menuParent = menuItemWrapper.toggleClass('open').parent().find('ul').not('ul ul ul');

        menuParent.mySlide();
        if (menuItemWrapper.hasClass('open')) {
          menuParent.show();
          menuParent.find('li > a:first').focus();
        } else {
          menuParent.hide();
        }

        setExpandStatus(target);
      }
      return false;
    });

  // wrap main items
  var mainItems = $('#main-menu li > a').not('ul ul a');

  function getMainItemWrapper(index) {
    var item = mainItems[index];
    var elementId = item.id;

    var wrapperElement = $('<div class="main-item-wrapper"/>')

    // inherit element id
    if(elementId) {
      wrapperElement.attr('id', elementId + '-wrapper')
    }

    return wrapperElement;
  }

  mainItems.wrap(getMainItemWrapper)

  $('#main-menu li:has(ul) .main-item-wrapper > a').not('ul ul a')
    // 1. unbind the current click functions
    .unbind('click')
    // 2. wrap each in a span that we'll use for the new click element
    .wrapInner('<span class="ellipsis"/>')
    // 3. reinsert the <span class="toggler"> so that it sits outside of the above
    .after(toggler);

  // project menu

  // Users of some old IEs are out of luck ATM. A userData implementation
  // could be provided though, that would be great!
  var remember_menu_state;

  if (typeof window.sessionStorage !== 'undefined') {
    remember_menu_state = function (match) {
      if (typeof match === 'undefined') {
        return sessionStorage.getItem('openproject:navigation-toggle');
      } else {
        return sessionStorage.setItem('openproject:navigation-toggle',
                                      match.length > 0 ? 'collapsed' : 'expanded');
      }
    };
  }
  else {
    remember_menu_state = function (match) {
      return false;
    };
  }

  var toggle_navigation = function() {
    $('#wrapper').toggleClass('hidden-navigation');
    $('#content, #breadcrumb').toggleClass('hidden-navigation');
    $('#toggle-project-menu').removeAttr("style").toggleClass('show');
    remember_menu_state($('#toggle-project-menu.show'));
  };

  // register toggler, and toggle for the first time if remembered to be closed.
  jQuery('#toggle-project-menu .navigation-toggler').click(toggle_navigation);
  if ($('#main-menu').length > 0 && remember_menu_state() === "collapsed") {
    toggle_navigation();
  }

});