feat(reader): implement FEAT-01 Focus Zen Mode (100% vh/vw, auto-hiding HUD, hotkeys F/Esc, native fullscreen)
This commit is contained in:
+103
-20
@@ -4,7 +4,7 @@
|
||||
// =======================================================================
|
||||
|
||||
import { api } from './api.js';
|
||||
import { ui, escapeHtml, showToast, switchView, shuffleArray, escapeRegex, playAudio, playTextSpeech, cleanPromptTranslation } from './ui.js';
|
||||
import { ui, escapeHtml, showToast, switchView, shuffleArray, escapeRegex, playAudio, playTextSpeech, cleanPromptTranslation, renderMarkdownTable, renderMarkdownNotes } from './ui.js';
|
||||
|
||||
let presets = [];
|
||||
let currentPreset = null;
|
||||
@@ -1332,6 +1332,18 @@ async function runGrammarReviewStep(step, container) {
|
||||
<span class="badge-formula">${escapeHtml(unitDetail.golden_formula || '')}</span>
|
||||
</div>
|
||||
|
||||
${unitDetail.cheatsheet_table ? `
|
||||
<div class="practice-cheatsheet-toggle-wrap mt-2">
|
||||
<button type="button" id="review-cheatsheet-toggle-btn" class="btn btn-sm btn-ghost practice-cheatsheet-btn">
|
||||
<span>📋 Шпаргалка по теме</span>
|
||||
<i class="ph-caret-down"></i>
|
||||
</button>
|
||||
<div id="review-cheatsheet-drawer" class="practice-cheatsheet-drawer hidden">
|
||||
${renderMarkdownTable(unitDetail.cheatsheet_table)}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="grammar-question-box mt-3">
|
||||
<p class="grammar-sentence-prompt">${escapeHtml(ex.sentence)}</p>
|
||||
${ex.clue ? `<div class="clue-tag">💡 Подсказка: ${escapeHtml(ex.clue)}</div>` : ''}
|
||||
@@ -1350,6 +1362,18 @@ async function runGrammarReviewStep(step, container) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
const reviewCsBtn = document.getElementById('review-cheatsheet-toggle-btn');
|
||||
const reviewCsDrawer = document.getElementById('review-cheatsheet-drawer');
|
||||
if (reviewCsBtn && reviewCsDrawer) {
|
||||
reviewCsBtn.addEventListener('click', () => {
|
||||
const isHidden = reviewCsDrawer.classList.contains('hidden');
|
||||
reviewCsDrawer.classList.toggle('hidden', !isHidden);
|
||||
reviewCsBtn.innerHTML = !isHidden
|
||||
? '<span>📋 Шпаргалка по теме</span><i class="ph-caret-down"></i>'
|
||||
: '<span>📋 Скрыть шпаргалку</span><i class="ph-caret-up"></i>';
|
||||
});
|
||||
}
|
||||
|
||||
container.querySelectorAll('.grammar-opt-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
// Disable all options
|
||||
@@ -1432,7 +1456,11 @@ async function runGrammarNewStep(step, container) {
|
||||
let stage = 'theory'; // theory -> exercises
|
||||
|
||||
function renderTheory() {
|
||||
const contrasts = unitDetail.contrast_explanation || [];
|
||||
const contrasts = unitDetail.contrasts || unitDetail.contrast_explanation || [];
|
||||
const hasCheatsheet = Boolean(unitDetail.cheatsheet_table && unitDetail.cheatsheet_table.trim());
|
||||
const hasNotes = Boolean(unitDetail.detailed_notes && unitDetail.detailed_notes.trim());
|
||||
const hasPrompt = Boolean(unitDetail.journaling_prompt && unitDetail.journaling_prompt.trim());
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="step-card-box">
|
||||
<div class="step-mini-header">
|
||||
@@ -1449,29 +1477,60 @@ async function runGrammarNewStep(step, container) {
|
||||
<pre class="formula-code">${escapeHtml(unitDetail.golden_formula)}</pre>
|
||||
</div>
|
||||
|
||||
<!-- Contrast Situations -->
|
||||
${contrasts.map(c => `
|
||||
<div class="contrast-card mt-3">
|
||||
<div class="contrast-row">
|
||||
<div class="contrast-col a">
|
||||
<div class="col-title">${escapeHtml(c.situation_a)}</div>
|
||||
<div class="col-example">${escapeHtml(c.example_a)}</div>
|
||||
<div class="col-trans">${escapeHtml(c.trans_a)}</div>
|
||||
</div>
|
||||
<div class="contrast-col b">
|
||||
<div class="col-title">${escapeHtml(c.situation_b)}</div>
|
||||
<div class="col-example">${escapeHtml(c.example_b)}</div>
|
||||
<div class="col-trans">${escapeHtml(c.trans_b)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast-diff mt-2">💡 <strong>Ключевая разница:</strong> ${escapeHtml(c.key_difference)}</div>
|
||||
<!-- Cheatsheet Markdown Table -->
|
||||
${hasCheatsheet ? `
|
||||
<div class="lesson-grammar-section mt-4">
|
||||
<div class="section-title"><span class="title-icon">📊</span> Наглядная шпаргалка и правила (Таблица):</div>
|
||||
${renderMarkdownTable(unitDetail.cheatsheet_table)}
|
||||
</div>
|
||||
`).join('')}
|
||||
` : ''}
|
||||
|
||||
<!-- Detailed Notes -->
|
||||
${hasNotes ? `
|
||||
<div class="lesson-grammar-section mt-4">
|
||||
<div class="section-title"><span class="title-icon">📖</span> Подробный конспект темы (Raymond Murphy):</div>
|
||||
${renderMarkdownNotes(unitDetail.detailed_notes)}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Contrast Situations -->
|
||||
${contrasts.length > 0 ? `
|
||||
<div class="lesson-grammar-section mt-4">
|
||||
<div class="section-title"><span class="title-icon">⚖️</span> Метод контрастов (В чём суть и когда применять):</div>
|
||||
${contrasts.map(c => `
|
||||
<div class="contrast-card mt-2">
|
||||
<div class="contrast-row">
|
||||
<div class="contrast-col a">
|
||||
<div class="col-title">${escapeHtml(c.situation_a)}</div>
|
||||
<div class="col-example">${escapeHtml(c.example_a)}</div>
|
||||
<div class="col-trans">${escapeHtml(c.trans_a)}</div>
|
||||
</div>
|
||||
<div class="contrast-col b">
|
||||
<div class="col-title">${escapeHtml(c.situation_b)}</div>
|
||||
<div class="col-example">${escapeHtml(c.example_b)}</div>
|
||||
<div class="col-trans">${escapeHtml(c.trans_b)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast-diff mt-2">💡 <strong>Ключевая разница:</strong> ${escapeHtml(c.key_difference)}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Handwritten Journaling Prompt -->
|
||||
${hasPrompt ? `
|
||||
<div class="grammar-journaling-card mt-4">
|
||||
<div class="journaling-prompt-box">
|
||||
<div class="formula-label">📓 Персональный дневник от руки (Motor Memory):</div>
|
||||
<p class="journaling-prompt-text mt-1">${escapeHtml(unitDetail.journaling_prompt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Handwritten Journaling Checkbox -->
|
||||
<div class="journaling-box mt-4">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="hw-checkbox">
|
||||
<input type="checkbox" id="hw-checkbox" ${unitDetail.handwritten_logged ? 'checked' : ''}>
|
||||
<span class="checkmark"></span>
|
||||
<span class="hw-text">✍️ Я записал формулу и пример в бумажную тетрадь</span>
|
||||
</label>
|
||||
@@ -1541,6 +1600,18 @@ async function runGrammarNewStep(step, container) {
|
||||
<span class="badge">Практика темы (${exIdx + 1} из ${selectedExercises.length})</span>
|
||||
</div>
|
||||
|
||||
${unitDetail.cheatsheet_table ? `
|
||||
<div class="practice-cheatsheet-toggle-wrap mt-2">
|
||||
<button type="button" id="lesson-cheatsheet-toggle-btn" class="btn btn-sm btn-ghost practice-cheatsheet-btn">
|
||||
<span>📋 Шпаргалка по теме</span>
|
||||
<i class="ph-caret-down"></i>
|
||||
</button>
|
||||
<div id="lesson-cheatsheet-drawer" class="practice-cheatsheet-drawer hidden">
|
||||
${renderMarkdownTable(unitDetail.cheatsheet_table)}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="grammar-question-box mt-3">
|
||||
<p class="grammar-sentence-prompt">${escapeHtml(ex.sentence)}</p>
|
||||
${ex.clue ? `<div class="clue-tag">💡 Подсказка: ${escapeHtml(ex.clue)}</div>` : ''}
|
||||
@@ -1559,6 +1630,18 @@ async function runGrammarNewStep(step, container) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
const lessonCsBtn = document.getElementById('lesson-cheatsheet-toggle-btn');
|
||||
const lessonCsDrawer = document.getElementById('lesson-cheatsheet-drawer');
|
||||
if (lessonCsBtn && lessonCsDrawer) {
|
||||
lessonCsBtn.addEventListener('click', () => {
|
||||
const isHidden = lessonCsDrawer.classList.contains('hidden');
|
||||
lessonCsDrawer.classList.toggle('hidden', !isHidden);
|
||||
lessonCsBtn.innerHTML = !isHidden
|
||||
? '<span>📋 Шпаргалка по теме</span><i class="ph-caret-down"></i>'
|
||||
: '<span>📋 Скрыть шпаргалку</span><i class="ph-caret-up"></i>';
|
||||
});
|
||||
}
|
||||
|
||||
container.querySelectorAll('.grammar-opt-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
container.querySelectorAll('.grammar-opt-btn').forEach(b => b.disabled = true);
|
||||
|
||||
Reference in New Issue
Block a user