Till Tomczak
45d223aa46
📚 Added htmx-integration.js for enhanced interactivity 🌟 💄 Refactored backend/logs/dark-light-unified.css for better theming consistency 📝 🐛 Optimized logging files (app.log, data_management.log, etc.) for performance & error tracking 🛡️
481 lines
15 KiB
JavaScript
481 lines
15 KiB
JavaScript
/**
|
|
* HTMX Non-Invasive Integration für MYP Platform
|
|
* =============================================
|
|
*
|
|
* Diese Implementierung stellt sicher, dass HTMX vollständig non-invasiv
|
|
* geladen wird, ohne das Seitenladen oder bestehende JavaScript-Funktionalität
|
|
* zu blockieren oder zu beeinträchtigen.
|
|
*
|
|
* Features:
|
|
* - Lazy Loading von HTMX nur wenn benötigt
|
|
* - Progressive Enhancement Pattern
|
|
* - Keine Blockierung von kritischen Pfaden
|
|
* - Graceful Fallback ohne HTMX
|
|
*
|
|
* Author: Till Tomczak - MYP Team
|
|
* Zweck: Non-invasive HTMX Integration für dynamische UI-Updates
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Configuration
|
|
const HTMX_CONFIG = {
|
|
cdnUrl: 'https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js',
|
|
localFallback: '/static/js/lib/htmx.min.js',
|
|
loadTimeout: 5000,
|
|
enableLogging: true,
|
|
retryAttempts: 2
|
|
};
|
|
|
|
// State Management
|
|
let htmxLoaded = false;
|
|
let htmxLoading = false;
|
|
let loadPromise = null;
|
|
let pendingRequests = [];
|
|
|
|
/**
|
|
* Logger mit Namespace
|
|
*/
|
|
function log(level, message, data = null) {
|
|
if (!HTMX_CONFIG.enableLogging) return;
|
|
|
|
const prefix = '[HTMX-Integration]';
|
|
const styles = {
|
|
info: 'color: #0073ce; font-weight: bold;',
|
|
warn: 'color: #f59e0b; font-weight: bold;',
|
|
error: 'color: #ef4444; font-weight: bold;',
|
|
success: 'color: #10b981; font-weight: bold;'
|
|
};
|
|
|
|
console[level === 'success' ? 'log' : level](
|
|
`%c${prefix} ${message}`,
|
|
styles[level] || styles.info,
|
|
data
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Prüft ob HTMX bereits verfügbar ist
|
|
*/
|
|
function isHtmxAvailable() {
|
|
return typeof window.htmx !== 'undefined' && window.htmx;
|
|
}
|
|
|
|
/**
|
|
* Lädt HTMX dynamisch und non-invasiv
|
|
*/
|
|
async function loadHtmx() {
|
|
if (htmxLoaded || isHtmxAvailable()) {
|
|
log('info', 'HTMX bereits verfügbar');
|
|
return Promise.resolve();
|
|
}
|
|
|
|
if (htmxLoading) {
|
|
log('info', 'HTMX wird bereits geladen, verwende existierendes Promise');
|
|
return loadPromise;
|
|
}
|
|
|
|
htmxLoading = true;
|
|
log('info', 'Beginne HTMX-Laden...');
|
|
|
|
loadPromise = new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.async = true;
|
|
script.defer = true;
|
|
|
|
// Timeout Handler
|
|
const timeout = setTimeout(() => {
|
|
script.remove();
|
|
htmxLoading = false;
|
|
reject(new Error('HTMX laden timeout'));
|
|
}, HTMX_CONFIG.loadTimeout);
|
|
|
|
// Success Handler
|
|
script.onload = () => {
|
|
clearTimeout(timeout);
|
|
htmxLoaded = true;
|
|
htmxLoading = false;
|
|
log('success', 'HTMX erfolgreich geladen');
|
|
|
|
// HTMX konfigurieren
|
|
configureHtmx();
|
|
|
|
// Pending Requests verarbeiten
|
|
processPendingRequests();
|
|
|
|
resolve();
|
|
};
|
|
|
|
// Error Handler mit Fallback
|
|
script.onerror = () => {
|
|
clearTimeout(timeout);
|
|
log('warn', 'CDN-Laden fehlgeschlagen, versuche lokalen Fallback...');
|
|
|
|
// Lokaler Fallback
|
|
const fallbackScript = document.createElement('script');
|
|
fallbackScript.src = HTMX_CONFIG.localFallback;
|
|
fallbackScript.async = true;
|
|
fallbackScript.defer = true;
|
|
|
|
fallbackScript.onload = () => {
|
|
htmxLoaded = true;
|
|
htmxLoading = false;
|
|
log('success', 'HTMX über lokalen Fallback geladen');
|
|
configureHtmx();
|
|
processPendingRequests();
|
|
resolve();
|
|
};
|
|
|
|
fallbackScript.onerror = () => {
|
|
htmxLoading = false;
|
|
log('error', 'HTMX konnte nicht geladen werden (CDN + Fallback fehlgeschlagen)');
|
|
reject(new Error('HTMX nicht verfügbar'));
|
|
};
|
|
|
|
document.head.appendChild(fallbackScript);
|
|
script.remove();
|
|
};
|
|
|
|
// CDN laden
|
|
script.src = HTMX_CONFIG.cdnUrl;
|
|
document.head.appendChild(script);
|
|
});
|
|
|
|
return loadPromise;
|
|
}
|
|
|
|
/**
|
|
* Konfiguriert HTMX nach dem Laden
|
|
*/
|
|
function configureHtmx() {
|
|
if (!isHtmxAvailable()) {
|
|
log('warn', 'HTMX nicht verfügbar für Konfiguration');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// HTMX Konfiguration
|
|
htmx.config.selfRequestsOnly = true;
|
|
htmx.config.allowEval = false;
|
|
htmx.config.allowScriptTags = false;
|
|
htmx.config.historyCacheSize = 10;
|
|
htmx.config.timeout = 30000;
|
|
htmx.config.withCredentials = true;
|
|
htmx.config.defaultSwapStyle = 'outerHTML';
|
|
htmx.config.defaultSwapDelay = 0;
|
|
htmx.config.defaultSettleDelay = 20;
|
|
|
|
// CSRF Token Integration
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]');
|
|
if (csrfToken) {
|
|
htmx.config.requestClass = 'htmx-request';
|
|
|
|
// Event Listener für CSRF Token
|
|
document.body.addEventListener('htmx:configRequest', function(evt) {
|
|
const token = document.querySelector('meta[name="csrf-token"]');
|
|
if (token) {
|
|
evt.detail.headers['X-CSRFToken'] = token.getAttribute('content');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Error Handling
|
|
document.body.addEventListener('htmx:responseError', function(evt) {
|
|
log('error', 'HTMX Response Error', {
|
|
status: evt.detail.xhr.status,
|
|
response: evt.detail.xhr.responseText
|
|
});
|
|
|
|
// Fallback zu Standard-Navigation bei schweren Fehlern
|
|
if (evt.detail.xhr.status >= 500) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
|
|
// Success Handling
|
|
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
|
log('info', 'HTMX Request completed', {
|
|
method: evt.detail.requestConfig.verb,
|
|
url: evt.detail.requestConfig.path,
|
|
status: evt.detail.xhr.status
|
|
});
|
|
});
|
|
|
|
// Loading States
|
|
document.body.addEventListener('htmx:beforeRequest', function(evt) {
|
|
addLoadingState(evt.detail.elt);
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
|
removeLoadingState(evt.detail.elt);
|
|
});
|
|
|
|
log('success', 'HTMX konfiguration abgeschlossen');
|
|
|
|
} catch (error) {
|
|
log('error', 'Fehler bei HTMX-Konfiguration:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fügt Loading State zu Elementen hinzu
|
|
*/
|
|
function addLoadingState(element) {
|
|
if (!element) return;
|
|
|
|
element.classList.add('htmx-loading');
|
|
element.style.opacity = '0.7';
|
|
element.style.pointerEvents = 'none';
|
|
|
|
// Spinner hinzufügen wenn noch nicht vorhanden
|
|
if (!element.querySelector('.htmx-spinner')) {
|
|
const spinner = document.createElement('div');
|
|
spinner.className = 'htmx-spinner inline-block ml-2';
|
|
spinner.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
element.appendChild(spinner);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Entfernt Loading State von Elementen
|
|
*/
|
|
function removeLoadingState(element) {
|
|
if (!element) return;
|
|
|
|
element.classList.remove('htmx-loading');
|
|
element.style.opacity = '';
|
|
element.style.pointerEvents = '';
|
|
|
|
// Spinner entfernen
|
|
const spinner = element.querySelector('.htmx-spinner');
|
|
if (spinner) {
|
|
spinner.remove();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Verarbeitet wartende HTMX-Requests
|
|
*/
|
|
function processPendingRequests() {
|
|
if (!isHtmxAvailable() || pendingRequests.length === 0) {
|
|
return;
|
|
}
|
|
|
|
log('info', `Verarbeite ${pendingRequests.length} wartende HTMX-Requests`);
|
|
|
|
pendingRequests.forEach(request => {
|
|
try {
|
|
request();
|
|
} catch (error) {
|
|
log('error', 'Fehler beim Verarbeiten wartender Request:', error);
|
|
}
|
|
});
|
|
|
|
pendingRequests = [];
|
|
}
|
|
|
|
/**
|
|
* Fügt HTMX-Attribute zu einem Element hinzu
|
|
*/
|
|
function enhanceElement(element, config) {
|
|
if (!element || typeof config !== 'object') {
|
|
log('warn', 'Ungültige Parameter für enhanceElement');
|
|
return;
|
|
}
|
|
|
|
const request = () => {
|
|
Object.keys(config).forEach(attr => {
|
|
const htmxAttr = `hx-${attr}`;
|
|
element.setAttribute(htmxAttr, config[attr]);
|
|
});
|
|
|
|
// HTMX Element verarbeiten lassen
|
|
if (isHtmxAvailable()) {
|
|
htmx.process(element);
|
|
}
|
|
};
|
|
|
|
if (isHtmxAvailable()) {
|
|
request();
|
|
} else {
|
|
pendingRequests.push(request);
|
|
loadHtmx().catch(error => {
|
|
log('error', 'HTMX-Laden für Element-Enhancement fehlgeschlagen:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Erstellt ein HTMX-Enhanced Element
|
|
*/
|
|
function createEnhancedElement(tagName, config, content = '') {
|
|
const element = document.createElement(tagName);
|
|
element.innerHTML = content;
|
|
|
|
enhanceElement(element, config);
|
|
return element;
|
|
}
|
|
|
|
/**
|
|
* Lazy Loading Trigger für HTMX
|
|
*/
|
|
function initializeLazyLoading() {
|
|
// Intersection Observer für lazy loading
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const element = entry.target;
|
|
if (element.hasAttribute('data-htmx-lazy')) {
|
|
loadHtmx().then(() => {
|
|
log('info', 'HTMX lazy-loaded für sichtbares Element');
|
|
}).catch(error => {
|
|
log('error', 'HTMX lazy-loading fehlgeschlagen:', error);
|
|
});
|
|
observer.unobserve(element);
|
|
}
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
// Alle lazy-loading Elemente beobachten
|
|
document.querySelectorAll('[data-htmx-lazy]').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Event-basiertes HTMX-Laden
|
|
*/
|
|
function initializeEventTriggers() {
|
|
document.addEventListener('click', (event) => {
|
|
const target = event.target.closest('[data-htmx-trigger]');
|
|
if (target) {
|
|
event.preventDefault();
|
|
loadHtmx().then(() => {
|
|
// Nach dem Laden HTMX-Attribute anwenden
|
|
const config = JSON.parse(target.getAttribute('data-htmx-config') || '{}');
|
|
enhanceElement(target, config);
|
|
|
|
// Original Click Event simulieren
|
|
target.click();
|
|
}).catch(error => {
|
|
log('error', 'HTMX-Laden über Event-Trigger fehlgeschlagen:', error);
|
|
// Fallback zu Standard-Verhalten
|
|
window.location.href = target.href || target.getAttribute('data-fallback-url');
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Auto-Detection für HTMX-Attribute
|
|
*/
|
|
function autoDetectHtmxElements() {
|
|
const htmxAttributes = [
|
|
'hx-get', 'hx-post', 'hx-put', 'hx-patch', 'hx-delete',
|
|
'hx-trigger', 'hx-target', 'hx-swap', 'hx-boost'
|
|
];
|
|
|
|
const hasHtmxElements = htmxAttributes.some(attr =>
|
|
document.querySelector(`[${attr}]`)
|
|
);
|
|
|
|
if (hasHtmxElements) {
|
|
log('info', 'HTMX-Elemente detectiert, lade HTMX...');
|
|
loadHtmx().catch(error => {
|
|
log('error', 'Auto-Detection HTMX-Laden fehlgeschlagen:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Public API
|
|
*/
|
|
window.MYP_HTMX = {
|
|
load: loadHtmx,
|
|
enhance: enhanceElement,
|
|
create: createEnhancedElement,
|
|
isLoaded: () => htmxLoaded,
|
|
isAvailable: isHtmxAvailable,
|
|
config: HTMX_CONFIG
|
|
};
|
|
|
|
/**
|
|
* Initialization
|
|
*/
|
|
function initialize() {
|
|
log('info', 'Initialisiere HTMX Non-Invasive Integration...');
|
|
|
|
// Event Listeners registrieren
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initializeLazyLoading();
|
|
initializeEventTriggers();
|
|
autoDetectHtmxElements();
|
|
});
|
|
} else {
|
|
initializeLazyLoading();
|
|
initializeEventTriggers();
|
|
autoDetectHtmxElements();
|
|
}
|
|
|
|
log('success', 'HTMX Integration bereit');
|
|
}
|
|
|
|
// Initialize immediately
|
|
initialize();
|
|
|
|
})();
|
|
|
|
/**
|
|
* CSS für HTMX Loading States
|
|
*/
|
|
const htmxStyles = `
|
|
.htmx-loading {
|
|
position: relative;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.htmx-spinner {
|
|
display: inline-block;
|
|
animation: htmx-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes htmx-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.htmx-indicator {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
|
|
.htmx-request .htmx-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.htmx-request.htmx-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.htmx-swapping {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
.htmx-settling {
|
|
opacity: 1;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
`;
|
|
|
|
// CSS dynamisch injizieren
|
|
if (!document.getElementById('htmx-integration-styles')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'htmx-integration-styles';
|
|
style.textContent = htmxStyles;
|
|
document.head.appendChild(style);
|
|
} |