Refactor

beango/js/utils.js

@@ -0,0 +1,139 @@
+let notificationTimeout = null; // To manage hiding notifications
+// --- Notification Function ---
+export function showNotification(message, type = 'info', duration = 3000) {
+    const notificationArea = document.getElementById('notification-area');
+    if (!notificationArea) return;
+
+    // Clear any existing timeout
+    if (notificationTimeout) {
+        clearTimeout(notificationTimeout);
+    }
+
+    notificationArea.textContent = message;
+    // Apply Tailwind classes based on type
+    notificationArea.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-2 rounded shadow-lg text-white text-sm transition-opacity duration-300'; // Reset classes
+    switch (type) {
+        case 'success':
+            notificationArea.classList.add('bg-green-500');
+            break;
+        case 'warning':
+            notificationArea.classList.add('bg-yellow-500');
+            break;
+        case 'error':
+            notificationArea.classList.add('bg-red-500');
+            break;
+        default: // info
+            notificationArea.classList.add('bg-blue-500');
+            break;
+    }
+
+    // Make it visible
+    notificationArea.classList.add('opacity-100');
+
+    // Set timeout to hide
+    notificationTimeout = setTimeout(() => {
+        notificationArea.classList.remove('opacity-100');
+        notificationArea.classList.add('opacity-0');
+    }, duration);
+}
+
+// --- Helper Function ---
+export function hexToRgba(hex, opacityPercent = 100) {
+    // Ensure opacityPercent is a number before using it
+    let numericOpacity = parseInt(opacityPercent, 10); // Try parsing
+    // If parsing failed (e.g., input was not a number string) or input was null/undefined, default to 100
+    if (isNaN(numericOpacity)) {
+        numericOpacity = 100;
+    }
+
+    // Remove hash if it exists
+    hex = hex.replace('#', '');
+
+    // Handle short hex codes
+    if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+    }
+
+    // Ensure hex is 6 digits
+    if (hex.length !== 6) {
+        console.warn(`Invalid hex color: ${hex}. Using fallback.`);
+        hex = '000000'; // Default to black on error
+    }
+
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    // Clamp and normalize opacity using the correctly parsed/defaulted value
+    const clampedOpacityPercent = Math.max(0, Math.min(100, numericOpacity));
+    const opacity = clampedOpacityPercent / 100;
+
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+// --- Event Listener Helper Functions --- START
+
+// Helper function for standard input/select elements
+export function setupInputListener(elementId, eventType, saveFn, refreshFn) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.addEventListener(eventType, () => {
+            if (saveFn) saveFn();
+            if (refreshFn) refreshFn();
+        });
+    } else {
+        console.warn(`Element with ID ${elementId} not found for listener setup.`);
+    }
+}
+
+// Helper function for opacity sliders with value display
+export function setupOpacitySliderListener(sliderId, valueSpanId, saveFn, refreshFn) {
+    const slider = document.getElementById(sliderId);
+    const valueSpan = document.getElementById(valueSpanId);
+    if (slider) {
+        slider.addEventListener('input', (e) => {
+            if (valueSpan) valueSpan.textContent = e.target.value;
+            if (saveFn) saveFn();
+            if (refreshFn) refreshFn();
+        });
+    } else {
+        console.warn(`Element with ID ${sliderId} not found for listener setup.`);
+    }
+}
+
+// --- Event Listener Helper Functions --- END
+
+// Helper function to restore a checkbox state
+export function _restoreCheckboxSetting(checkboxId, savedValue) {
+    const checkbox = document.getElementById(checkboxId);
+    if (checkbox) {
+        checkbox.checked = savedValue; // savedValue should be boolean
+    }
+}
+// Helper function to restore opacity slider and value display
+export function _restoreOpacitySetting(sliderId, valueSpanId, savedOpacityValue) {
+    const slider = document.getElementById(sliderId);
+    const valueSpan = document.getElementById(valueSpanId);
+    if (slider) {
+        slider.value = savedOpacityValue;
+    }
+    if (valueSpan) {
+        valueSpan.textContent = savedOpacityValue;
+    }
+}
+
+// Helper function to restore a color picker value
+export function _restoreColorPickerSetting(pickerId, savedColorValue) {
+    const picker = document.getElementById(pickerId);
+    if (picker) {
+        picker.value = savedColorValue;
+    }
+}
+
+// Helper function to restore a generic input value
+export function _restoreInputSetting(inputId, savedValue) {
+    const input = document.getElementById(inputId);
+    if (input) {
+        input.value = savedValue;
+    }
+}