' + html + '

', 'text/html'); } catch (e) { return esc(html); } var out = document.createElement('div'); function walk(src, dest) { Array.prototype.forEach.call(src.childNodes, function (n) { if (n.nodeType === 3) { dest.appendChild(document.createTextNode(n.nodeValue)); return; } if (n.nodeType !== 1) return; var tag = n.tagName.toUpperCase(); if (DROP_TAGS[tag]) return; if (!ALLOWED_TAGS[tag]) { walk(n, dest); return; } var el = document.createElement(tag.toLowerCase()); if (tag === 'A') { var href = safeUrl(n.getAttribute('href'), false); if (href) { el.setAttribute('href', href); el.setAttribute('target', '_blank'); el.setAttribute('rel', 'noopener'); } } if (tag === 'IMG') { var src = safeUrl(n.getAttribute('src'), true); if (!src) return; el.setAttribute('src', src); el.setAttribute('alt', n.getAttribute('alt') || ''); el.setAttribute('loading', 'lazy'); } if ((tag === 'TD' || tag === 'TH') && n.getAttribute('colspan')) { el.setAttribute('colspan', String(parseInt(n.getAttribute('colspan'), 10) || 1)); } dest.appendChild(el); walk(n, el); }); } walk(doc.body.firstChild || doc.body, out); return out.innerHTML; } function formatStamp(iso) { var d = new Date(iso); if (isNaN(d)) return ''; return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); } function formatComment(s) { var h = esc(s); h = h.replace(/\*\*([^*]+)\*\*/g, '$1'); h = h.replace(/(https?:\/\/[^\s<]+[^\s<.,;:!?)\]])/g, '$1'); h = h.replace(/(^|[\s(])@(\w+)/g, '$1@$2'); return h.replace(/\n/g, '
'); } function commentHTML(c) { return '

' + '

' + esc(c.by || 'Someone') + '' + (c.at ? '' + esc(formatStamp(c.at)) + '' : '') + (c.resolved && !c.reply ? 'Resolved' : '') + '

' + (c.quote ? '

' + esc(c.quote) + '

' : '') + '

' + formatComment(c.text) + '

'; } function contentHTML(t) { var s = t.sync; var page = s.html ? '

' + sanitizeHtml(s.html) + '

' : '

Nothing written on the task page yet.

'; var list = s.comments.length ? '

' + s.comments.map(commentHTML).join('') + '' : '

No comments yet.

'; return '

Comments ' + s.comments.length + '

' + list + '

' + '

Task page

' + page + '

' + '

' + (s.present ? 'Page text and comments are copied from Team Brain every 15 minutes. Open the task in Team Brain to change them.' : 'Page text and comments appear here after the next sync, within 15 minutes.') + '

