MediaWiki:Common.js - Versionsgeschichte

NeroReaver am 12. Januar 2026 um 01:29 Uhr

2026-01-12T01:29:29Z

@@ Zeile 96: / Zeile 96: @@
+     }
 })();
 /*------------------------Landing Features------------------------------------------*/
@@ Zeile 104: / Zeile 103: @@
      function initLandingTabs() {
-         const tabs = document.querySelectorAll('.tab-button');
+         const containers = document.querySelectorAll('.landing-tabs');
-         if (tabs.length === 0 || grids.length === 0) {
+         containers.forEach(tabsContainer => {
-            return;
+            const wrapper = tabsContainer.closest('.landing-tabs-wrapper');
+            if (!wrapper) return;
-        tabs.forEach(tab => {
+            const tabs = tabsContainer.querySelectorAll('.tab-button');
-             if (tab.hasAttribute('data-tab-ready')) {
+            const grids = wrapper.parentElement.querySelectorAll('.landing-grid');
-                 return;
+             }
-             tab.addEventListener('click', function() {
+             // Prüfe ob Scrollen nötig ist
-                 tabs.forEach(t => t.classList.remove('active'));
+            function updateArrows() {
-                 this.classList.add('active');
+                 const isScrollable = tabsContainer.scrollWidth > tabsContainer.clientWidth;
-                 grids.forEach(g => g.classList.remove('active'));
+                 if (isScrollable) {
-                 const targetGrid = document.getElementById(this.dataset.tab);
+                 tab.addEventListener('click', function() {
-                if (targetGrid) {
+                    tabs.forEach(t => t.classList.remove('active'));
-                    targetGrid.classList.add('active');
+                    this.classList.add('active');
              });
          });
+     }

NeroReaver am 12. Januar 2026 um 00:14 Uhr

2026-01-12T00:14:15Z

← Nächstältere Version		Version vom 12. Januar 2026, 02:14 Uhr
Zeile 159:		Zeile 159:
	});		});
	}		}


			/------------------------ World Carousel Drag & Drop Script ------------------------/

			(function() {
			'use strict';

			function initWorldCarousel() {
			const tracks = document.querySelectorAll('.carousel-track');

			if (tracks.length === 0) {
			return;
			}

			tracks.forEach(function(track) {
			if (track.hasAttribute('data-carousel-ready')) {
			return;
			}
			track.setAttribute('data-carousel-ready', 'true');

			let isDown = false;
			let startX;
			let scrollLeft;

			track.addEventListener('mousedown', function(e) {
			isDown = true;
			track.style.cursor = 'grabbing';
			startX = e.pageX - track.offsetLeft;
			scrollLeft = track.scrollLeft;
			});

			track.addEventListener('mouseleave', function() {
			isDown = false;
			track.style.cursor = 'grab';
			});

			track.addEventListener('mouseup', function() {
			isDown = false;
			track.style.cursor = 'grab';
			});

			track.addEventListener('mousemove', function(e) {
			if (!isDown) return;
			e.preventDefault();
			const x = e.pageX - track.offsetLeft;
			const walk = (x - startX) * 2;
			track.scrollLeft = scrollLeft - walk;
			});

			// Touch Support
			let touchStartX = 0;
			let touchScrollLeft = 0;

			track.addEventListener('touchstart', function(e) {
			touchStartX = e.touches[0].pageX;
			touchScrollLeft = track.scrollLeft;
			}, {passive: true});

			track.addEventListener('touchmove', function(e) {
			const x = e.touches[0].pageX;
			const walk = (touchStartX - x) * 1.5;
			track.scrollLeft = touchScrollLeft + walk;
			}, {passive: true});
			});
			}

			if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', initWorldCarousel);
			} else {
			initWorldCarousel();
			}

			setTimeout(initWorldCarousel, 500);
			})();

NeroReaver am 11. Januar 2026 um 23:29 Uhr

2026-01-11T23:29:33Z

← Nächstältere Version		Version vom 12. Januar 2026, 01:29 Uhr
Zeile 1:		Zeile 1:
	// MediaWiki Sidebar Toggle Script - ~~Vanilla JS (Sichere Version)~~		// MediaWiki Sidebar Toggle Script - FINALE VERSION
	/------------------------Sidebar Toggle Script ------------------------------------------/		/------------------------Sidebar Toggle Script ------------------------------------------/

	(function() {		(function() {
	'use strict';		'use strict';

			var processing = false; // Debounce

	function initSidebar() {		function initSidebar() {
Zeile 18:		Zeile 20:
	}		}

	// ~~WICHTIG: Prüfe ob bereits~~ initialisiert		// Bereits initialisiert? Skip!
	if (header.hasAttribute('data-toggle-ready')) {		if (header.hasAttribute('data-toggle-ready')) {
	~~console.log('Bereits initialisiert:', header.textContent);~~
	return;		return;
	}		}

	console.log('Initialisiere:', header.textContent);		console.log('Initialisiere:', header.textContent);

	~~// Markiere als initialisiert~~
	header.setAttribute('data-toggle-ready', 'true');		header.setAttribute('data-toggle-ready', 'true');

	// ~~Füge~~ Icon ~~hinzu~~		// Icon hinzufügen
	if (!header.querySelector('.toggle-icon')) {		if (!header.querySelector('.toggle-icon')) {
	var icon = document.createElement('span');		var icon = document.createElement('span');
Zeile 44:		Zeile 43:
	header.style.userSelect = 'none';		header.style.userSelect = 'none';

	// Initial Status ~~- DEFAULT OFFEN~~		// Initial Status
	var isOpen = !header.classList.contains('closed');		var isOpen = !header.classList.contains('closed');
	if (!isOpen) {		if (!isOpen) {
Zeile 52:		Zeile 51:
	}		}

	// ~~Click Event - NUR EINMAL!~~		// Toggle Funktion mit Debounce
	~~header.addEventListener('click',~~ function(e) {		var toggleMenu = function(e) {
	e.preventDefault();		e.preventDefault();
	e.stopPropagation();		e.stopPropagation();
			e.stopImmediatePropagation(); // WICHTIG!

			// Debounce - verhindert Doppel-Klicks
			if (processing) {
			return;
			}
			processing = true;

	var icon = ~~this~~.querySelector('.toggle-icon');		setTimeout(function() {
			processing = false;
			}, 300);

			var icon = header.querySelector('.toggle-icon');
	var body = portlet.querySelector('.mw-portlet-body');		var body = portlet.querySelector('.mw-portlet-body');

Zeile 63:		Zeile 73:
	body.style.display = 'block';		body.style.display = 'block';
	icon.style.transform = 'rotate(0deg)';		icon.style.transform = 'rotate(0deg)';
	~~this~~.classList.add('open');		header.classList.add('open');
			header.classList.remove('closed');
	console.log('Geöffnet');		console.log('Geöffnet');
	} else {		} else {
	body.style.display = 'none';		body.style.display = 'none';
	icon.style.transform = 'rotate(-90deg)';		icon.style.transform = 'rotate(-90deg)';
	~~this~~.classList.remove('open');		header.classList.add('closed');
			header.classList.remove('open');
	console.log('Geschlossen');		console.log('Geschlossen');
	}		}
	}, ~~{ once: false }~~); ~~// Explicitly set once to false~~		};

			// NUR Click-Event (funktioniert auch auf Mobile)
			header.addEventListener('click', toggleMenu, true);
	});		});
	}		}
