Skip to content

Commit 9ac7fad

Browse files
Erics1337Erics1337
authored
Replace jQuery tab visibility with Vue reactivity (Fixes #4700) (#4701)
refactor: migrate tab visibility logic from jQuery to Vue - Moved expert mode state to reactive Vue model for declarative UI updates - Replaced imperative jQuery .toggle() calls with Vue v-show directives in template - Simplified updateTabList to only sync checkbox state with Vue model
1 parent 64928df commit 9ac7fad

File tree

3 files changed

+23
-31
lines changed

3 files changed

+23
-31
lines changed

‎src/components/init.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ const betaflightModel = reactive({
3838
PortUsage,
3939
PortHandler,
4040
CONNECTION,
41+
// Reactive expert mode flag to drive tab visibility via Vue
42+
expertMode: false,
4143
});
4244

4345
tippy.setDefaultProps({

‎src/index.html‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
</ul>
8989
<div id="expertMode">
9090
<label>
91-
<input name="expertModeCheckbox" class="togglesmall" type="checkbox"/>
91+
<input name="expertModeCheckbox" class="togglesmall" type="checkbox" v-model="expertMode"/>
9292
<span i18n="expertMode" class="expertModeText"></span>
9393
</label>
9494
</div>
@@ -137,27 +137,22 @@
137137
<li class="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports" i18n_title="tabPorts"></a></li>
138138
<li class="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config" i18n_title="tabConfiguration"></a></li>
139139
<li class="tab_power"><a href="#" i18n="tabPower" class="tabicon ic_power" i18n_title="tabPower"></a></li>
140-
<li class="tab_failsafe"><a href="#" i18n="tabFailsafe" class="tabicon ic_failsafe" i18n_title="tabFailsafe"></a></li>
140+
<li class="tab_failsafe" v-show="expertMode"><a href="#" i18n="tabFailsafe" class="tabicon ic_failsafe" i18n_title="tabFailsafe"></a></li>
141141
<li class="tab_presets"><a href="#" i18n="tabPresets" class="tabicon ic_wizzard" i18n_title="tabPresets"></a></li>
142142
<li class="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid" i18n_title="tabPidTuning"></a></li>
143143
<li class="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx" i18n_title="tabReceiver"></a></li>
144144
<li class="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes" i18n_title="tabAuxiliary"></a></li>
145-
<li class="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust" i18n_title="tabAdjustments"></a></li>
146-
<li class="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo" i18n_title="tabServos"></a></li>
147-
<li class="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps" i18n_title="tabGPS"></a></li>
145+
<li class="tab_adjustments" v-show="expertMode"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust" i18n_title="tabAdjustments"></a></li>
146+
<li class="tab_servos" v-show="['USE_SERVOS','USE_WING'].some(opt => FC.CONFIG?.buildOptions?.includes(opt))"><a href="#" i18n="tabServos" class="tabicon ic_servo" i18n_title="tabServos"></a></li>
147+
<li class="tab_gps" v-show="FC.CONFIG?.buildOptions?.includes('USE_GPS')"><a href="#" i18n="tabGPS" class="tabicon ic_gps" i18n_title="tabGPS"></a></li>
148148
<li class="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor" i18n_title="tabMotorTesting"></a></li>
149-
<li class="tab_osd"><a href="#" i18n="tabOsd" class="tabicon ic_osd" i18n_title="tabOsd"></a></li>
149+
<li class="tab_osd" v-show="FC.FEATURE_CONFIG?.features?.isEnabled && FC.FEATURE_CONFIG.features.isEnabled('OSD')"><a href="#" i18n="tabOsd" class="tabicon ic_osd" i18n_title="tabOsd"></a></li>
150150
<li class="tab_vtx"><a href="#" i18n="tabVtx" class="tabicon ic_vtx" i18n_title="tabVtx"></a></li>
151-
<li class="tab_transponder"><a href="#" i18n="tabTransponder" class="tabicon ic_transponder" i18n_title="tabTransponder"></a></li>
152-
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led" i18n_title="tabLedStrip"></a></li>
153-
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors" i18n_title="tabRawSensorData"></a></li>
154-
<li class="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log" i18n_title="tabLogging"></a></li>
151+
<li class="tab_transponder" v-show="FC.FEATURE_CONFIG?.features?.isEnabled && FC.FEATURE_CONFIG.features.isEnabled('TRANSPONDER')"><a href="#" i18n="tabTransponder" class="tabicon ic_transponder" i18n_title="tabTransponder"></a></li>
152+
<li class="tab_led_strip" v-show="FC.FEATURE_CONFIG?.features?.isEnabled && FC.FEATURE_CONFIG.features.isEnabled('LED_STRIP')"><a href="#" i18n="tabLedStrip" class="tabicon ic_led" i18n_title="tabLedStrip"></a></li>
153+
<li class="tab_sensors" v-show="expertMode"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors" i18n_title="tabRawSensorData"></a></li>
154+
<li class="tab_logging" v-show="expertMode"><a href="#" i18n="tabLogging" class="tabicon ic_log" i18n_title="tabLogging"></a></li>
155155
<li class="tab_onboard_logging"><a href="#" i18n="tabOnboardLogging" class="tabicon ic_data" i18n_title="tabOnboardLogging"></a></li>
156-
<!-- spare icons
157-
<li class=""><a href="#"class="tabicon ic_mission">Mission (spare icon)</a></li>
158-
<li class=""><a href="#"class="tabicon ic_advanced">Advanced (spare icon)</a></li>
159-
<li class=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare icon)</a></li>
160-
-->
161156
</ul>
162157
<ul class="mode-connected mode-connected-cli">
163158
<li class="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli" i18n_title="tabCLI"></a></li>

‎src/js/utils/updateTabList.js‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
import $ from "jquery";
2-
import FC from "../fc";
32

4-
export function updateTabList(features) {
5-
const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(":checked");
6-
7-
$("#tabs ul.mode-connected li.tab_failsafe").toggle(isExpertModeEnabled);
8-
$("#tabs ul.mode-connected li.tab_adjustments").toggle(isExpertModeEnabled);
9-
$("#tabs ul.mode-connected li.tab_sensors").toggle(isExpertModeEnabled);
10-
$("#tabs ul.mode-connected li.tab_logging").toggle(isExpertModeEnabled);
11-
$("#tabs ul.mode-connected li.tab_servos").toggle(
12-
["USE_SERVOS", "USE_WING"].some((option) => FC.CONFIG?.buildOptions?.includes(option)),
13-
);
14-
15-
$("#tabs ul.mode-connected li.tab_gps").toggle(FC.CONFIG?.buildOptions?.includes("USE_GPS"));
16-
$("#tabs ul.mode-connected li.tab_led_strip").toggle(features.isEnabled("LED_STRIP"));
17-
$("#tabs ul.mode-connected li.tab_transponder").toggle(features.isEnabled("TRANSPONDER"));
18-
$("#tabs ul.mode-connected li.tab_osd").toggle(features.isEnabled("OSD"));
3+
// Delegate tab visibility to Vue via template v-show bindings. This function now
4+
// only syncs the expert mode checkbox state to the global Vue model if present.
5+
export function updateTabList(_features) {
6+
try {
7+
const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(":checked");
8+
if (window.vm && typeof window.vm.expertMode !== "undefined") {
9+
window.vm.expertMode = isExpertModeEnabled;
10+
}
11+
} catch {
12+
// noop: if Vue model not available, do nothing
13+
}
1914
}

0 commit comments

Comments
 (0)