designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keyboard multi-select uses stable IDs, improve Swiss theme, add Brutalist theme

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 09:39:49 -07:00
parent 702bca4396
commit 6a6f9ba4f7
4 changed files with 517 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
content/keyboard.js
View File

@@ -1,6 +1,9 @@
// Outlook Relook — Gmail-Style Keyboard Navigation & Multi-Select
// Adds keyboard focus cursor and multi-select to OWA's message list.
// Gated by the keyboardMultiSelect setting.
//
// Tracks selections by stable message ID (data attribute or aria-label)
// rather than DOM element reference, since OWA frequently re-renders rows.
window.OutlookRelook = window.OutlookRelook || {};
@@ -11,26 +14,42 @@ window.OutlookRelook.Keyboard = (function () {
var currentSettings = {};
var cleanupFns = [];
// State
var focusedIndex = -1; // Index of the focused message in the list
var selectedSet = new Set(); // Set of selected message DOM elements
var countBadge = null; // Selection count badge element
// State — track by ID strings, not DOM references
var focusedId = null; // ID of the focused message
var selectedIds = new Set(); // Set of selected message IDs
var countBadge = null;
// --- Helpers ---
// --- Message ID extraction ---
// OWA messages have various attributes we can use as stable IDs.
// Try data-convid, data-itemid, id, or fall back to aria-label.
function getMessageId(el) {
return el.getAttribute('data-convid')
|| el.getAttribute('data-itemid')
|| el.getAttribute('data-tid')
|| el.getAttribute('id')
|| el.getAttribute('aria-label')
|| null;
}
function getMessageItems() {
// Get all message items from the message list
var items = document.querySelectorAll(
'[role="listbox"] [role="option"], [role="list"] [role="listitem"]'
);
return Array.from(items);
}
function findItemById(items, id) {
if (!id) return -1;
for (var i = 0; i < items.length; i++) {
if (getMessageId(items[i]) === id) return i;
}
return -1;
}
function isComposeOrDialogActive() {
var active = document.activeElement;
if (!active) return false;
// Check if focus is in a compose area, search bar, or dialog
var tag = active.tagName.toLowerCase();
if (tag === 'input' || tag === 'textarea') return true;
if (active.getAttribute('contenteditable') === 'true') return true;
@@ -38,53 +57,90 @@ window.OutlookRelook.Keyboard = (function () {
if (active.closest('[role="search"]')) return true;
if (active.closest('[aria-label*="compose" i]')) return true;
if (active.closest('[aria-label*="New message" i]')) return true;
return false;
}
function setFocus(items, index) {
// Remove old focus
var oldFocused = document.querySelector('.or-kb-focused');
if (oldFocused) oldFocused.classList.remove('or-kb-focused');
// --- Visual state application ---
// Re-applies focus and selection classes to current DOM elements
// based on the ID-based state. Called after every key action and
// by the MutationObserver when OWA re-renders.
if (index < 0 || index >= items.length) return;
function applyVisualState(items) {
// Clear all visual markers first
var oldFocused = document.querySelectorAll('.or-kb-focused');
for (var f = 0; f < oldFocused.length; f++) oldFocused[f].classList.remove('or-kb-focused');
var oldSelected = document.querySelectorAll('.or-kb-selected');
for (var s = 0; s < oldSelected.length; s++) oldSelected[s].classList.remove('or-kb-selected');
focusedIndex = index;
var item = items[index];
item.classList.add('or-kb-focused');
if (!items) items = getMessageItems();
// Scroll into view if needed
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
function toggleSelect(item) {
if (selectedSet.has(item)) {
selectedSet.delete(item);
item.classList.remove('or-kb-selected');
} else {
selectedSet.add(item);
item.classList.add('or-kb-selected');
// Apply focus
if (focusedId) {
var focusIdx = findItemById(items, focusedId);
if (focusIdx >= 0) {
items[focusIdx].classList.add('or-kb-focused');
}
}
// Apply selections
selectedIds.forEach(function (id) {
var idx = findItemById(items, id);
if (idx >= 0) {
items[idx].classList.add('or-kb-selected');
}
});
updateCountBadge();
}
// --- Focus management ---
function getFocusedIndex(items) {
if (!focusedId) return -1;
return findItemById(items, focusedId);
}
function setFocus(items, index) {
if (index < 0 || index >= items.length) return;
focusedId = getMessageId(items[index]);
applyVisualState(items);
items[index].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
// --- Selection management ---
function toggleSelect(items, index) {
if (index < 0 || index >= items.length) return;
var id = getMessageId(items[index]);
if (!id) return;
if (selectedIds.has(id)) {
selectedIds.delete(id);
} else {
selectedIds.add(id);
}
applyVisualState(items);
}
function clearSelection() {
selectedSet.forEach(function (item) {
item.classList.remove('or-kb-selected');
});
selectedSet.clear();
selectedIds.clear();
var oldSelected = document.querySelectorAll('.or-kb-selected');
for (var i = 0; i < oldSelected.length; i++) oldSelected[i].classList.remove('or-kb-selected');
updateCountBadge();
}
function getActionTargets(items) {
// If messages are selected, return those. Otherwise return the focused message.
if (selectedSet.size > 0) {
return Array.from(selectedSet);
var targets = [];
if (selectedIds.size > 0) {
selectedIds.forEach(function (id) {
var idx = findItemById(items, id);
if (idx >= 0) targets.push(items[idx]);
});
} else {
var fi = getFocusedIndex(items);
if (fi >= 0) targets.push(items[fi]);
}
if (focusedIndex >= 0 && focusedIndex < items.length) {
return [items[focusedIndex]];
}
return [];
return targets;
}
// --- Selection count badge ---
@@ -101,7 +157,7 @@ window.OutlookRelook.Keyboard = (function () {
function updateCountBadge() {
if (!countBadge) countBadge = createCountBadge();
if (!countBadge) return;
var count = selectedSet.size;
var count = selectedIds.size;
if (count === 0) {
countBadge.style.opacity = '0';
} else {
@@ -111,30 +167,20 @@ window.OutlookRelook.Keyboard = (function () {
}
// --- Actions ---
// Each action simulates what a user would do in OWA to perform the operation.
// We click the message to select it in OWA, then trigger the toolbar action.
function performAction(targets, actionFn) {
if (targets.length === 0) return;
// Process targets one at a time with a small delay between each
var i = 0;
function processNext() {
if (i >= targets.length) {
// After all targets processed, clear selection
clearSelection();
return;
}
var target = targets[i];
i++;
// Click the message to make it OWA-selected
target.click();
// Small delay to let OWA register the selection, then perform action
setTimeout(function () {
actionFn(target);
// Delay before next target
setTimeout(processNext, 150);
}, 100);
}
@@ -143,19 +189,14 @@ window.OutlookRelook.Keyboard = (function () {
function actionDelete(targets) {
performAction(targets, function () {
// Find and click the delete button in the toolbar
var deleteBtn = document.querySelector(
'[aria-label*="Delete" i][role="button"], [aria-label*="delete" i][role="menuitem"]'
);
if (deleteBtn) {
deleteBtn.click();
} else {
// Fallback: try dispatching Delete key
var deleteEvent = new KeyboardEvent('keydown', {
key: 'Delete',
code: 'Delete',
bubbles: true,
cancelable: true
key: 'Delete', code: 'Delete', bubbles: true, cancelable: true
});
document.activeElement.dispatchEvent(deleteEvent);
}
@@ -183,7 +224,6 @@ window.OutlookRelook.Keyboard = (function () {
if (readBtn) {
readBtn.click();
} else {
// Try context menu approach
triggerContextMenuAction(/mark as read/i);
}
});
@@ -203,11 +243,8 @@ window.OutlookRelook.Keyboard = (function () {
}
function actionMove(targets) {
// For move, we just need to trigger OWA's move dialog on the current selection
if (targets.length > 0) {
// Click the first target to ensure something is selected
targets[0].click();
setTimeout(function () {
var moveBtn = document.querySelector(
'[aria-label*="Move to" i][role="button"], [aria-label*="Move" i][role="menuitem"]'
@@ -222,19 +259,14 @@ window.OutlookRelook.Keyboard = (function () {
}
function triggerContextMenuAction(pattern) {
// Open context menu on the focused/selected element
var focused = document.querySelector('.or-kb-focused');
if (!focused) return;
var rect = focused.getBoundingClientRect();
var contextEvent = new MouseEvent('contextmenu', {
bubbles: true,
cancelable: true,
clientX: rect.x + 10,
clientY: rect.y + 10,
bubbles: true, cancelable: true,
clientX: rect.x + 10, clientY: rect.y + 10,
});
focused.dispatchEvent(contextEvent);
setTimeout(function () {
var menuItems = document.querySelectorAll('[role="menuitem"]');
for (var j = 0; j < menuItems.length; j++) {
@@ -243,7 +275,6 @@ window.OutlookRelook.Keyboard = (function () {
return;
}
}
// Close context menu if not found
document.body.click();
}, 300);
}
@@ -251,7 +282,6 @@ window.OutlookRelook.Keyboard = (function () {
// --- Key handler ---
function handleKeydown(e) {
// Skip if keyboard mode is off or compose/dialog is active
if (!currentSettings.keyboardMultiSelect) return;
if (isComposeOrDialogActive()) return;
@@ -262,15 +292,21 @@ window.OutlookRelook.Keyboard = (function () {
var shift = e.shiftKey;
// Initialize focus if not set
if (focusedIndex < 0 || focusedIndex >= items.length) {
// Find the currently OWA-selected item, or start at 0
var currentIdx = getFocusedIndex(items);
if (currentIdx < 0) {
for (var f = 0; f < items.length; f++) {
if (items[f].getAttribute('aria-selected') === 'true') {
focusedIndex = f;
if (items[f].getAttribute('aria-selected') === 'true' ||
items[f].classList.contains('is-selected')) {
currentIdx = f;
focusedId = getMessageId(items[f]);
break;
}
}
if (focusedIndex < 0) focusedIndex = 0;
if (currentIdx < 0) {
currentIdx = 0;
focusedId = getMessageId(items[0]);
}
applyVisualState(items);
}
var handled = true;
@@ -280,19 +316,14 @@ window.OutlookRelook.Keyboard = (function () {
case 'j':
case 'ArrowDown':
if (shift) {
// Select current and move down
if (focusedIndex >= 0 && focusedIndex < items.length) {
if (!selectedSet.has(items[focusedIndex])) {
toggleSelect(items[focusedIndex]);
}
}
if (focusedIndex < items.length - 1) {
setFocus(items, focusedIndex + 1);
toggleSelect(items[focusedIndex]);
toggleSelect(items, currentIdx);
if (currentIdx < items.length - 1) {
setFocus(items, currentIdx + 1);
toggleSelect(items, currentIdx + 1);
}
} else {
if (focusedIndex < items.length - 1) {
setFocus(items, focusedIndex + 1);
if (currentIdx < items.length - 1) {
setFocus(items, currentIdx + 1);
}
}
break;
@@ -300,46 +331,35 @@ window.OutlookRelook.Keyboard = (function () {
case 'k':
case 'ArrowUp':
if (shift) {
// Select current and move up
if (focusedIndex >= 0 && focusedIndex < items.length) {
if (!selectedSet.has(items[focusedIndex])) {
toggleSelect(items[focusedIndex]);
}
}
if (focusedIndex > 0) {
setFocus(items, focusedIndex - 1);
toggleSelect(items[focusedIndex]);
toggleSelect(items, currentIdx);
if (currentIdx > 0) {
setFocus(items, currentIdx - 1);
toggleSelect(items, currentIdx - 1);
}
} else {
if (focusedIndex > 0) {
setFocus(items, focusedIndex - 1);
if (currentIdx > 0) {
setFocus(items, currentIdx - 1);
}
}
break;
case 'x':
case ' ':
// Toggle select on focused message
e.preventDefault(); // Prevent page scroll on Space
if (focusedIndex >= 0 && focusedIndex < items.length) {
toggleSelect(items[focusedIndex]);
}
e.preventDefault();
toggleSelect(items, currentIdx);
break;
case '#':
// Delete selected/focused messages
targets = getActionTargets(items);
actionDelete(targets);
break;
case 'e':
// Archive selected/focused messages
targets = getActionTargets(items);
actionArchive(targets);
break;
case 'I':
// Shift+i — Mark as read
if (shift) {
targets = getActionTargets(items);
actionMarkRead(targets);
@@ -349,7 +369,6 @@ window.OutlookRelook.Keyboard = (function () {
break;
case 'U':
// Shift+u — Mark as unread
if (shift) {
targets = getActionTargets(items);
actionMarkUnread(targets);
@@ -359,21 +378,18 @@ window.OutlookRelook.Keyboard = (function () {
break;
case 'v':
// Move selected messages
targets = getActionTargets(items);
actionMove(targets);
break;
case 'Escape':
// Deselect all
clearSelection();
break;
case 'Enter':
case 'o':
// Open focused message in reading pane
if (focusedIndex >= 0 && focusedIndex < items.length) {
items[focusedIndex].click();
if (currentIdx >= 0 && currentIdx < items.length) {
items[currentIdx].click();
}
break;
@@ -383,33 +399,32 @@ window.OutlookRelook.Keyboard = (function () {
if (handled) {
e.stopPropagation();
// Only preventDefault for keys we handle (except Enter which OWA should also process)
if (key !== 'Enter' && key !== 'o') {
e.preventDefault();
}
}
}
// --- Cleanup stale selections when message list re-renders ---
// --- Re-apply visual state when OWA re-renders the message list ---
function setupListObserver() {
var listObserver = new MutationObserver(function () {
// Remove stale entries from selectedSet (elements no longer in DOM)
selectedSet.forEach(function (item) {
if (!document.contains(item)) {
selectedSet.delete(item);
}
});
updateCountBadge();
// Reset focusedIndex if the focused item is gone
var focusedEl = document.querySelector('.or-kb-focused');
if (!focusedEl || !document.contains(focusedEl)) {
focusedIndex = -1;
// Prune IDs that no longer exist in DOM
var items = getMessageItems();
var currentIds = new Set();
for (var i = 0; i < items.length; i++) {
var id = getMessageId(items[i]);
if (id) currentIds.add(id);
}
selectedIds.forEach(function (id) {
if (!currentIds.has(id)) selectedIds.delete(id);
});
if (focusedId && !currentIds.has(focusedId)) focusedId = null;
// Re-apply classes to new DOM elements
applyVisualState(items);
});
// Watch the message list container for child changes
var checkInterval = setInterval(function () {
var list = document.querySelector('[role="listbox"], [role="list"]');
if (list) {
@@ -444,7 +459,6 @@ window.OutlookRelook.Keyboard = (function () {
var isEnabled = settings.keyboardMultiSelect;
currentSettings = settings;
// Only tear down and restart if the keyboard setting itself changed
if (wasEnabled !== isEnabled) {
stop();
start(settings);
@@ -457,11 +471,10 @@ window.OutlookRelook.Keyboard = (function () {
}
cleanupFns = [];
// Clean up DOM state
clearSelection();
var focused = document.querySelector('.or-kb-focused');
if (focused) focused.classList.remove('or-kb-focused');
focusedIndex = -1;
focusedId = null;
if (countBadge) {
countBadge.remove();