'; } // ---------- task rules ---------- function isOpen(t) { return t.status !== 'Done'; } function isRecurring(t) { return t.status === RECURRING; } function isSubmitted(t) { return t.status === QA; } // Deadlines only count for work that still needs doing: recurring tasks repeat, // and For QA tasks are already submitted, so neither is ever late or due today. function deadlineCounts(t) { return isOpen(t) && !isRecurring(t) && !isSubmitted(t) && !!t.due; } function isLate(t) { return deadlineCounts(t) && dayNum(t.due) < todayNum(); } function isDueToday(t) { return deadlineCounts(t) && dayNum(t.due) === todayNum(); } // ---------- data ---------- function bridge() { var b = window.brain || window.s16; return b && b.data && typeof b.data.queryDatabase === 'function' ? b : null; } function waitForBridge(ms) { return new Promise(function (resolve, reject) { var start = Date.now(); (function tick() { var b = bridge(); if (b) return resolve(b); if (Date.now() - start > ms) return reject(new Error('The Team Brain data connection did not start on this page.')); setTimeout(tick, 60); })(); }); } function fetchAll(b) { var all = []; function page(cursor) { var opts = { limit: 200 }; if (cursor != null) opts.cursor = cursor; return b.data.queryDatabase(DB, opts).then(function (res) { var rows = (res && (res.rows || res.items)) || []; all = all.concat(rows); var next = res && res.nextCursor; if (next != null && next !== '' && rows.length && all.length < 5000) return page(next); return all; }); } return page(null); } function normalize(rows) { var titleById = {}; rows.forEach(function (r) { titleById[r.id] = label(get(cellsOf(r), 'name')); }); var people = {}; var tasks = rows.map(function (row) { var c = cellsOf(row); var who = persons(get(c, 'assigned')); who.forEach(function (p) { var known = people[p.id]; if (!known) people[p.id] = { id: p.id, name: p.name, avatar: p.avatar }; else if (!known.avatar && p.avatar) known.avatar = p.avatar; }); var parentRaw = get(c, 'parent'); var parent = ''; if (parentRaw != null && parentRaw !== '') { var first = Array.isArray(parentRaw) ? parentRaw[0] : parentRaw; if (typeof first === 'string') parent = UUID.test(first) ? (titleById[first] || '') : first; else if (first && typeof first === 'object') parent = first.title || first.name || (first.id && titleById[first.id]) || ''; } return { id: row.id, title: label(get(c, 'name')) || 'Untitled task', desc: text(get(c, 'desc')).trim(), people: who, due: dateOf(get(c, 'deadline')), docsRaw: rawUrl(get(c, 'docs')), outputRaw: rawUrl(get(c, 'output')), docs: urlOf(get(c, 'docs')), output: urlOf(get(c, 'output')), status: label(get(c, 'status')), project: label(get(c, 'project')), parent: parent, sync: parseSync(get(c, 'sync')), url: (typeof row.url === 'string' && row.url) || (APP + WS + '/' + DB + '/' + row.id) }; }); people[NONE] = { id: NONE, name: 'Unassigned', avatar: '' }; return { tasks: tasks, people: people }; } function load() { if (data.loading) return; data.loading = true; $('refresh').disabled = true; waitForBridge(8000) .then(function (b) { data.bridge = b; var meP = (b.user && typeof b.user.me === 'function') ? b.user.me().then(function (me) { data.me = me || null; data.canEdit = !!(me && me.id) && typeof b.data.updateCell === 'function'; }) .catch(function () { data.me = null; data.canEdit = false; }) : Promise.resolve(); return Promise.all([fetchAll(b), meP]); }) .then(function (res) { var n = normalize(res[0]); data.tasks = n.tasks; data.people = n.people; data.error = null; data.loadedAt = Date.now(); }) .catch(function (err) { data.error = (err && err.message) ? err.message : String(err); console.error('Task load failed', err); }) .then(function () { data.loading = false; data.checked = true; $('refresh').disabled = false; render(); var hashId = taskFromHash(); if (hashId && !drawer.id && taskById(hashId)) openTask(hashId, false); }); } // ---------- filtering ---------- function matchesProject(t) { return !state.project || t.project === state.project; } function matchesSearch(t) { if (!state.q) return true; var hay = (t.title + ' ' + t.desc + ' ' + t.project + ' ' + t.parent + ' ' + t.sync.text).toLowerCase(); return state.q.toLowerCase().split(/\s+/).every(function (w) { return hay.indexOf(w) !== -1; }); } function inView(t) { if (state.view === 'done') return t.status === 'Done'; if (!isOpen(t)) return false; if (state.view === 'recurring') return isRecurring(t); if (state.view === 'soon') { if (!t.due || isSubmitted(t)) return false; var diff = dayNum(t.due) - todayNum(); if (isRecurring(t)) return diff >= 0 && diff <= 7; return diff <= 7; } return true; } function shortDate(iso) { var p = iso.split('-'); var y = +p[0], mo = +p[1] - 1, d = +p[2]; return MONTHS[mo] + ' ' + d + (y !== new Date().getFullYear() ? ', ' + y : ''); } function weekdayDate(iso) { var p = iso.split('-'); return DAYS[new Date(Date.UTC(+p[0], +p[1] - 1, +p[2])).getUTCDay()] + ', ' + shortDate(iso); } function dueInfo(t) { if (isRecurring(t)) { if (!t.due) return { text: 'Ongoing', cls: 'rec', title: 'Recurring task' }; var rdiff = dayNum(t.due) - todayNum(); if (rdiff < 0) return { text: 'Ongoing', cls: 'rec', title: 'Recurring task, last dated ' + shortDate(t.due) }; if (rdiff === 0) return { text: 'Next: today', cls: 'rec', title: 'Recurring task' }; return { text: 'Next: ' + (rdiff < 7 ? weekdayDate(t.due) : shortDate(t.due)), cls: 'rec', title: 'Recurring task' }; } if (isSubmitted(t)) { return { text: 'Submitted', cls: 'qa', title: t.due ? 'Submitted for QA (deadline was ' + shortDate(t.due) + ')' : 'Submitted for QA' }; } if (!t.due) return null; var short = shortDate(t.due); if (t.status === 'Done') return { text: short, cls: 'muted', title: 'Was due ' + short }; var diff = dayNum(t.due) - todayNum(); if (diff < 0) return { text: plural(-diff, 'day', 'days') + ' late', cls: 'late', title: 'Was due ' + short }; if (diff === 0) return { text: 'Due today', cls: 'today', title: 'Due ' + short }; if (diff === 1) return { text: 'Tomorrow', cls: 'soon', title: 'Due ' + short }; if (diff < 7) return { text: weekdayDate(t.due), cls: '', title: 'Due ' + short }; return { text: short, cls: '', title: 'Due ' + short }; } function byDue(a, b) { if (a.due && b.due && a.due !== b.due) return a.due < b.due ? -1 : 1; if (a.due && !b.due) return -1; if (!a.due && b.due) return 1; return a.title.localeCompare(b.title); } // ---------- render ---------- function avatarHTML(person) { if (person.id === NONE) return ''; var ini = esc(initials(person.name)); if (person.avatar) { return ''; } return ''; } function wireAvatars(root) { Array.prototype.forEach.call(root.querySelectorAll('.av img'), function (img) { img.addEventListener('error', function () { var span = img.parentNode; if (span) span.textContent = span.getAttribute('data-ini') || '?'; }, { once: true }); }); } function buildLanes() { var lanes = {}; function lane(p) { if (!lanes[p.id]) lanes[p.id] = { person: data.people[p.id] || p, all: [] }; return lanes[p.id]; } data.tasks.forEach(function (t) { if (!t.people.length) lane(data.people[NONE]).all.push(t); else t.people.forEach(function (p) { lane(p).all.push(t); }); }); var list = Object.keys(lanes).map(function (k) { var l = lanes[k]; l.open = l.all.filter(function (t) { return isOpen(t) && matchesProject(t); }); l.late = l.open.filter(isLate).length; l.recurring = l.open.filter(isRecurring).length; l.visible = l.all.filter(function (t) { return inView(t) && matchesProject(t) && matchesSearch(t); }); return l; }); // Team members A to Z by first name; Unassigned always last. list.sort(function (a, b) { if (a.person.id === NONE) return 1; if (b.person.id === NONE) return -1; return a.person.name.localeCompare(b.person.name, undefined, { sensitivity: 'base' }); }); return list; } function renderSummary() { var open = data.tasks.filter(isOpen); var owners = {}; var unowned = 0, late = 0, today = 0, rec = 0; open.forEach(function (t) { if (!t.people.length) unowned++; t.people.forEach(function (p) { owners[p.id] = 1; }); if (isRecurring(t)) rec++; if (isLate(t)) late++; else if (isDueToday(t)) today++; }); var k = Object.keys(owners).length; var html = '' + plural(open.length, 'open task', 'open tasks') + ' across ' + plural(k, 'person', 'people'); html += rec ? ', ' + rec + ' recurring. ' : '. '; var bits = []; if (late) bits.push('' + late + ' past due'); if (today) bits.push('' + today + ' due today'); html += bits.length ? bits.join(' and ') + '.' : 'Nothing is past due.'; if (unowned) html += ' ' + plural(unowned, 'task has', 'tasks have') + ' no owner yet.'; $('summary').innerHTML = html; } function renderPeople(lanes) { var html = ''; lanes.forEach(function (l) { var p = l.person; html += ''; }); $('people').innerHTML = html; } function projectNames() { var seen = {}; PROJECTS.forEach(function (p) { seen[p] = 1; }); data.tasks.forEach(function (t) { if (t.project) seen[t.project] = 1; }); return Object.keys(seen).sort(function (a, b) { return a.localeCompare(b); }); } function renderProjects() { var present = {}; data.tasks.forEach(function (t) { if (t.project) present[t.project] = 1; }); var names = Object.keys(present).sort(function (a, b) { return a.localeCompare(b); }); if (state.project && !present[state.project]) state.project = ''; $('project').innerHTML = '' + names.map(function (n) { return ''; }).join(''); } function projectDot(name) { return 'oklch(0.8 0.11 ' + hueOf(name) + ')'; } function taskHTML(t, laneId) { var meta = []; if (t.project) meta.push('' + esc(t.project) + ''); var others = t.people.filter(function (p) { return p.id !== laneId; }).map(function (p) { return firstName(p.name); }); if (others.length) meta.push('With ' + esc(joinNames(others)) + ''); if (t.parent) meta.push('Part of ' + esc(t.parent) + ''); if (t.sync.comments.length) meta.push('' + plural(t.sync.comments.length, 'comment', 'comments') + ''); var due = dueInfo(t); var links = []; if (t.docs) links.push('Docs'); if (t.output) links.push('Output'); return '

