🎉 Improved documentation and logs structure in Backend 🖥️📊
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Dark Mode Toggle Button (Premium Design)
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const darkModeToggles = document.querySelectorAll('.darkModeToggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
// Local Storage Key
|
||||
@@ -26,16 +26,17 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
* Icons im Premium Toggle-Button aktualisieren
|
||||
*/
|
||||
function updateIcons(isDark) {
|
||||
if (!darkModeToggle) return;
|
||||
|
||||
// Finde die Premium-Icons
|
||||
const sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
if (!sunIcon || !moonIcon) {
|
||||
console.warn('Premium Dark Mode Icons nicht gefunden');
|
||||
return;
|
||||
}
|
||||
darkModeToggles.forEach(darkModeToggle => {
|
||||
if (!darkModeToggle) return;
|
||||
|
||||
// Finde die Premium-Icons
|
||||
const sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
if (!sunIcon || !moonIcon) {
|
||||
console.warn('Premium Dark Mode Icons nicht gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Animation für Übergänge
|
||||
if (isDark) {
|
||||
@@ -64,9 +65,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
moonIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
|
||||
}
|
||||
|
||||
// Icon-Animationen hinzufügen
|
||||
sunIcon.classList.toggle('icon-enter', !isDark);
|
||||
moonIcon.classList.toggle('icon-enter', isDark);
|
||||
// Icon-Animationen hinzufügen
|
||||
sunIcon.classList.toggle('icon-enter', !isDark);
|
||||
moonIcon.classList.toggle('icon-enter', isDark);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -80,23 +82,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
html.setAttribute('data-theme', 'dark');
|
||||
html.style.colorScheme = 'dark';
|
||||
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'true');
|
||||
darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
|
||||
// Premium Button-Icons aktualisieren
|
||||
updateIcons(true);
|
||||
}
|
||||
darkModeToggles.forEach(toggle => {
|
||||
toggle.setAttribute('aria-pressed', 'true');
|
||||
toggle.setAttribute('title', 'Light Mode aktivieren');
|
||||
});
|
||||
// Premium Button-Icons aktualisieren
|
||||
updateIcons(true);
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
html.setAttribute('data-theme', 'light');
|
||||
html.style.colorScheme = 'light';
|
||||
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'false');
|
||||
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
// Premium Button-Icons aktualisieren
|
||||
updateIcons(false);
|
||||
}
|
||||
darkModeToggles.forEach(toggle => {
|
||||
toggle.setAttribute('aria-pressed', 'false');
|
||||
toggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
});
|
||||
// Premium Button-Icons aktualisieren
|
||||
updateIcons(false);
|
||||
}
|
||||
|
||||
// Einstellung im Local Storage speichern
|
||||
@@ -118,47 +120,43 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// Toggle Dark Mode Funktion
|
||||
function toggleDarkMode() {
|
||||
function toggleDarkMode(event) {
|
||||
const currentMode = isDarkMode();
|
||||
setDarkMode(!currentMode);
|
||||
|
||||
// Premium-Animation beim Klick
|
||||
if (darkModeToggle) {
|
||||
const container = darkModeToggle.querySelector('div');
|
||||
if (container) {
|
||||
container.style.transform = 'scale(0.95)';
|
||||
// Premium-Animation beim Klick für den geklickten Button
|
||||
if (event && event.currentTarget) {
|
||||
const clickedToggle = event.currentTarget;
|
||||
const slider = clickedToggle.querySelector('.dark-mode-toggle-slider');
|
||||
if (slider) {
|
||||
slider.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
container.style.transform = '';
|
||||
slider.style.transform = '';
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Event Listener für Premium Toggle Button
|
||||
if (darkModeToggle) {
|
||||
console.log('🎨 Premium Dark Mode Toggle Button gefunden - initialisiere...');
|
||||
// Event Listener für Premium Toggle Buttons
|
||||
if (darkModeToggles.length > 0) {
|
||||
console.log(`🎨 ${darkModeToggles.length} Premium Dark Mode Toggle Button(s) gefunden - initialisiere...`);
|
||||
|
||||
// Entferne vorherige Event-Listener, um Duplikate zu vermeiden
|
||||
const newDarkModeToggle = darkModeToggle.cloneNode(true);
|
||||
darkModeToggle.parentNode.replaceChild(newDarkModeToggle, darkModeToggle);
|
||||
|
||||
// Neuen Event-Listener hinzufügen
|
||||
newDarkModeToggle.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Verhindere Bubbling
|
||||
toggleDarkMode();
|
||||
darkModeToggles.forEach((toggle, index) => {
|
||||
// Event-Listener hinzufügen
|
||||
toggle.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Verhindere Bubbling
|
||||
toggleDarkMode(e);
|
||||
});
|
||||
});
|
||||
|
||||
// Aktualisiere die Variable auf das neue Element
|
||||
const updatedToggle = document.getElementById('darkModeToggle');
|
||||
|
||||
// Initialen Status setzen
|
||||
const isDark = isDarkMode();
|
||||
setDarkMode(isDark);
|
||||
|
||||
console.log('✨ Premium Dark Mode Toggle Button erfolgreich initialisiert');
|
||||
console.log('✨ Premium Dark Mode Toggle Buttons erfolgreich initialisiert');
|
||||
} else {
|
||||
console.error('❌ Premium Dark Mode Toggle Button konnte nicht gefunden werden!');
|
||||
console.error('❌ Keine Premium Dark Mode Toggle Buttons gefunden!');
|
||||
}
|
||||
|
||||
// Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
|
||||
|
Reference in New Issue
Block a user