kalender und fixes

This commit is contained in:
th committed 2026-04-08 17:24:55 +02:00
1 parent 940d9bbde4
commit 416ca9e854
14 files changed
+376 -71

No files matched your search

+13 -5
View File
@@ -10,6 +10,12 @@ import { bindCheckboxes } from './detail.js';
const board = $('board');
const boardPreview = $('board-preview');
board?.addEventListener('contextmenu', e => {
if (e.target.closest('[data-id]') || e.target.closest('.superview-item')) return;
e.preventDefault();
window._openModal(null);
});
const boardPreviewBody = $('board-preview-body');
const boardPreviewTitle = $('board-preview-title');
const boardPreviewColor = $('board-preview-color');
@@ -217,7 +223,7 @@ $('sort-toggle')?.addEventListener('click', () => {
renderBoard();
});
function renderCardHtml(c, inGroup = false, recent = []) {
export function renderCardHtml(c, inGroup = false, recent = []) {
const coverImg = leadingImage(c.body);
const thumbImg = coverImg ? null : firstImage(c.body);
const children = getChildren(c.id);
@@ -246,10 +252,9 @@ function renderCardHtml(c, inGroup = false, recent = []) {
${todos ? `<i class="ph ${todos.done === todos.total ? 'ph-check-square text-t-accent' : 'ph-squares-four text-t-muted'} text-sm mt-0.5 shrink-0"></i>` : ''}
<h3 class="font-pixel text-xs text-t-bright leading-relaxed line-clamp-2">${esc(c.title)}</h3>
</div>
${todos ? `<div class="mb-2"><div class="flex items-center gap-2 mb-1">
<div class="flex-1 h-1.5 bg-t-border rounded-full overflow-hidden"><div class="h-full rounded-full transition-all" style="width:${todoPct}%;background:${cardColor}"></div></div>
<span class="font-pixel text-[9px] ${todos.done === todos.total ? 'text-t-accent' : 'text-t-dim'}">${todos.done}/${todos.total}</span>
</div></div>` : ''}
${todos ? `<div class="mb-2">
<div class="todo-progress">${Array.from({length: todos.total}, (_, i) => `<div class="todo-seg" style="background:${i < todos.done ? cardColor : 'var(--t-border)'}"></div>`).join('')}</div>
</div>` : ''}
<p class="text-xs ${hasCover ? 'text-t-text' : 'text-t-muted'} leading-relaxed line-clamp-5 flex-1">${esc(stripMd(c.body))}</p>
${tags.length ? `<div class="flex flex-wrap gap-1 mt-1.5 card-layer">${tags.slice(0, 5).map(t => tagChipHtml(t)).join('')}${tags.length > 5 ? `<span class="tag-chip tag-chip-more">+${tags.length - 5}</span>` : ''}</div>` : ''}
<div class="mt-auto pt-2 flex items-center gap-2 text-[10px] ${hasCover ? 'text-t-text' : 'text-t-dim'} font-pixel">
@@ -446,6 +451,9 @@ export function renderBoard() {
// Footer count
const fc = $('footer-count');
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);
}
// ── Group bar ──
+56 -4
View File
@@ -4,6 +4,7 @@ import { $, esc } from './util.js';
import { state } from './state.js';
import { stripMd, getTodos } from './markdown.js';
import { autoSync, getCalConfig, getAllCalConfigs } from './caldav.js';
import { renderCardHtml } from './board.js';
const overlay = $('calendar');
const grid = $('cal-grid');
@@ -138,6 +139,12 @@ function isAppointment(card) {
return tags.includes('termin') || card.caldav_uid || /^\d{4}-\d{2}-\d{2}\s*[—-]\s*.+/.test(card.title);
}
let calHover = null, calHoverTimer = null;
function clearCalHover() {
if (calHoverTimer) { clearTimeout(calHoverTimer); calHoverTimer = null; }
if (calHover) { calHover.remove(); calHover = null; }
}
function render() {
title.textContent = `${MONTHS[viewMonth]} ${viewYear}`;
@@ -234,11 +241,44 @@ function render() {
grid.innerHTML = html;
// Hover card preview — clear any stale popups from previous render
clearCalHover();
// Click on card item → open card (hide calendar, restore on return)
grid.querySelectorAll('[data-card-id]').forEach(el => {
let clickTimer = null;
el.addEventListener('mouseenter', () => {
clearCalHover();
calHoverTimer = setTimeout(() => {
const card = state.cards.find(c => c.id == el.dataset.cardId);
if (!card) return;
const rect = el.getBoundingClientRect();
const textEl = el.querySelector('.truncate') || el;
const textRect = textEl.getBoundingClientRect();
calHover = document.createElement('div');
Object.assign(calHover.style, {
position: 'fixed', zIndex: '210', width: '280px',
filter: 'drop-shadow(0 8px 24px rgba(0,0,0,0.4))',
});
const left = textRect.right + 4;
const useLeft = left + 290 < window.innerWidth;
calHover.style.left = (useLeft ? left : textRect.left - 284) + 'px';
calHover.style.top = Math.min(rect.top - 10, window.innerHeight - 320) + 'px';
calHover.innerHTML = renderCardHtml(card);
calHover.addEventListener('mouseenter', () => { if (calHoverTimer) { clearTimeout(calHoverTimer); calHoverTimer = null; } });
calHover.addEventListener('mouseleave', () => clearCalHover());
calHover.addEventListener('mouseover', e => e.stopPropagation());
document.body.appendChild(calHover);
}, 400);
});
el.addEventListener('mouseleave', () => {
if (calHoverTimer) { clearTimeout(calHoverTimer); calHoverTimer = null; }
setTimeout(() => { if (calHover && !calHover.matches(':hover')) clearCalHover(); }, 150);
});
el.addEventListener('click', e => {
e.stopPropagation();
clearCalHover();
if (clickTimer) return;
clickTimer = setTimeout(() => {
clickTimer = null;
@@ -250,6 +290,7 @@ function render() {
});
el.addEventListener('dblclick', e => {
e.stopPropagation();
clearCalHover();
if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
closeDayPopup();
state._returnToCalendar = true;
@@ -425,15 +466,26 @@ function openDayPopup(ds, cellEl) {
});
});
// Close on click outside
// Close on click outside or ESC
setTimeout(() => {
const closeHandler = e => {
const clickHandler = e => {
if (dayPopup && !dayPopup.contains(e.target)) {
closeDayPopup();
document.removeEventListener('click', closeHandler);
cleanup();
}
};
document.addEventListener('click', closeHandler);
const keyHandler = e => {
if (e.key === 'Escape') {
closeDayPopup();
cleanup();
}
};
const cleanup = () => {
document.removeEventListener('click', clickHandler);
document.removeEventListener('keydown', keyHandler);
};
document.addEventListener('click', clickHandler);
document.addEventListener('keydown', keyHandler);
}, 0);
}
+33 -1
View File
@@ -14,6 +14,14 @@ const tags = $('ctx-tags');
export function hideContextMenu() { menu.classList.add('hidden'); }
let ctxCloseTimer = null;
menu.addEventListener('mouseleave', () => {
ctxCloseTimer = setTimeout(hideContextMenu, 400);
});
menu.addEventListener('mouseenter', () => {
if (ctxCloseTimer) { clearTimeout(ctxCloseTimer); ctxCloseTimer = null; }
});
document.addEventListener('click', hideContextMenu);
document.addEventListener('contextmenu', e => { if (!menu.contains(e.target)) hideContextMenu(); });
@@ -26,6 +34,7 @@ export function showContextMenu(x, y, card) {
<button class="ctx-item" data-action="open"><i class="ph ph-eye text-sm"></i><span class="font-pixel text-[10px]">open</span></button>
<button class="ctx-item" data-action="edit"><i class="ph ph-pencil-simple text-sm"></i><span class="font-pixel text-[10px]">edit</span></button>
<button class="ctx-item" data-action="duplicate"><i class="ph ph-copy text-sm"></i><span class="font-pixel text-[10px]">duplicate</span></button>
${/^\d{4}-\d{2}-\d{2}/.test(card.title) ? `<button class="ctx-item" data-action="move-date"><i class="ph ph-calendar-dots text-sm"></i><span class="font-pixel text-[10px]">move to date</span></button>` : ''}
<button class="ctx-item" data-action="save-md"><i class="ph ph-file-md text-sm"></i><span class="font-pixel text-[10px]">save .md</span></button>
<button class="ctx-item" data-action="favorite"><i class="ph${isFavorite(card.id) ? '-fill' : ''} ph-star text-sm ${isFavorite(card.id) ? 'text-amber-400' : ''}"></i><span class="font-pixel text-[10px]">${isFavorite(card.id) ? 'unfavorite' : 'favorite'}</span></button>
<div class="ctx-sep"></div>
@@ -155,7 +164,30 @@ export function showContextMenu(x, y, card) {
const a = btn.dataset.action;
if (a === 'open') { hideContextMenu(); window._openDetail(card.id); }
else if (a === 'edit') { hideContextMenu(); window._openModal(card); }
else if (a === 'duplicate') { hideContextMenu(); await api('api/cards', { method: 'POST', body: { title: card.title + ' (copy)', body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } }); await window._reloadAll(); }
else if (a === 'duplicate') {
hideContextMenu();
const hasDate = /^\d{4}-\d{2}-\d{2}/.test(card.title);
if (hasDate) {
const curDate = card.title.substring(0, 10);
const newDate = await showDialog({ title: 'duplicate_to_date', input: 'date', defaultValue: curDate, okLabel: 'duplicate' });
if (!newDate) return;
const newTitle = card.title.replace(/^\d{4}-\d{2}-\d{2}/, newDate.trim());
await api('api/cards', { method: 'POST', body: { title: newTitle, body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
} else {
await api('api/cards', { method: 'POST', body: { title: card.title + ' (copy)', body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
}
await window._reloadAll();
}
else if (a === 'move-date') {
hideContextMenu();
const curDate = card.title.substring(0, 10);
const newDate = await showDialog({ title: 'move_to_date', input: 'date', defaultValue: curDate, okLabel: 'move' });
if (!newDate || newDate === curDate) return;
const newTitle = card.title.replace(/^\d{4}-\d{2}-\d{2}/, newDate.trim());
await api(`api/cards/${card.id}`, { method: 'PATCH', body: { title: newTitle } });
await window._reloadAll();
if (card.caldav_uid) window._triggerSync?.();
}
else if (a === 'save-md') { hideContextMenu(); window.location.href = `api/export-md?ids=${card.id}`; }
else if (a === 'favorite') { hideContextMenu(); toggleFavorite(card.id); window._renderBoard(); }
else if (a === 'color') toggle(colors);
+8 -4
View File
@@ -458,17 +458,21 @@ function showContent(card) {
}
export function bindCheckboxes(container, card) {
container.querySelectorAll('input[type="checkbox"]').forEach((cb, idx) => {
cb.disabled = false;
cb.addEventListener('change', async () => {
container.querySelectorAll('.todo-item').forEach((item, idx) => {
const btn = item.querySelector('.todo-cb');
if (!btn) return;
const toggle = async () => {
let n = 0;
const body = card.body.replace(/- \[([ x])\]/g, (m, s) => n++ === idx ? `- [${s === 'x' ? ' ' : 'x'}]` : m);
card.body = body;
await api(`api/cards/${card.id}`, { method: 'PATCH', body: { body } });
const c = state.cards.find(x => x.id == card.id);
if (c) c.body = body;
btn.classList.toggle('checked');
item.classList.toggle('todo-done');
window._renderBoard();
});
};
item.addEventListener('click', toggle);
});
metaEl.textContent = '> created: ' + card.created_at + ' | modified: ' + card.updated_at +
+110 -7
View File
@@ -6,32 +6,135 @@ const overlay = $('dialog');
const titleEl = $('dialog-title');
const msgEl = $('dialog-msg');
const inputEl = $('dialog-input');
const datepickerEl = $('dialog-datepicker');
const cancelBtn = $('dialog-cancel');
const okBtn = $('dialog-ok');
const closeBtn = $('dialog-close');
let resolve = null;
let dpMode = false;
let dpYear, dpMonth, dpSelected;
const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function canCancel() { return !cancelBtn.classList.contains('hidden'); }
function close(result) {
overlay.classList.remove('open');
datepickerEl.classList.add('hidden');
datepickerEl.innerHTML = '';
dpMode = false;
if (resolve) { resolve(result); resolve = null; }
}
function submit() {
close(inputEl.classList.contains('hidden') ? true : inputEl.value);
if (dpMode) {
close(dpSelected || null);
} else {
close(inputEl.classList.contains('hidden') ? true : inputEl.value);
}
}
export function showDialog({ title, message = '', input = false, placeholder = '', danger = false, okLabel = 'ok', cancelLabel = 'cancel' }) {
function pad(n) { return String(n).padStart(2, '0'); }
function renderDatepicker() {
const today = new Date();
const todayStr = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;
const firstDay = new Date(dpYear, dpMonth, 1).getDay();
const startOffset = (firstDay + 6) % 7;
const daysInMonth = new Date(dpYear, dpMonth + 1, 0).getDate();
const prevDays = new Date(dpYear, dpMonth, 0).getDate();
let html = `<div class="dp-header">
<button data-dp-nav="-1"><i class="ph ph-caret-left text-xs"></i></button>
<span class="dp-title">${MONTHS[dpMonth]} ${dpYear}</span>
<button data-dp-nav="1"><i class="ph ph-caret-right text-xs"></i></button>
</div><div class="dp-grid">`;
for (const d of DAYS) html += `<div class="dp-day-label">${d}</div>`;
for (let i = 0; i < 42; i++) {
const dayNum = i - startOffset + 1;
let ds, display, outClass = '';
if (dayNum < 1) {
display = prevDays + dayNum;
const pm = dpMonth === 0 ? 11 : dpMonth - 1;
const py = dpMonth === 0 ? dpYear - 1 : dpYear;
ds = `${py}-${pad(pm + 1)}-${pad(display)}`;
outClass = 'dp-out';
} else if (dayNum > daysInMonth) {
display = dayNum - daysInMonth;
const nm = dpMonth === 11 ? 0 : dpMonth + 1;
const ny = dpMonth === 11 ? dpYear + 1 : dpYear;
ds = `${ny}-${pad(nm + 1)}-${pad(display)}`;
outClass = 'dp-out';
} else {
display = dayNum;
ds = `${dpYear}-${pad(dpMonth + 1)}-${pad(dayNum)}`;
}
const isToday = ds === todayStr ? 'dp-today' : '';
const isSel = ds === dpSelected ? 'dp-selected' : '';
html += `<div class="dp-day ${outClass} ${isToday} ${isSel}" data-dp-date="${ds}">${display}</div>`;
}
html += '</div>';
datepickerEl.innerHTML = html;
// Nav buttons
datepickerEl.querySelectorAll('[data-dp-nav]').forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
dpMonth += parseInt(btn.dataset.dpNav);
if (dpMonth > 11) { dpMonth = 0; dpYear++; }
if (dpMonth < 0) { dpMonth = 11; dpYear--; }
renderDatepicker();
});
});
// Day click
datepickerEl.querySelectorAll('[data-dp-date]').forEach(day => {
day.addEventListener('click', () => {
dpSelected = day.dataset.dpDate;
// Parse selected date to navigate to its month
const [y, m] = dpSelected.split('-').map(Number);
if (y !== dpYear || m - 1 !== dpMonth) {
dpYear = y;
dpMonth = m - 1;
}
renderDatepicker();
});
day.addEventListener('dblclick', () => {
dpSelected = day.dataset.dpDate;
submit();
});
});
}
export function showDialog({ title, message = '', input = false, placeholder = '', defaultValue = '', danger = false, okLabel = 'ok', cancelLabel = 'cancel' }) {
return new Promise(res => {
resolve = res;
titleEl.textContent = title;
msgEl.textContent = message;
msgEl.classList.toggle('hidden', !message);
inputEl.classList.toggle('hidden', input === false);
inputEl.value = '';
inputEl.placeholder = placeholder;
inputEl.type = input === 'password' ? 'password' : 'text';
dpMode = input === 'date';
if (dpMode) {
inputEl.classList.add('hidden');
datepickerEl.classList.remove('hidden');
const d = defaultValue ? new Date(defaultValue + 'T00:00:00') : new Date();
dpYear = d.getFullYear();
dpMonth = d.getMonth();
dpSelected = defaultValue || `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
renderDatepicker();
} else {
datepickerEl.classList.add('hidden');
datepickerEl.innerHTML = '';
inputEl.classList.toggle('hidden', input === false);
inputEl.value = defaultValue;
inputEl.placeholder = placeholder;
inputEl.type = input === 'password' ? 'password' : 'text';
}
okBtn.textContent = okLabel;
okBtn.classList.toggle('border-t-danger', danger);
okBtn.classList.toggle('text-t-danger', danger);
@@ -41,7 +144,7 @@ export function showDialog({ title, message = '', input = false, placeholder = '
cancelBtn.classList.toggle('hidden', !cancelLabel);
if (closeBtn) closeBtn.classList.toggle('hidden', !cancelLabel);
overlay.classList.add('open');
if (input) inputEl.focus(); else okBtn.focus();
if (input && !dpMode) inputEl.focus(); else okBtn.focus();
});
}
+15 -6
View File
@@ -151,6 +151,9 @@ export function openModal(card = null) {
}
inpTitle.addEventListener('input', updatePreview);
inpTitle.addEventListener('keydown', e => {
if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); body.focus(); }
});
// ── Line numbers ──
@@ -315,9 +318,8 @@ function updatePreview() {
addCodeCopyButtons(previewContent);
formatTodoItems(previewContent);
// Interactive checkboxes in editor preview — toggle in textarea
previewContent.querySelectorAll('input[type="checkbox"]').forEach((cb, idx) => {
cb.disabled = false;
cb.addEventListener('change', () => {
previewContent.querySelectorAll('.todo-item').forEach((item, idx) => {
item.addEventListener('click', () => {
let n = 0;
body.value = body.value.replace(/- \[([ x])\]/g, (m, s) => n++ === idx ? `- [${s === 'x' ? ' ' : 'x'}]` : m);
updatePreview();
@@ -754,10 +756,17 @@ document.addEventListener('click', e => {
if (tagAcVisible && !tagAc.contains(e.target) && e.target !== body) hideTagAc();
if (snippetAcVisible && !snippetAc.contains(e.target) && e.target !== body) hideSnippetAc();
});
// Capture phase: intercept ESC before dialog overlay can close the modal
document.addEventListener('keydown', e => {
if (tagAcVisible && e.key === 'Escape') hideTagAc();
if (snippetAcVisible && e.key === 'Escape') hideSnippetAc();
});
if (e.key === 'Escape' && (tagAcVisible || snippetAcVisible || linkAcVisible)) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
if (linkAcVisible) hideLinkAc();
if (tagAcVisible) hideTagAc();
if (snippetAcVisible) hideSnippetAc();
}
}, true);
function completeTagAc(idx) {
const tag = tagAcItems[idx];
+15 -3
View File
@@ -104,13 +104,25 @@ export function formatTodoItems(container) {
const cb = li.querySelector('input[type="checkbox"]');
if (!cb) return;
if (li.classList.contains('todo-item')) return;
const checked = cb.checked;
li.classList.add('todo-item');
if (cb.checked) li.classList.add('todo-done');
// Wrap remaining text nodes in a span
if (checked) li.classList.add('todo-done');
// Replace <input> with a styled button
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'todo-cb' + (checked ? ' checked' : '');
btn.innerHTML = '<i class="ph ph-check"></i>';
btn.dataset.idx = cb.dataset.idx || '';
cb.replaceWith(btn);
// Wrap remaining content in a span
const span = document.createElement('span');
span.className = 'todo-text';
while (cb.nextSibling) span.appendChild(cb.nextSibling);
while (btn.nextSibling) span.appendChild(btn.nextSibling);
li.appendChild(span);
});
}
+43 -4
View File
@@ -1,7 +1,7 @@
// ── Search ──
import { $, esc, escRe, fuzzyMatch, countSubstring, highlight } from './util.js';
import { state, parseTags, tagChipHtml } from './state.js';
import { $, esc, escRe, api, fuzzyMatch, countSubstring, highlight } from './util.js';
import { state, parseTags, tagChipHtml, getChildren } from './state.js';
import { renderMd, stripMd } from './markdown.js';
const overlay = $('search');
@@ -170,9 +170,12 @@ function hitHtml(card, idx, words) {
} else { snippet = esc(plain.substring(0, 120)) + (plain.length > 120 ? '...' : ''); }
const htags = parseTags(card);
return `<div class="search-hit flex items-start gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-t-raised" data-idx="${idx}">
const children = getChildren(card.id);
const isGroup = children.length > 0;
const canDrag = !isGroup && !card.parent_id;
return `<div class="search-hit flex items-start gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-t-raised" data-idx="${idx}" data-card-id="${card.id}" ${canDrag ? 'draggable="true"' : ''}>
<span class="w-2 h-2 rounded-full shrink-0 mt-1.5" style="background:${card.color}"></span>
<div class="min-w-0 flex-1"><div class="text-xs text-t-bright font-pixel leading-relaxed truncate">${title}</div>
<div class="min-w-0 flex-1"><div class="text-xs text-t-bright font-pixel leading-relaxed truncate flex items-center gap-2">${title}${isGroup ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:${card.color};color:#000;" class="font-pixel">${children.length + 1}</span>` : ''}</div>
<div class="text-[11px] text-t-muted leading-relaxed mt-0.5 line-clamp-2">${snippet}</div>
${htags.length ? `<div class="flex flex-wrap gap-1 mt-1">${htags.slice(0, 3).map(t => `<span class="tag-chip" style="font-size:8px;padding:0 4px;">#${esc(t)}</span>`).join('')}</div>` : ''}</div></div>`;
}
@@ -185,6 +188,42 @@ function bindHits() {
else { active = i; updateActive(); }
});
el.addEventListener('dblclick', () => { const i = parseInt(el.dataset.idx); if (hits[i]) window._openDetail(hits[i].id); });
// Drag: only non-group, non-child cards
if (el.draggable) {
el.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', el.dataset.cardId);
e.dataTransfer.effectAllowed = 'move';
el.style.opacity = '0.4';
});
el.addEventListener('dragend', () => { el.style.opacity = ''; });
}
// Drop target: any card can receive (to form group)
el.addEventListener('dragover', e => {
const dragId = e.dataTransfer.types.includes('text/plain') ? true : false;
if (!dragId) return;
if (el.dataset.cardId === e.dataTransfer.getData('text/plain')) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
el.style.background = 'var(--t-raised)';
el.style.borderLeft = `3px solid var(--t-accent)`;
});
el.addEventListener('dragleave', () => {
el.style.background = '';
el.style.borderLeft = '';
});
el.addEventListener('drop', async e => {
el.style.background = '';
el.style.borderLeft = '';
const dragId = e.dataTransfer.getData('text/plain');
const targetId = el.dataset.cardId;
if (!dragId || !targetId || dragId === targetId) return;
e.preventDefault();
await api(`api/cards/${dragId}`, { method: 'PATCH', body: { parent_id: targetId } });
await window._reloadAll();
search(input.value);
});
});
}