' + '

' + '' + (meta.length ? '

' + meta.join('') + '

' : '') + (t.desc ? '

' + esc(t.desc) + '

' : '') + '

' + '

' + (due ? '' + esc(due.text) + '' : '') + (links.length ? '' + links.join('') + '' : '') + '

' + '

'; } function laneHTML(l) { var p = l.person; var isNone = p.id === NONE; var big = isNone ? 'Unassigned' : firstName(p.name); var fullName = isNone ? 'No owner yet' : p.name; var openSorted = l.open.slice().sort(function (a, b) { return (statusRank(a.status) - statusRank(b.status)) || byDue(a, b); }); var tally = openSorted.map(function (t, i) { var m = statusMeta(t.status); return ''; }).join(''); var bits = [l.open.length ? plural(l.open.length, 'open task', 'open tasks') : 'Nothing open']; if (l.recurring) bits.push('' + l.recurring + ' recurring'); if (l.late) bits.push('' + l.late + ' late'); var groups = ''; if (!l.visible.length) { groups = '

' + esc(emptyLaneText(isNone ? 'unassigned tasks' : firstName(p.name))) + '

'; } else if (state.view === 'done') { groups = groupHTML('Done', l.visible.slice().sort(function (a, b) { return -byDue(a, b); }), p.id); } else { var byStatus = {}; l.visible.forEach(function (t) { (byStatus[t.status] = byStatus[t.status] || []).push(t); }); Object.keys(byStatus).sort(function (a, b) { return statusRank(a) - statusRank(b); }).forEach(function (s) { groups += groupHTML(s, byStatus[s].sort(byDue), p.id); }); } return '

