From d4bcf5bae339eb963c3891252cc096497b927a83 Mon Sep 17 00:00:00 2001 From: Pratik Chanda Date: Fri, 22 Nov 2024 03:09:51 +0530 Subject: [PATCH] navbar_menu: Refactor `change_active_navbar_menu` to use target menu. This commit introduces `navbar-item` class for each navbar menus and `active-navbar-menu` class to indicate active navbar menu. Also introduces new function `get_target_navbar_menu` to return target navbar menu from keyboard event. `change_active_navbar_menu` uses target menu to switch between navbar items. --- web/src/gear_menu.js | 2 ++ web/src/navbar_help_menu.ts | 2 ++ web/src/navbar_menus.js | 51 +++++++++++++++++++++++++------- web/src/personal_menu_popover.ts | 2 ++ web/templates/navbar.hbs | 6 ++-- 5 files changed, 50 insertions(+), 13 deletions(-) diff --git a/web/src/gear_menu.js b/web/src/gear_menu.js index e82fd36b9f..abc816d9d2 100644 --- a/web/src/gear_menu.js +++ b/web/src/gear_menu.js @@ -89,6 +89,7 @@ function render(instance) { popover_menus_data.get_gear_menu_content_context(), ); instance.setContent(parse_html(rendered_gear_menu)); + $("#gear-menu").addClass("active-navbar-menu"); } export function initialize() { @@ -165,6 +166,7 @@ export function initialize() { }, onShow: render, onHidden(instance) { + $("#gear-menu").removeClass("active-navbar-menu"); instance.destroy(); popover_menus.popover_instances.gear_menu = undefined; }, diff --git a/web/src/navbar_help_menu.ts b/web/src/navbar_help_menu.ts index b0969c291a..a5bccb9f85 100644 --- a/web/src/navbar_help_menu.ts +++ b/web/src/navbar_help_menu.ts @@ -36,10 +36,12 @@ export function initialize(): void { }), ), ); + $("#help-menu").addClass("active-navbar-menu"); }, onHidden(instance) { instance.destroy(); popover_menus.popover_instances.help_menu = null; + $("#help-menu").removeClass("active-navbar-menu"); }, }); } diff --git a/web/src/navbar_menus.js b/web/src/navbar_menus.js index 08b77d76eb..fae1ca85d4 100644 --- a/web/src/navbar_menus.js +++ b/web/src/navbar_menus.js @@ -1,3 +1,5 @@ +import $ from "jquery"; + import * as gear_menu from "./gear_menu.js"; import * as navbar_help_menu from "./navbar_help_menu.ts"; import {page_params} from "./page_params.ts"; @@ -17,15 +19,26 @@ export function handle_keyboard_events(event_name) { if (!allowed_events.has(event_name)) { return false; } - return change_active_navbar_menu(event_name); + + if (event_name === "gear_menu") { + gear_menu.toggle(); + return true; + } + const $current_navbar_menu = $(".navbar-item:visible").filter(".active-navbar-menu"); + const target_menu = get_target_navbar_menu(event_name, $current_navbar_menu); + + if (!target_menu) { + return false; + } + return change_active_navbar_menu(target_menu); } -function change_active_navbar_menu(event_name) { +function change_active_navbar_menu(target_menu) { // We don't need to process arrow keys in navbar menus for spectators // since they only have gear menu present. if ( popover_menus.is_personal_menu_popover_displayed() && - (event_name === "left_arrow" || event_name === "gear_menu") && + target_menu === "gear-menu" && !page_params.is_spectator ) { // Open gear menu popover on left arrow. @@ -34,10 +47,7 @@ function change_active_navbar_menu(event_name) { return true; } - if ( - popover_menus.is_help_menu_popover_displayed() && - (event_name === "right_arrow" || event_name === "gear_menu") - ) { + if (popover_menus.is_help_menu_popover_displayed() && target_menu === "gear-menu") { // Open gear menu popover on right arrow. navbar_help_menu.toggle(); gear_menu.toggle(); @@ -45,15 +55,15 @@ function change_active_navbar_menu(event_name) { } if (popover_menus.is_gear_menu_popover_displayed()) { - if (event_name === "gear_menu") { + if (target_menu === "gear-menu") { gear_menu.toggle(); return true; - } else if (event_name === "right_arrow" && !page_params.is_spectator) { + } else if (target_menu === "personal-menu" && !page_params.is_spectator) { // Open personal menu popover on g + right arrow. gear_menu.toggle(); personal_menu_popover.toggle(); return true; - } else if (event_name === "left_arrow") { + } else if (target_menu === "help-menu") { // Open help menu popover on g + left arrow. gear_menu.toggle(); navbar_help_menu.toggle(); @@ -63,3 +73,24 @@ function change_active_navbar_menu(event_name) { return false; } + +function get_target_navbar_menu(event_name, $current_navbar_menu) { + const $visible_navbar_menus = $(".navbar-item:visible"); + const index = $visible_navbar_menus.index($current_navbar_menu); + let $target_navbar_menu; + + if (event_name === "left_arrow" && index === 0) { + return undefined; + } else if (event_name === "right_arrow" && index === $visible_navbar_menus.length - 1) { + return undefined; + } + + if (event_name === "left_arrow") { + $target_navbar_menu = $visible_navbar_menus.eq(index - 1); + return $target_navbar_menu.attr("id"); + } else if (event_name === "right_arrow") { + $target_navbar_menu = $visible_navbar_menus.eq(index + 1); + return $target_navbar_menu.attr("id"); + } + return undefined; +} diff --git a/web/src/personal_menu_popover.ts b/web/src/personal_menu_popover.ts index 227c75d196..53406eaeef 100644 --- a/web/src/personal_menu_popover.ts +++ b/web/src/personal_menu_popover.ts @@ -110,10 +110,12 @@ export function initialize(): void { onShow(instance) { const args = popover_menus_data.get_personal_menu_content_context(); instance.setContent(parse_html(render_navbar_personal_menu_popover(args))); + $("#personal-menu").addClass("active-navbar-menu"); }, onHidden(instance) { instance.destroy(); popover_menus.popover_instances.personal_menu = null; + $("#personal-menu").removeClass("active-navbar-menu"); }, }); } diff --git a/web/templates/navbar.hbs b/web/templates/navbar.hbs index 52651c3169..9a7e3b4e4a 100644 --- a/web/templates/navbar.hbs +++ b/web/templates/navbar.hbs @@ -46,17 +46,17 @@ -
+ -
+ -
+