Files
zulip/static/js/portico/header.js
Eeshan Garg 7196b5ac84 header: Fix unresponsive dropdown pill on /help pages.
My PR #18974 introduced a bug where the logged-in dropdown pill on
the /help pages stopped working and has been unresponsive ever
since. This was caused by the incorrect assumption that each
`.dropdown` would be inside an unordered list `ul`. However, that
isn't the case for the dropdown pill on the /help pages. This commit
simply removes said assumption, by widening the scope of the relevant
CSS selectors.
2022-01-05 15:18:24 -08:00

50 lines
2.0 KiB
JavaScript

import $ from "jquery";
$(() => {
$(".portico-header li.logout").on("click", () => {
$("#logout_form").trigger("submit");
return false;
});
$(".dropdown").on("click", (e) => {
const $this = $(e.target);
const dropdown_is_shown = $this.closest(".dropdown").hasClass("show");
if (!dropdown_is_shown) {
$this.closest(".dropdown").addClass("show");
} else if (dropdown_is_shown) {
$this.closest(".dropdown").removeClass("show");
}
});
$(".nav-dropdown").on("mouseover", (e) => {
const $this = $(e.target);
// We switch to a vertical sidebar menu at width <= 1024px
const in_vertical_orientation = window.matchMedia("(max-width: 1024px)").matches;
// We only support mouseover events if we are in a horizontal
// orientation (width > 1024px) and if the primary input mechanism
// can hover over elements.
const hover_supported = window.matchMedia("(hover: hover)").matches;
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
if (!dropdown_is_shown && !in_vertical_orientation && hover_supported) {
$this.closest("ul .dropdown").addClass("show");
}
});
$(".nav-dropdown").on("mouseout", (e) => {
const $this = $(e.target);
// We switch to a vertical sidebar menu at width <= 1024px
const in_vertical_orientation = window.matchMedia("(max-width: 1024px)").matches;
// We only support mouseout events if we are in a horizontal
// orientation (width > 1024px) and if the primary input mechanism
// can hover over elements.
const hover_supported = window.matchMedia("(hover: hover)").matches;
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
if (dropdown_is_shown && !in_vertical_orientation && hover_supported) {
$this.closest("ul .dropdown").removeClass("show");
}
});
});