LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate showConfirmModal into utils.js, remove duplicate from dashboard.js

Browse Source 
utils.js is loaded on all pages (dashboard, ticket, admin views) before dashboard.js.
Moving the canonical definition there and removing the guard + the copy in dashboard.js
eliminates the redundant redefinition on every page load.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-03-20 21:44:46 -04:00
parent 9f1a375e5a
commit 06b7a8f59b
2 changed files with 29 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/js/dashboard.js
View File

@@ -1079,71 +1079,6 @@ function performBulkDelete() {
// TERMINAL-STYLE MODAL UTILITIES // TERMINAL-STYLE MODAL UTILITIES
// ============================================ // ============================================
/**
* Show a terminal-style confirmation modal
* @param {string} title - Modal title
* @param {string} message - Message body
* @param {string} type - 'warning', 'error', 'info' (affects color)
* @param {function} onConfirm - Callback when user confirms
* @param {function} onCancel - Optional callback when user cancels
*/
function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel = null) {
const modalId = 'confirmModal' + Date.now();
// Color scheme based on type
const colors = {
warning: 'var(--terminal-amber)',
error: 'var(--status-closed)',
info: 'var(--terminal-cyan)'
};
const color = colors[type] || colors.warning;
// Icon based on type
const icons = {
warning: '[ ! ]',
error: '[ X ]',
info: '[ i ]',
};
const icon = icons[type] || icons.warning;
// Escape user-provided content to prevent XSS
const safeTitle = lt.escHtml(title);
const safeMessage = lt.escHtml(message);
const modalHtml = `
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="${modalId}_title">
<div class="lt-modal lt-modal-sm">
<div class="lt-modal-header" style="color: ${color};">
<span class="lt-modal-title" id="${modalId}_title">${icon} ${safeTitle}</span>
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
</div>
<div class="lt-modal-body text-center">
<p class="modal-message">${safeMessage}</p>
</div>
<div class="lt-modal-footer">
<button class="lt-btn lt-btn-primary" id="${modalId}_confirm">CONFIRM</button>
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">CANCEL</button>
</div>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', modalHtml);
const modal = document.getElementById(modalId);
lt.modal.open(modalId);
const cleanup = (cb) => {
lt.modal.close(modalId);
setTimeout(() => modal.remove(), 300);
if (cb) cb();
};
document.getElementById(`${modalId}_confirm`).addEventListener('click', () => cleanup(onConfirm));
document.getElementById(`${modalId}_cancel`).addEventListener('click', () => cleanup(onCancel));
modal.querySelector('[data-modal-close]').addEventListener('click', () => cleanup(onCancel));
}
/** /**
* Show a terminal-style input modal * Show a terminal-style input modal
* @param {string} title - Modal title * @param {string} title - Modal title

61
assets/js/utils.js
View File

@@ -13,46 +13,43 @@ function getTicketIdFromUrl() {
/** /**
* Show a terminal-style confirmation modal using the lt.modal system. * Show a terminal-style confirmation modal using the lt.modal system.
* Falls back gracefully if dashboard.js has already defined this function.
* @param {string} title - Modal title * @param {string} title - Modal title
* @param {string} message - Confirmation message * @param {string} message - Confirmation message
* @param {string} type - 'warning' | 'error' | 'info' * @param {string} type - 'warning' | 'error' | 'info'
* @param {Function} onConfirm - Called when user confirms * @param {Function} onConfirm - Called when user confirms
* @param {Function|null} onCancel - Called when user cancels * @param {Function|null} onCancel - Called when user cancels
*/ */
if (typeof showConfirmModal === 'undefined') { function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel = null) {
window.showConfirmModal = function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel = null) { const modalId = 'confirmModal' + Date.now();
const modalId = 'confirmModal' + Date.now(); const colors = { warning: 'var(--terminal-amber)', error: 'var(--status-closed)', info: 'var(--terminal-cyan)' };
const colors = { warning: 'var(--terminal-amber)', error: 'var(--status-closed)', info: 'var(--terminal-cyan)' }; const icons = { warning: '[ ! ]', error: '[ X ]', info: '[ i ]' };
const icons = { warning: '[ ! ]', error: '[ X ]', info: '[ i ]' }; const color = colors[type] || colors.warning;
const color = colors[type] || colors.warning; const icon = icons[type] || icons.warning;
const icon = icons[type] || icons.warning; const safeTitle = lt.escHtml(title);
const safeTitle = lt.escHtml(title); const safeMessage = lt.escHtml(message);
const safeMessage = lt.escHtml(message);
document.body.insertAdjacentHTML('beforeend', ` document.body.insertAdjacentHTML('beforeend', `
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="${modalId}_title"> <div class="lt-modal-overlay" id="${modalId}" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="${modalId}_title">
<div class="lt-modal lt-modal-sm"> <div class="lt-modal lt-modal-sm">
<div class="lt-modal-header" style="color:${color};"> <div class="lt-modal-header" style="color:${color};">
<span class="lt-modal-title" id="${modalId}_title">${icon} ${safeTitle}</span> <span class="lt-modal-title" id="${modalId}_title">${icon} ${safeTitle}</span>
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button> <button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
</div> </div>
<div class="lt-modal-body text-center"> <div class="lt-modal-body text-center">
<p class="modal-message">${safeMessage}</p> <p class="modal-message">${safeMessage}</p>
</div> </div>
<div class="lt-modal-footer"> <div class="lt-modal-footer">
<button class="lt-btn lt-btn-primary" id="${modalId}_confirm">CONFIRM</button> <button class="lt-btn lt-btn-primary" id="${modalId}_confirm">CONFIRM</button>
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">CANCEL</button> <button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">CANCEL</button>
</div>
</div> </div>
</div> </div>
`); </div>
`);
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
lt.modal.open(modalId); lt.modal.open(modalId);
const cleanup = (cb) => { lt.modal.close(modalId); setTimeout(() => modal.remove(), 300); if (cb) cb(); }; const cleanup = (cb) => { lt.modal.close(modalId); setTimeout(() => modal.remove(), 300); if (cb) cb(); };
document.getElementById(`${modalId}_confirm`).addEventListener('click', () => cleanup(onConfirm)); document.getElementById(`${modalId}_confirm`).addEventListener('click', () => cleanup(onConfirm));
document.getElementById(`${modalId}_cancel`).addEventListener('click', () => cleanup(onCancel)); document.getElementById(`${modalId}_cancel`).addEventListener('click', () => cleanup(onCancel));
modal.querySelector('[data-modal-close]').addEventListener('click', () => cleanup(onCancel)); modal.querySelector('[data-modal-close]').addEventListener('click', () => cleanup(onCancel));
};
} }