mirror of
https://github.com/letieu/terminal.css.git
synced 2026-03-15 02:04:30 -07:00
79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
|
|
/**
|
|||
|
|
* terminal.css - Terminal CSS Component Library
|
|||
|
|
* JavaScript Utilities
|
|||
|
|
* Version: 3.0.0
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Toggle FAQ item
|
|||
|
|
* @param {HTMLElement} element - The FAQ question element that was clicked
|
|||
|
|
*/
|
|||
|
|
function toggleFaq(element) {
|
|||
|
|
const faqItem = element.parentElement;
|
|||
|
|
const wasActive = faqItem.classList.contains('is-active');
|
|||
|
|
|
|||
|
|
// Close all FAQ items
|
|||
|
|
document.querySelectorAll('.faq-item').forEach(item => {
|
|||
|
|
item.classList.remove('is-active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Open clicked item if it wasn't active
|
|||
|
|
if (!wasActive) {
|
|||
|
|
faqItem.classList.add('is-active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Show a toast notification
|
|||
|
|
* @param {string} type - Toast type: 'primary', 'success', 'danger', 'warning', 'info'
|
|||
|
|
* @param {string} title - Toast title
|
|||
|
|
* @param {string} message - Toast message
|
|||
|
|
* @param {number} duration - Duration in milliseconds (default: 5000)
|
|||
|
|
*/
|
|||
|
|
function showToast(type, title, message, duration = 5000) {
|
|||
|
|
const container = document.getElementById('toastContainer');
|
|||
|
|
|
|||
|
|
// Create toast element
|
|||
|
|
const toast = document.createElement('div');
|
|||
|
|
toast.className = `toast is-${type}`;
|
|||
|
|
|
|||
|
|
// Icon mapping
|
|||
|
|
const icons = {
|
|||
|
|
primary: '▸',
|
|||
|
|
success: '✓',
|
|||
|
|
danger: '✕',
|
|||
|
|
warning: '⚠',
|
|||
|
|
info: 'ℹ'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
toast.innerHTML = `
|
|||
|
|
<div class="toast-icon">${icons[type] || '▸'}</div>
|
|||
|
|
<div class="toast-content">
|
|||
|
|
<div class="toast-title">${title}</div>
|
|||
|
|
<div class="toast-message">${message}</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="toast-close" onclick="dismissToast(this)">×</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
container.appendChild(toast);
|
|||
|
|
|
|||
|
|
// Auto dismiss after duration
|
|||
|
|
setTimeout(() => {
|
|||
|
|
dismissToast(toast.querySelector('.toast-close'));
|
|||
|
|
}, duration);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Dismiss a toast notification
|
|||
|
|
* @param {HTMLElement} closeButton - The close button element that was clicked
|
|||
|
|
*/
|
|||
|
|
function dismissToast(closeButton) {
|
|||
|
|
const toast = closeButton.closest('.toast');
|
|||
|
|
toast.classList.add('is-dismissing');
|
|||
|
|
|
|||
|
|
// Remove from DOM after animation
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.remove();
|
|||
|
|
}, 300);
|
|||
|
|
}
|