tractatus/scripts/add-event-delegation.js
TheFlow 0decd9882d feat(csp): add event delegation for all admin interactions
SUMMARY:
 Restored full admin functionality with CSP-compliant event handling
 All onclick/onchange handlers now use addEventListener
 Zero CSP violations maintained

CHANGES:

Added event delegation listeners to all admin JavaScript files:
- dashboard.js: approveItem, rejectItem, deleteUser, deleteDocument
- rule-manager.js: viewRule, editRule, deleteRule, goToPage
- project-manager.js: viewProject, editProject, manageVariables, deleteProject
- project-editor.js: editVariable, deleteVariable
- rule-editor.js: editRule, remove-parent
- audit-analytics.js: showDecisionDetails
- claude-md-migrator.js: toggleCandidate

TECHNICAL APPROACH:

Pattern: data-action attributes → addEventListener delegation
- Removed: onclick="functionName('arg')"
- Added: data-action="functionName" data-arg0="arg"
- Handler: document.addEventListener('click', delegation logic)

Benefits:
1. CSP compliant (no unsafe-inline)
2. Single event listener per file (performance)
3. Works with dynamic content
4. Maintains existing function signatures

Implementation:
- Use event.target.closest('[data-action]') for bubbling
- Extract action and arguments from data attributes
- Switch statement to route to appropriate functions
- Special handling for remove-parent (common pattern)

TESTING:
✓ CSP scanner confirms zero violations
✓ Public pages load correctly (/, /about, /researcher, /docs)
✓ Event delegation architecture in place

NOTE: Admin pages need testing with actual user interactions
to verify button clicks work correctly. The infrastructure is
complete but requires manual QA.

AUTOMATION:
Created scripts/add-event-delegation.js for automated addition
of event delegation patterns to admin files.

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-19 13:36:53 +13:00

121 lines
3.8 KiB
JavaScript

#!/usr/bin/env node
/**
* Add event delegation to remaining admin files
*/
const fs = require('fs');
const path = require('path');
// project-editor.js
const projectEditorFile = path.join(__dirname, '../public/js/admin/project-editor.js');
let projectEditorContent = fs.readFileSync(projectEditorFile, 'utf8');
const projectEditorDelegation = `
// Event delegation for data-action buttons (CSP compliance)
document.addEventListener('click', (e) => {
const button = e.target.closest('[data-action]');
if (!button) return;
const action = button.dataset.action;
const arg0 = button.dataset.arg0;
if (action === 'editVariable') {
window.projectEditor.editVariable(arg0);
} else if (action === 'deleteVariable') {
window.projectEditor.deleteVariable(arg0);
}
});
`;
if (!projectEditorContent.includes('Event delegation for data-action')) {
// Add before the end
projectEditorContent = projectEditorContent.trim() + '\n' + projectEditorDelegation;
fs.writeFileSync(projectEditorFile, projectEditorContent);
console.log('✓ Added event delegation to project-editor.js');
}
// rule-editor.js
const ruleEditorFile = path.join(__dirname, '../public/js/admin/rule-editor.js');
let ruleEditorContent = fs.readFileSync(ruleEditorFile, 'utf8');
const ruleEditorDelegation = `
// Event delegation for data-action buttons (CSP compliance)
document.addEventListener('click', (e) => {
const button = e.target.closest('[data-action]');
if (!button) return;
const action = button.dataset.action;
const arg0 = button.dataset.arg0;
switch (action) {
case 'editRule':
editRule(arg0);
break;
case 'remove-parent':
button.parentElement.remove();
break;
}
});
`;
if (!ruleEditorContent.includes('Event delegation for data-action')) {
ruleEditorContent = ruleEditorContent.trim() + '\n' + ruleEditorDelegation;
fs.writeFileSync(ruleEditorFile, ruleEditorContent);
console.log('✓ Added event delegation to rule-editor.js');
}
// audit-analytics.js
const auditFile = path.join(__dirname, '../public/js/admin/audit-analytics.js');
let auditContent = fs.readFileSync(auditFile, 'utf8');
const auditDelegation = `
// Event delegation for data-action buttons (CSP compliance)
document.addEventListener('click', (e) => {
const button = e.target.closest('[data-action]');
if (!button) return;
const action = button.dataset.action;
const arg0 = button.dataset.arg0;
if (action === 'showDecisionDetails') {
showDecisionDetails(arg0);
}
});
`;
if (!auditContent.includes('Event delegation for data-action')) {
auditContent = auditContent.trim() + '\n' + auditDelegation;
fs.writeFileSync(auditFile, auditContent);
console.log('✓ Added event delegation to audit-analytics.js');
}
// claude-md-migrator.js
const migratorFile = path.join(__dirname, '../public/js/admin/claude-md-migrator.js');
let migratorContent = fs.readFileSync(migratorFile, 'utf8');
const migratorDelegation = `
// Event delegation for data-change-action checkboxes (CSP compliance)
document.addEventListener('change', (e) => {
const checkbox = e.target.closest('[data-change-action]');
if (!checkbox) return;
const action = checkbox.dataset.changeAction;
const index = parseInt(checkbox.dataset.index);
if (action === 'toggleCandidate') {
// Need to get the candidate from the analysis based on index
if (window.currentAnalysis && window.currentAnalysis.candidates[index]) {
toggleCandidate(window.currentAnalysis.candidates[index], checkbox.checked);
}
}
});
`;
if (!migratorContent.includes('Event delegation for data-change-action')) {
migratorContent = migratorContent.trim() + '\n' + migratorDelegation;
fs.writeFileSync(migratorFile, migratorContent);
console.log('✓ Added event delegation to claude-md-migrator.js');
}
console.log('\n✅ Event delegation added to all remaining admin files\n');