//-- copyright // OpenProject is a project management system. // Copyright (C) 2012-2017 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-2017 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 ($, undefined) { "use strict"; function TopMenu (menu_container) { this.menu_container = $(menu_container); this.setup(menu_container); } TopMenu.prototype = $.extend(TopMenu.prototype, { setup: function () { var self = this; this.hover = false; this.menuIsOpen = false; this.withHeadingFoldOutAtBorder(); this.setupDropdownHoverAndClick(); this.registerEventHandlers(); this.closeOnBodyClick(); this.accessibility(); }, accessibility: function () { $(".drop-down > ul").attr("aria-expanded","false"); }, toggleClick: function (dropdown) { if (this.menuIsOpen) { if (this.isOpen(dropdown)) { this.closing(); } else { this.open(dropdown); } } else { this.opening(); this.open(dropdown); } }, // somebody opens the menu via click, hover possible afterwards opening: function () { this.startHover(); this.menuIsOpen = true; this.menu_container.trigger("openedMenu", this.menu_container); }, // the entire menu gets closed, no hover possible afterwards closing: function () { this.stopHover(); this.closeAllItems(); this.menuIsOpen = false; this.menu_container.trigger("closedMenu", this.menu_container); }, stopHover: function () { this.hover = false; this.menu_container.removeClass("hover"); }, startHover: function () { this.hover = true; this.menu_container.addClass("hover"); }, closeAllItems: function () { var self = this; this.openDropdowns().each(function (ix, item) { self.close($(item)); }); }, closeOnBodyClick: function () { var self = this; $('html').click(function() { if (self.menuIsOpen) { self.closing(); } }); }, openDropdowns: function () { return this.dropdowns().filter(".open"); }, dropdowns: function () { return this.menu_container.find("li.drop-down"); }, withHeadingFoldOutAtBorder: function () { var menu_start_position; if (this.menu_container.next().get(0) != undefined && (this.menu_container.next().get(0).tagName == 'H2')){ menu_start_position = this.menu_container.next().innerHeight() + this.menu_container.next().position().top; this.menu_container.find("ul.menu-drop-down-container").css({ top: menu_start_position }); } else if(this.menu_container.next().hasClass("wiki-content") && this.menu_container.next().children().next().first().get(0) != undefined && this.menu_container.next().children().next().first().get(0).tagName == 'H1'){ var wiki_heading = this.menu_container.next().children().next().first(); menu_start_position = wiki_heading.innerHeight() + wiki_heading.position().top; this.menu_container.find("ul.menu-drop-down-container").css({ top: menu_start_position }); } }, setupDropdownHoverAndClick: function () { var self = this; this.dropdowns().each(function (ix, it) { $(it).click(function () { self.toggleClick($(this)); return false; }); $(it).hover(function() { // only do something if the menu is in hover mode // AND the dropdown we hover on is not currently open anyways if (self.hover && self.isClosed($(this))) { self.open($(this)); } }); $(it).on('touchstart', function(e) { // This shall avoid the hover event is fired, // which would otherwise lead to menu being closed directly after its opened. // Ignore clicks from within the dropdown if ($(e.target).closest('.menu-drop-down-container').length) { return true; } e.preventDefault(); $(this).click(); return false; }); }); }, isOpen: function (dropdown) { return dropdown.filter(".open").length == 1; }, isClosed: function (dropdown) { return !this.isOpen(dropdown); }, open: function (dropdown) { this.dontCloseWhenUsing(dropdown); this.closeOtherItems(dropdown); this.slideAndFocus(dropdown, function() { dropdown.trigger("opened", dropdown); }); }, close: function (dropdown, immediate) { this.slideUp(dropdown, immediate); dropdown.trigger("closed", dropdown); }, closeOtherItems: function (dropdown) { var self = this; this.openDropdowns().each(function (ix, it) { if ($(it) != $(dropdown)) { self.close($(it), true); } }); }, dontCloseWhenUsing: function (dropdown) { $(dropdown).find("li").click(function (event) { event.stopPropagation(); }); $(dropdown).bind("mousedown mouseup click", function (event) { event.stopPropagation(); }); }, slideAndFocus: function (dropdown, callback) { this.slideDown(dropdown, callback); this.focusFirstInputOrLink(dropdown); }, slideDown: function (dropdown, callback) { var toDrop = dropdown.find("> ul"); dropdown.addClass("open"); toDrop.slideDown(animationRate, callback).attr("aria-expanded","true"); }, slideUp: function (dropdown, immediate) { var toDrop = $(dropdown).find("> ul"); dropdown.removeClass("open"); if (immediate) { toDrop.hide(); } else { toDrop.slideUp(animationRate); } toDrop.attr("aria-expanded","false"); }, // If there is ANY input, it will have precedence over links, // i.e. links will only get focussed, if there is NO input whatsoever focusFirstInputOrLink: function (dropdown) { var toFocus = dropdown.find("ul :input:visible:first"); if (toFocus.length == 0) { toFocus = dropdown.find("ul a:visible:first"); } // actually a simple focus should be enough. // The rest is only there to work around a rendering bug in webkit (as of Oct 2011), // occuring mostly inside the login/signup dropdown. toFocus.blur(); setTimeout(function() { toFocus.focus(); }, 10); }, registerEventHandlers: function () { var self = this; this.menu_container.on("closeDropDown", function (event) { self.close($(event.target)); }).on("openDropDown", function (event) { self.open($(event.target)); }).on("closeMenu", function () { self.closing(); }).on("openMenu", function () { self.open(self.dropdowns().first()); self.opening(); }); } }); // this holds all top menus currently active. // if one opens, all others are closed. var top_menus = []; $.fn.top_menu = function () { var new_menu; $(this).each(function () { new_menu = new TopMenu($(this)); top_menus.forEach(function (menu) { menu.menu_container.on("openedMenu", function () { new_menu.closing(); }); new_menu.menu_container.on("openedMenu", function () { menu.closing(); }); }); top_menus.push(new_menu); }); }; }(jQuery)); function skipMenu() { // Skip to the breadcrumb or the first link in the toolbar or the first link in the content (homescreen) const selectors = '.first-breadcrumb-element a, .toolbar-container a:first-of-type, #content a:first-of-type'; const visibleLink = jQuery(selectors) .not(':hidden') .first(); if (visibleLink.length) { visibleLink.focus(); } } jQuery(document).ready(function($) { $("#top-menu-items").top_menu(); });