Zum Inhalt springen

Änderungen von Dokument Abkürzungsverzeichnis

Zuletzt geändert von Richard Kaden am 10.11.2025 14:47
Von Version 16.1
bearbeitet von Erik Hübner
am 24.10.2025 08:46
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 19.4
bearbeitet von Erik Hübner
am 10.11.2025 14:47
Änderungskommentar: Update document after refactoring.

Zusammenfassung

Details

Seiteneigenschaften
Übergeordnete Seite
... ... @@ -1,0 +1,1 @@
1 +startseite.WebHome
Inhalt
... ... @@ -1,3 +1,51 @@
1 +{{html clean="false"}}
2 +<div id="alpha-nav" style="margin-bottom: 10px; font-weight: bold;">
3 + Filtern nach:
4 + <a href="#" id="all-link" onclick="filterTable('Alle', this); return false;" style="margin: 0 5px; cursor: pointer;">Alle</a>
5 + <a href="#" onclick="filterTable('A', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-A">A</a>
6 + <a href="#" onclick="filterTable('B', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-B">B</a>
7 + <a href="#" onclick="filterTable('C', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-C">C</a>
8 + <a href="#" onclick="filterTable('D', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-D">D</a>
9 + <a href="#" onclick="filterTable('E', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-E">E</a>
10 + <a href="#" onclick="filterTable('F', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-F">F</a>
11 + <a href="#" onclick="filterTable('G', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-G">G</a>
12 + <a href="#" onclick="filterTable('H', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-H">H</a>
13 + <a href="#" onclick="filterTable('I', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-I">I</a>
14 + <a href="#" onclick="filterTable('J', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-J">J</a>
15 + <a href="#" onclick="filterTable('K', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-K">K</a>
16 + <a href="#" onclick="filterTable('L', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-L">L</a>
17 + <a href="#" onclick="filterTable('M', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-M">M</a>
18 + <a href="#" onclick="filterTable('N', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-N">N</a>
19 + <a href="#" onclick="filterTable('O', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-O">O</a>
20 + <a href="#" onclick="filterTable('P', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-P">P</a>
21 + <a href="#" onclick="filterTable('Q', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-Q">Q</a>
22 + <a href="#" onclick="filterTable('R', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-R">R</a>
23 + <a href="#" onclick="filterTable('S', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-S">S</a>
24 + <a href="#" onclick="filterTable('T', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-T">T</a>
25 + <a href="#" onclick="filterTable('U', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-U">U</a>
26 + <a href="#" onclick="filterTable('V', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-V">V</a>
27 + <a href="#" onclick="filterTable('W', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-W">W</a>
28 + <a href="#" onclick="filterTable('X', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-X">X</a>
29 + <a href="#" onclick="filterTable('Y', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-Y">Y</a>
30 + <a href="#" onclick="filterTable('Z', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-Z">Z</a>
31 + <a href="#" onclick="filterTable('Ä', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-Ä">Ä</a>
32 + <a href="#" onclick="filterTable('Ö', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-Ö">Ö</a>
33 + <a href="#" onclick="filterTable('Ü', this); return false;" style="margin: 0 5px; cursor: pointer;" id="letter-Ü">Ü</a>
34 +</div>
35 +
36 +<style>
37 + #alpha-nav a.disabled {
38 + opacity: 0.5;
39 + cursor: default;
40 + text-decoration: none !important;
41 + pointer-events: none;
42 + }
43 + .anchor-target {
44 + scroll-margin-top: 80px;
45 + }
46 +</style>
47 +{{/html}}
48 +
1 1  |**Abkürzung**|**Erklärung**
2 2  |{{id name="AAC"/}}AAC|Advanced Audio Coding
3 3  |{{id name="AFIS"/}}AFIS|Archivifachinformationssystem
XWiki.JavaScriptExtension[0]
code
... ... @@ -1,89 +1,117 @@
1 +let currentFilter = 'Alle';
2 +
1 1  function initTableFilter() {
2 - var table = document.querySelector('table'); // Erste Tabelle auf der Seite
3 - if (!table) return; // Fallback, falls keine Tabelle
4 - var tbody = table.querySelector('tbody') || table; // Fallback auf table, falls kein tbody
5 - var rows = Array.from(table.querySelectorAll('tr')).slice(1); // Alle Zeilen außer Header
6 - var availableLetters = new Set();
7 -
8 - // Alphabetisch sortieren
9 - rows.sort(function(a, b) {
10 - var textA = a.querySelector('td:first-child').textContent.trim().toUpperCase();
11 - var textB = b.querySelector('td:first-child').textContent.trim().toUpperCase();
4 + const table = document.querySelector('table');
5 + if (!table) return;
6 +
7 + const tbody = table.querySelector('tbody') || table;
8 + const rows = Array.from(table.querySelectorAll('tr')).slice(1);
9 + const availableLetters = new Set();
10 +
11 + // Sortieren
12 + rows.sort((a, b) => {
13 + const textA = a.querySelector('td:first-child').textContent.trim().toUpperCase();
14 + const textB = b.querySelector('td:first-child').textContent.trim().toUpperCase();
12 12   return textA.localeCompare(textB, 'de', { sensitivity: 'base' });
13 13   });
14 -
15 - // Sortierte Zeilen wieder in die Tabelle einfügen
16 - rows.forEach(function(row) {
17 - tbody.appendChild(row);
18 - });
19 -
20 - // Klassen dynamisch zuweisen und Anfangsbuchstaben sammeln
21 - rows.forEach(function(row) {
22 - var firstCell = row.querySelector('td:first-child'); // Erste Spalte (Begriff)
17 + rows.forEach(row => tbody.appendChild(row));
18 +
19 + // Klassen & IDs
20 + rows.forEach(row => {
21 + const firstCell = row.querySelector('td:first-child');
23 23   if (firstCell && firstCell.textContent) {
24 - var firstChar = firstCell.textContent.trim().charAt(0).toUpperCase();
25 - // Umlaute handhaben
26 - if (firstChar === 'Ä') firstChar = 'Ä';
27 - else if (firstChar === 'Ö') firstChar = 'Ö';
28 - else if (firstChar === 'Ü') firstChar = 'Ü';
23 + const text = firstCell.textContent.trim();
24 + let firstChar = text.charAt(0).toUpperCase();
25 + if (['Ä','Ö','Ü'].includes(firstChar)) firstChar = firstChar;
29 29   row.classList.add('letter-' + firstChar);
30 30   availableLetters.add(firstChar);
28 +
29 + const idMatch = firstCell.innerHTML.match(/id\s*=\s*["']([^"']+)["']/);
30 + if (idMatch) {
31 + const anchorId = idMatch[1];
32 + row.id = anchorId;
33 + firstCell.innerHTML = firstCell.innerHTML.replace(/id\s*=\s*["'][^"']+["']/, '');
34 + firstCell.classList.add('anchor-target');
35 + }
31 31   }
32 32   });
33 -
34 - // Buchstaben ohne Einträge ausgrauen
35 - var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'Ä', 'Ö', 'Ü'];
36 - letters.forEach(function(letter) {
37 - var link = document.getElementById('letter-' + letter);
38 - if (link && !availableLetters.has(letter)) {
39 - link.classList.add('disabled');
40 - link.style.pointerEvents = 'none'; // Klick deaktivieren
38 +
39 + // Ausgrauen
40 + const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ'.split('');
41 + letters.forEach(letter => {
42 + const link = document.getElementById('letter-' + letter);
43 + if (link && !availableLetters.has(letter)) link.classList.add('disabled');
44 + });
45 +
46 + filterTable('Alle', document.getElementById('all-link'));
47 +
48 + // Anker-Links
49 + document.addEventListener('click', e => {
50 + if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('#')) {
51 + const hash = e.target.getAttribute('href');
52 + if (hash === '#') return;
53 + e.preventDefault();
54 + handleAnchorClick(hash.substring(1));
41 41   }
42 42   });
43 -
44 - // Initial: Alle anzeigen und "Alle" highlighten
45 - filterTable('Alle', document.getElementById('all-link')); // "Alle" mit Link-Referenz aufrufen
57 +
58 + // Initialer Hash
59 + if (window.location.hash) {
60 + setTimeout(() => handleAnchorClick(window.location.hash.substring(1)), 300);
61 + }
46 46  }
47 47  
48 48  function filterTable(letter, targetLink) {
49 - var table = document.querySelector('table');
65 + currentFilter = letter;
66 + const table = document.querySelector('table');
50 50   if (!table) return;
51 - var rows = table.querySelectorAll('tr');
52 - var visibleCount = 0;
53 -
54 - rows.forEach(function(row, index) {
55 - if (index === 0) { // Header immer sichtbar
56 - row.style.display = '';
57 - return;
58 - }
59 - if (letter === 'Alle') {
60 - row.style.display = '';
61 - visibleCount++;
62 - } else if (row.classList.contains('letter-' + letter)) {
63 - row.style.display = '';
64 - visibleCount++;
65 - } else {
66 - row.style.display = 'none';
67 - }
68 + const rows = table.querySelectorAll('tr');
69 +
70 + rows.forEach((row, index) => {
71 + if (index === 0) { row.style.display = ''; return; }
72 + row.style.display = (letter === 'Alle' || row.classList.contains('letter-' + letter)) ? '' : 'none';
68 68   });
69 -
70 - // Aktiven Buchstaben highlighten
71 - var links = document.querySelectorAll('#alpha-nav a');
72 - links.forEach(function(link) {
73 - link.style.fontWeight = 'normal';
74 - link.style.color = 'inherit';
74 +
75 + // Highlight Navigation
76 + document.querySelectorAll('#alpha-nav a').forEach(link => {
77 + link.style.fontWeight = 'normal';
78 + link.style.color = 'inherit';
75 75   });
76 - // Highlight entweder über targetLink (Initialisierung) oder event.target (Klick)
77 - var linkToHighlight = targetLink || event.target;
78 - if (linkToHighlight) {
79 - linkToHighlight.style.fontWeight = 'bold';
80 - linkToHighlight.style.color = '#00597B'; // Corporate Design: Dunkelblau
80 + if (targetLink) {
81 + targetLink.style.fontWeight = 'bold';
82 + targetLink.style.color = '#00597B';
81 81   }
82 82  }
83 83  
84 -// Initialisierung nach Laden
85 -if (document.readyState === 'loading') {
86 - document.addEventListener('DOMContentLoaded', initTableFilter);
87 -} else {
88 - initTableFilter();
86 +// --- Stabiler Anker-Sprung ---
87 +function handleAnchorClick(targetId) {
88 + const targetRow = document.getElementById(targetId);
89 + if (!targetRow) return;
90 +
91 + const firstCell = targetRow.querySelector('td:first-child');
92 + const text = firstCell.textContent.trim();
93 + let firstChar = text.charAt(0).toUpperCase();
94 + if (['Ä','Ö','Ü'].includes(firstChar)) firstChar = firstChar;
95 +
96 + // Filter ggf. anpassen
97 + if (targetRow.style.display === 'none' || currentFilter !== firstChar) {
98 + const link = document.getElementById('letter-' + firstChar);
99 + if (link && !link.classList.contains('disabled')) {
100 + filterTable(firstChar, link);
101 + } else if (currentFilter !== 'Alle') {
102 + filterTable('Alle', document.getElementById('all-link'));
103 + }
104 + }
105 +
106 + // Scrollen + Hervorheben (ohne Sprung zurück)
107 + setTimeout(() => {
108 + history.replaceState(null, '', '#' + targetId); // Hash stabilisieren
109 + targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
110 + targetRow.style.transition = 'background-color 0.6s';
111 + targetRow.style.backgroundColor = '#e6f3ff';
112 + setTimeout(() => { targetRow.style.backgroundColor = ''; }, 2000);
113 + }, 200);
89 89  }
115 +
116 +// Init aufrufen
117 +document.addEventListener('DOMContentLoaded', initTableFilter);
use
... ... @@ -1,0 +1,1 @@
1 +currentPage