feat(classroom): открытие любого учебника в онлайн-уроке
Учитель может выбрать любой активный учебник из каталога /api/textbooks и открыть его в общем iframe для всех участников. По аналогии с симуляциями: - Backend: контроллер classroom/textbook.js + 4 роута (POST/DELETE /:id/textbook, /:id/textbook/nav, /:id/textbook/mode) с SSE-событиями classroom_textbook_open|close|nav|mode - Embed-режим /textbook/:slug?embed=1: сервер injectит CSS+JS-bridge перед </head>, скрывая хедер/сайдбар и пересылая клики/скролл наверх через postMessage (без правки 40+ HTML-учебников) - Frontend (classroom.html): кнопка «Учебник» в header, пикер с фильтрами по предмету, iframe-панель с режимами демо/свободно, relay nav-событий учителя → всем студентам в demo-режиме
This commit is contained in:
Maxim Dolgolyov
@@ -2118,6 +2118,52 @@
|
||||
.cr-sim-picker-card-cat.chem { background: rgba(241,91,181,0.1); border-color: rgba(241,91,181,0.3); color: #F15BB5; }
|
||||
.cr-sim-picker-card-cat.bio { background: rgba(168,224,99,0.1); border-color: rgba(168,224,99,0.3); color: #A8E063; }
|
||||
.cr-sim-picker-card-cat.game { background: rgba(255,159,67,0.1); border-color: rgba(255,159,67,0.3); color: #FF9F43; }
|
||||
|
||||
/* ── Textbook panel (mirrors sim panel) ─────────────────────────────── */
|
||||
.cr-tb-panel {
|
||||
position: absolute; inset: 0; z-index: 5;
|
||||
background: #fff; display: none; flex-direction: column;
|
||||
border-left: 1px solid rgba(155,93,229,0.2);
|
||||
}
|
||||
.cr-tb-panel.open { display: flex; }
|
||||
.cr-tb-bar {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 14px; background: #1a0f2e; flex-shrink: 0;
|
||||
border-bottom: 1px solid rgba(155,93,229,0.2);
|
||||
}
|
||||
.cr-tb-bar-icon {
|
||||
width: 24px; height: 24px; border-radius: 7px;
|
||||
background: rgba(6,214,224,0.15); border: 1px solid rgba(6,214,224,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.cr-tb-bar-icon svg { width: 12px; height: 12px; stroke: #06D6E0; }
|
||||
.cr-tb-bar-title { font-size: 0.82rem; font-weight: 700; color: #f0e8ff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.cr-tb-bar-close {
|
||||
width: 26px; height: 26px; border-radius: 7px; border: none;
|
||||
background: rgba(241,91,181,0.1); color: rgba(255,255,255,0.7);
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
|
||||
}
|
||||
.cr-tb-bar-close:hover { background: rgba(241,91,181,0.18); color: #F15BB5; }
|
||||
.cr-tb-bar-close svg { width: 14px; height: 14px; }
|
||||
.cr-tb-mode {
|
||||
display: flex; gap: 4px; padding: 3px; background: rgba(255,255,255,0.04);
|
||||
border-radius: 99px; border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.cr-tb-mode-btn {
|
||||
padding: 4px 12px; border-radius: 99px; border: 1.5px solid transparent;
|
||||
background: transparent; color: rgba(255,255,255,0.5);
|
||||
font-family: 'Manrope',sans-serif; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: all .15s;
|
||||
}
|
||||
.cr-tb-mode-btn:hover { color: rgba(255,255,255,0.7); }
|
||||
.cr-tb-mode-btn.active { background: rgba(6,214,224,0.18); border-color: rgba(6,214,224,0.45); color: #06D6E0; }
|
||||
.cr-tb-frame {
|
||||
flex: 1; width: 100%; border: 0; background: #fff;
|
||||
}
|
||||
.cr-tb-blocker {
|
||||
position: absolute; inset: 38px 0 0 0;
|
||||
display: none; background: transparent; cursor: not-allowed; z-index: 10;
|
||||
}
|
||||
.cr-tb-blocker.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -2149,6 +2195,10 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>
|
||||
<span>Симуляция</span>
|
||||
</button>
|
||||
<button class="cr-header-btn" id="cr-tb-btn" onclick="crOpenTbPicker()" style="display:none" title="Открыть учебник">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
<span>Учебник</span>
|
||||
</button>
|
||||
<!-- hand raise: student only -->
|
||||
<button class="cr-hand-btn" id="cr-hand-btn" onclick="crToggleHand()" style="display:none">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>
|
||||
@@ -2269,6 +2319,24 @@
|
||||
<!-- Blocks student interaction in demo mode -->
|
||||
<div class="cr-sim-blocker" id="cr-sim-blocker"></div>
|
||||
</div>
|
||||
<!-- Textbook iframe overlay (shown when teacher opens a textbook) -->
|
||||
<div class="cr-tb-panel" id="cr-tb-panel">
|
||||
<div class="cr-tb-bar">
|
||||
<div class="cr-tb-bar-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
</div>
|
||||
<span class="cr-tb-bar-title" id="cr-tb-bar-title">Учебник</span>
|
||||
<div class="cr-tb-mode" id="cr-tb-mode-toggle" style="display:none">
|
||||
<button class="cr-tb-mode-btn active" id="cr-tb-mode-demo" onclick="crSetTbMode('demo')" title="Все видят то же, что и учитель">Демо</button>
|
||||
<button class="cr-tb-mode-btn" id="cr-tb-mode-free" onclick="crSetTbMode('free')" title="Каждый листает самостоятельно">Свободно</button>
|
||||
</div>
|
||||
<button class="cr-tb-bar-close" id="cr-tb-bar-close" onclick="crTeacherCloseTb()" title="Закрыть учебник" style="display:none">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<iframe class="cr-tb-frame" id="cr-tb-frame" src="about:blank"></iframe>
|
||||
<div class="cr-tb-blocker" id="cr-tb-blocker"></div>
|
||||
</div>
|
||||
<!-- Annotate-mode floating bar (shown on top of sim when drawing) -->
|
||||
<div class="cr-annotate-bar" id="cr-annotate-bar">
|
||||
<span class="cr-annotate-bar-label">
|
||||
@@ -3678,6 +3746,14 @@
|
||||
if (_sessionId == data.sessionId) onSimModeChange(data.mode);
|
||||
} else if (data.type === 'classroom_sim_annotate') {
|
||||
if (_sessionId == data.sessionId) _crApplyAnnotate(data.active);
|
||||
} else if (data.type === 'classroom_textbook_open') {
|
||||
if (_sessionId == data.sessionId) onTbOpen(data);
|
||||
} else if (data.type === 'classroom_textbook_close') {
|
||||
if (_sessionId == data.sessionId) onTbClose();
|
||||
} else if (data.type === 'classroom_textbook_nav') {
|
||||
if (_sessionId == data.sessionId) onTbNav(data);
|
||||
} else if (data.type === 'classroom_textbook_mode') {
|
||||
if (_sessionId == data.sessionId) onTbModeChange(data.mode);
|
||||
} else if (data.type === '_sse_reconnect') {
|
||||
// SSE reconnected after a drop — re-sync all real-time state to fill the gap
|
||||
if (_sessionId) resyncAfterReconnect();
|
||||
@@ -3980,6 +4056,7 @@
|
||||
document.getElementById('cr-leave-btn').style.display = isTeacher ? 'none' : 'flex';
|
||||
document.getElementById('cr-screen-btn').style.display = isTeacher ? 'flex' : 'none';
|
||||
document.getElementById('cr-sim-btn').style.display = isTeacher ? 'flex' : 'none';
|
||||
document.getElementById('cr-tb-btn').style.display = isTeacher ? 'flex' : 'none';
|
||||
document.getElementById('cr-guest-btn').style.display = isTeacher ? 'flex' : 'none';
|
||||
document.getElementById('cr-share-lib-btn').style.display = isTeacher ? 'flex' : 'none';
|
||||
document.getElementById('cr-hand-btn').style.display = isTeacher ? 'none' : 'flex';
|
||||
@@ -7099,6 +7176,211 @@
|
||||
}, 300);
|
||||
});
|
||||
|
||||
/* ════════════════════════════════════════════════════════════════════
|
||||
TEXTBOOK in classroom — open any textbook in shared iframe
|
||||
════════════════════════════════════════════════════════════════════ */
|
||||
let _tbActive = null; // current slug, or null
|
||||
let _tbMode = 'demo'; // 'demo' | 'free'
|
||||
let _tbList = null; // cached catalog from GET /api/textbooks
|
||||
let _tbPickerSubj = 'all';
|
||||
let _tbNavThrottle = null;
|
||||
|
||||
async function crOpenTbPicker() {
|
||||
if (_tbActive) { crTeacherCloseTb(); return; }
|
||||
const overlay = document.getElementById('cr-tb-picker-overlay');
|
||||
overlay.classList.add('open');
|
||||
if (!_tbList) {
|
||||
try {
|
||||
const data = await LS.get('/api/textbooks');
|
||||
_tbList = Array.isArray(data) ? data : (data?.textbooks || data?.items || []);
|
||||
} catch (e) {
|
||||
document.getElementById('cr-tb-picker-grid').innerHTML =
|
||||
`<div style="grid-column:1/-1;color:#F15BB5;padding:24px;text-align:center;font-size:.85rem">Не удалось загрузить список учебников</div>`;
|
||||
return;
|
||||
}
|
||||
_crRenderTbCats();
|
||||
}
|
||||
_crRenderTbGrid(_tbPickerSubj);
|
||||
}
|
||||
|
||||
function crCloseTbPicker() {
|
||||
document.getElementById('cr-tb-picker-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
function crFilterTbs(subj, btn) {
|
||||
_tbPickerSubj = subj;
|
||||
document.querySelectorAll('#cr-tb-picker-cats .cr-sim-cat-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
_crRenderTbGrid(subj);
|
||||
}
|
||||
|
||||
function _crRenderTbCats() {
|
||||
const subjs = [...new Set((_tbList || []).map(t => t.subject).filter(Boolean))].sort();
|
||||
const SUBJ_LABEL = {
|
||||
math: 'Математика', algebra: 'Алгебра', geometry: 'Геометрия',
|
||||
physics: 'Физика', chemistry: 'Химия', biology: 'Биология',
|
||||
informatics: 'Информатика', russian: 'Русский', english: 'Английский',
|
||||
};
|
||||
const cats = document.getElementById('cr-tb-picker-cats');
|
||||
cats.innerHTML = `<button class="cr-sim-cat-btn active" onclick="crFilterTbs('all', this)">Все</button>` +
|
||||
subjs.map(s => `<button class="cr-sim-cat-btn" onclick="crFilterTbs('${s}', this)">${SUBJ_LABEL[s] || s}</button>`).join('');
|
||||
}
|
||||
|
||||
function _crRenderTbGrid(subj) {
|
||||
const grid = document.getElementById('cr-tb-picker-grid');
|
||||
const list = (_tbList || []).filter(t => subj === 'all' || t.subject === subj);
|
||||
if (!list.length) {
|
||||
grid.innerHTML = `<div style="grid-column:1/-1;color:rgba(255,255,255,0.5);padding:24px;text-align:center;font-size:.85rem">Нет учебников</div>`;
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = list.map(t => {
|
||||
const slugSafe = String(t.slug).replace(/[^a-z0-9_-]/gi, '');
|
||||
const titleEsc = String(t.title || t.slug).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
const grade = t.grade ? `${t.grade} кл.` : '';
|
||||
return `
|
||||
<div class="cr-sim-picker-card" onclick="crPickTb('${slugSafe}')" title="${titleEsc}">
|
||||
<span class="cr-sim-picker-card-cat math">${grade || (t.subject || '')}</span>
|
||||
<span class="cr-sim-picker-card-title">${titleEsc}</span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function crPickTb(slug) {
|
||||
crCloseTbPicker();
|
||||
if (!_sessionId) return;
|
||||
try {
|
||||
await LS.post(`/api/classroom/${_sessionId}/textbook`, { slug });
|
||||
// onTbOpen will fire via SSE echo
|
||||
} catch (e) {
|
||||
LS.toast(e.message || 'Ошибка открытия учебника', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function crTeacherCloseTb() {
|
||||
if (!_sessionId) return;
|
||||
try { await LS.del(`/api/classroom/${_sessionId}/textbook`); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
}
|
||||
|
||||
async function crSetTbMode(mode) {
|
||||
if (!_sessionId) return;
|
||||
try { await LS.post(`/api/classroom/${_sessionId}/textbook/mode`, { mode }); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
||||
}
|
||||
|
||||
function onTbOpen(data) {
|
||||
_tbActive = data.slug;
|
||||
const panel = document.getElementById('cr-tb-panel');
|
||||
const frame = document.getElementById('cr-tb-frame');
|
||||
const titleEl = document.getElementById('cr-tb-bar-title');
|
||||
const closeBtn = document.getElementById('cr-tb-bar-close');
|
||||
const modeTog = document.getElementById('cr-tb-mode-toggle');
|
||||
const headerBtn = document.getElementById('cr-tb-btn');
|
||||
const blocker = document.getElementById('cr-tb-blocker');
|
||||
const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
|
||||
|
||||
titleEl.textContent = data.title || data.slug;
|
||||
let src = `/textbook/${encodeURIComponent(data.slug)}?embed=1`;
|
||||
if (data.hash) src += '#' + data.hash;
|
||||
frame.src = src;
|
||||
panel.classList.add('open');
|
||||
|
||||
if (closeBtn) closeBtn.style.display = isTeacher ? 'flex' : 'none';
|
||||
if (modeTog) modeTog.style.display = isTeacher ? 'flex' : 'none';
|
||||
if (headerBtn && isTeacher) {
|
||||
headerBtn.title = 'Закрыть учебник';
|
||||
headerBtn.querySelector('span').textContent = 'Закрыть';
|
||||
}
|
||||
if (blocker) blocker.classList.toggle('active', !isTeacher && _tbMode === 'demo');
|
||||
onTbModeChange(_tbMode);
|
||||
}
|
||||
|
||||
function onTbClose() {
|
||||
_tbActive = null;
|
||||
const panel = document.getElementById('cr-tb-panel');
|
||||
const frame = document.getElementById('cr-tb-frame');
|
||||
const headerBtn = document.getElementById('cr-tb-btn');
|
||||
const modeTog = document.getElementById('cr-tb-mode-toggle');
|
||||
const blocker = document.getElementById('cr-tb-blocker');
|
||||
panel.classList.remove('open');
|
||||
if (modeTog) modeTog.style.display = 'none';
|
||||
if (blocker) blocker.classList.remove('active');
|
||||
setTimeout(() => { if (frame) frame.src = 'about:blank'; }, 300);
|
||||
if (headerBtn) {
|
||||
headerBtn.title = 'Открыть учебник';
|
||||
const sp = headerBtn.querySelector('span'); if (sp) sp.textContent = 'Учебник';
|
||||
}
|
||||
}
|
||||
|
||||
function onTbNav(data) {
|
||||
if (!_tbActive) return;
|
||||
const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
|
||||
// In demo mode студенты следуют за учителем. В free — игнорируем nav-события.
|
||||
if (isTeacher) return;
|
||||
if (_tbMode !== 'demo') return;
|
||||
const frame = document.getElementById('cr-tb-frame');
|
||||
if (!frame) return;
|
||||
// Если slug сменился — перезагружаем iframe, иначе шлём postMessage
|
||||
if (data.slug && data.slug !== _tbActive) {
|
||||
_tbActive = data.slug;
|
||||
document.getElementById('cr-tb-bar-title').textContent = data.title || data.slug;
|
||||
let src = `/textbook/${encodeURIComponent(data.slug)}?embed=1`;
|
||||
if (data.hash) src += '#' + data.hash;
|
||||
frame.src = src;
|
||||
} else {
|
||||
frame.contentWindow?.postMessage(
|
||||
{ type: 'ls_tb_apply', hash: data.hash, scrollY: data.scrollY }, '*'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function onTbModeChange(mode) {
|
||||
_tbMode = mode;
|
||||
const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
|
||||
const blocker = document.getElementById('cr-tb-blocker');
|
||||
const frame = document.getElementById('cr-tb-frame');
|
||||
if (blocker) blocker.classList.toggle('active', !isTeacher && mode === 'demo');
|
||||
document.getElementById('cr-tb-mode-demo')?.classList.toggle('active', mode === 'demo');
|
||||
document.getElementById('cr-tb-mode-free')?.classList.toggle('active', mode === 'free');
|
||||
// Сообщаем iframe — блокировать клики у студента в demo
|
||||
if (frame && !isTeacher) {
|
||||
frame.contentWindow?.postMessage({ type: 'ls_tb_lock', locked: mode === 'demo' }, '*');
|
||||
}
|
||||
}
|
||||
|
||||
// Teacher: relay textbook nav (hash/scroll) from iframe → backend → SSE
|
||||
window.addEventListener('message', e => {
|
||||
if (!_tbActive || !_sessionId) return;
|
||||
const isTeacher = _me?.role === 'teacher' || _me?.role === 'admin';
|
||||
if (!isTeacher) return;
|
||||
const d = e.data;
|
||||
if (!d || typeof d !== 'object') return;
|
||||
if (d.type === 'ls_tb_nav') {
|
||||
// navigation: hash или ссылка на другой учебник — отправляем сразу
|
||||
const slug = d.slug || _tbActive;
|
||||
LS.post(`/api/classroom/${_sessionId}/textbook/nav`, {
|
||||
slug, hash: d.hash || null
|
||||
}).catch(() => {});
|
||||
// если открыли другой учебник — учитель сам переключает iframe (студенты получат через SSE)
|
||||
if (slug !== _tbActive) {
|
||||
const frame = document.getElementById('cr-tb-frame');
|
||||
if (frame) {
|
||||
let src = `/textbook/${encodeURIComponent(slug)}?embed=1`;
|
||||
if (d.hash) src += '#' + d.hash;
|
||||
frame.src = src;
|
||||
_tbActive = slug;
|
||||
}
|
||||
}
|
||||
} else if (d.type === 'ls_tb_scroll') {
|
||||
clearTimeout(_tbNavThrottle);
|
||||
_tbNavThrottle = setTimeout(() => {
|
||||
LS.post(`/api/classroom/${_sessionId}/textbook/nav`, {
|
||||
slug: _tbActive, scrollY: d.scrollY
|
||||
}).catch(() => {});
|
||||
}, 350);
|
||||
}
|
||||
});
|
||||
|
||||
function crToggleDrawPermission(uid) {
|
||||
if (!_sessionId) return;
|
||||
const numUid = Number(uid);
|
||||
@@ -7841,6 +8123,26 @@
|
||||
</div><!-- /.cr-settings-panel -->
|
||||
</div><!-- /.cr-settings-overlay -->
|
||||
|
||||
<!-- ── Textbook picker modal (re-uses .cr-sim-picker-* styles) ─────────── -->
|
||||
<div class="cr-sim-picker-overlay" id="cr-tb-picker-overlay" onclick="if(event.target===this)crCloseTbPicker()">
|
||||
<div class="cr-sim-picker-modal">
|
||||
<div class="cr-sim-picker-head">
|
||||
<h3>Выбрать учебник</h3>
|
||||
<button class="cr-sim-picker-close" onclick="crCloseTbPicker()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cr-sim-picker-cats" id="cr-tb-picker-cats">
|
||||
<button class="cr-sim-cat-btn active" onclick="crFilterTbs('all', this)">Все</button>
|
||||
</div>
|
||||
<div class="cr-sim-picker-body">
|
||||
<div class="cr-sim-picker-grid" id="cr-tb-picker-grid">
|
||||
<div style="grid-column:1/-1;color:rgba(255,255,255,0.5);padding:24px;text-align:center;font-size:.85rem">Загрузка…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Simulation picker modal ─────────────────────────────────────────── -->
|
||||
<div class="cr-sim-picker-overlay" id="cr-sim-picker-overlay" onclick="if(event.target===this)crCloseSimPicker()">
|
||||
<div class="cr-sim-picker-modal">
|
||||
|
||||
Reference in New Issue
Block a user