bak
This commit is contained in:
th committed
1 parent
5aa3abc860
commit
5f9db690a4
24 files changed
+1447
-597
No files matched your search
+194
-17
@@ -73,6 +73,31 @@ function clearSelection() {
|
||||
export function getSelectedIds() { return [...selectedIds]; }
|
||||
export { clearSelection };
|
||||
|
||||
// Delete/Backspace deletes selected cards
|
||||
document.addEventListener('keydown', async e => {
|
||||
if (!selectedIds.size) return;
|
||||
if (e.key !== 'Delete' && e.key !== 'Backspace') return;
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
|
||||
e.preventDefault();
|
||||
if (localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
|
||||
const { showDialog } = await import('./dialog.js');
|
||||
const ok = await showDialog({ title: 'delete cards', message: `${selectedIds.size} card${selectedIds.size > 1 ? 's' : ''} loeschen?`, danger: true, okLabel: 'delete' });
|
||||
if (!ok) return;
|
||||
}
|
||||
for (const id of selectedIds) await api(`api/cards/${id}`, { method: 'DELETE' });
|
||||
clearSelection();
|
||||
await window._reloadAll();
|
||||
});
|
||||
|
||||
// Clear selection on click outside board (header, footer, etc)
|
||||
document.addEventListener('click', e => {
|
||||
if (!selectedIds.size) return;
|
||||
if (board.contains(e.target)) return;
|
||||
if (selectBar?.contains(e.target)) return;
|
||||
if (document.querySelector('.bucket-picker')?.contains(e.target)) return;
|
||||
clearSelection();
|
||||
});
|
||||
|
||||
$('select-export')?.addEventListener('click', () => {
|
||||
if (!selectedIds.size) return;
|
||||
window.location.href = 'api/export?ids=' + [...selectedIds].join(',');
|
||||
@@ -89,23 +114,66 @@ $('select-group')?.addEventListener('click', async () => {
|
||||
await window._reloadAll();
|
||||
});
|
||||
|
||||
$('select-bucket')?.addEventListener('click', async () => {
|
||||
$('select-bucket')?.addEventListener('click', () => {
|
||||
if (!selectedIds.size) return;
|
||||
const { showDialog } = await import('./dialog.js');
|
||||
const bucketOpts = state.buckets.map(b => b.name);
|
||||
const name = await showDialog({ title: 'move to bucket', input: true, placeholder: 'bucket name', okLabel: 'move' });
|
||||
if (!name) return;
|
||||
let bucket = state.buckets.find(b => b.name.toLowerCase() === name.trim().toLowerCase());
|
||||
if (!bucket) {
|
||||
const created = await api('api/buckets', { method: 'POST', body: { name: name.trim() } });
|
||||
if (created?.id) bucket = created;
|
||||
}
|
||||
if (!bucket) return;
|
||||
for (const id of selectedIds) {
|
||||
await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: bucket.id } });
|
||||
}
|
||||
clearSelection();
|
||||
await window._reloadAll();
|
||||
// Remove existing picker
|
||||
document.querySelector('.bucket-picker')?.remove();
|
||||
|
||||
const btn = $('select-bucket');
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const picker = document.createElement('div');
|
||||
picker.className = 'bucket-picker';
|
||||
picker.style.cssText = `position:fixed;left:${rect.left}px;bottom:${window.innerHeight - rect.top + 4}px;z-index:200;background:var(--t-surface);border:1px solid var(--t-border);border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,0.4);min-width:180px;max-height:260px;display:flex;flex-direction:column;`;
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.style.cssText = 'overflow-y:auto;flex:1;';
|
||||
state.buckets.forEach(b => {
|
||||
const item = document.createElement('button');
|
||||
item.style.cssText = 'display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;background:none;border:none;color:var(--t-muted);font-size:12px;cursor:pointer;text-align:left;';
|
||||
item.innerHTML = `<span style="width:8px;height:8px;border-radius:2px;background:${b.color || '#64748b'};flex-shrink:0;"></span><span style="font-family:var(--t-font-pixel);font-size:10px;">${esc(b.name)}</span>`;
|
||||
item.addEventListener('mouseenter', () => { item.style.color = 'var(--t-bright)'; });
|
||||
item.addEventListener('mouseleave', () => { item.style.color = 'var(--t-muted)'; });
|
||||
item.addEventListener('click', async () => {
|
||||
picker.remove();
|
||||
for (const id of selectedIds) await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: b.id } });
|
||||
clearSelection();
|
||||
await window._reloadAll();
|
||||
});
|
||||
list.appendChild(item);
|
||||
});
|
||||
picker.appendChild(list);
|
||||
|
||||
const inputWrap = document.createElement('div');
|
||||
inputWrap.style.cssText = 'border-top:1px solid var(--t-border);padding:6px;';
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.placeholder = 'new bucket...';
|
||||
input.style.cssText = 'width:100%;background:var(--t-bg);border:1px solid var(--t-border);color:var(--t-bright);padding:4px 8px;font-size:11px;font-family:var(--t-font-pixel);border-radius:3px;';
|
||||
input.addEventListener('keydown', async e => {
|
||||
if (e.key !== 'Enter') return;
|
||||
const name = input.value.trim();
|
||||
if (!name) return;
|
||||
picker.remove();
|
||||
let bucket = state.buckets.find(b => b.name.toLowerCase() === name.toLowerCase());
|
||||
if (!bucket) {
|
||||
const created = await api('api/buckets', { method: 'POST', body: { name } });
|
||||
if (created?.id) bucket = created;
|
||||
}
|
||||
if (!bucket) return;
|
||||
for (const id of selectedIds) await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: bucket.id } });
|
||||
clearSelection();
|
||||
await window._reloadAll();
|
||||
});
|
||||
inputWrap.appendChild(input);
|
||||
picker.appendChild(inputWrap);
|
||||
|
||||
document.body.appendChild(picker);
|
||||
input.focus();
|
||||
|
||||
const closePicker = e => { if (!picker.contains(e.target) && e.target !== btn) { picker.remove(); cleanup(); } };
|
||||
const closeOnEsc = e => { if (e.key === 'Escape') { e.stopPropagation(); picker.remove(); cleanup(); } };
|
||||
const cleanup = () => { document.removeEventListener('mousedown', closePicker); document.removeEventListener('keydown', closeOnEsc, true); };
|
||||
setTimeout(() => { document.addEventListener('mousedown', closePicker); document.addEventListener('keydown', closeOnEsc, true); }, 0);
|
||||
});
|
||||
|
||||
$('select-color')?.addEventListener('click', async () => {
|
||||
@@ -137,6 +205,15 @@ $('select-tag')?.addEventListener('click', async () => {
|
||||
await window._reloadAll();
|
||||
});
|
||||
|
||||
$('select-unbucket')?.addEventListener('click', async () => {
|
||||
if (!selectedIds.size) return;
|
||||
for (const id of selectedIds) {
|
||||
await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: null } });
|
||||
}
|
||||
clearSelection();
|
||||
await window._reloadAll();
|
||||
});
|
||||
|
||||
$('select-delete')?.addEventListener('click', async () => {
|
||||
if (!selectedIds.size) return;
|
||||
if (localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
|
||||
@@ -568,7 +645,11 @@ export function renderBoard() {
|
||||
if (fc) fc.textContent = `${cards.length} card${cards.length !== 1 ? 's' : ''} · ${state.cards.length} total`;
|
||||
|
||||
// Refresh split preview if open
|
||||
if (boardSplitOpen && boardPreviewCardId) showBoardPreview(boardPreviewCardId);
|
||||
if (boardSplitOpen && boardPreviewCardId) {
|
||||
const stillExists = state.cards.some(c => c.id == boardPreviewCardId);
|
||||
if (stillExists) showBoardPreview(boardPreviewCardId);
|
||||
else { boardPreviewCardId = null; resetBoardPreview(); }
|
||||
}
|
||||
|
||||
// Notification banner
|
||||
renderNotifs();
|
||||
@@ -790,6 +871,18 @@ function bindCardEvents() {
|
||||
window._renderTagBar?.();
|
||||
renderBoard();
|
||||
});
|
||||
seg.addEventListener('contextmenu', async e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const tag = seg.dataset.tag;
|
||||
const cardEl = seg.closest('[data-id]');
|
||||
if (!cardEl) return;
|
||||
const card = state.cards.find(c => c.id == cardEl.dataset.id);
|
||||
if (!card) return;
|
||||
const newBody = (card.body || '').replace(new RegExp('\\s*#' + tag.replace(/[.*+?^${}()|[\]\\\/]/g, '\\$&') + '(?=\\s|$)', 'm'), '');
|
||||
await api(`api/cards/${card.id}`, { method: 'PATCH', body: { body: newBody } });
|
||||
await window._reloadAll?.();
|
||||
});
|
||||
});
|
||||
|
||||
board.querySelectorAll('[data-id]').forEach(el => {
|
||||
@@ -997,3 +1090,87 @@ async function handleCardDrop(e, el, targetId) {
|
||||
requestAnimationFrame(() => { card.style.transition = 'transform 0.25s ease'; card.style.transform = ''; });
|
||||
});
|
||||
}
|
||||
|
||||
// ── Box select ──
|
||||
|
||||
let boxEl = null;
|
||||
let boxStart = null;
|
||||
let boxActive = false;
|
||||
|
||||
board.addEventListener('mousedown', e => {
|
||||
// Only start on board background (not on cards or interactive elements)
|
||||
if (e.button !== 0 || e.target !== board) return;
|
||||
if (e.shiftKey) return;
|
||||
|
||||
const additive = e.ctrlKey || e.metaKey;
|
||||
const priorSelection = additive ? new Set(selectedIds) : null;
|
||||
boxStart = { x: e.clientX, y: e.clientY, scrollTop: board.scrollTop };
|
||||
boxActive = false;
|
||||
|
||||
const onMove = ev => {
|
||||
const dx = ev.clientX - boxStart.x;
|
||||
const dy = ev.clientY - boxStart.y;
|
||||
if (!boxActive && Math.abs(dx) < 5 && Math.abs(dy) < 5) return;
|
||||
|
||||
if (!boxActive) {
|
||||
boxActive = true;
|
||||
if (!additive) clearSelection();
|
||||
boxEl = document.createElement('div');
|
||||
boxEl.className = 'box-select';
|
||||
board.appendChild(boxEl);
|
||||
}
|
||||
|
||||
const boardRect = board.getBoundingClientRect();
|
||||
const scrollDelta = board.scrollTop - boxStart.scrollTop;
|
||||
const x1 = boxStart.x - boardRect.left;
|
||||
const y1 = boxStart.y - boardRect.top + board.scrollTop;
|
||||
const x2 = ev.clientX - boardRect.left;
|
||||
const y2 = ev.clientY - boardRect.top + board.scrollTop;
|
||||
|
||||
const left = Math.min(x1, x2);
|
||||
const top = Math.min(y1, y2);
|
||||
const width = Math.abs(x2 - x1);
|
||||
const height = Math.abs(y2 - y1);
|
||||
|
||||
boxEl.style.left = left + 'px';
|
||||
boxEl.style.top = top + 'px';
|
||||
boxEl.style.width = width + 'px';
|
||||
boxEl.style.height = height + 'px';
|
||||
|
||||
// Check intersections
|
||||
const selRect = { left, top, right: left + width, bottom: top + height };
|
||||
board.querySelectorAll('[data-id]').forEach(card => {
|
||||
const cr = card.getBoundingClientRect();
|
||||
const cardRect = {
|
||||
left: cr.left - boardRect.left,
|
||||
top: cr.top - boardRect.top + board.scrollTop,
|
||||
right: cr.right - boardRect.left,
|
||||
bottom: cr.bottom - boardRect.top + board.scrollTop,
|
||||
};
|
||||
const intersects = !(cardRect.right < selRect.left || cardRect.left > selRect.right || cardRect.bottom < selRect.top || cardRect.top > selRect.bottom);
|
||||
const id = card.dataset.id;
|
||||
const wasPrior = priorSelection?.has(id);
|
||||
if (additive) {
|
||||
// Toggle: prior selected + hit by box → deselect; not prior + hit → select
|
||||
const shouldBeSelected = intersects ? !wasPrior : !!wasPrior;
|
||||
if (shouldBeSelected && !selectedIds.has(id)) toggleSelect(id);
|
||||
else if (!shouldBeSelected && selectedIds.has(id)) toggleSelect(id);
|
||||
} else {
|
||||
if (intersects && !selectedIds.has(id)) toggleSelect(id);
|
||||
else if (!intersects && selectedIds.has(id)) toggleSelect(id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onUp = () => {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
if (boxEl) { boxEl.remove(); boxEl = null; }
|
||||
if (!boxActive && selectedIds.size) clearSelection();
|
||||
boxStart = null;
|
||||
boxActive = false;
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
});
|
||||
Reference in new issue
Block a user