66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
export function showToast(message, type = 'info') {
|
|
const toastEl = document.getElementById('toast');
|
|
if (!toastEl) return;
|
|
|
|
// Clear any existing classes
|
|
toastEl.className = 'toast';
|
|
|
|
// Add the appropriate class based on type
|
|
if (type === 'error') {
|
|
toastEl.classList.add('toast-error');
|
|
} else if (type === 'success') {
|
|
toastEl.classList.add('toast-success');
|
|
} else {
|
|
toastEl.classList.add('toast-info');
|
|
}
|
|
|
|
toastEl.textContent = message;
|
|
toastEl.classList.add('show');
|
|
setTimeout(() => toastEl.classList.remove('show'), 3000);
|
|
}
|
|
|
|
export function addRippleEffect(button) {
|
|
if (!button) return;
|
|
|
|
button.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('span');
|
|
ripple.classList.add('ripple');
|
|
this.appendChild(ripple);
|
|
|
|
const rect = button.getBoundingClientRect();
|
|
const size = Math.max(rect.width, rect.height);
|
|
|
|
ripple.style.width = ripple.style.height = `${size}px`;
|
|
ripple.style.left = `${e.clientX - rect.left - size/2}px`;
|
|
ripple.style.top = `${e.clientY - rect.top - size/2}px`;
|
|
|
|
setTimeout(() => {
|
|
ripple.remove();
|
|
}, 600);
|
|
});
|
|
}
|
|
|
|
export function updateImageInfo(data) {
|
|
const resolutionEl = document.getElementById('image-resolution');
|
|
if (resolutionEl) {
|
|
resolutionEl.textContent = `Resolution: ${data.resolution || 'N/A'}`;
|
|
}
|
|
const filenameEl = document.getElementById('image-filename');
|
|
if (filenameEl) {
|
|
filenameEl.textContent = `Filename: ${data.filename || 'N/A'}`;
|
|
}
|
|
const creationEl = document.getElementById('image-creation-date');
|
|
if (creationEl) {
|
|
creationEl.textContent = `Created: ${data.creation_date || 'N/A'}`;
|
|
}
|
|
const promptEl = document.getElementById('image-prompt');
|
|
if (promptEl) {
|
|
// textarea uses value attribute
|
|
if (promptEl.tagName === 'TEXTAREA') {
|
|
promptEl.value = data.prompt_data || '';
|
|
} else {
|
|
promptEl.textContent = data.prompt_data || '';
|
|
}
|
|
}
|
|
}
|