fen
73c06b864a
Reverts PR #297's column reorder (owner override): URL returns to position 6 in both list tables (Paste, Type, Size, Views, Created, URL, ID; /mine without Views), data-sort attrs and td cells move back together. Keeps #297's non-position improvements: /mine URL uses the shared .col-url class instead of reusing col-e, and mine's ID column returns to .col-f (100px). Widens .col-url 150px -> 340px so a ~20-char slug displays fully at 1400x900; genuinely long custom slugs keep text ellipsis. No mobile media query needed: <=640px already scrolls the table horizontally (min-width 720px), verified at 375x812. Verified via CDP probe at 1400x900 and 375x812 on /history and /mine: column order, colgroup/header alignment, sort arrow right of label, no other column clipped, no CSP changes (no inline styles added).
47 lines
2.2 KiB
JavaScript
47 lines
2.2 KiB
JavaScript
// #139: saved pastes table.
|
|
function toast(msg, kind) {
|
|
let t = document.querySelector('.toast');
|
|
if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
|
|
t.textContent = msg;
|
|
t.classList.remove('success', 'error');
|
|
if (kind === 'success') t.classList.add('success');
|
|
if (kind === 'error') t.classList.add('error');
|
|
t.classList.add('show');
|
|
clearTimeout(t._h);
|
|
t._h = setTimeout(() => t.classList.remove('show'), 2000);
|
|
}
|
|
|
|
const t = PaletteTable.init({
|
|
endpoint: '/api/mine',
|
|
perPage: 25,
|
|
hasPager: true,
|
|
rowHtml: it =>
|
|
`<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
|
|
(it.title
|
|
? `<a class="paste-name" href="/${t.esc(it.id)}">${t.esc(it.title)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
|
|
: `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
|
|
`</td>` +
|
|
`<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
|
|
`<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
|
|
(it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
|
|
`<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
|
|
`<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">×</button></td></tr>`,
|
|
emptyFiltered: 'No pastes from this browser match your search.',
|
|
emptyAll: 'No pastes from this browser yet.',
|
|
});
|
|
|
|
// delete buttons (viewer-scoped, enforced server-side #37)
|
|
document.getElementById('rows').addEventListener('click', async e => {
|
|
const del = e.target.closest('button.del');
|
|
if (!del) return;
|
|
e.stopPropagation();
|
|
del.disabled = true;
|
|
try {
|
|
const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
|
|
if (res.ok) { toast('Deleted', 'success'); t.load(); }
|
|
else { toast('Delete failed', 'error'); del.disabled = false; }
|
|
} catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
|
|
});
|
|
|
|
t.load();
|