276 lines
8.9 KiB
JavaScript
276 lines
8.9 KiB
JavaScript
// =======================================================================
|
|
// Notes Application - UI & Utilities Module (Native ES Module)
|
|
// =======================================================================
|
|
|
|
export function escapeHtml(str) {
|
|
if (str === null || str === undefined) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
export function escapeRegex(string) {
|
|
if (!string) return '';
|
|
return String(string).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
}
|
|
|
|
export function slugify(text) {
|
|
if (!text) return 'book';
|
|
return text.toString().toLowerCase().trim()
|
|
.replace(/[^\w\s-]/g, '')
|
|
.replace(/[\s_-]+/g, '-')
|
|
.replace(/^-+|-+$/g, '');
|
|
}
|
|
|
|
export function shuffleArray(array) {
|
|
if (!array || !Array.isArray(array)) return [];
|
|
const arr = [...array];
|
|
for (let i = arr.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[arr[i], arr[j]] = [arr[j], arr[i]];
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Toast Notifications
|
|
// -----------------------------------------------------------------------
|
|
export function showToast(message, type = 'info') {
|
|
if (!message) return;
|
|
let toastContainer = document.getElementById('notes-toast-container');
|
|
if (!toastContainer) {
|
|
toastContainer = document.createElement('div');
|
|
toastContainer.id = 'notes-toast-container';
|
|
toastContainer.style.cssText = `
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 10000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
`;
|
|
if (document.body) {
|
|
document.body.appendChild(toastContainer);
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const toast = document.createElement('div');
|
|
const colors = {
|
|
success: '#10b981',
|
|
error: '#ef4444',
|
|
warning: '#f59e0b',
|
|
info: '#3b82f6'
|
|
};
|
|
const bg = colors[type] || colors.info;
|
|
|
|
toast.style.cssText = `
|
|
background: ${bg};
|
|
color: #ffffff;
|
|
padding: 10px 18px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
transition: all 0.25s ease;
|
|
pointer-events: auto;
|
|
max-width: 340px;
|
|
`;
|
|
toast.textContent = message;
|
|
toastContainer.appendChild(toast);
|
|
|
|
requestAnimationFrame(() => {
|
|
toast.style.opacity = '1';
|
|
toast.style.transform = 'translateY(0)';
|
|
});
|
|
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
toast.style.transform = 'translateY(12px)';
|
|
setTimeout(() => toast.remove(), 250);
|
|
}, 3500);
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Theme Management
|
|
// -----------------------------------------------------------------------
|
|
export function initTheme() {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const mobileThemeBtn = document.getElementById('mobile-theme-btn');
|
|
let savedTheme = 'dark';
|
|
try {
|
|
savedTheme = localStorage.getItem('notes_theme') || 'dark';
|
|
} catch (e) {}
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
|
|
function toggle() {
|
|
const current = document.documentElement.getAttribute('data-theme');
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
try {
|
|
localStorage.setItem('notes_theme', next);
|
|
} catch (e) {}
|
|
}
|
|
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', toggle);
|
|
}
|
|
if (mobileThemeBtn) {
|
|
mobileThemeBtn.addEventListener('click', () => {
|
|
toggle();
|
|
showToast(`Тема переключена`, 'info');
|
|
});
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Modal Open / Close Helpers (Accepts HTMLElement or string selector/ID)
|
|
// -----------------------------------------------------------------------
|
|
export function openModal(modalElem) {
|
|
if (!modalElem) return;
|
|
const el = typeof modalElem === 'string'
|
|
? (document.getElementById(modalElem) || document.querySelector(modalElem))
|
|
: modalElem;
|
|
if (el) el.classList.remove('hidden');
|
|
}
|
|
|
|
export function closeModal(modalElem) {
|
|
if (!modalElem) return;
|
|
const el = typeof modalElem === 'string'
|
|
? (document.getElementById(modalElem) || document.querySelector(modalElem))
|
|
: modalElem;
|
|
if (el) el.classList.add('hidden');
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// View Switcher Helper
|
|
// -----------------------------------------------------------------------
|
|
export function switchView(targetViewId) {
|
|
const allViews = [
|
|
'dictionary-view',
|
|
'srs-view',
|
|
'reader-view',
|
|
'cefr-view',
|
|
'grammar-view',
|
|
'lesson-view',
|
|
'lesson-runner-view'
|
|
];
|
|
allViews.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
if (id === targetViewId) {
|
|
el.classList.remove('hidden');
|
|
} else {
|
|
el.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Header Stat Counters
|
|
// -----------------------------------------------------------------------
|
|
export function updateHeaderStats(total = 0, today = 0, srsCount = 0) {
|
|
const statTotal = document.getElementById('stat-total');
|
|
const statToday = document.getElementById('stat-today');
|
|
const srsBadge = document.getElementById('srs-badge');
|
|
const tabSrsBadge = document.getElementById('tab-srs-badge');
|
|
const drawerSrsBadge = document.getElementById('drawer-srs-badge');
|
|
const drawerStatTotal = document.getElementById('drawer-stat-total');
|
|
const drawerStatToday = document.getElementById('drawer-stat-today');
|
|
const drawerStatDue = document.getElementById('drawer-stat-due');
|
|
|
|
const formattedToday = today > 0 ? `+${today}` : today;
|
|
|
|
if (statTotal) statTotal.textContent = total;
|
|
if (statToday) statToday.textContent = formattedToday;
|
|
if (drawerStatTotal) drawerStatTotal.textContent = total;
|
|
if (drawerStatToday) drawerStatToday.textContent = formattedToday;
|
|
if (drawerStatDue) drawerStatDue.textContent = srsCount;
|
|
|
|
if (srsBadge) {
|
|
srsBadge.textContent = srsCount;
|
|
srsBadge.style.display = srsCount > 0 ? 'inline-block' : 'none';
|
|
}
|
|
if (tabSrsBadge) {
|
|
tabSrsBadge.textContent = srsCount;
|
|
tabSrsBadge.classList.toggle('hidden', srsCount === 0);
|
|
}
|
|
if (drawerSrsBadge) {
|
|
drawerSrsBadge.textContent = srsCount;
|
|
drawerSrsBadge.classList.toggle('hidden', srsCount === 0);
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Audio Player Helper (Safe stub / audio stream / Piper TTS)
|
|
// -----------------------------------------------------------------------
|
|
let activeAudio = null;
|
|
|
|
export function playAudio(url, speed = 1.0) {
|
|
if (!url) return null;
|
|
try {
|
|
if (activeAudio) {
|
|
try {
|
|
activeAudio.pause();
|
|
activeAudio.currentTime = 0;
|
|
} catch (e) {}
|
|
}
|
|
const audio = new Audio(url);
|
|
if (speed && speed !== 1.0) {
|
|
audio.playbackRate = speed;
|
|
}
|
|
activeAudio = audio;
|
|
audio.play().catch(e => console.warn('Audio playback not supported or blocked:', e));
|
|
return audio;
|
|
} catch (e) {
|
|
console.warn('Audio play error:', e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function playTextSpeech(text, lang = 'en', speed = 1.0, voice = null) {
|
|
if (!text || !text.trim()) return null;
|
|
const isRu = lang && lang.toLowerCase().startsWith('ru');
|
|
let savedVoice = null;
|
|
try {
|
|
savedVoice = isRu
|
|
? localStorage.getItem('notes_tts_voice_ru')
|
|
: localStorage.getItem('notes_tts_voice_en');
|
|
} catch (e) {}
|
|
const activeVoice = voice || savedVoice;
|
|
let url = `/api/tts?text=${encodeURIComponent(text.trim())}&lang=${lang || 'en'}&speed=${speed}`;
|
|
if (activeVoice) {
|
|
url += `&voice=${encodeURIComponent(activeVoice)}`;
|
|
}
|
|
return playAudio(url, speed);
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Unified UI Object Export (for modules importing `{ ui }` or `ui`)
|
|
// -----------------------------------------------------------------------
|
|
export const ui = {
|
|
escapeHtml,
|
|
escapeRegex,
|
|
slugify,
|
|
shuffleArray,
|
|
showToast,
|
|
initTheme,
|
|
openModal,
|
|
closeModal,
|
|
switchView,
|
|
updateHeaderStats,
|
|
playAudio,
|
|
playTextSpeech,
|
|
};
|
|
|
|
export default ui;
|