diff --git a/public/mail.js b/public/mail.js
index 8d5d332..700738b 100644
--- a/public/mail.js
+++ b/public/mail.js
@@ -206,6 +206,7 @@ function mailConnectScreen(st) {
}
function mailShell(mode) {
+ mail.sel = null;
const fl = mail.folders.length ? mail.folders : [{ id: 'inbox', name: 'Inbox', unread: mailUnread }];
$('#view').innerHTML = `
@@ -213,13 +214,14 @@ function mailShell(mode) {
${mail.accts.length > 1 ? mailChips() : ''}
-
-
+
+
`;
$('#mfsel').onchange = e => { mail.q = ''; location.hash = '#/mail/f/' + encodeURIComponent(e.target.value); };
mailBindChips();
$('#mnew').onclick = () => mailCompose();
+ $('#msel').onclick = () => mailSelMode(!mail.sel);
$('#mrf').onclick = () => { mailLoadList(true); jfetch('/api/mail/folders?acct=' + encodeURIComponent(mail.acct)).then(f => { mail.folders = f; mailPoll(); }).catch(() => {}); };
let t; $('#mq').oninput = e => { clearTimeout(t); t = setTimeout(() => { mail.q = e.target.value.trim(); mailLoadList(true); }, 400); };
}
@@ -243,13 +245,144 @@ async function mailLoadList(reset) {
}
function mailMarkSel(id) { document.querySelectorAll('a.mrow').forEach(a => a.classList.toggle('sel', !!id && decodeURIComponent(a.getAttribute('href').slice(9)) === id)); }
function mailDrawList() {
- const rows = $('#mrows'); if (!rows) return;
+ const rows = $('#mrows'); if (!rows) return; mailSwipeInit(rows);
const sel = (location.hash.match(/^#\/mail\/m\/([^/]+)/) || [])[1];
- rows.innerHTML = mail.items.length ? mail.items.map(m => `
+ rows.innerHTML = mail.items.length ? mail.items.map(m => `${mail.sel ? `` : ''}
${esc(mailFrom(m.from))}${esc(m.subject)}${esc(m.preview)}
- ${esc(mailWhen(m.date))}${m.flagged ? icon('check') : ''}${m.attach ? icon('clip') : ''}`).join('') : `${mail.q ? 'Nothing matches.' : 'No messages here.'}
`;
+ ${esc(mailWhen(m.date))}${m.flagged ? `${icon('bookmark')}` : ''}${m.attach ? icon('clip') : ''}`).join('') : `${mail.q ? 'Nothing matches.' : 'No messages here.'}
`;
const more = $('#mmore'); more.innerHTML = mail.more ? '' : '';
if ($('#mmb')) $('#mmb').onclick = () => mailLoadList(false);
+ mailDrawSelBar();
+}
+
+// ---- Swipe a message in the list: left deletes it, right archives it (touch screens). The row follows your finger and the colour under it shows what will happen;
+// let go past a third of the way (or flick it) and it leaves at once and finishes in the background, otherwise it springs back.
+function mailSwipeInit(rows) {
+ if (rows.dataset.swipe) return; rows.dataset.swipe = '1';
+ let row = null, x0 = 0, y0 = 0, dx = 0, t0 = 0, mode = '', w = 0;
+ const reset = (anim) => { if (!row) return; const r = row; r.style.transition = anim ? 'transform .18s ease-out' : ''; r.style.transform = ''; setTimeout(() => { r.classList.remove('swl', 'swr'); r.style.transition = ''; r.style.removeProperty('--sww'); }, anim ? 200 : 0); };
+ rows.addEventListener('touchstart', e => {
+ const a = e.target.closest && e.target.closest('a.mrow'); if (!a || e.touches.length !== 1 || mail.sel) { row = null; return; }
+ row = a; x0 = e.touches[0].clientX; y0 = e.touches[0].clientY; dx = 0; mode = ''; t0 = Date.now(); w = a.offsetWidth;
+ }, { passive: true });
+ rows.addEventListener('touchmove', e => {
+ if (!row) return; const t = e.touches[0], mx = t.clientX - x0, my = t.clientY - y0;
+ if (!mode) { if (Math.abs(my) > 12 && Math.abs(my) > Math.abs(mx)) { row = null; return; } if (Math.abs(mx) > 12 && Math.abs(mx) > Math.abs(my) * 1.4) { mode = 'swipe'; row.style.setProperty('--sww', w + 'px'); } else return; }
+ dx = mx; row.classList.toggle('swl', dx < 0); row.classList.toggle('swr', dx > 0); row.style.transition = ''; row.style.transform = `translateX(${dx}px)`;
+ row.dataset.sw = dx < 0 ? 'Delete' : 'Archive'; row.classList.toggle('swgo', Math.abs(dx) > w / 3);
+ }, { passive: true });
+ const end = () => {
+ if (!row) return; const r = row; row = null;
+ if (mode !== 'swipe') return;
+ const fast = Math.abs(dx) > 60 && Date.now() - t0 < 250; r.dataset.swiped = '1'; setTimeout(() => delete r.dataset.swiped, 400);
+ if (Math.abs(dx) > w / 3 || fast) {
+ const id = decodeURIComponent(r.getAttribute('href').slice(9)), kind = dx < 0 ? 'delete' : 'archive';
+ if (kind === 'delete' && /(^|~)deleteditems$/.test(mail.folder)) { row = r; reset(true); row = null; const it = mail.items.find(x => x.id === id); return confirmSheet('Delete for good?', it ? it.subject : '', 'Delete', () => mailRowAway(id, kind)); }
+ r.style.transition = 'transform .16s ease-in, opacity .16s'; r.style.transform = `translateX(${dx < 0 ? -w : w}px)`; r.style.opacity = '0.2';
+ setTimeout(() => mailRowAway(id, kind), 160);
+ } else { row = r; reset(true); row = null; }
+ };
+ rows.addEventListener('touchend', end); rows.addEventListener('touchcancel', () => { if (row) { reset(true); row = null; } });
+ rows.addEventListener('click', e => { const a = e.target.closest && e.target.closest('a.mrow'); if (a && a.dataset.swiped) { e.preventDefault(); e.stopPropagation(); } }, true); // the finger lifting after a swipe is not a tap
+ // Selecting: while it is on, a tap picks or unpicks a message; a long press on a phone (or Ctrl/Cmd-click, Shift-click for a range, on a computer) starts it.
+ let lp = 0, lpRow = null, lx = 0, ly = 0, lpFired = false;
+ rows.addEventListener('touchstart', e => { const a = e.target.closest && e.target.closest('a.mrow'); if (!a || e.touches.length !== 1) return; lpRow = a; lx = e.touches[0].clientX; ly = e.touches[0].clientY; clearTimeout(lp);
+ lpFired = false; lp = setTimeout(() => { if (!lpRow) return; const r = lpRow; lpRow = null; lpFired = true; if (navigator.vibrate) navigator.vibrate(15); mailSelMode(true, decodeURIComponent(r.getAttribute('href').slice(9))); }, 520); }, { passive: true });
+ rows.addEventListener('touchmove', e => { if (lpRow && (Math.abs(e.touches[0].clientX - lx) > 8 || Math.abs(e.touches[0].clientY - ly) > 8)) { clearTimeout(lp); lpRow = null; } }, { passive: true });
+ ['touchend', 'touchcancel'].forEach(t => rows.addEventListener(t, e => { clearTimeout(lp); lpRow = null; if (lpFired) { lpFired = false; mail.quiet = Date.now() + 250; if (e.cancelable) e.preventDefault(); } })); // lifting the finger after a long press must not count as a tap on anything
+ rows.addEventListener('contextmenu', e => { if (e.target.closest && e.target.closest('a.mrow') && 'ontouchstart' in window) e.preventDefault(); });
+ rows.addEventListener('click', e => {
+ const a = e.target.closest && e.target.closest('a.mrow'); if (!a || a.dataset.swiped) return; if (Date.now() < (mail.quiet || 0)) { e.preventDefault(); e.stopPropagation(); return; } const id = decodeURIComponent(a.getAttribute('href').slice(9));
+ if (!mail.sel && !(e.ctrlKey || e.metaKey || e.shiftKey)) return;
+ e.preventDefault(); e.stopPropagation();
+ if (!mail.sel) mailSelMode(true, id);
+ else if (e.shiftKey && mail.selLast) { const ids = mail.items.map(x => x.id), i = ids.indexOf(mail.selLast), j = ids.indexOf(id); if (i >= 0 && j >= 0) ids.slice(Math.min(i, j), Math.max(i, j) + 1).forEach(x => mail.sel.add(x)); mailSelPaint(); }
+ else mailSelToggle(id);
+ }, true);
+}
+function mailSelMode(on, first) {
+ mail.sel = on ? new Set(first ? [first] : []) : null; mail.selLast = first || null;
+ if (on && /^#\/mail\/m\//.test(location.hash) && matchMedia('(max-width: 899px)').matches) location.hash = '#/mail/f/' + encodeURIComponent(mail.folder);
+ mailSelPaint();
+}
+/** Show who is picked without rebuilding the list (the row under a finger must stay in the page, or the finger's release never reaches it). */
+function mailSelPaint() {
+ document.querySelectorAll('#mrows a.mrow').forEach(a => {
+ const id = decodeURIComponent(a.getAttribute('href').slice(9)), on = !!mail.sel && mail.sel.has(id); let c = a.querySelector(':scope > .mchk');
+ if (mail.sel && !c) { c = document.createElement('span'); c.className = 'mchk'; a.insertBefore(c, a.firstChild); } else if (!mail.sel && c) c.remove();
+ if (c) c.classList.toggle('on', on); a.classList.toggle('picked', on); if (mail.sel) a.classList.remove('sel');
+ });
+ mailDrawSelBar();
+}
+function mailSelToggle(id) { if (!mail.sel) return; if (mail.sel.has(id)) mail.sel.delete(id); else mail.sel.add(id); mail.selLast = id; mailSelPaint(); }
+function mailDrawSelBar() {
+ const bar = $('#mselbar'); if (!bar) return;
+ document.body.classList.toggle('mselecting', !!mail.sel);
+ if (!mail.sel) { bar.hidden = true; bar.innerHTML = ''; return; }
+ const picked = mail.items.filter(m => mail.sel.has(m.id)), n = picked.length, anyUnread = picked.some(m => !m.read), anyUnflag = picked.some(m => !m.flagged), all = n && n === mail.items.length;
+ const b = (a, label, ic, cls = '') => ``;
+ bar.hidden = false;
+ bar.innerHTML = `${n ? n + ' selected' : 'Select messages'}${b('all', all ? 'Select none' : 'Select all', '')}${b('done', 'Done', '', 'btn')}
+ ${b(anyUnread ? 'read' : 'unread', anyUnread ? 'Mark read' : 'Mark unread', 'mail')}${b(anyUnflag ? 'flag' : 'unflag', anyUnflag ? 'Flag' : 'Unflag', 'check')}${b('archive', 'Archive', 'files')}${b('move', 'Move', 'newdir')}${b('delete', 'Delete', 'trash', 'danger')}
`;
+ bar.querySelectorAll('[data-s]').forEach(x => x.onclick = () => mailSelAct(x.dataset.s));
+}
+function mailSelAct(a) {
+ if (Date.now() < (mail.quiet || 0)) return; // the finger-lift that ended a long press
+ if (a === 'done') return mailSelMode(false);
+ if (a === 'all') { if (mail.sel.size === mail.items.length) mail.sel.clear(); else mail.items.forEach(m => mail.sel.add(m.id)); return mailSelPaint(); }
+ const ids = [...mail.sel].filter(id => mail.items.some(m => m.id === id)); if (!ids.length) return;
+ if (a === 'move') {
+ const fl = mail.folders.filter(f => f.id !== mail.folder);
+ const el = openSheet('Move to', ids.length + (ids.length > 1 ? ' messages' : ' message'), `${fl.map(f => `
`).join('') || '
No other folders.
'}