Skip to content

Feature: Accordion navigation for tab organization #2530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sensei-hacker wants to merge 4 commits into
base: maintenance-9.x
Choose a base branch
from
+438 −73
Open

Feature: Accordion navigation for tab organization #2530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c75975a
Fix JS Programming decompiler incorrect operand validation warnings
sensei-hacker Jan 21, 2026
1129e30
Feature: Add accordion navigation for improved tab organization
sensei-hacker Jan 21, 2026
e2ff657
Add expand/collapse all toggle for accordion navigation
sensei-hacker Jan 21, 2026
f4667c8
Improve accordion navigation accessibility
sensei-hacker Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 159 additions & 68 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,83 +244,174 @@ <h2 class="groundstation-telemetry__header" data-i18n="gsTelemetry"></h2>
</li>
</ul>
<ul class="mode-connected">
<li class="tab_setup">
<a href="#" data-i18n="tabSetup" class="tabicon ic_setup" data-i18n_title="tabSetup"></a>
</li>
<li class="tab_calibration">
<a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a>
</li>
<li class="tab_mixer">
<a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a>
</li>
<li class="tab_outputs">
<a href="#" data-i18n="tabOutputs" class="tabicon ic_motor" title="Outputs"></a>
</li>
<li class="tab_ports">
<a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a>
</li>
<li class="tab_configuration">
<a href="#" data-i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a>
</li>
<li class="tab_failsafe">
<a href="#" data-i18n="tabFailsafe" class="tabicon ic_failsafe" title="Failsafe"></a>
</li>
<li class="tab_pid_tuning">
<a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" data-i18n_title="tabPidTuning"></a>
</li>
<li class="tab_advanced_tuning">
<a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
title="Advanced Tuning"></a>
</li>
<li class="tab_programming">
<a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
</li>
<li class="tab_javascript_programming">
<a href="#" i18n="tabJavaScriptProgramming" class="tabicon ic_javascript_programming" title="Javascript Programming">></a>
</li>
<li class="tab_receiver">
<a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
</li>
<li class="tab_auxiliary">
<a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a>
</li>
<li class="tab_adjustments">
<a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a>
</li>
<li class="tab_gps">
<a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a>
</li>
<li class="tab_magnetometer">
<a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
</li>
<li class="tab_mission_control">
<a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
title="Mission Control"></a>
</li>
<li class="tab_osd">
<a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
<!-- Setup & Configuration -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupSetup">Setup & Configuration</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_setup">
<a href="#" data-i18n="tabSetup" class="tabicon ic_setup" data-i18n_title="tabSetup"></a>
</li>
<li class="tab_calibration">
<a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a>
</li>
<li class="tab_magnetometer">
<a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
</li>
<li class="tab_configuration">
<a href="#" data-i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a>
</li>
<li class="tab_ports">
<a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a>
</li>
</ul>
</li>
<li class="tab_led_strip">
<a href="#" data-i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a>

<!-- Flight Control -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupFlight">Flight Control</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_mixer">
<a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a>
</li>
<li class="tab_outputs">
<a href="#" data-i18n="tabOutputs" class="tabicon ic_motor" title="Outputs"></a>
</li>
<li class="tab_receiver">
<a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
</li>
<li class="tab_auxiliary">
<a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a>
</li>
<li class="tab_failsafe">
<a href="#" data-i18n="tabFailsafe" class="tabicon ic_failsafe" title="Failsafe"></a>
</li>
</ul>
</li>
<li class="tab_sensors">
<a href="#" data-i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a>

<!-- Tuning -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupTuning">Tuning</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_pid_tuning">
<a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" data-i18n_title="tabPidTuning"></a>
</li>
<li class="tab_advanced_tuning">
<a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
title="Advanced Tuning"></a>
</li>
<li class="tab_adjustments">
<a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a>
</li>
</ul>
</li>
<li class="tab_logging">
<a href="#" data-i18n="tabLogging" class="tabicon ic_log" title="Tethered Logging"></a>

<!-- Navigation & Mission -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupNavigation">Navigation & Mission</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_gps">
<a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a>
</li>
<li class="tab_mission_control">
<a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
title="Mission Control"></a>
</li>
</ul>
</li>
<li class="tab_onboard_logging">
<a href="#" data-i18n="tabOnboardLogging" class="tabicon ic_data" title="Onboard Logging"></a>

<!-- Sensors & Peripherals -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupSensors">Sensors & Peripherals</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_sensors">
<a href="#" data-i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a>
</li>
<li class="tab_osd">
<a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
</li>
<li class="tab_led_strip">
<a href="#" data-i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a>
</li>
</ul>
</li>
<li class="tab_cli">
<a href="#" data-i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a>

