tts-voice-creator-clone-and.../static/nav.js
mARTin-B78 28f5ec2e25 Redesign inspector pane, add searchable pickers, and style AI Backends tab
Inspector:
- Skinny 2-row header: 72px avatar + name/ID row / subtitle row / note row
- Searchable flag picker (dblclick flag icon) — filtered by voice language, falls back to ALL_FLAGS
- Searchable language picker (dblclick lang code) — shows full language names
- Tag reuse: entered tags persist to localStorage as datalist suggestions
- Compact active toggle (32×18px), slim save button (12px/4px padding)
- Show/hide eye toggle and "✓ Key saved" badge on API key fields

AI Backends (s-llms.html + style.css):
- Full CSS design: pill tabs with active accent, animated section transitions
- Service cards: icon bubbles, tier badges (Free/Demo/Paid), stat chips, endpoint rows, model tags
- Highlighted recommended card with accent border
- Dark code blocks for local service snippets with copy feedback
- Show/hide password toggle and auto-appearing "✓ Key saved" badge per card

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-26 11:23:27 +02:00

94 lines
3.5 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 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);
});
// Expand tree only when voices section is active
var tree = document.getElementById('nav-voices-tree');
var chevron = document.getElementById('nav-voices-chevron');
var isVoices = sectionId === 's-voices';
if (tree) tree.classList.toggle('open', isVoices);
if (chevron) chevron.classList.toggle('open', isVoices);
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);
};
// Show default section on load
showSection('s-voices');
runSideEffects('library');
})();