Zum Inhalt springen

Änderungen von Dokument Abkürzungsverzeichnis

Zuletzt geändert von Richard Kaden am 10.11.2025 14:47
Von Version 18.1
bearbeitet von Erik Hübner
am 24.10.2025 09:49
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 12.1
bearbeitet von Erik Hübner
am 23.10.2025 11:58
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,51 +49,3 @@
1 -{{html clean="false"}}
2 -<div id="alpha-nav" style="margin-bottom: 10px; font-weight: bold;">
3 - Alphabet:
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 -
49 49  |**Abkürzung**|**Erklärung**
50 50  |{{id name="AAC"/}}AAC|Advanced Audio Coding
51 51  |{{id name="AFIS"/}}AFIS|Archivifachinformationssystem
XWiki.JavaScriptExtension[0]
code
... ... @@ -1,117 +3,89 @@
1 -let currentFilter = 'Alle';
2 -
3 3  function initTableFilter() {
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();
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();
15 15   return textA.localeCompare(textB, 'de', { sensitivity: 'base' });
16 16   });
17 - rows.forEach(row => tbody.appendChild(row));
18 -
19 - // Klassen & IDs
20 - rows.forEach(row => {
21 - const firstCell = row.querySelector('td:first-child');
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)
22 22   if (firstCell && firstCell.textContent) {
23 - const text = firstCell.textContent.trim();
24 - let firstChar = text.charAt(0).toUpperCase();
25 - if (['Ä','Ö','Ü'].includes(firstChar)) firstChar = firstChar;
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 = 'Ü';
26 26   row.classList.add('letter-' + firstChar);
27 27   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 - }
36 36   }
37 37   });
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));
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
55 55   }
56 56   });
57 -
58 - // Initialer Hash
59 - if (window.location.hash) {
60 - setTimeout(() => handleAnchorClick(window.location.hash.substring(1)), 300);
61 - }
43 +
44 + // Initial: Alle anzeigen und "Alle" highlighten
45 + filterTable('Alle', document.getElementById('all-link')); // "Alle" mit Link-Referenz aufrufen
62 62  }
63 63  
64 64  function filterTable(letter, targetLink) {
65 - currentFilter = letter;
66 - const table = document.querySelector('table');
49 + var table = document.querySelector('table');
67 67   if (!table) return;
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';
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 + }
73 73   });
74 -
75 - // Highlight Navigation
76 - document.querySelectorAll('#alpha-nav a').forEach(link => {
77 - link.style.fontWeight = 'normal';
78 - link.style.color = 'inherit';
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';
79 79   });
80 - if (targetLink) {
81 - targetLink.style.fontWeight = 'bold';
82 - targetLink.style.color = '#00597B';
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
83 83   }
84 84  }
85 85  
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);
84 +// Initialisierung nach Laden
85 +if (document.readyState === 'loading') {
86 + document.addEventListener('DOMContentLoaded', initTableFilter);
87 +} else {
88 + initTableFilter();
114 114  }
115 -
116 -// Init aufrufen
117 -document.addEventListener('DOMContentLoaded', initTableFilter);
use
... ... @@ -1,1 +1,0 @@
1 -currentPage