calendar
This commit is contained in:
th committed
1 parent
836826dba5
commit
8e78468743
7 files changed
+309
-7
No files matched your search
@@ -1,6 +1,23 @@
|
||||
body { font-family: 'JetBrains Mono', monospace; }
|
||||
.font-pixel { font-family: var(--t-font-pixel, 'Silkscreen', cursive) !important; }
|
||||
|
||||
/* Calendar */
|
||||
.cal-header { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 3px solid var(--t-border); flex-shrink: 0; }
|
||||
.cal-day-label { padding: 6px 8px; font-family: var(--t-font-pixel, 'Silkscreen', cursive); font-size: 9px; color: var(--t-dim); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); flex: 1; min-height: 0; }
|
||||
.cal-cell { border-right: 3px solid var(--t-border); border-bottom: 3px solid var(--t-border); padding: 4px 6px; overflow: hidden; cursor: default; transition: background 0.1s; position: relative; min-height: 0; display: flex; flex-direction: column; }
|
||||
.cal-cell:nth-child(7n) { border-right: none; }
|
||||
.cal-cell:hover { background: var(--t-raised); }
|
||||
.cal-cell-out { opacity: 0.2; }
|
||||
.cal-cell-today { background: color-mix(in srgb, var(--t-accent) 8%, transparent); }
|
||||
.cal-cell-today:hover { background: color-mix(in srgb, var(--t-accent) 14%, transparent); }
|
||||
.cal-cell-num { font-family: var(--t-font-pixel, 'Silkscreen', cursive); font-size: 10px; color: var(--t-muted); margin-bottom: 3px; }
|
||||
.cal-cell-items { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; }
|
||||
.cal-item { font-size: 10px; color: var(--t-text); padding: 2px 5px; border-left: 3px solid var(--t-accent); background: var(--t-surface); border-radius: 0 2px 2px 0; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background 0.1s; white-space: nowrap; overflow: hidden; flex-shrink: 0; }
|
||||
.cal-item:hover { background: var(--t-raised); color: var(--t-bright); }
|
||||
.cal-item-journal { opacity: 0.8; }
|
||||
.cal-todo { font-family: var(--t-font-pixel, 'Silkscreen', cursive); font-size: 8px; color: var(--t-accent); flex-shrink: 0; }
|
||||
|
||||
/* Scrollbars */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
|
||||
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"JetBrains Mono", monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-pixel:"Silkscreen", cursive;--color-t-bg:var(--t-bg);--color-t-surface:var(--t-surface);--color-t-raised:var(--t-raised);--color-t-border:var(--t-border);--color-t-dim:var(--t-dim);--color-t-muted:var(--t-muted);--color-t-text:var(--t-text);--color-t-bright:var(--t-bright);--color-t-accent:var(--t-accent);--color-t-accent2:var(--t-accent2);--color-t-danger:var(--t-danger)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-Line truncated
|
||||
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"JetBrains Mono", monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-pixel:"Silkscreen", cursive;--color-t-bg:var(--t-bg);--color-t-surface:var(--t-surface);--color-t-raised:var(--t-raised);--color-t-border:var(--t-border);--color-t-dim:var(--t-dim);--color-t-muted:var(--t-muted);--color-t-text:var(--t-text);--color-t-bright:var(--t-bright);--color-t-accent:var(--t-accent);--color-t-accent2:var(--t-accent2);--color-t-danger:var(--t-danger)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-Line truncated
|
||||
+27
-6
@@ -555,15 +555,18 @@ if (str_starts_with($route, '/api/')) {
|
||||
<i class="ph ph-terminal-window text-t-accent text-xl"></i>
|
||||
<h1 class="font-pixel text-t-accent text-lg tracking-wider">hyprcrd</h1>
|
||||
<span class="text-[10px] text-t-dim font-pixel ml-1">v0.1</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="gallery-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
|
||||
<i class="ph ph-image-square text-sm"></i><span class="font-pixel text-[10px]">images</span>
|
||||
</button>
|
||||
<button id="search-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
|
||||
<button id="search-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors ml-3">
|
||||
<i class="ph ph-magnifying-glass text-sm"></i><span class="font-pixel text-[10px]">search</span>
|
||||
<kbd class="text-[9px] text-t-dim border border-t-border rounded px-1 py-0.5 ml-1 font-pixel">ctrl+k</kbd>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="calendar-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
|
||||
<i class="ph ph-calendar-dots text-sm"></i><span class="font-pixel text-[10px]">calendar</span>
|
||||
</button>
|
||||
<button id="gallery-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
|
||||
<i class="ph ph-image-square text-sm"></i><span class="font-pixel text-[10px]">images</span>
|
||||
</button>
|
||||
<button id="tasks-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
|
||||
<i class="ph ph-check-square-offset text-sm"></i><span class="font-pixel text-[10px]">tasks</span>
|
||||
<span id="tasks-open-count" class="font-pixel text-[9px] px-1.5 py-0.5 border border-t-border rounded text-t-dim">0</span>
|
||||
@@ -908,6 +911,24 @@ if (str_starts_with($route, '/api/')) {
|
||||
<div id="tag-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-48 overflow-y-auto hidden" style="min-width:180px;max-width:300px;"></div>
|
||||
<div id="snippet-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-56 overflow-y-auto hidden" style="min-width:240px;max-width:360px;"></div>
|
||||
|
||||
<!-- Calendar -->
|
||||
<div class="overlay fixed inset-0 z-[73]" style="background:var(--t-overlay)" id="calendar">
|
||||
<div class="bg-t-surface border border-t-border flex flex-col absolute" style="inset:40px;">
|
||||
<div class="flex items-center gap-3 px-5 py-3 border-b border-t-border shrink-0">
|
||||
<i class="ph ph-calendar-dots text-t-accent text-base"></i>
|
||||
<button id="cal-prev" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
|
||||
<h2 id="cal-title" class="font-pixel text-xs text-t-accent min-w-[120px] text-center"></h2>
|
||||
<button id="cal-next" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-right text-sm"></i></button>
|
||||
<button id="cal-today" class="font-pixel text-[10px] px-2 py-0.5 border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">today</button>
|
||||
<div class="flex-1"></div>
|
||||
<button id="cal-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
|
||||
<i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="cal-grid" class="flex-1 flex flex-col overflow-hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gallery -->
|
||||
<div class="overlay fixed inset-0 z-[72]" style="background:var(--t-overlay)" id="gallery">
|
||||
<div class="bg-t-surface border border-t-border rounded-sm shadow-2xl flex flex-col absolute" style="inset:40px;">
|
||||
|
||||
@@ -15,6 +15,7 @@ import { showContextMenu } from './modules/context-menu.js';
|
||||
import { undo, canUndo } from './modules/undo.js';
|
||||
import { openGallery, closeGallery } from './modules/gallery.js';
|
||||
import { refreshTasksView, openTasks, closeTasks } from './modules/tasks.js';
|
||||
import { openCalendar, closeCalendar } from './modules/calendar.js';
|
||||
|
||||
// ── Global API (for inline onclick handlers and cross-module calls) ──
|
||||
|
||||
@@ -24,6 +25,7 @@ window._openGallery = openGallery;
|
||||
window._closeSearch = closeSearch;
|
||||
window._closeTasks = closeTasks;
|
||||
window._renderBoard = renderBoard;
|
||||
window._openCalendar = openCalendar;
|
||||
window._renderTagBar = renderTagBar;
|
||||
window._showContextMenu = showContextMenu;
|
||||
window._ungroupCard = ungroupCard;
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
// ── Calendar view ──
|
||||
|
||||
import { $, esc } from './util.js';
|
||||
import { state } from './state.js';
|
||||
import { stripMd, getTodos } from './markdown.js';
|
||||
|
||||
const overlay = $('calendar');
|
||||
const grid = $('cal-grid');
|
||||
const title = $('cal-title');
|
||||
const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
|
||||
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
|
||||
let viewYear, viewMonth; // 0-indexed month
|
||||
|
||||
function pad(n) { return String(n).padStart(2, '0'); }
|
||||
|
||||
function dateStr(y, m, d) { return `${y}-${pad(m + 1)}-${pad(d)}`; }
|
||||
|
||||
function cardDate(c) {
|
||||
// Title starts with date (journal "2026-04-08" or appointment "2026-04-08 — Meeting")
|
||||
const m = (c.title || '').match(/^(\d{4}-\d{2}-\d{2})/);
|
||||
if (m) return m[1];
|
||||
// Fallback: created date
|
||||
return (c.created_at || '').substring(0, 10);
|
||||
}
|
||||
|
||||
function getCardsForDate(ds) {
|
||||
return state.cards.filter(c => cardDate(c) === ds);
|
||||
}
|
||||
|
||||
function isJournal(card) { return /^\d{4}-\d{2}-\d{2}/.test(card.title); }
|
||||
|
||||
function render() {
|
||||
title.textContent = `${MONTHS[viewMonth]} ${viewYear}`;
|
||||
|
||||
const firstDay = new Date(viewYear, viewMonth, 1).getDay(); // 0=Sun
|
||||
const startOffset = (firstDay + 6) % 7; // Mon=0
|
||||
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
||||
const prevMonthDays = new Date(viewYear, viewMonth, 0).getDate();
|
||||
const today = new Date();
|
||||
const todayStr = dateStr(today.getFullYear(), today.getMonth(), today.getDate());
|
||||
|
||||
// Always 6 rows = 42 cells for consistent layout
|
||||
const totalCells = 42;
|
||||
|
||||
let html = '<div class="cal-header">';
|
||||
for (const d of DAYS) html += `<div class="cal-day-label">${d}</div>`;
|
||||
html += '</div>';
|
||||
html += '<div class="cal-body">';
|
||||
for (let i = 0; i < totalCells; i++) {
|
||||
const dayNum = i - startOffset + 1;
|
||||
const inMonth = dayNum >= 1 && dayNum <= daysInMonth;
|
||||
let ds = '', displayNum = dayNum;
|
||||
if (dayNum < 1) {
|
||||
// Previous month
|
||||
displayNum = prevMonthDays + dayNum;
|
||||
const pm = viewMonth === 0 ? 11 : viewMonth - 1;
|
||||
const py = viewMonth === 0 ? viewYear - 1 : viewYear;
|
||||
ds = dateStr(py, pm, displayNum);
|
||||
} else if (dayNum > daysInMonth) {
|
||||
// Next month
|
||||
displayNum = dayNum - daysInMonth;
|
||||
const nm = viewMonth === 11 ? 0 : viewMonth + 1;
|
||||
const ny = viewMonth === 11 ? viewYear + 1 : viewYear;
|
||||
ds = dateStr(ny, nm, displayNum);
|
||||
} else {
|
||||
ds = dateStr(viewYear, viewMonth, dayNum);
|
||||
}
|
||||
const isToday = ds === todayStr;
|
||||
const cards = getCardsForDate(ds);
|
||||
const journals = cards.filter(isJournal);
|
||||
const others = cards.filter(c => !isJournal(c));
|
||||
|
||||
html += `<div class="cal-cell ${inMonth ? '' : 'cal-cell-out'} ${isToday ? 'cal-cell-today' : ''}" data-date="${ds}">`;
|
||||
html += `<div class="cal-cell-num ${isToday ? 'text-t-accent' : ''}">${displayNum}</div>`;
|
||||
html += '<div class="cal-cell-items">';
|
||||
for (const c of journals) {
|
||||
const body = stripMd(c.body || '').substring(0, 60);
|
||||
const todos = getTodos(c.body);
|
||||
html += `<div class="cal-item cal-item-journal" data-card-id="${c.id}" style="border-left-color:${c.color}">`;
|
||||
if (todos) html += `<span class="cal-todo">${todos.done}/${todos.total}</span>`;
|
||||
html += `<span class="truncate">${esc(body || '(empty)')}</span></div>`;
|
||||
}
|
||||
for (const c of others) {
|
||||
html += `<div class="cal-item" data-card-id="${c.id}" style="border-left-color:${c.color}">`;
|
||||
html += `<span class="truncate">${esc(c.title)}</span></div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
grid.innerHTML = html;
|
||||
|
||||
// Click on card item → open card
|
||||
grid.querySelectorAll('[data-card-id]').forEach(el => {
|
||||
el.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
closeDayPopup();
|
||||
state._returnToCalendar = true;
|
||||
window._openDetail(el.dataset.cardId);
|
||||
});
|
||||
});
|
||||
// Click on cell → open day popup
|
||||
grid.querySelectorAll('.cal-cell[data-date]').forEach(cell => {
|
||||
cell.addEventListener('click', e => {
|
||||
if (e.target.closest('[data-card-id]')) return;
|
||||
e.stopPropagation();
|
||||
openDayPopup(cell.dataset.date, cell);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function navigate(delta) {
|
||||
closeDayPopup();
|
||||
viewMonth += delta;
|
||||
if (viewMonth > 11) { viewMonth = 0; viewYear++; }
|
||||
if (viewMonth < 0) { viewMonth = 11; viewYear--; }
|
||||
render();
|
||||
}
|
||||
|
||||
// ── Day popup ──
|
||||
|
||||
let dayPopup = null;
|
||||
|
||||
function closeDayPopup() {
|
||||
if (dayPopup) { dayPopup.remove(); dayPopup = null; }
|
||||
}
|
||||
|
||||
function openDayPopup(ds, cellEl) {
|
||||
closeDayPopup();
|
||||
const cards = getCardsForDate(ds);
|
||||
const rect = cellEl.getBoundingClientRect();
|
||||
|
||||
dayPopup = document.createElement('div');
|
||||
Object.assign(dayPopup.style, {
|
||||
position: 'fixed', zIndex: '200',
|
||||
background: 'var(--t-surface)', border: '1px solid var(--t-border)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)', borderRadius: '4px',
|
||||
minWidth: '240px', maxWidth: '360px', maxHeight: '320px',
|
||||
display: 'flex', flexDirection: 'column', overflow: 'hidden',
|
||||
});
|
||||
|
||||
// Position near the cell
|
||||
const x = Math.min(rect.left + rect.width / 2 - 120, window.innerWidth - 370);
|
||||
const y = rect.bottom + 4 > window.innerHeight - 100 ? rect.top - 4 : rect.bottom + 4;
|
||||
dayPopup.style.left = Math.max(8, x) + 'px';
|
||||
if (rect.bottom + 4 > window.innerHeight - 100) {
|
||||
dayPopup.style.bottom = (window.innerHeight - rect.top + 4) + 'px';
|
||||
} else {
|
||||
dayPopup.style.top = y + 'px';
|
||||
}
|
||||
|
||||
// Header
|
||||
const header = document.createElement('div');
|
||||
header.style.cssText = 'padding:8px 12px;border-bottom:1px solid var(--t-border);display:flex;align-items:center;gap:8px;flex-shrink:0;';
|
||||
header.innerHTML = `
|
||||
<span style="font-family:var(--t-font-pixel);font-size:11px;color:var(--t-accent);">${ds}</span>
|
||||
<span style="font-family:var(--t-font-pixel);font-size:9px;color:var(--t-dim);">${cards.length} card${cards.length !== 1 ? 's' : ''}</span>
|
||||
<span style="flex:1"></span>
|
||||
<button class="day-popup-new" data-type="appointment" style="font-family:var(--t-font-pixel);font-size:9px;color:var(--t-muted);background:none;border:1px solid var(--t-border);padding:2px 8px;cursor:pointer;border-radius:2px;">+ termin</button>
|
||||
<button class="day-popup-new" data-type="journal" style="font-family:var(--t-font-pixel);font-size:9px;color:var(--t-muted);background:none;border:1px solid var(--t-border);padding:2px 8px;cursor:pointer;border-radius:2px;">+ journal</button>`;
|
||||
dayPopup.appendChild(header);
|
||||
|
||||
// Card list
|
||||
const list = document.createElement('div');
|
||||
list.style.cssText = 'overflow-y:auto;flex:1;padding:4px 0;';
|
||||
if (cards.length) {
|
||||
list.innerHTML = cards.map(c => {
|
||||
const isJ = isJournal(c);
|
||||
const label = isJ ? (stripMd(c.body || '').substring(0, 80) || '(empty journal)') : c.title;
|
||||
const todos = getTodos(c.body);
|
||||
return `<div class="day-popup-card" data-card-id="${c.id}" style="padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.1s;">
|
||||
<span style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:${c.color}"></span>
|
||||
<span style="font-size:11px;color:var(--t-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${esc(label)}</span>
|
||||
${isJ ? '<span style="font-family:var(--t-font-pixel);font-size:8px;color:var(--t-dim);">journal</span>' : ''}
|
||||
${todos ? `<span style="font-family:var(--t-font-pixel);font-size:8px;color:var(--t-accent);">${todos.done}/${todos.total}</span>` : ''}
|
||||
</div>`;
|
||||
}).join('');
|
||||
} else {
|
||||
list.innerHTML = '<div style="padding:16px 12px;text-align:center;font-family:var(--t-font-pixel);font-size:9px;color:var(--t-dim);">no cards</div>';
|
||||
}
|
||||
dayPopup.appendChild(list);
|
||||
|
||||
document.body.appendChild(dayPopup);
|
||||
|
||||
// Hover effect
|
||||
dayPopup.querySelectorAll('.day-popup-card').forEach(el => {
|
||||
el.addEventListener('mouseenter', () => { el.style.background = 'var(--t-raised)'; });
|
||||
el.addEventListener('mouseleave', () => { el.style.background = ''; });
|
||||
el.addEventListener('click', () => {
|
||||
closeDayPopup();
|
||||
state._returnToCalendar = true;
|
||||
window._openDetail(el.dataset.cardId);
|
||||
});
|
||||
});
|
||||
|
||||
// New card buttons
|
||||
dayPopup.querySelectorAll('.day-popup-new').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const type = btn.dataset.type;
|
||||
closeDayPopup();
|
||||
state._returnToCalendar = true;
|
||||
closeCalendar();
|
||||
if (type === 'journal') {
|
||||
const existing = state.cards.find(c => c.title === ds);
|
||||
if (existing) {
|
||||
window._openDetail(existing.id);
|
||||
return;
|
||||
}
|
||||
window._openModal({ id: null, title: ds, body: '', color: '#38bdf8', bucket_id: null });
|
||||
} else if (type === 'appointment') {
|
||||
const body = `**Zeit:** \n**Ort:** \n**Teilnehmer:** \n\n---\n\n**Notizen:**\n\n\n\n#termin`;
|
||||
window._openModal({ id: null, title: `${ds} — `, body, color: '#fb923c', bucket_id: null });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close on click outside
|
||||
setTimeout(() => {
|
||||
const closeHandler = e => {
|
||||
if (dayPopup && !dayPopup.contains(e.target)) {
|
||||
closeDayPopup();
|
||||
document.removeEventListener('click', closeHandler);
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', closeHandler);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
export function openCalendar() {
|
||||
const now = new Date();
|
||||
viewYear = now.getFullYear();
|
||||
viewMonth = now.getMonth();
|
||||
render();
|
||||
overlay.classList.add('open');
|
||||
}
|
||||
|
||||
export function closeCalendar() {
|
||||
closeDayPopup();
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
|
||||
$('calendar-btn')?.addEventListener('click', openCalendar);
|
||||
$('cal-close')?.addEventListener('click', closeCalendar);
|
||||
$('cal-prev')?.addEventListener('click', () => navigate(-1));
|
||||
$('cal-next')?.addEventListener('click', () => navigate(1));
|
||||
$('cal-today')?.addEventListener('click', () => {
|
||||
const now = new Date();
|
||||
viewYear = now.getFullYear();
|
||||
viewMonth = now.getMonth();
|
||||
render();
|
||||
});
|
||||
overlay?.addEventListener('click', e => { if (e.target === overlay) closeCalendar(); });
|
||||
@@ -388,6 +388,10 @@ export function closeDetail(options = {}) {
|
||||
state.galleryOrigin = null;
|
||||
if (restoreGallery && !galleryOpen) window._openGallery?.();
|
||||
}
|
||||
if (state._returnToCalendar) {
|
||||
state._returnToCalendar = false;
|
||||
window._openCalendar?.();
|
||||
}
|
||||
}
|
||||
|
||||
export function showDetailCard(id) {
|
||||
|
||||
@@ -302,6 +302,10 @@ export function closeModal({ animate = true } = {}) {
|
||||
modal.classList.remove('open');
|
||||
state.editingId = null;
|
||||
state.returnToGalleryAfterEdit = false;
|
||||
if (state._returnToCalendar) {
|
||||
state._returnToCalendar = false;
|
||||
window._openCalendar?.();
|
||||
}
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
|
||||
Reference in new issue
Block a user