' + '

' + avatarHTML(p) + '' + esc(fullName) + '

' + '

' + esc(big) + '

' + '' + '

' + bits.join(', ') + '

' + '

' + groups + '

' + '

'; } function groupHTML(status, tasks, laneId) { var m = statusMeta(status); return '

' + esc(m.label) + '' + pad(tasks.length) + '

' + tasks.map(function (t) { return taskHTML(t, laneId); }).join('') + '

'; } function emptyLaneText(who) { if (state.q) return 'No tasks for ' + who + ' match "' + state.q + '" in this view.'; if (state.view === 'soon') return 'Nothing due this week for ' + who + '.'; if (state.view === 'recurring') return 'No recurring tasks for ' + who + '.'; if (state.view === 'done') return 'No finished tasks for ' + who + ' yet.'; return 'Nothing open for ' + who + '.'; } function viewCount(v) { var keep = state.view; state.view = v; var n = data.tasks.filter(function (t) { return inView(t) && matchesProject(t) && (!state.person || inLane(t, state.person)); }).length; state.view = keep; return n; } function renderTabCounts() { Array.prototype.forEach.call(document.querySelectorAll('#tabbar [data-count]'), function (el) { var n = viewCount(el.getAttribute('data-count')); el.textContent = n ? (n > 99 ? '99+' : String(n)) : ''; }); } // ---------- sign-in gate ---------- // Tasks are read with the viewer's Team Brain session. Signed out, nothing can load, so ask them to sign in. function needsSignIn() { if (data.loading || !data.checked) return false; var anon = !data.me || !data.me.id; return anon && (!!data.error || !data.tasks.length); } function signInHTML() { return '

' + '

Sign in to see the team’s tasks

' + '

This dashboard reads the Task Masterlist through your Team Brain account. Sign in to Team Brain with the email your invite went to, then come back here. The dashboard checks again on its own.

' + '

' + (data.error ? '

' + esc(data.error) + '

' : '') + '

