Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-07-06 00:28:12 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(modes): deep-linked mode scripts fail when body not yet parsed

Browse Source 
ensureModeScript() used document.body.appendChild() to load lazy mode
scripts, but the preload for ?mode= query params runs in <head> before
<body> exists, causing all deep-linked modes to silently fail.

Also fix cross-mode handoffs (BT→BT Locate, WiFi→WiFi Locate,
Spy Stations→Waterfall) that assumed target module was already loaded.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-12 20:49:08 +00:00
parent 7c425dbd99
commit ba631811a6
87 changed files with 9128 additions and 8368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/core/components.css
+73
View File
@@ -84,6 +84,18 @@
border-color: var(--accent-red-hover);
}
.btn-danger-outline {
background: transparent;
color: var(--accent-red);
border-color: var(--accent-red);
}
.btn-danger-outline:hover:not(:disabled) {
background: var(--accent-red-dim);
color: var(--accent-red);
border-color: var(--accent-red);
}
.btn-success {
background: var(--accent-green);
color: var(--text-inverse);
@@ -878,6 +890,67 @@ textarea:focus {
filter: grayscale(30%);
}
/* ============================================
MODAL CLOSE BUTTON
============================================ */
.modal-close-btn {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
font-size: 16px;
line-height: 1;
transition: all var(--transition-fast);
}
.modal-close-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.modal-close-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* Aliases for existing modal-specific close classes */
.settings-close,
.help-close,
.wifi-detail-close,
.bt-modal-close,
.tscm-modal-close,
.signal-details-modal-close {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
font-size: 16px;
line-height: 1;
transition: all var(--transition-fast);
}
.settings-close:hover,
.help-close:hover,
.wifi-detail-close:hover,
.bt-modal-close:hover,
.tscm-modal-close:hover,
.signal-details-modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.settings-close:focus-visible,
.help-close:focus-visible,
.wifi-detail-close:focus-visible,
.bt-modal-close:focus-visible,
.tscm-modal-close:focus-visible,
.signal-details-modal-close:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* ============================================
CONFIRMATION MODAL
============================================ */
static/css/core/variables.css
+3 -3
View File
@@ -160,7 +160,7 @@
/* ============================================
LAYOUT
============================================ */
--header-height: 60px;
--header-height: 48px;
--nav-height: 44px;
--sidebar-width: 280px;
--stats-strip-height: 36px;
@@ -224,8 +224,8 @@
--text-primary: #122034;
--text-secondary: #3a4a5f;
--text-dim: #6b7c93;
--text-muted: #aab6c8;
--text-dim: #566a7f;
--text-muted: #7a8a9e;
--text-inverse: #f4f7fb;
--border-color: #d1d9e6;
static/css/index.css
+83 -73
View File
@@ -212,10 +212,6 @@ body {
}
.welcome-settings-btn {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
background: none;
border: none;
cursor: pointer;
@@ -223,6 +219,8 @@ body {
border-radius: 6px;
color: var(--text-dim, rgba(255, 255, 255, 0.3));
transition: color 0.2s, background 0.2s;
margin-left: auto;
flex-shrink: 0;
}
.welcome-settings-btn:hover {
@@ -251,10 +249,9 @@ body {
.welcome-header {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
gap: 14px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
@@ -300,38 +297,37 @@ body {
}
}
.welcome-title-block {
text-align: left;
}
.welcome-title {
font-family: var(--font-mono);
font-size: 2.5rem;
font-size: 1.6rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.2em;
margin: 0;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
white-space: nowrap;
}
.welcome-tagline {
font-family: var(--font-mono);
font-size: 0.9rem;
font-size: 0.8rem;
color: var(--accent-cyan);
letter-spacing: 0.15em;
margin: 4px 0 0 0;
letter-spacing: 0.1em;
margin: 0;
opacity: 0.7;
white-space: nowrap;
}
.welcome-version {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.65rem;
font-size: 0.6rem;
color: var(--bg-primary);
background: var(--accent-cyan);
padding: 2px 8px;
border-radius: 3px;
letter-spacing: 0.05em;
margin-top: 8px;
flex-shrink: 0;
}
/* Welcome Content Grid */
@@ -572,6 +568,21 @@ body {
margin: 0;
}
.welcome-footer-credit {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--text-dim);
text-decoration: none;
letter-spacing: 0.08em;
margin-top: 6px;
transition: color 0.2s;
}
.welcome-footer-credit:hover {
color: var(--accent-cyan);
}
/* Welcome Scanline */
.welcome-scanline {
position: absolute;
@@ -606,12 +617,9 @@ body {
}
.welcome-header {
flex-direction: column;
text-align: center;
}
.welcome-title-block {
text-align: center;
flex-wrap: wrap;
justify-content: center;
gap: 8px 14px;
}
.mode-grid {
@@ -639,12 +647,7 @@ body {
}
.welcome-header {
flex-direction: row;
text-align: left;
}
.welcome-title-block {
text-align: left;
flex-wrap: nowrap;
}
.mode-grid-compact {
@@ -664,28 +667,27 @@ body {
header {
background: var(--bg-secondary);
padding: 10px 12px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
justify-content: space-between;
border-bottom: 1px solid var(--border-color);
position: relative;
min-height: 52px;
height: 48px;
}
@media (min-width: 768px) {
header {
justify-content: center;
padding: 12px 20px;
}
.header-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
@media (min-width: 1024px) {
header {
text-align: center;
display: block;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
header::before {
@@ -709,14 +711,13 @@ header h1 {
font-weight: 600;
letter-spacing: 0.15em;
margin: 0;
display: inline;
vertical-align: middle;
white-space: nowrap;
}
.logo {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
display: flex;
align-items: center;
flex-shrink: 0;
}
.logo svg {
@@ -917,7 +918,7 @@ header h1 {
left: 0;
margin-top: 4px;
min-width: 180px;
background: var(--bg-secondary);
background: #101823;
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
@@ -1088,19 +1089,7 @@ header h1 {
border: 1px solid var(--border-color);
}
header p {
color: var(--text-secondary);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 4px 0 8px 0;
}
header p.subtitle {
font-size: 10px;
color: var(--text-secondary);
margin: 0 0 8px 0;
}
/* subtitle removed — compact header */
header h1 .tagline {
font-weight: 400;
@@ -1204,15 +1193,14 @@ header h1 .tagline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
padding: 4px 14px;
background: var(--accent-cyan);
color: var(--bg-primary);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 10px;
}
.active-mode-indicator .pulse-dot {
@@ -1631,10 +1619,9 @@ header h1 .tagline {
.section.collapsed h3 {
border-bottom: none;
margin-bottom: 0 !important;
margin: 0 !important;
min-height: 0 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
padding: 10px 12px !important;
}
.section.collapsed h3::after {
@@ -1643,7 +1630,7 @@ header h1 .tagline {
}
.section.collapsed {
padding-bottom: 0 !important;
padding: 0 !important;
min-height: 0;
}
@@ -2433,6 +2420,19 @@ header h1 .tagline {
font-style: italic;
}
.mode-content h3 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
margin: 0 0 10px 0;
padding: 0;
display: flex;
align-items: center;
gap: 6px;
}
.mode-content {
display: none;
}
@@ -7261,6 +7261,12 @@ body[data-mode="tscm"] {
box-shadow: var(--visual-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.mode-nav-dropdown-menu {
background: linear-gradient(180deg, #162130 0%, #0e1621 100%);
border-color: rgba(74, 163, 255, 0.22);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 163, 255, 0.1);
}
.run-state-strip {
margin: 8px var(--top-rail-gutter) 0;
border-color: rgba(74, 163, 255, 0.3);
@@ -7312,7 +7318,7 @@ body[data-mode="tscm"] {
}
.section h3 {
background: linear-gradient(180deg, rgba(28, 44, 63, 0.88) 0%, rgba(20, 31, 44, 0.9) 100%);
background: linear-gradient(180deg, #1c2c3f 0%, #141f2c 100%);
border-bottom-color: rgba(74, 163, 255, 0.2);
}
@@ -7419,6 +7425,10 @@ body[data-mode="tscm"] {
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .mode-nav-dropdown-menu {
background: #e9eef5;
}
[data-theme="light"] .run-state-strip {
background: linear-gradient(180deg, rgba(245, 248, 253, 0.97) 0%, rgba(238, 243, 250, 0.98) 100%);
border-color: rgba(31, 95, 168, 0.18);
@@ -7445,7 +7455,7 @@ body[data-mode="tscm"] {
}
[data-theme="light"] .section h3 {
background: linear-gradient(180deg, rgba(235, 241, 250, 0.92) 0%, rgba(228, 236, 248, 0.94) 100%);
background: linear-gradient(180deg, #ebf1fa 0%, #e4ecf8 100%);
border-bottom-color: rgba(31, 95, 168, 0.14);
}
static/css/responsive.css
+17 -16
View File
@@ -25,20 +25,20 @@
--font-2xl: clamp(24px, 6vw, 40px);
/* Header height for calculations */
--header-height: 52px;
--header-height: 48px;
--nav-height: 44px;
}
@media (min-width: 768px) {
:root {
--header-height: 60px;
--header-height: 48px;
--nav-height: 48px;
}
}
@media (min-width: 1024px) {
:root {
--header-height: 96px;
--header-height: 48px;
--nav-height: 0px;
}
}
@@ -632,16 +632,17 @@
font-size: 16px;
}
.app-shell header h1 .tagline,
.app-shell header h1 .version-badge {
.app-shell header h1 .tagline {
display: none;
}
.app-shell header .subtitle {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.app-shell header .version-badge {
display: none;
}
.app-shell header .active-mode-indicator {
font-size: 9px;
padding: 3px 8px;
}
.app-shell header .logo svg {
@@ -691,18 +692,18 @@
}
.app-shell .welcome-header {
flex-direction: column;
text-align: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
gap: 6px 10px;
}
.app-shell .welcome-logo svg {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
}
.app-shell .welcome-title {
font-size: 24px;
font-size: 1.2rem;
}
.app-shell .welcome-content {
static/js/modes/bluetooth.js
+30 -14
View File
@@ -895,6 +895,7 @@ const BluetoothMode = (function() {
const isAgentMode = typeof currentAgent !== 'undefined' && currentAgent !== 'local';
if (startBtn) startBtn.classList.add('btn-loading');
try {
let response;
if (isAgentMode) {
@@ -943,6 +944,8 @@ const BluetoothMode = (function() {
reportActionableError('Start Bluetooth Scan', err, {
onRetry: () => startScan()
});
} finally {
if (startBtn) startBtn.classList.remove('btn-loading');
}
}
@@ -1738,21 +1741,34 @@ const BluetoothMode = (function() {
}
function doLocateHandoff(device) {
console.log('[BT] doLocateHandoff, BtLocate defined:', typeof BtLocate !== 'undefined');
const payload = {
device_id: device.device_id,
device_key: device.device_key || null,
mac_address: device.address,
address_type: device.address_type || null,
irk_hex: device.irk_hex || null,
known_name: device.name || null,
known_manufacturer: device.manufacturer_name || null,
last_known_rssi: device.rssi_current,
tx_power: device.tx_power || null,
appearance_name: device.appearance_name || null,
fingerprint_id: device.fingerprint_id || device.fingerprint?.id || null,
mac_cluster_count: device.mac_cluster_count || 0
};
// If BtLocate is already loaded, hand off directly
if (typeof BtLocate !== 'undefined') {
BtLocate.handoff({
device_id: device.device_id,
device_key: device.device_key || null,
mac_address: device.address,
address_type: device.address_type || null,
irk_hex: device.irk_hex || null,
known_name: device.name || null,
known_manufacturer: device.manufacturer_name || null,
last_known_rssi: device.rssi_current,
tx_power: device.tx_power || null,
appearance_name: device.appearance_name || null,
fingerprint_id: device.fingerprint_id || device.fingerprint?.id || null,
mac_cluster_count: device.mac_cluster_count || 0
BtLocate.handoff(payload);
return;
}
// Switch to bt_locate mode first — this loads the script, styles,
// and initializes the module. Then hand off the device data.
if (typeof switchMode === 'function') {
switchMode('bt_locate').then(function() {
if (typeof BtLocate !== 'undefined') {
BtLocate.handoff(payload);
}
});
}
}
static/js/modes/meshtastic.js
+20 -12
View File
@@ -110,19 +110,27 @@ const Meshtastic = (function() {
meshMap = L.map('meshMap').setView([defaultLat, defaultLon], 4);
window.meshMap = meshMap;
// Use settings manager for tile layer (allows runtime changes)
// Add fallback tiles immediately so the map is visible instantly
const fallbackTiles = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
maxZoom: 19,
subdomains: 'abcd',
className: 'tile-layer-cyan'
}).addTo(meshMap);
// Upgrade tiles in background via Settings (with timeout fallback)
if (typeof Settings !== 'undefined') {
// Wait for settings to load from server before applying tiles
await Settings.init();
Settings.createTileLayer().addTo(meshMap);
Settings.registerMap(meshMap);
} else {
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
maxZoom: 19,
subdomains: 'abcd',
className: 'tile-layer-cyan'
}).addTo(meshMap);
try {
await Promise.race([
Settings.init(),
new Promise((_, reject) => setTimeout(() => reject(new Error('Settings timeout')), 5000))
]);
meshMap.removeLayer(fallbackTiles);
Settings.createTileLayer().addTo(meshMap);
Settings.registerMap(meshMap);
} catch (e) {
console.warn('Meshtastic: Settings init failed/timed out, using fallback tiles:', e);
}
}
// Handle resize
static/js/modes/spy-stations.js
+10 -9
View File
@@ -280,18 +280,19 @@ const SpyStations = (function() {
showNotification('Tuning to ' + stationName, formatFrequency(freqKhz) + ' (' + tuneMode.toUpperCase() + ')');
}
// Switch to spectrum waterfall mode and tune after mode init.
if (typeof switchMode === 'function') {
switchMode('waterfall');
} else if (typeof selectMode === 'function') {
selectMode('waterfall');
}
setTimeout(() => {
// Switch to spectrum waterfall mode and tune after init completes.
const doTune = () => {
if (typeof Waterfall !== 'undefined' && typeof Waterfall.quickTune === 'function') {
Waterfall.quickTune(freqMhz, tuneMode);
}
}, 220);
};
if (typeof switchMode === 'function') {
switchMode('waterfall').then(doTune);
} else if (typeof selectMode === 'function') {
selectMode('waterfall');
setTimeout(doTune, 300);
}
}
/**
static/js/modes/sstv.js
+18 -11
View File
@@ -215,18 +215,25 @@ const SSTV = (function() {
});
window.issMap = issMap;
// Add tile layer using settings manager if available
// Add fallback tiles immediately so the map is visible instantly
const fallbackTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
maxZoom: 19,
className: 'tile-layer-cyan'
}).addTo(issMap);
// Upgrade tiles in background via Settings (with timeout fallback)
if (typeof Settings !== 'undefined') {
// Wait for settings to load from server before applying tiles
await Settings.init();
Settings.createTileLayer().addTo(issMap);
Settings.registerMap(issMap);
} else {
// Fallback to dark theme tiles
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
maxZoom: 19,
className: 'tile-layer-cyan'
}).addTo(issMap);
try {
await Promise.race([
Settings.init(),
new Promise((_, reject) => setTimeout(() => reject(new Error('Settings timeout')), 5000))
]);
issMap.removeLayer(fallbackTiles);
Settings.createTileLayer().addTo(issMap);
Settings.registerMap(issMap);
} catch (e) {
console.warn('SSTV: Settings init failed/timed out, using fallback tiles:', e);
}
}
// Create ISS icon
static/js/modes/weather-satellite.js
+41 -11
View File
@@ -252,6 +252,8 @@ const WeatherSat = (function() {
addConsoleEntry('Starting capture...', 'info');
updateStatusUI('connecting', 'Starting...');
const startBtn = document.getElementById('weatherSatStartBtn');
if (startBtn) startBtn.classList.add('btn-loading');
try {
const config = {
satellite,
@@ -295,6 +297,8 @@ const WeatherSat = (function() {
onRetry: () => start()
});
updateStatusUI('idle', 'Error');
} finally {
if (startBtn) startBtn.classList.remove('btn-loading');
}
}
@@ -445,6 +449,8 @@ const WeatherSat = (function() {
};
eventSource.onerror = () => {
// Close the failed connection first to avoid leaking it
stopStream();
setTimeout(() => {
if (isRunning || schedulerEnabled) startStream();
}, 3000);
@@ -887,18 +893,28 @@ const WeatherSat = (function() {
preferCanvas: true,
});
// Add fallback tiles immediately so the map is visible instantly
const fallbackTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
subdomains: 'abcd',
maxZoom: 18,
noWrap: false,
crossOrigin: true,
className: 'tile-layer-cyan',
}).addTo(groundMap);
// Upgrade tiles in background via Settings (with timeout fallback)
if (typeof Settings !== 'undefined' && Settings.createTileLayer) {
await Settings.init();
Settings.createTileLayer().addTo(groundMap);
Settings.registerMap(groundMap);
} else {
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
subdomains: 'abcd',
maxZoom: 18,
noWrap: false,
crossOrigin: true,
className: 'tile-layer-cyan',
}).addTo(groundMap);
try {
await Promise.race([
Settings.init(),
new Promise((_, reject) => setTimeout(() => reject(new Error('Settings timeout')), 5000))
]);
groundMap.removeLayer(fallbackTiles);
Settings.createTileLayer().addTo(groundMap);
Settings.registerMap(groundMap);
} catch (e) {
console.warn('WeatherSat: Settings init failed/timed out, using fallback tiles:', e);
}
}
groundGridLayer = L.layerGroup().addTo(groundMap);
@@ -1874,10 +1890,24 @@ const WeatherSat = (function() {
}
}
/**
* Unconditionally tear down the SSE stream on mode switch so we don't
* leak browser connections. The server-side capture/scheduler keeps
* running independently — the stream will reconnect on next init().
*/
function destroy() {
if (countdownInterval) {
clearInterval(countdownInterval);
countdownInterval = null;
}
stopStream();
}
// Public API
return {
init,
suspend,
destroy,
start,
stop,
startPass,
static/js/modes/websdr.js
+20 -10
View File
@@ -314,17 +314,27 @@ async function initWebsdrLeaflet(mapEl) {
maxBoundsViscosity: 1.0,
});
// Add fallback tiles immediately so the map is visible instantly
const fallbackTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
subdomains: 'abcd',
maxZoom: 19,
className: 'tile-layer-cyan',
}).addTo(websdrMap);
// Upgrade tiles in background via Settings (with timeout fallback)
if (typeof Settings !== 'undefined' && Settings.createTileLayer) {
await Settings.init();
Settings.createTileLayer().addTo(websdrMap);
Settings.registerMap(websdrMap);
} else {
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
subdomains: 'abcd',
maxZoom: 19,
className: 'tile-layer-cyan',
}).addTo(websdrMap);
try {
await Promise.race([
Settings.init(),
new Promise((_, reject) => setTimeout(() => reject(new Error('Settings timeout')), 5000))
]);
websdrMap.removeLayer(fallbackTiles);
Settings.createTileLayer().addTo(websdrMap);
Settings.registerMap(websdrMap);
} catch (e) {
console.warn('WebSDR: Settings init failed/timed out, using fallback tiles:', e);
}
}
mapEl.style.background = '#1a1d29';
static/js/modes/wifi.js
+33 -1
View File
@@ -247,6 +247,8 @@ const WiFiMode = (function() {
// ==========================================================================
async function checkCapabilities() {
const capBtn = document.getElementById('wifiQuickScanBtn');
if (capBtn) capBtn.classList.add('btn-loading');
try {
const isAgentMode = typeof currentAgent !== 'undefined' && currentAgent !== 'local';
let response;
@@ -291,6 +293,8 @@ const WiFiMode = (function() {
} catch (error) {
console.error('[WiFiMode] Capability check failed:', error);
showCapabilityError('Failed to check WiFi capabilities');
} finally {
if (capBtn) capBtn.classList.remove('btn-loading');
}
}
@@ -386,18 +390,40 @@ const WiFiMode = (function() {
if (elements.scanModeDeep) {
elements.scanModeDeep.addEventListener('click', () => setScanMode('deep'));
}
// Arrow key navigation between tabs
const tabContainer = document.querySelector('.wifi-scan-mode-tabs');
if (tabContainer) {
tabContainer.addEventListener('keydown', (e) => {
const tabs = Array.from(tabContainer.querySelectorAll('[role="tab"]'));
const idx = tabs.indexOf(document.activeElement);
if (idx === -1) return;
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
const next = tabs[(idx + 1) % tabs.length];
next.focus();
next.click();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
const prev = tabs[(idx - 1 + tabs.length) % tabs.length];
prev.focus();
prev.click();
}
});
}
listenersBound.scanTabs = true;
}
function setScanMode(mode) {
scanMode = mode;
// Update tab UI
// Update tab UI and ARIA states
if (elements.scanModeQuick) {
elements.scanModeQuick.classList.toggle('active', mode === 'quick');
elements.scanModeQuick.setAttribute('aria-selected', mode === 'quick' ? 'true' : 'false');
}
if (elements.scanModeDeep) {
elements.scanModeDeep.classList.toggle('active', mode === 'deep');
elements.scanModeDeep.setAttribute('aria-selected', mode === 'deep' ? 'true' : 'false');
}
console.log('[WiFiMode] Scan mode set to:', mode);
@@ -416,6 +442,7 @@ const WiFiMode = (function() {
}
console.log('[WiFiMode] Starting quick scan...');
if (elements.quickScanBtn) elements.quickScanBtn.classList.add('btn-loading');
setScanning(true, 'quick');
try {
@@ -496,6 +523,8 @@ const WiFiMode = (function() {
console.error('[WiFiMode] Quick scan error:', error);
showError(error.message + '. Try using Deep Scan instead.');
setScanning(false);
} finally {
if (elements.quickScanBtn) elements.quickScanBtn.classList.remove('btn-loading');
}
}
@@ -508,6 +537,7 @@ const WiFiMode = (function() {
}
console.log('[WiFiMode] Starting deep scan...');
if (elements.deepScanBtn) elements.deepScanBtn.classList.add('btn-loading');
setScanning(true, 'deep');
try {
@@ -569,6 +599,8 @@ const WiFiMode = (function() {
console.error('[WiFiMode] Deep scan error:', error);
showError(error.message);
setScanning(false);
} finally {
if (elements.deepScanBtn) elements.deepScanBtn.classList.remove('btn-loading');
}
}