Each settings nav item (General, Connections, Playback, Payloads, Storage, API Keys, Backup, Logs, About) now shows its own isolated card page. navSettingsCat() toggles .s-settings-page visibility + active state. Save/Reload use event delegation (.s-save-btn/.s-reload-btn classes). Default sub-page is Connections on first entry. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
124 lines
4.9 KiB
JavaScript
124 lines
4.9 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const TAB_SECTION_MAP = {
|
|
library: 's-voices',
|
|
source: 's-clone',
|
|
save: 's-clone',
|
|
design: 's-design',
|
|
custom: 's-design',
|
|
getvoices: 's-studio',
|
|
generation: 's-tryout',
|
|
'stt-tts': 's-tryout',
|
|
routing: 's-routing',
|
|
integrations: 's-connect',
|
|
howto: 's-connect',
|
|
settings: 's-settings',
|
|
llms: 's-llms'
|
|
};
|
|
|
|
const SECTIONS = ['s-voices', 's-clone', 's-design', 's-studio', 's-tryout', 's-routing', 's-connect', 's-settings', 's-llms'];
|
|
|
|
function runSideEffects(name) {
|
|
if (name === 'library' && typeof loadVoiceLibrary === 'function') loadVoiceLibrary();
|
|
if ((name === 'integrations' || name === 'howto') && typeof renderIntegrationSnippets === 'function') {
|
|
if (typeof loadVoiceLibrary === 'function' && !(window._voices && window._voices.length)) loadVoiceLibrary();
|
|
renderIntegrationSnippets();
|
|
}
|
|
if (name === 'routing' && typeof loadRoutingTab === 'function') loadRoutingTab();
|
|
if (name === 'getvoices' && typeof loadGetVoices === 'function') loadGetVoices();
|
|
}
|
|
|
|
function applySettingsPage(cat) {
|
|
document.querySelectorAll('.s-settings-page').forEach(function (p) {
|
|
p.classList.toggle('is-active', p.dataset.page === cat);
|
|
});
|
|
document.querySelectorAll('[data-settings-cat]').forEach(function (el) {
|
|
el.classList.toggle('is-active', el.dataset.settingsCat === cat);
|
|
});
|
|
}
|
|
|
|
function showSection(sectionId) {
|
|
SECTIONS.forEach(function (id) {
|
|
var el = document.getElementById(id);
|
|
if (el) el.classList.toggle('is-active', id === sectionId);
|
|
});
|
|
document.querySelectorAll('[data-nav-section]').forEach(function (item) {
|
|
item.classList.toggle('active', item.dataset.navSection === sectionId);
|
|
});
|
|
|
|
// Voices nav tree
|
|
var voicesTree = document.getElementById('nav-voices-tree');
|
|
var voicesChevron = document.getElementById('nav-voices-chevron');
|
|
if (voicesTree) voicesTree.classList.toggle('open', sectionId === 's-voices');
|
|
if (voicesChevron) voicesChevron.classList.toggle('open', sectionId === 's-voices');
|
|
|
|
// Settings nav tree
|
|
var settingsTree = document.getElementById('nav-settings-tree');
|
|
var settingsChevron = document.getElementById('nav-settings-chevron');
|
|
if (settingsTree) settingsTree.classList.toggle('open', sectionId === 's-settings');
|
|
if (settingsChevron) settingsChevron.classList.toggle('open', sectionId === 's-settings');
|
|
|
|
// When entering settings, show the active sub-page (default: connections)
|
|
if (sectionId === 's-settings') {
|
|
applySettingsPage(window._settingsSidebarCat || 'connections');
|
|
}
|
|
|
|
var main = document.getElementById('main-content');
|
|
if (main) main.scrollTop = 0;
|
|
}
|
|
|
|
window.navTo = function (sectionId) {
|
|
showSection(sectionId);
|
|
var tabName = Object.keys(TAB_SECTION_MAP).find(function (k) {
|
|
return TAB_SECTION_MAP[k] === sectionId;
|
|
});
|
|
if (tabName) runSideEffects(tabName);
|
|
};
|
|
|
|
window.switchTab = function (name) {
|
|
var sectionId = TAB_SECTION_MAP[name];
|
|
if (sectionId) showSection(sectionId);
|
|
runSideEffects(name);
|
|
return true;
|
|
};
|
|
|
|
// ── Voice tree sub-navigation ─────────────────────────────────────────────
|
|
window._voiceSidebarCat = 'all';
|
|
|
|
window.navVoicesCat = function (cat) {
|
|
navTo('s-voices');
|
|
window._voiceSidebarCat = cat;
|
|
document.querySelectorAll('[data-voice-cat]').forEach(function (el) {
|
|
el.classList.toggle('is-active', el.dataset.voiceCat === cat);
|
|
});
|
|
if (typeof renderVoiceList === 'function') renderVoiceList();
|
|
};
|
|
|
|
window.updateVoiceTree = function (voices) {
|
|
if (!voices) return;
|
|
function n(fn) { return voices.filter(fn).length; }
|
|
function set(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || ''; }
|
|
set('ntc-all', n(function () { return true; }));
|
|
set('ntc-cloned', n(function (v) { return v.has_ref; }));
|
|
set('ntc-designed', n(function (v) { return !v.has_ref; }));
|
|
set('ntc-favorites',n(function (v) { return (v.rating || 0) >= 4; }));
|
|
set('ntc-hidden', n(function (v) { return v.enabled === false; }));
|
|
set('nav-voices-count', voices.length);
|
|
};
|
|
|
|
// ── Settings tree sub-navigation ──────────────────────────────────────────
|
|
window._settingsSidebarCat = 'connections';
|
|
|
|
window.navSettingsCat = function (cat) {
|
|
window._settingsSidebarCat = cat;
|
|
navTo('s-settings'); // showSection will call applySettingsPage(cat)
|
|
if (cat === 'logs' && typeof loadSettingsLogs === 'function') loadSettingsLogs();
|
|
if (cat === 'about' && typeof renderSettingsAbout === 'function') renderSettingsAbout();
|
|
};
|
|
|
|
// Show default section on load
|
|
showSection('s-voices');
|
|
runSideEffects('library');
|
|
})();
|