<!-- Data Logging -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupLogging">Data Logging</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_onboard_logging">
<a href="#" data-i18n="tabOnboardLogging" class="tabicon ic_data" title="Onboard Logging"></a>
</li>
<li class="tab_logging">
<a href="#" data-i18n="tabLogging" class="tabicon ic_log" title="Tethered Logging"></a>
</li>
</ul>
</li>
<li class="tab_search">
<a href="#" data-i18n="search" class="tabicon ic_search" title="Search"></a>

<!-- Programming -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupProgramming">Programming</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_programming">
<a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
</li>
<li class="tab_javascript_programming">
<a href="#" data-i18n="tabJavaScriptProgramming" class="tabicon ic_javascript_programming" title="Javascript Programming"></a>
</li>
</ul>
</li>

<!-- Tools -->
<li class="nav-group">
<div class="group-header" role="button" tabindex="0" aria-expanded="false">
<span class="group-title" data-i18n="navGroupTools">Tools</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_cli">
<a href="#" data-i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a>
</li>
<li class="tab_search">
<a href="#" data-i18n="search" class="tabicon ic_search" title="Search"></a>
</li>
</ul>
</li>

<!-- <li class=""><a href="#" class="tabicon ic_advanced">Advanced (spare icon)</a></li> -->
<!-- Expand/Collapse All Toggle -->
<li class="nav-toggle-all">
<a href="#" id="toggleAllGroups">
<svg class="expand-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="expand-title">
<title id="expand-title" data-i18n="navExpandAll">Expand All</title>
<path d="M7 13l5 5 5-5M7 6l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg class="collapse-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="collapse-title" style="display: none;">
<title id="collapse-title" data-i18n="navCollapseAll">Collapse All</title>
<path d="M17 11l-5-5-5 5M17 18l-5-5-5 5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="toggle-text" data-i18n="navExpandAll">Expand All</span>
</a>
</li>
</ul>
</div>
<div class="clear-both"></div>
Expand Down
82 changes: 81 additions & 1 deletion js/configurator_main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,87 @@ $(function() {

$('#tabs ul.mode-disconnected li a:first').trigger( "click" );


// Accordion Navigation Groups
$('.group-header').on('click', function(e) {
e.stopPropagation(); // Prevent triggering tab click
const header = $(this);
const items = header.next('.group-items');

// Toggle this group
header.toggleClass('active');
items.toggleClass('expanded');

// Update aria-expanded for accessibility
header.attr('aria-expanded', header.hasClass('active'));

// Update the expand/collapse all button state
updateToggleAllButton();
});

// Keyboard accessibility for accordion headers
$('.group-header').on('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
$(this).trigger('click');
}
});

// Function to update toggle all button state
function updateToggleAllButton() {
const allExpanded = $('.nav-group .group-header.active').length === $('.nav-group .group-header').length;
const $expandIcon = $('#toggleAllGroups .expand-icon');
const $collapseIcon = $('#toggleAllGroups .collapse-icon');
const $toggleText = $('#toggleAllGroups .toggle-text');

if (allExpanded) {
$expandIcon.hide();
$collapseIcon.show();
$toggleText.attr('data-i18n', 'navCollapseAll');
$toggleText.text(i18n.getMessage('navCollapseAll'));
} else {
$expandIcon.show();
$collapseIcon.hide();
$toggleText.attr('data-i18n', 'navExpandAll');
$toggleText.text(i18n.getMessage('navExpandAll'));
}
}

// Expand/Collapse All Toggle
$('#toggleAllGroups').on('click', function(e) {
e.preventDefault();
const allExpanded = $('.nav-group .group-header.active').length === $('.nav-group .group-header').length;

if (allExpanded) {
// Collapse all except first
$('.nav-group .group-header').removeClass('active').attr('aria-expanded', 'false');
$('.nav-group .group-items').removeClass('expanded');
$('#tabs ul.mode-connected .nav-group:first-child .group-header').addClass('active').attr('aria-expanded', 'true');
$('#tabs ul.mode-connected .nav-group:first-child .group-items').addClass('expanded');
store.set('expand_all_groups', false);
} else {
// Expand all
$('.nav-group .group-header').addClass('active').attr('aria-expanded', 'true');
$('.nav-group .group-items').addClass('expanded');
store.set('expand_all_groups', true);
}

updateToggleAllButton();
});

// Initialize: apply saved expand all preference or expand first group by default
if (store.get('expand_all_groups', false)) {
// Expand all groups
$('.nav-group .group-header').addClass('active').attr('aria-expanded', 'true');
$('.nav-group .group-items').addClass('expanded');
} else {
// Expand first group only
$('#tabs ul.mode-connected .nav-group:first-child .group-header').addClass('active').attr('aria-expanded', 'true');
$('#tabs ul.mode-connected .nav-group:first-child .group-items').addClass('expanded');
}

// Update button state on initialization
updateToggleAllButton();


// options
$('#options').on('click', function() {
Expand Down
Loading