feat: DOM injector — mark-all-read button and folder jump dialog
This commit is contained in:
Joel Brock
@@ -1 +1,264 @@
|
||||
// Outlook Relook — injector.js (stub, implemented in later task)
|
||||
// Outlook Relook — DOM Injector
|
||||
// Injects custom UI elements: mark-all-read button, folder jump dialog.
|
||||
|
||||
window.OutlookRelook = window.OutlookRelook || {};
|
||||
|
||||
window.OutlookRelook.Injector = (function () {
|
||||
'use strict';
|
||||
|
||||
var OR = window.OutlookRelook;
|
||||
var currentSettings = {};
|
||||
var cleanupFns = [];
|
||||
|
||||
// --- "Mark all as read" button ---
|
||||
function setupMarkAllRead() {
|
||||
if (!currentSettings.markAllReadButton) return;
|
||||
|
||||
function injectButton() {
|
||||
// Find folder headers that don't already have our button
|
||||
var headers = OR.resolveSelector('folder-header');
|
||||
for (var i = 0; i < headers.length; i++) {
|
||||
var header = headers[i];
|
||||
if (header.querySelector('.or-mark-all-read')) continue;
|
||||
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'or-mark-all-read';
|
||||
btn.textContent = '\u2713\u2713'; // double checkmark
|
||||
btn.title = 'Mark all as read';
|
||||
btn.style.cssText = [
|
||||
'background: none;',
|
||||
'border: 1px solid var(--or-border, #ccc);',
|
||||
'color: var(--or-text-secondary, #666);',
|
||||
'cursor: pointer;',
|
||||
'font-size: 11px;',
|
||||
'padding: 2px 6px;',
|
||||
'margin-left: 8px;',
|
||||
'border-radius: 3px;',
|
||||
'line-height: 1;',
|
||||
'vertical-align: middle;'
|
||||
].join(' ');
|
||||
|
||||
btn.addEventListener('click', (function (hdr) {
|
||||
return function (e) {
|
||||
e.stopPropagation();
|
||||
// Find the context menu "Mark all as read" option
|
||||
var folder = hdr.closest('[role="treeitem"]');
|
||||
if (folder) {
|
||||
// Dispatch a contextmenu event to open OWA's context menu
|
||||
var rect = folder.getBoundingClientRect();
|
||||
var contextEvent = new MouseEvent('contextmenu', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
clientX: rect.x + 10,
|
||||
clientY: rect.y + 10,
|
||||
});
|
||||
folder.dispatchEvent(contextEvent);
|
||||
|
||||
// Wait for context menu to render, then find and click "Mark all as read"
|
||||
setTimeout(function () {
|
||||
var menuItems = document.querySelectorAll('[role="menuitem"]');
|
||||
for (var j = 0; j < menuItems.length; j++) {
|
||||
if (/mark all as read/i.test(menuItems[j].textContent)) {
|
||||
menuItems[j].click();
|
||||
console.log('[Outlook Relook] Marked all as read');
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Close context menu if option not found
|
||||
document.body.click();
|
||||
console.warn('[Outlook Relook] "Mark all as read" menu item not found');
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
})(header));
|
||||
|
||||
header.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
// Inject on load and watch for new headers
|
||||
var timer = setTimeout(injectButton, 3000);
|
||||
var injectObserver = new MutationObserver(function () { injectButton(); });
|
||||
injectObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
cleanupFns.push(function () {
|
||||
clearTimeout(timer);
|
||||
injectObserver.disconnect();
|
||||
var btns = document.querySelectorAll('.or-mark-all-read');
|
||||
for (var k = 0; k < btns.length; k++) btns[k].remove();
|
||||
});
|
||||
}
|
||||
|
||||
// --- Quick folder jump (Ctrl+Shift+K) ---
|
||||
function setupFolderJump() {
|
||||
if (!currentSettings.quickFolderJump) return;
|
||||
|
||||
var dialog = null;
|
||||
|
||||
function createDialog() {
|
||||
var overlay = document.createElement('div');
|
||||
overlay.id = 'or-folder-jump';
|
||||
overlay.style.cssText = [
|
||||
'position: fixed;',
|
||||
'top: 0; left: 0; right: 0; bottom: 0;',
|
||||
'background: rgba(0,0,0,0.4);',
|
||||
'z-index: 999999;',
|
||||
'display: flex;',
|
||||
'align-items: flex-start;',
|
||||
'justify-content: center;',
|
||||
'padding-top: 20vh;'
|
||||
].join(' ');
|
||||
|
||||
var box = document.createElement('div');
|
||||
box.style.cssText = [
|
||||
'background: var(--or-bg-primary, #fff);',
|
||||
'border: 1px solid var(--or-border, #ccc);',
|
||||
'border-radius: 8px;',
|
||||
'padding: 12px;',
|
||||
'width: 400px;',
|
||||
'max-height: 400px;',
|
||||
'box-shadow: 0 8px 32px rgba(0,0,0,0.2);',
|
||||
'font-family: inherit;'
|
||||
].join(' ');
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.placeholder = 'Jump to folder...';
|
||||
input.style.cssText = [
|
||||
'width: 100%;',
|
||||
'padding: 8px 12px;',
|
||||
'border: 1px solid var(--or-border, #ccc);',
|
||||
'border-radius: 4px;',
|
||||
'font-size: 14px;',
|
||||
'outline: none;',
|
||||
'box-sizing: border-box;',
|
||||
'background: var(--or-bg-secondary, #f5f5f5);',
|
||||
'color: var(--or-text-primary, #000);'
|
||||
].join(' ');
|
||||
|
||||
var results = document.createElement('div');
|
||||
results.style.cssText = 'margin-top: 8px; max-height: 300px; overflow-y: auto;';
|
||||
|
||||
input.addEventListener('input', function () {
|
||||
var query = input.value.toLowerCase().trim();
|
||||
// Clear results using safe DOM methods
|
||||
while (results.firstChild) {
|
||||
results.removeChild(results.firstChild);
|
||||
}
|
||||
|
||||
if (!query) return;
|
||||
|
||||
// Find all folder tree items
|
||||
var folders = document.querySelectorAll('[role="treeitem"]');
|
||||
var matches = [];
|
||||
for (var i = 0; i < folders.length; i++) {
|
||||
var name = (folders[i].textContent || '').trim();
|
||||
if (name.toLowerCase().indexOf(query) !== -1) {
|
||||
matches.push({ name: name, element: folders[i] });
|
||||
}
|
||||
}
|
||||
|
||||
var limit = Math.min(matches.length, 10);
|
||||
for (var j = 0; j < limit; j++) {
|
||||
(function (match) {
|
||||
var item = document.createElement('div');
|
||||
item.textContent = match.name;
|
||||
item.style.cssText = [
|
||||
'padding: 6px 12px;',
|
||||
'cursor: pointer;',
|
||||
'border-radius: 4px;',
|
||||
'color: var(--or-text-primary, #000);'
|
||||
].join(' ');
|
||||
item.addEventListener('mouseenter', function () {
|
||||
item.style.backgroundColor = 'var(--or-bg-hover, #e0e0e0)';
|
||||
});
|
||||
item.addEventListener('mouseleave', function () {
|
||||
item.style.backgroundColor = '';
|
||||
});
|
||||
item.addEventListener('click', function () {
|
||||
match.element.click();
|
||||
closeDialog();
|
||||
});
|
||||
results.appendChild(item);
|
||||
})(matches[j]);
|
||||
}
|
||||
});
|
||||
|
||||
box.appendChild(input);
|
||||
box.appendChild(results);
|
||||
overlay.appendChild(box);
|
||||
|
||||
overlay.addEventListener('click', function (e) {
|
||||
if (e.target === overlay) closeDialog();
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') closeDialog();
|
||||
if (e.key === 'Enter') {
|
||||
var firstResult = results.querySelector('div');
|
||||
if (firstResult) firstResult.click();
|
||||
}
|
||||
});
|
||||
|
||||
return { overlay: overlay, input: input };
|
||||
}
|
||||
|
||||
function openDialog() {
|
||||
if (dialog) return;
|
||||
var created = createDialog();
|
||||
document.body.appendChild(created.overlay);
|
||||
dialog = created.overlay;
|
||||
setTimeout(function () { created.input.focus(); }, 50);
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
if (dialog) {
|
||||
dialog.remove();
|
||||
dialog = null;
|
||||
}
|
||||
}
|
||||
|
||||
var handler = function (e) {
|
||||
// Ctrl+Shift+K (or Cmd+Shift+K on Mac)
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'K') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (dialog) {
|
||||
closeDialog();
|
||||
} else {
|
||||
openDialog();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handler, true);
|
||||
cleanupFns.push(function () {
|
||||
document.removeEventListener('keydown', handler, true);
|
||||
closeDialog();
|
||||
});
|
||||
}
|
||||
|
||||
// --- Public API ---
|
||||
|
||||
function start(settings) {
|
||||
currentSettings = settings;
|
||||
setupMarkAllRead();
|
||||
setupFolderJump();
|
||||
console.log('[Outlook Relook] Injector started');
|
||||
}
|
||||
|
||||
function updateSettings(settings) {
|
||||
stop();
|
||||
currentSettings = settings;
|
||||
start(settings);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
for (var i = 0; i < cleanupFns.length; i++) {
|
||||
try { cleanupFns[i](); } catch (e) { /* ignore */ }
|
||||
}
|
||||
cleanupFns = [];
|
||||
}
|
||||
|
||||
return { start: start, updateSettings: updateSettings, stop: stop };
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user