'; } function render() { $('today').textContent = new Date().toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' }); $('updated').textContent = data.loadedAt ? 'Updated ' + new Date(data.loadedAt).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : ''; Array.prototype.forEach.call(document.querySelectorAll('#views button, #tabbar button[data-view]'), function (b) { b.setAttribute('aria-pressed', String(b.getAttribute('data-view') === state.view)); }); var main = $('lanes'); var gated = needsSignIn(); document.body.classList.toggle('gated', gated); if (gated) { $('summary').textContent = ''; main.innerHTML = signInHTML(); return; } if (data.error && !data.tasks.length) { $('summary').textContent = 'The task list could not be loaded.'; main.innerHTML = '

Tasks did not load

' + esc(data.error) + '

Check that you can open the Task Masterlist in Team Brain, then refresh this page.

' + '

'; return; } renderProjects(); var lanes = buildLanes(); if (state.person && !lanes.some(function (l) { return l.person.id === state.person; })) state.person = ''; renderSummary(); renderPeople(lanes); renderTabCounts(); var shown = lanes.filter(function (l) { if (state.person) return l.person.id === state.person; return l.visible.length > 0; }); if (!shown.length) { var anyFilter = state.q || state.project || state.view !== 'open'; main.innerHTML = '

' + (anyFilter ? 'No tasks match these filters' : 'No tasks yet') + '

' + '

' + (anyFilter ? 'Try another view or project, or clear the search.' : 'Tasks added to the Task Masterlist appear here.') + '

' + (anyFilter ? '' : '') + '

'; return; } document.body.classList.toggle('first', data.firstPaint); main.innerHTML = shown.map(laneHTML).join(''); if (data.firstPaint) { data.firstPaint = false; setTimeout(function () { document.body.classList.remove('first'); }, 1400); } fitNames(); wireAvatars(main); wireAvatars($('people')); } // Shrink a long first name until it fits its column, so names never break mid-word. function fitNames() { Array.prototype.forEach.call(document.querySelectorAll('.name'), function (el) { el.style.fontSize = ''; var size = parseFloat(window.getComputedStyle(el).fontSize) || 60; var guard = 0; while (el.scrollWidth > el.clientWidth + 1 && size > 24 && guard < 40) { size -= 2; guard++; el.style.fontSize = size + 'px'; } }); } // ---------- task drawer (preview + edit) ---------- function memberList() { var seen = {}; var list = []; Object.keys(MEMBER_NAMES).forEach(function (id) { seen[id] = 1; var known = data.people[id]; list.push({ id: id, name: MEMBER_NAMES[id], avatar: known ? known.avatar : '' }); }); Object.keys(data.people).forEach(function (id) { if (seen[id] || id === NONE || id.indexOf('name:') === 0) return; list.push(data.people[id]); }); return list.sort(function (a, b) { return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }); }); } function formFromTask(t) { return { title: t.title, status: t.status, people: t.people.filter(function (p) { return UUID.test(p.id); }).map(function (p) { return p.id; }), due: t.due, project: t.project, docs: t.docsRaw, output: t.outputRaw, desc: t.desc }; } function samePeople(a, b) { if (a.length !== b.length) return false; var s = a.slice().sort().join(','), u = b.slice().sort().join(','); return s === u; } function changedFields() { var t = taskById(drawer.id); if (!t || !drawer.form) return []; var base = formFromTask(t), f = drawer.form, out = []; if (f.title.trim() !== base.title) out.push('title'); if (f.status !== base.status) out.push('status'); if (!samePeople(f.people, base.people)) out.push('people'); if (f.due !== base.due) out.push('due'); if (f.project !== base.project) out.push('project'); if (f.docs.trim() !== base.docs) out.push('docs'); if (f.output.trim() !== base.output) out.push('output'); if (f.desc.trim() !== base.desc) out.push('desc'); return out; } function isDirty() { return changedFields().length > 0; } function optionList(values, current, labeller) { var vals = values.slice(); if (current && vals.indexOf(current) === -1) vals.unshift(current); return vals.map(function (v) { return ''; }).join(''); } function renderDrawer() { var t = taskById(drawer.id); if (!t) return; var f = drawer.form; var ro = !data.canEdit; var dis = ro ? ' disabled' : ''; var m = statusMeta(f.status); var due = dueInfo({ status: f.status, due: f.due }); var people = memberList().map(function (p) { var on = f.people.indexOf(p.id) !== -1; return ''; }).join(''); var statusOpts = optionList(STATUS_ORDER, f.status, function (s) { return statusMeta(s).label; }); var projectOpts = '' + optionList(projectNames(), f.project); $('d-status').className = 'd-status s-' + m.key; $('d-status').innerHTML = '' + esc(m.label) + (due ? '' + esc(due.text) + '' : ''); $('d-open').href = t.url; $('d-body').innerHTML = (ro ? '

View only. Open this page inside Team Brain while signed in to edit tasks here.

' : '') + 'Task name' + '' + (t.parent ? '

Part of ' + esc(t.parent) + '

' : '') + '

' + '

Status

' + '

Deadline

' + '' + (f.due && !ro ? '' : '') + '

' + '

Project

' + '

Assigned

' + people + '

' + '

Docs link

' + '' + (urlOf(f.docs) ? 'Open' : '') + '

' + '

Output link

' + '' + (urlOf(f.output) ? 'Open' : '') + '

' + '

Description' + '

' + '

' + contentHTML(t); wireAvatars($('d-body')); Array.prototype.forEach.call($('d-body').querySelectorAll('.d-content img'), function (img) { img.addEventListener('error', function () { img.remove(); }, { once: true }); }); autosize($('f-title')); autosize($('f-desc')); updateFoot(); renderRail(); } // ---------- task rail (the person's other tasks, left of the open task) ---------- function inLane(t, laneId) { if (laneId === NONE) return !t.people.length; return t.people.some(function (p) { return p.id === laneId; }); } function railLane(t) { if (drawer.lane && inLane(t, drawer.lane)) return drawer.lane; return t.people.length ? t.people[0].id : NONE; } function railTasks() { var laneId = drawer.lane; var cur = taskById(drawer.id); // Every open task this person has (finished ones when the Finished view is on), whatever the other filters. var done = state.view === 'done'; var list = data.tasks.filter(function (t) { return inLane(t, laneId) && (done ? t.status === 'Done' : isOpen(t)); }); if (cur && list.indexOf(cur) === -1) list.push(cur); return list; } function railItemHTML(t) { var m = statusMeta(t.status); var due = dueInfo(t); var current = t.id === drawer.id; return '

'; } function renderRail(scrollToCurrent) { var rail = $('d-rail'); if (!rail || !drawer.id) return; var laneId = drawer.lane; var person = data.people[laneId] || { id: laneId, name: MEMBER_NAMES[laneId] || 'Team member' }; var isNone = laneId === NONE; var tasks = railTasks(); var groups = ''; if (state.view === 'done') { groups = '

' + tasks.slice().sort(function (a, b) { return -byDue(a, b); }).map(railItemHTML).join('') + ''; } else { var byStatus = {}; tasks.forEach(function (t) { (byStatus[t.status] = byStatus[t.status] || []).push(t); }); Object.keys(byStatus).sort(function (a, b) { return statusRank(a) - statusRank(b); }).forEach(function (s) { var m = statusMeta(s); groups += '

' + esc(m.label) + '' + byStatus[s].length + '

' + '

' + byStatus[s].sort(byDue).map(railItemHTML).join('') + ''; }); } var oldList = rail.querySelector('.r-list'); var keep = oldList ? oldList.scrollTop : 0; rail.innerHTML = '

' + avatarHTML(isNone ? data.people[NONE] || { id: NONE, name: 'Unassigned' } : person) + '' + esc(isNone ? 'Unassigned' : person.name) + '

' + '

' + (state.view === 'done' ? plural(tasks.length, 'finished task', 'finished tasks') : plural(tasks.length, 'open task', 'open tasks')) + '

' + '

' + (groups || '

No other tasks in this view.

') + '

'; wireAvatars(rail); Array.prototype.forEach.call(rail.querySelectorAll('.r-head, .r-group, .r-items li'), function (el, i) { el.style.setProperty('--i', Math.min(i, 14)); }); var list = rail.querySelector('.r-list'); if (scrollToCurrent) { var cur = rail.querySelector('[aria-current="true"]'); if (cur && list) { if (list.scrollWidth > list.clientWidth + 1) { // Phones: the cards run sideways, so bring the open one into view horizontally. var left = cur.offsetLeft - list.offsetLeft; list.scrollLeft = Math.max(0, left - 16); } else { var top = cur.offsetTop - list.offsetTop; if (top < list.scrollTop + 40 || top > list.scrollTop + list.clientHeight - 80) list.scrollTop = Math.max(0, top - 120); } } } else if (list) { list.scrollTop = keep; } } // Move to another task from the rail without stacking history, so Back still closes the window. function switchTask(id) { if (!drawer.id || id === drawer.id) return; var t = taskById(id); if (!t) return; if (isDirty() && !window.confirm('Discard your unsaved changes?')) return; drawer.id = id; drawer.form = formFromTask(t); drawer.saving = false; renderDrawer(); renderRail(true); $('d-body').scrollTop = 0; try { var st = history.state; history.replaceState(st && st.task ? { task: id } : st, '', '#task=' + id); } catch (e) { /* history unavailable */ } var btn = $('d-rail').querySelector('[data-rail="' + id + '"]'); if (btn) btn.focus(); } function updateFoot(message, kind) { var dirty = isDirty(); var save = $('d-save'); save.hidden = !data.canEdit; save.disabled = !dirty || drawer.saving; save.textContent = drawer.saving ? 'Saving' : 'Save changes'; var msg = $('d-msg'); if (message) { msg.textContent = message; msg.className = 'd-msg ' + (kind || ''); } else { msg.textContent = dirty ? 'Unsaved changes' : ''; msg.className = 'd-msg'; } } function autosize(el) { if (!el) return; el.style.height = 'auto'; el.style.height = (el.scrollHeight + 2) + 'px'; } var lastFocus = null; function openTask(id, push, laneId) { var t = taskById(id); if (!t) return; if (drawer.id && drawer.id !== id && isDirty() && !window.confirm('Discard your unsaved changes?')) return; var entering = !drawer.id; if (entering) lastFocus = document.activeElement; if (laneId) drawer.lane = laneId; drawer.id = id; drawer.lane = railLane(t); drawer.form = formFromTask(t); drawer.saving = false; renderDrawer(); renderRail(true); $('d-body').scrollTop = 0; if (entering) { var rail = $('d-rail'); rail.classList.add('enter'); setTimeout(function () { rail.classList.remove('enter'); }, 900); } $('scrim').classList.add('on'); var d = $('drawer'); d.classList.add('on'); d.setAttribute('aria-hidden', 'false'); document.body.classList.add('locked'); if (push) { try { history.pushState({ task: id }, '', '#task=' + id); } catch (e) { /* history unavailable */ } } setTimeout(function () { var c = $('d-close'); if (c) c.focus(); }, 30); } function hideDrawer() { drawer.id = null; drawer.form = null; $('scrim').classList.remove('on'); var d = $('drawer'); d.classList.remove('on'); d.setAttribute('aria-hidden', 'true'); document.body.classList.remove('locked'); if (lastFocus && document.contains(lastFocus)) { try { lastFocus.focus(); } catch (e) { /* ignore */ } } } function requestClose() { if (!drawer.id) return; if (isDirty() && !window.confirm('Discard your unsaved changes?')) return; drawer.form = null; var st = null; try { st = history.state; } catch (e) { st = null; } if (st && st.task) { try { history.back(); return; } catch (e) { /* fall through */ } } hideDrawer(); } function taskFromHash() { var m = String(location.hash || '').match(/task=([0-9a-f-]{36})/i); return m ? m[1] : ''; } function cellValue(field, f) { switch (field) { case 'title': return { prop: P.name, value: f.title.trim() || 'Untitled task' }; case 'status': return { prop: P.status, value: f.status }; case 'people': return { prop: P.assigned, value: f.people.map(function (id) { return { id: id }; }) }; case 'due': return { prop: P.deadline, value: f.due ? f.due + 'T00:00:00.000Z' : null }; case 'project': return { prop: P.project, value: f.project || null }; case 'docs': return { prop: P.docs, value: f.docs.trim() || null }; case 'output': return { prop: P.output, value: f.output.trim() || null }; case 'desc': return { prop: P.desc, value: f.desc.trim() }; } return null; } var FIELD_LABELS = { title: 'name', status: 'status', people: 'assignees', due: 'deadline', project: 'project', docs: 'docs link', output: 'output link', desc: 'description' }; function applyLocal(t, field, f) { if (field === 'title') t.title = f.title.trim() || 'Untitled task'; if (field === 'status') t.status = f.status; if (field === 'people') { t.people = f.people.map(function (id) { var known = data.people[id] || {}; var name = MEMBER_NAMES[id] || known.name || 'Someone'; if (!data.people[id]) data.people[id] = { id: id, name: name, avatar: '' }; return { id: id, name: name, avatar: known.avatar || '' }; }); } if (field === 'due') t.due = f.due; if (field === 'project') t.project = f.project; if (field === 'docs') { t.docsRaw = f.docs.trim(); t.docs = urlOf(t.docsRaw); } if (field === 'output') { t.outputRaw = f.output.trim(); t.output = urlOf(t.outputRaw); } if (field === 'desc') t.desc = f.desc.trim(); } function save() { var t = taskById(drawer.id); if (!t || drawer.saving || !data.canEdit) return; var fields = changedFields(); if (!fields.length) return; var b = data.bridge || bridge(); if (!b || typeof b.data.updateCell !== 'function') { updateFoot('Editing is not available on this page.', 'err'); return; } drawer.saving = true; updateFoot('Saving changes'); var f = drawer.form; var i = 0; function next() { if (i >= fields.length) return Promise.resolve(); var field = fields[i++]; var cv = cellValue(field, f); return b.data.updateCell(t.id, cv.prop, cv.value).then(function () { applyLocal(t, field, f); return next(); }, function (err) { var msg = (err && err.message) ? err.message : String(err); var e2 = new Error('Could not save the ' + FIELD_LABELS[field] + ': ' + msg); e2.code = msg; throw e2; }); } next().then(function () { drawer.saving = false; drawer.form = formFromTask(t); render(); renderDrawer(); updateFoot('Saved', 'ok'); }, function (err) { drawer.saving = false; if (/PUBLIC_UPDATE_DISABLED/i.test(err.code || err.message)) { data.canEdit = false; renderDrawer(); updateFoot('This link is view only. Open the page inside Team Brain to edit.', 'err'); } else { render(); updateFoot(err.message, 'err'); } console.error('Task save failed', err); }); } // ---------- events ---------- var fitTimer = null; window.addEventListener('resize', function () { clearTimeout(fitTimer); fitTimer = setTimeout(fitNames, 120); }); try { if (document.fonts && document.fonts.ready) document.fonts.ready.then(fitNames).catch(function () {}); } catch (e) { /* font loading API unavailable */ } $('views').addEventListener('click', function (e) { var b = e.target.closest('button[data-view]'); if (!b) return; state.view = b.getAttribute('data-view'); savePrefs(); render(); }); $('people').addEventListener('click', function (e) { var b = e.target.closest('button[data-person]'); if (!b) return; var id = b.getAttribute('data-person'); state.person = (state.person === id) ? '' : id; savePrefs(); render(); }); $('project').addEventListener('change', function (e) { state.project = e.target.value; savePrefs(); render(); }); var qTimer = null; $('q').addEventListener('input', function (e) { clearTimeout(qTimer); var v = e.target.value.trim(); qTimer = setTimeout(function () { state.q = v; render(); }, 120); }); $('refresh').addEventListener('click', load); $('lanes').addEventListener('click', function (e) { if (e.target.closest('a')) return; // Docs / Output links open on their own var a = e.target.closest('[data-action]'); if (a) { if (a.getAttribute('data-action') === 'retry') load(); if (a.getAttribute('data-action') === 'clear') { state.q = ''; state.project = ''; state.view = 'open'; $('q').value = ''; savePrefs(); render(); } return; } var row = e.target.closest('[data-task]'); if (row) { var laneEl = row.closest('[data-lane]'); openTask(row.getAttribute('data-task'), true, laneEl ? laneEl.getAttribute('data-lane') : ''); } }); // Clicking the empty space around the floating cards closes the task, like the backdrop. $('drawer').addEventListener('click', function (e) { var el = e.target; if (el === $('drawer') || el === $('d-rail') || (el.classList && (el.classList.contains('r-list') || el.classList.contains('r-items')))) requestClose(); }); $('d-rail').addEventListener('click', function (e) { var b = e.target.closest('[data-rail]'); if (b) switchTask(b.getAttribute('data-rail')); }); $('tabbar').addEventListener('click', function (e) { var b = e.target.closest('button'); if (!b) return; if (b.getAttribute('data-action') === 'search') { window.scrollTo({ top: 0, behavior: 'smooth' }); setTimeout(function () { try { $('q').focus({ preventScroll: true }); } catch (err) { $('q').focus(); } }, 250); return; } var v = b.getAttribute('data-view'); if (!v) return; var same = state.view === v; state.view = v; savePrefs(); render(); var top = $('lanes').getBoundingClientRect().top + window.pageYOffset - 16; if (same || window.pageYOffset > top) window.scrollTo({ top: same ? 0 : Math.max(0, top), behavior: 'smooth' }); }); // While the sign-in screen is up, check again whenever the viewer comes back to this tab. function retryIfGated() { if (document.body.classList.contains('gated') && !data.loading) load(); } window.addEventListener('focus', retryIfGated); document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'visible') retryIfGated(); }); setInterval(retryIfGated, 8000); $('scrim').addEventListener('click', requestClose); $('d-close').addEventListener('click', requestClose); $('d-save').addEventListener('click', save); $('d-body').addEventListener('input', function (e) { var el = e.target; var field = el.getAttribute('data-field'); if (!field || !drawer.form) return; drawer.form[field] = el.value; if (el.tagName === 'TEXTAREA') autosize(el); updateFoot(); }); $('d-body').addEventListener('change', function (e) { var el = e.target; var field = el.getAttribute('data-field'); if (!field || !drawer.form) return; drawer.form[field] = el.value; if (field === 'status' || field === 'due' || field === 'docs' || field === 'output') { var scroll = $('d-body').scrollTop; renderDrawer(); $('d-body').scrollTop = scroll; } else { updateFoot(); } }); $('d-body').addEventListener('click', function (e) { var pick = e.target.closest('[data-pick]'); if (pick && drawer.form && data.canEdit) { var id = pick.getAttribute('data-pick'); var at = drawer.form.people.indexOf(id); if (at === -1) drawer.form.people.push(id); else drawer.form.people.splice(at, 1); pick.setAttribute('aria-pressed', String(at === -1)); updateFoot(); return; } var a = e.target.closest('[data-action="clear-due"]'); if (a && drawer.form) { drawer.form.due = ''; renderDrawer(); } }); document.addEventListener('keydown', function (e) { if (!drawer.id) return; if (e.key === 'Escape') { e.preventDefault(); requestClose(); return; } if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); save(); return; } if (e.key === 'Tab') { // Keep keyboard focus inside the open drawer. var focusables = $('drawer').querySelectorAll('button:not([disabled]):not([hidden]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])'); if (!focusables.length) return; var first = focusables[0], last = focusables[focusables.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }); window.addEventListener('popstate', function () { var id = taskFromHash(); if (id && taskById(id)) { if (drawer.id !== id) openTask(id, false); return; } if (drawer.id) { if (drawer.form && isDirty() && !window.confirm('Discard your unsaved changes?')) { try { history.pushState({ task: drawer.id }, '', '#task=' + drawer.id); } catch (e) { /* ignore */ } return; } hideDrawer(); } }); document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'visible' && !drawer.id && data.loadedAt && Date.now() - data.loadedAt > 120000) load(); }); loadPrefs(); $('today').textContent = new Date().toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' }); load(); })();