BibTest.js: Difference between revisions
From Illustrations in German Translations of Mark Twain's Works
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/** | /** | ||
* Bibliography Tag Filter and | * Bibliography Tag Filter, Sorting and Search | ||
*/ | */ | ||
| Line 7: | Line 7: | ||
let ACTIVE_TAGS = new Set(); | let ACTIVE_TAGS = new Set(); | ||
let SEARCH_TERM = ''; | |||
function init() { | function init() { | ||
const tagBar = document.getElementById('tagBar'); | const tagBar = document.getElementById('tagBar'); | ||
const bibliography = document.getElementById('listView'); | const bibliography = document.getElementById('listView'); | ||
const searchInput = document.getElementById('bibSearch'); | |||
if (!tagBar || !bibliography) return; | if (!tagBar || !bibliography) return; | ||
| Line 36: | Line 38: | ||
tagBar.appendChild(span); | tagBar.appendChild(span); | ||
}); | }); | ||
// Search Input Listener | |||
if (searchInput) { | |||
searchInput.addEventListener('input', (e) => { | |||
SEARCH_TERM = e.target.value.toLowerCase(); | |||
filterEntries(); | |||
}); | |||
} | |||
// Sortiere Einträge alphabetisch | // Sortiere Einträge alphabetisch | ||
| Line 71: | Line 81: | ||
function normalizeTag(tag) { | function normalizeTag(tag) { | ||
return tag.toLowerCase().replace(/\s+/g, '_').replace(/,/g, '').replace(/\./g, '').replace(/'/g, '').replace(/"/g, ''); | return tag.toLowerCase().replace(/\s+/g, '_').replace(/,/g, '').replace(/\./g, '').replace(/'/g, '').replace(/"/g, ''); | ||
} | |||
function matchesSearch(entry) { | |||
if (!SEARCH_TERM) return true; | |||
const searchText = SEARCH_TERM; | |||
// Suche im Titel | |||
const title = entry.querySelector('h3')?.textContent || ''; | |||
if (title.toLowerCase().includes(searchText)) return true; | |||
// Suche in den Tags | |||
const tagElements = entry.querySelectorAll('.tag'); | |||
for (let tag of tagElements) { | |||
if (tag.textContent.toLowerCase().includes(searchText)) return true; | |||
} | |||
// Suche im Abstract | |||
const abstractDiv = entry.querySelector('.abstract'); | |||
if (abstractDiv) { | |||
const abstractText = abstractDiv.textContent || ''; | |||
if (abstractText.toLowerCase().includes(searchText)) return true; | |||
} | |||
return false; | |||
} | } | ||
| Line 79: | Line 114: | ||
const entryTags = (entry.getAttribute('data-tags') || '').split(' ').filter(t => t); | const entryTags = (entry.getAttribute('data-tags') || '').split(' ').filter(t => t); | ||
if (ACTIVE_TAGS.size | // Tag-Filter | ||
let matchesTags = true; | |||
if (ACTIVE_TAGS.size > 0) { | |||
matchesTags = Array.from(ACTIVE_TAGS).every(activeTag => { | |||
return entryTags.includes(activeTag); | return entryTags.includes(activeTag); | ||
}); | }); | ||
} | } | ||
// Search-Filter | |||
const matchesSearchTerm = matchesSearch(entry); | |||
// Beide Bedingungen müssen erfüllt sein (AND-Logik) | |||
entry.style.display = (matchesTags && matchesSearchTerm) ? 'block' : 'none'; | |||
}); | }); | ||
} | } | ||
Revision as of 02:07, 12 May 2026
/**
* Bibliography Tag Filter, Sorting and Search
*/
(function() {
'use strict';
let ACTIVE_TAGS = new Set();
let SEARCH_TERM = '';
function init() {
const tagBar = document.getElementById('tagBar');
const bibliography = document.getElementById('listView');
const searchInput = document.getElementById('bibSearch');
if (!tagBar || !bibliography) return;
// Sammle alle Original-Taggamen aus den Einträgen
const allTagsMap = new Map(); // normalized -> original name
document.querySelectorAll('.bib-entry .tag').forEach(tagEl => {
const originalName = tagEl.textContent.trim();
const normalized = normalizeTag(originalName);
allTagsMap.set(normalized, originalName);
});
// Lösche alte Tags aus tagBar
tagBar.innerHTML = '';
// Erstelle neue Tags mit Original-Namen
Array.from(allTagsMap.entries())
.sort((a, b) => a[1].localeCompare(b[1])) // Sortiere nach original name
.forEach(([normalized, originalName]) => {
const span = document.createElement('span');
span.className = 'tag inactive';
span.textContent = originalName; // Zeige original name
span.dataset.normalized = normalized; // Speichere normalized für Filterung
span.onclick = () => toggleTag(originalName, span, normalized);
tagBar.appendChild(span);
});
// Search Input Listener
if (searchInput) {
searchInput.addEventListener('input', (e) => {
SEARCH_TERM = e.target.value.toLowerCase();
filterEntries();
});
}
// Sortiere Einträge alphabetisch
sortEntries();
}
function toggleTag(tagName, element, normalized) {
if (ACTIVE_TAGS.has(normalized)) {
ACTIVE_TAGS.delete(normalized);
element.classList.remove('active');
element.classList.add('inactive');
} else {
ACTIVE_TAGS.add(normalized);
element.classList.add('active');
element.classList.remove('inactive');
}
filterEntries();
}
function sortEntries() {
const container = document.getElementById('listView');
if (!container) return;
const entries = Array.from(container.querySelectorAll('.bib-entry'));
entries.sort((a, b) => {
const titleA = a.querySelector('h3')?.textContent || '';
const titleB = b.querySelector('h3')?.textContent || '';
return titleA.localeCompare(titleB);
});
entries.forEach(entry => container.appendChild(entry));
}
function normalizeTag(tag) {
return tag.toLowerCase().replace(/\s+/g, '_').replace(/,/g, '').replace(/\./g, '').replace(/'/g, '').replace(/"/g, '');
}
function matchesSearch(entry) {
if (!SEARCH_TERM) return true;
const searchText = SEARCH_TERM;
// Suche im Titel
const title = entry.querySelector('h3')?.textContent || '';
if (title.toLowerCase().includes(searchText)) return true;
// Suche in den Tags
const tagElements = entry.querySelectorAll('.tag');
for (let tag of tagElements) {
if (tag.textContent.toLowerCase().includes(searchText)) return true;
}
// Suche im Abstract
const abstractDiv = entry.querySelector('.abstract');
if (abstractDiv) {
const abstractText = abstractDiv.textContent || '';
if (abstractText.toLowerCase().includes(searchText)) return true;
}
return false;
}
function filterEntries() {
const entries = document.querySelectorAll('.bib-entry');
entries.forEach(entry => {
const entryTags = (entry.getAttribute('data-tags') || '').split(' ').filter(t => t);
// Tag-Filter
let matchesTags = true;
if (ACTIVE_TAGS.size > 0) {
matchesTags = Array.from(ACTIVE_TAGS).every(activeTag => {
return entryTags.includes(activeTag);
});
}
// Search-Filter
const matchesSearchTerm = matchesSearch(entry);
// Beide Bedingungen müssen erfüllt sein (AND-Logik)
entry.style.display = (matchesTags && matchesSearchTerm) ? 'block' : 'none';
});
}
// Abstract-Button Toggle
document.addEventListener('click', function(e) {
if (e.target.classList.contains('expand-btn')) {
const abstractDiv = e.target.nextElementSibling;
if (abstractDiv && abstractDiv.classList.contains('abstract')) {
abstractDiv.classList.toggle('hidden');
e.target.textContent = abstractDiv.classList.contains('hidden')
? 'Show Abstract'
: 'Hide Abstract';
}
}
});
// Starte wenn DOM bereit
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();