feat(flashcards): картинки на карточках (загрузка, вставка, рендер)
- Миграция 048: колонки front_image/back_image в flashcard_cards - Бэкенд: POST /api/flashcards/upload (multer, 5МБ, только изображения), валидатор safeImg (только /uploads/flashcards/..., блок XSS/traversal/external), картинки в add/update/quick/study/random; статик-маунт /uploads/flashcards - Редактор: превью+кнопка загрузки+вставка (Ctrl+V) на каждую сторону, картинки к ещё не созданной карточке через add-bar - Режим изучения: рендер изображения над текстом на обеих сторонах - FAB: вставка картинки в быструю карточку Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+183
-4
@@ -146,6 +146,24 @@
|
||||
.card-act-btn:hover { background: var(--surface-2); color: var(--text); }
|
||||
.card-act-btn.del:hover { background: #FEE2E2; color: #DC2626; }
|
||||
|
||||
/* card image (editor) */
|
||||
.card-img-row { margin-top: 8px; }
|
||||
.card-img-wrap { position: relative; display: inline-block; }
|
||||
.card-img-thumb { max-width: 140px; max-height: 92px; border-radius: 8px; display: block;
|
||||
border: 1.5px solid var(--border); object-fit: cover; cursor: zoom-in; }
|
||||
.card-img-remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
|
||||
border-radius: 50%; border: none; background: #DC2626; color: #fff; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.25); }
|
||||
.card-img-remove svg { width: 12px; height: 12px; }
|
||||
.card-img-add { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px;
|
||||
border: 1.5px dashed var(--border); background: none; cursor: pointer; color: var(--text-3);
|
||||
font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 600; transition: .15s; }
|
||||
.card-img-add:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.04); }
|
||||
.card-img-add .ic { width: 13px; height: 13px; }
|
||||
#new-card-imgs { display: none; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
|
||||
.new-img-lbl { font-size: .7rem; font-weight: 700; color: var(--text-3); margin-right: 4px; }
|
||||
|
||||
.card-add-bar { display: flex; gap: 10px; align-items: center; }
|
||||
.card-add-input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px;
|
||||
font-family: 'Manrope', sans-serif; font-size: .88rem; background: #fff;
|
||||
@@ -185,8 +203,11 @@
|
||||
|
||||
.study-face { position: absolute; inset: 0; border-radius: 22px; padding: 36px 40px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-direction: column; gap: 12px;
|
||||
backface-visibility: hidden; -webkit-backface-visibility: hidden;
|
||||
border: 1.5px solid var(--border); overflow: auto; }
|
||||
.study-face-img { max-width: 100%; max-height: 190px; border-radius: 12px; object-fit: contain;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.1); }
|
||||
.study-face-front { background: linear-gradient(170deg, var(--deck-color-a, rgba(155,93,229,.07)) 0%, #fff 38%);
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06); }
|
||||
.study-face-back { background: linear-gradient(170deg, rgba(246,243,255,.9) 0%, #fff 45%);
|
||||
@@ -344,10 +365,13 @@
|
||||
<div class="card-list" id="card-list"></div>
|
||||
<!-- Add card row -->
|
||||
<div class="card-add-bar" style="margin-bottom:14px">
|
||||
<input class="card-add-input" id="new-card-front" placeholder="Лицевая сторона (вопрос)…" onkeydown="addCardOnEnter(event)" />
|
||||
<input class="card-add-input" id="new-card-back" placeholder="Обратная сторона (ответ)…" onkeydown="addCardOnEnter(event)" />
|
||||
<input class="card-add-input" id="new-card-front" placeholder="Лицевая сторона (вопрос)…"
|
||||
onkeydown="addCardOnEnter(event)" onpaste="onNewCardPaste(event,'front')" />
|
||||
<input class="card-add-input" id="new-card-back" placeholder="Обратная сторона (ответ)…"
|
||||
onkeydown="addCardOnEnter(event)" onpaste="onNewCardPaste(event,'back')" />
|
||||
<button class="fc-btn fc-btn-primary" onclick="addCard()">+ Добавить</button>
|
||||
</div>
|
||||
<div id="new-card-imgs"></div>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<button class="fc-btn fc-btn-ghost" onclick="openEditDeckModal()"><svg class="ic" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>️ Редактировать колоду</button>
|
||||
<button class="fc-btn fc-btn-danger" onclick="confirmDeleteDeck()">Удалить колоду</button>
|
||||
@@ -371,10 +395,12 @@
|
||||
<div class="study-card-inner" id="study-card">
|
||||
<div class="study-face study-face-front">
|
||||
<span class="study-face-label">Вопрос</span>
|
||||
<img class="study-face-img" id="study-front-img" alt="" style="display:none" />
|
||||
<div class="study-face-text" id="study-front-text"></div>
|
||||
</div>
|
||||
<div class="study-face study-face-back">
|
||||
<span class="study-face-label">Ответ</span>
|
||||
<img class="study-face-img" id="study-back-img" alt="" style="display:none" />
|
||||
<div class="study-face-text" id="study-back-text"></div>
|
||||
</div>
|
||||
<span class="swipe-indicator swipe-right-ind" id="ind-right">ЗНАЮ <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
|
||||
@@ -474,6 +500,7 @@ let _cards = [];
|
||||
let _editingDeckId = null;
|
||||
let _deckColor = '#9B5DE5';
|
||||
let _cardFilter = '';
|
||||
let _newImg = { front: '', back: '' }; // картинки, прикреплённые к ещё не созданной карточке
|
||||
|
||||
(async () => {
|
||||
/* ── auth ── */
|
||||
@@ -689,13 +716,17 @@ function renderCardList() {
|
||||
<div class="card-side">
|
||||
<div class="card-side-lbl">Вопрос</div>
|
||||
<textarea class="card-textarea" rows="2"
|
||||
onpaste="onCardPaste(event,${c.id},'front')"
|
||||
onchange="saveCard(${c.id},'front',this.value)">${esc(c.front)}</textarea>
|
||||
${imgRowHtml(c, 'front')}
|
||||
</div>
|
||||
<div class="card-divider"></div>
|
||||
<div class="card-side">
|
||||
<div class="card-side-lbl">Ответ</div>
|
||||
<textarea class="card-textarea" rows="2"
|
||||
onpaste="onCardPaste(event,${c.id},'back')"
|
||||
onchange="saveCard(${c.id},'back',this.value)">${esc(c.back)}</textarea>
|
||||
${imgRowHtml(c, 'back')}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="card-act-btn del" onclick="deleteCard(${c.id})" title="Удалить">
|
||||
@@ -774,14 +805,17 @@ async function addCard() {
|
||||
if (!_curDeck) return;
|
||||
const front = document.getElementById('new-card-front').value.trim();
|
||||
const back = document.getElementById('new-card-back').value.trim();
|
||||
if (!front && !back) return;
|
||||
if (!front && !back && !_newImg.front && !_newImg.back) return;
|
||||
const card = await LS.api(`/api/flashcards/decks/${_curDeck.id}/cards`, {
|
||||
method: 'POST', body: JSON.stringify({ front, back })
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ front, back, front_image: _newImg.front, back_image: _newImg.back })
|
||||
}).catch(()=>null);
|
||||
if (!card) return;
|
||||
_cards.push(card);
|
||||
document.getElementById('new-card-front').value = '';
|
||||
document.getElementById('new-card-back').value = '';
|
||||
_newImg = { front: '', back: '' };
|
||||
renderNewImgs();
|
||||
document.getElementById('new-card-front').focus();
|
||||
renderCardList();
|
||||
}
|
||||
@@ -806,6 +840,142 @@ async function deleteCard(id) {
|
||||
renderCardList();
|
||||
}
|
||||
|
||||
/* ════ Card images ════
|
||||
Загрузка идёт ПРЯМЫМ fetch (multipart): LS.api всегда ставит
|
||||
Content-Type: application/json, что ломает разбор FormData в multer. */
|
||||
function imgRowHtml(c, side) {
|
||||
const url = side === 'front' ? c.front_image : c.back_image;
|
||||
if (url) {
|
||||
return `<div class="card-img-row"><div class="card-img-wrap">
|
||||
<img class="card-img-thumb" src="${esc(url)}" alt="" onclick="window.open('${esc(url)}','_blank')" />
|
||||
<button class="card-img-remove" title="Убрать картинку" onclick="removeCardImage(${c.id},'${side}')">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 6l12 12M18 6L6 18"/></svg>
|
||||
</button>
|
||||
</div></div>`;
|
||||
}
|
||||
return `<div class="card-img-row">
|
||||
<button class="card-img-add" onclick="pickCardImage(${c.id},'${side}')">
|
||||
<svg class="ic" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
|
||||
Картинка
|
||||
</button></div>`;
|
||||
}
|
||||
|
||||
async function uploadFcImage(file) {
|
||||
if (!file || !file.type || !file.type.startsWith('image/')) throw new Error('Только изображения');
|
||||
if (file.size > 5 * 1024 * 1024) throw new Error('Файл больше 5 МБ');
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const token = localStorage.getItem('ls_token');
|
||||
const res = await fetch('/api/flashcards/upload', {
|
||||
method: 'POST',
|
||||
headers: token ? { Authorization: 'Bearer ' + token } : {},
|
||||
body: fd,
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || 'Не удалось загрузить');
|
||||
return data.url;
|
||||
}
|
||||
|
||||
let _imgPickInput = null;
|
||||
function pickCardImage(cardId, side) {
|
||||
if (!_imgPickInput) {
|
||||
_imgPickInput = document.createElement('input');
|
||||
_imgPickInput.type = 'file';
|
||||
_imgPickInput.accept = 'image/*';
|
||||
_imgPickInput.style.display = 'none';
|
||||
document.body.appendChild(_imgPickInput);
|
||||
}
|
||||
_imgPickInput.value = '';
|
||||
_imgPickInput.onchange = () => {
|
||||
const file = _imgPickInput.files && _imgPickInput.files[0];
|
||||
if (file) attachCardImage(cardId, side, file);
|
||||
};
|
||||
_imgPickInput.click();
|
||||
}
|
||||
|
||||
async function attachCardImage(cardId, side, file) {
|
||||
const card = _cards.find(c => c.id === cardId);
|
||||
if (!card) return;
|
||||
const field = side === 'front' ? 'front_image' : 'back_image';
|
||||
let url;
|
||||
try { LS.toast('Загрузка картинки…'); url = await uploadFcImage(file); }
|
||||
catch (e) { LS.toast(e.message || 'Ошибка загрузки', 'error'); return; }
|
||||
await LS.api(`/api/flashcards/cards/${cardId}`, {
|
||||
method: 'PUT', body: JSON.stringify({ [field]: url })
|
||||
}).catch(()=>{});
|
||||
card[field] = url;
|
||||
updateCardImgRow(cardId, side);
|
||||
LS.toast('Картинка добавлена', 'success');
|
||||
}
|
||||
|
||||
async function removeCardImage(cardId, side) {
|
||||
const card = _cards.find(c => c.id === cardId);
|
||||
if (!card) return;
|
||||
const field = side === 'front' ? 'front_image' : 'back_image';
|
||||
await LS.api(`/api/flashcards/cards/${cardId}`, {
|
||||
method: 'PUT', body: JSON.stringify({ [field]: '' })
|
||||
}).catch(()=>{});
|
||||
card[field] = '';
|
||||
updateCardImgRow(cardId, side);
|
||||
}
|
||||
|
||||
/* точечно перерисовываем только блок картинки — textarea'ы не трогаем */
|
||||
function updateCardImgRow(cardId, side) {
|
||||
const card = _cards.find(c => c.id === cardId);
|
||||
const item = document.getElementById('ci-' + cardId);
|
||||
if (!card || !item) { renderCardList(); return; }
|
||||
const sides = item.querySelectorAll('.card-side');
|
||||
const sideEl = side === 'front' ? sides[0] : sides[1];
|
||||
if (!sideEl) { renderCardList(); return; }
|
||||
const row = sideEl.querySelector('.card-img-row');
|
||||
if (row) row.outerHTML = imgRowHtml(card, side);
|
||||
else sideEl.insertAdjacentHTML('beforeend', imgRowHtml(card, side));
|
||||
}
|
||||
|
||||
function onCardPaste(e, cardId, side) {
|
||||
const items = e.clipboardData && e.clipboardData.items;
|
||||
if (!items) return;
|
||||
for (const it of items) {
|
||||
if (it.type && it.type.startsWith('image/')) {
|
||||
const file = it.getAsFile();
|
||||
if (file) { e.preventDefault(); attachCardImage(cardId, side, file); }
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── картинки для ещё не созданной карточки (add-bar) ── */
|
||||
async function onNewCardPaste(e, side) {
|
||||
const items = e.clipboardData && e.clipboardData.items;
|
||||
if (!items) return;
|
||||
for (const it of items) {
|
||||
if (it.type && it.type.startsWith('image/')) {
|
||||
const file = it.getAsFile();
|
||||
if (!file) return;
|
||||
e.preventDefault();
|
||||
try { const url = await uploadFcImage(file); _newImg[side] = url; renderNewImgs(); LS.toast('Картинка прикреплена к новой карточке', 'success'); }
|
||||
catch (err) { LS.toast(err.message || 'Ошибка загрузки', 'error'); }
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderNewImgs() {
|
||||
const box = document.getElementById('new-card-imgs');
|
||||
if (!box) return;
|
||||
const chip = (side, label) => _newImg[side]
|
||||
? `<span class="card-img-wrap" style="display:inline-flex;align-items:center">
|
||||
<span class="new-img-lbl">${label}</span>
|
||||
<img class="card-img-thumb" style="max-height:64px" src="${esc(_newImg[side])}" alt="" />
|
||||
<button class="card-img-remove" onclick="clearNewImg('${side}')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
|
||||
</span>` : '';
|
||||
const f = chip('front', 'Вопрос'), b = chip('back', 'Ответ');
|
||||
box.innerHTML = f + b;
|
||||
box.style.display = (f || b) ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function clearNewImg(side) { _newImg[side] = ''; renderNewImgs(); }
|
||||
|
||||
/* ════ Bulk add ════ */
|
||||
function openBulkModal() {
|
||||
document.getElementById('bulk-text').value = '';
|
||||
@@ -891,6 +1061,8 @@ function showStudyCard() {
|
||||
el.className = 'study-card-inner';
|
||||
document.getElementById('study-front-text').innerHTML = mathHtmlFC(card.front);
|
||||
document.getElementById('study-back-text').innerHTML = mathHtmlFC(card.back);
|
||||
setStudyImg('study-front-img', card.front_image);
|
||||
setStudyImg('study-back-img', card.back_image);
|
||||
_studyFlipped = false;
|
||||
document.getElementById('study-btns').classList.remove('visible');
|
||||
document.getElementById('study-flip-hint').style.display = 'block';
|
||||
@@ -900,6 +1072,13 @@ function showStudyCard() {
|
||||
updateSQDays(card);
|
||||
}
|
||||
|
||||
function setStudyImg(id, url) {
|
||||
const img = document.getElementById(id);
|
||||
if (!img) return;
|
||||
if (url) { img.src = url; img.style.display = 'block'; }
|
||||
else { img.removeAttribute('src'); img.style.display = 'none'; }
|
||||
}
|
||||
|
||||
function updateStudyProgress() {
|
||||
const total = _studyCards.length;
|
||||
const done = _studyIdx;
|
||||
|
||||
Reference in New Issue
Block a user