Zeile 97:		Zeile 112:

	tabs.forEach(tab => {		tabs.forEach(tab => {
	~~// Verhindere doppelte Initialisierung~~
	if (tab.hasAttribute('data-tab-ready')) {		if (tab.hasAttribute('data-tab-ready')) {
	return;		return;
Zeile 126:		Zeile 140:
	})();		})();

	// ~~Collapsible Sidebar Sections~~ - ~~Mobile~~		// jQuery ONLY für ANDERE sidebar-collapsible (NICHT deine Portlets!)
	if (typeof jQuery !== 'undefined') {		if (typeof jQuery !== 'undefined') {
	$(document).ready(function() {		$(document).ready(function() {
	// NUR ~~wenn noch nicht initialisiert~~		// NUR für Elemente die NICHT #p-Players, #p-World, etc. sind
	~~if (!~~$('~~body')~~.~~hasAttribute('data-jquery-~~sidebar-~~ready')) {~~		$('.sidebar-collapsible').not('#p-Players h3, #p-World h3, #p-Items_and_Gear h3, #p-Guides h3, #p-Community h3').click(function(e) {
	~~$('body~~').~~attr~~('~~data~~-~~jquery~~-~~sidebar~~-~~ready'~~, ~~'true');~~		e.preventDefault();
			$(this).toggleClass('closed');
	~~$('.sidebar~~-~~collapsible~~, h3~~[style*="cursor: pointer"]~~').click(function(e) {		$(this).next('.mw-portlet-body, ul').slideToggle(200);
	e.preventDefault();		});
	$(this).toggleClass('closed');
	$(this).next('.mw-portlet-body, ul').slideToggle(200);		if (window.innerWidth <= 850) {
			$('#mw-sidebar-checkbox:checked ~ .mw-sidebar').on('click', function(e) {
			if (e.target === this) {
			$('#mw-sidebar-checkbox').prop('checked', false);
			}
	});		});

	~~if (window.innerWidth <= 850) {~~
	~~$('#mw-sidebar-checkbox:checked ~ .mw-sidebar').on('click', function(e) {~~
	~~if (e.target === this) {~~
	~~$('#mw-sidebar-checkbox').prop('checked', false);~~
	}
	~~});~~
	}
	}		}
	});		});
	}		}

NeroReaver am 11. Januar 2026 um 23:27 Uhr

2026-01-11T23:27:21Z

Änderungen zeigen

NeroReaver am 11. Januar 2026 um 23:20 Uhr

2026-01-11T23:20:37Z

← Nächstältere Version		Version vom 12. Januar 2026, 01:20 Uhr
Zeile 1:		Zeile 1:
	// MediaWiki Sidebar Toggle Script - ~~SICHERE VERSION~~		// MediaWiki Sidebar Toggle Script - Vanilla JS (Sichere Version)
	/------------------------Sidebar Toggle Script ------------------------------------------/		/------------------------Sidebar Toggle Script ------------------------------------------/

	(function() {		(function() {
	'use strict';		'use strict';

	~~var initialized = false;~~

	function initSidebar() {		function initSidebar() {
	if (~~initialized~~) ~~return;~~		// Suche nach DEINEN Custom Portlets (Players, World, etc.)

	var portlets = document.querySelectorAll('#p-Players, #p-World, #p-Items_and_Gear, #p-Guides, #p-Community');		var portlets = document.querySelectorAll('#p-Players, #p-World, #p-Items_and_Gear, #p-Guides, #p-Community');

	~~if (portlets.length === 0) return;~~		console.log('Gefundene Portlets:', portlets.length); // Debug

	~~initialized = true;~~
	console.log('Gefundene Portlets:', portlets.length);

	portlets.forEach(function(portlet) {		portlets.forEach(function(portlet) {
Zeile 21:		Zeile 15:
	var portletBody = portlet.querySelector('.mw-portlet-body');		var portletBody = portlet.querySelector('.mw-portlet-body');

	if (!header \|\| !portletBody) return;		if (!header \|\| !portletBody) {
	~~if (header.hasAttribute('data-toggle-init')) return;~~		return;
			}

	~~header.setAttribute('data-toggle-init', 'true');~~		console.log('Initialisiere:', header.textContent); // Debug
	console.log('Initialisiere:', header.textContent);

	~~var oldIcon =~~ header.querySelector('.toggle-icon');		// Füge Icon hinzu (RECHTS vom Title)
	if (~~oldIcon~~) ~~oldIcon~~.~~remove~~();		if (!header.querySelector('.toggle-icon')) {
			var icon = document.createElement('span');
			icon.className = 'toggle-icon';
			icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
			icon.style.marginLeft = '8px';
			icon.style.display = 'inline-block';
			icon.style.transition = 'transform 0.2s ease';
			icon.style.verticalAlign = 'middle';
			header.appendChild(icon);
			}

	~~var icon = document.createElement('span');~~		// Cursor
	~~icon~~.~~className~~ = '~~toggle-icon~~';		header.style.cursor = 'pointer';
	~~icon~~.style.~~cssText = 'margin-left: auto; padding-left: 10px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease; flex-shrink: 0;';~~		header.style.userSelect = 'none';
	~~icon.innerHTML~~ = '~~<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="~~none~~" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>~~';

	~~header.appendChild(icon);~~		// Initial Status - DEFAULT OFFEN
	~~header.style.cssText = 'cursor: pointer; user~~-~~select: none; display: flex; align-items: center; justify-content: space-between; width: 100%;';~~		var isOpen = !header.classList.contains('closed'); // Umgekehrt: nur "closed" klappt zu

	var isOpen = !header.classList.contains('closed');
	if (!isOpen) {		if (!isOpen) {
	portletBody.style.display = 'none';		portletBody.style.display = 'none';
			var icon = header.querySelector('.toggle-icon');
	icon.style.transform = 'rotate(-90deg)';		icon.style.transform = 'rotate(-90deg)';
	~~} else {~~
	~~portletBody.style.display = 'block';~~
	~~icon.style.transform = 'rotate(0deg)';~~
	}		}

	~~var toggleMenu =~~ function(e) {		// Click Event
			header.addEventListener('click', function(e) {
	e.preventDefault();		e.preventDefault();
	e.stopPropagation();		e.stopPropagation(); // Verhindere Event-Bubbling
			console.log('KLICK!'); // Debug

	var icon = ~~header~~.querySelector('.toggle-icon');		var icon = this.querySelector('.toggle-icon');
	var body = portlet.querySelector('.mw-portlet-body');		var body = portlet.querySelector('.mw-portlet-body');

Zeile 57:		Zeile 57:
	body.style.display = 'block';		body.style.display = 'block';
	icon.style.transform = 'rotate(0deg)';		icon.style.transform = 'rotate(0deg)';
	~~header~~.classList.~~remove~~('~~closed~~');		this.classList.add('open');
	~~header.classList~~.~~add~~('~~open~~');		console.log('Geöffnet');
	} else {		} else {
	body.style.display = 'none';		body.style.display = 'none';
	icon.style.transform = 'rotate(-90deg)';		icon.style.transform = 'rotate(-90deg)';
	~~header~~.classList.~~add~~('~~closed~~');		this.classList.remove('open');
	~~header.classList~~.~~remove~~('~~open~~');		console.log('Geschlossen');
	}		}
	};		});

	~~header.addEventListener('click', toggleMenu~~);
	});		});
	}		}

			// Warte bis DOM geladen ist
	if (document.readyState === 'loading') {		if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', initSidebar);		document.addEventListener('DOMContentLoaded', initSidebar);

NeroReaver am 11. Januar 2026 um 23:18 Uhr

2026-01-11T23:18:32Z

Änderungen zeigen

NeroReaver am 11. Januar 2026 um 23:06 Uhr

2026-01-11T23:06:50Z

Änderungen zeigen

NeroReaver am 11. Januar 2026 um 20:52 Uhr

2026-01-11T20:52:12Z

← Nächstältere Version		Version vom 11. Januar 2026, 22:52 Uhr
Zeile 131:		Zeile 131:

	})();		})();

			// Collapsible Sidebar Sections - Mobile
			$(document).ready(function() {
			// Toggle für collapsible sections
			$('.sidebar-collapsible, h3[style*="cursor: pointer"]').click(function(e) {
			e.preventDefault();
			$(this).toggleClass('closed');
			$(this).next('.mw-portlet-body, ul').slideToggle(200);
			});

			// Schließe Sidebar beim Klick außerhalb (Mobile)
			if (window.innerWidth <= 850) {
			$('#mw-sidebar-checkbox:checked ~ .mw-sidebar').on('click', function(e) {
			if (e.target === this) {
			$('#mw-sidebar-checkbox').prop('checked', false);
			}
			});
			}
			});

NeroReaver am 11. Januar 2026 um 18:12 Uhr

2026-01-11T18:12:36Z

@@ Zeile 80: / Zeile 80: @@
 /*------------------------Landing Features------------------------------------------*/
-document.addEventListener('DOMContentLoaded', function() {
+(function() {
-  const tabs = document.querySelectorAll('.tab-button');
+    'use strict';
-  const grids = document.querySelectorAll('.landing-grid');
+    function initLandingTabs() {
-  tabs.forEach(tab => {
+        const tabs = document.querySelectorAll('.tab-button');
-    tab.addEventListener('click', () => {
+        const grids = document.querySelectorAll('.landing-grid');
-      tabs.forEach(t => t.classList.remove('active'));
-      tab.classList.add('active');
+        console.log('Tabs gefunden:', tabs.length); // Debug
+        console.log('Grids gefunden:', grids.length); // Debug
-      grids.forEach(g => g.classList.remove('active'));
-      document.getElementById(tab.dataset.tab).classList.add('active');
+        if (tabs.length === 0 || grids.length === 0) {
-     });
+            console.log('Landing Features nicht gefunden - warte...');
-  });
+            return;
 });

NeroReaver am 11. Januar 2026 um 18:06 Uhr

2026-01-11T18:06:14Z

← Nächstältere Version		Version vom 11. Januar 2026, 20:06 Uhr
Zeile 80:		Zeile 80:
	/------------------------Landing Features------------------------------------------/		/------------------------Landing Features------------------------------------------/

	const tabs = document.querySelectorAll('.tab-button');		document.addEventListener('DOMContentLoaded', function() {
	const grids = document.querySelectorAll('.landing-grid');		const tabs = document.querySelectorAll('.tab-button');
			const grids = document.querySelectorAll('.landing-grid');

	tabs.forEach(tab => {		tabs.forEach(tab => {
	tab.addEventListener('click', () => {		tab.addEventListener('click', () => {
	tabs.forEach(t => t.classList.remove('active'));		tabs.forEach(t => t.classList.remove('active'));
	tab.classList.add('active');		tab.classList.add('active');

	grids.forEach(g => g.classList.remove('active'));		grids.forEach(g => g.classList.remove('active'));
	document.getElementById(tab.dataset.tab).classList.add('active');		document.getElementById(tab.dataset.tab).classList.add('active');
			});
	});		});
	});		});