+ {{- /* Main content */ -}}
+
+ {{- /* Places grid */ -}}
{{ if .model.Places }}
-
-
-
-
-
- Alle Orte ({{ len .model.Places }})
-
-
-
- {{ range $placeID := .model.Sorted }}
- {{ $place := index $.model.Places $placeID }}
- {{ template "_place_card" $place }}
- {{ end }}
-
+
+ {{ range $placeID := .model.Sorted }}
+ {{ $place := index $.model.Places $placeID }}
+ {{ template "_place_card" $place }}
+ {{ end }}
{{ else }}
-
Keine Orte gefunden.
+
+
+
Keine Orte gefunden
+
Es wurden keine Orte in der Datenbank gefunden.
+
{{ end }}
+
+ {{- /* Sidebar */ -}}
+
+
+
+ {{- /* Statistics */ -}}
+
+
+
+ Orte gesamt:
+ {{ len .model.Places }}
+
+
+ Beiträge mit Ort:
+ {{ .model.TotalPiecesWithPlaces }}
+
+ {{- if .model.SelectedPlace -}}
+
+ Beiträge hier:
+ {{ len .model.SelectedPlace.Pieces }}
+
+ {{- end -}}
+
+
+
\ No newline at end of file
diff --git a/views/transform/generic-filter.js b/views/transform/generic-filter.js
new file mode 100644
index 0000000..334ff6a
--- /dev/null
+++ b/views/transform/generic-filter.js
@@ -0,0 +1,147 @@
+/**
+ * Generic Filter Web Component
+ * Provides search functionality for filtering cards/items in lists
+ * Can be configured for different types of content (places, categories, etc.)
+ */
+export class GenericFilter extends HTMLElement {
+ constructor() {
+ super();
+ this.searchInput = null;
+ this.itemCards = [];
+ this.countElement = null;
+ this.debounceTimer = null;
+ this.originalCount = 0;
+ }
+
+ connectedCallback() {
+ // Configuration attributes
+ this.placeholderText = this.getAttribute('placeholder') || 'Suchen...';
+ this.itemSelector = this.getAttribute('item-selector') || '[data-filter-item]';
+ this.searchAttributes = (this.getAttribute('search-attributes') || 'data-filter-text').split(',');
+ this.countSelector = this.getAttribute('count-selector') || '[data-filter-count]';
+ this.itemType = this.getAttribute('item-type') || 'Einträge';
+ this.itemTypeSingular = this.getAttribute('item-type-singular') || 'Eintrag';
+
+ this.render();
+ this.setupEventListeners();
+ this.initializeItems();
+ }
+
+
+ disconnectedCallback() {
+ this.cleanupEventListeners();
+ if (this.debounceTimer) {
+ clearTimeout(this.debounceTimer);
+ }
+ }
+
+ render() {
+ this.innerHTML = `
+
+
+ `;
+ }
+
+ setupEventListeners() {
+ this.searchInput = this.querySelector('#generic-search');
+ if (this.searchInput) {
+ this.searchInput.addEventListener('input', this.handleSearchInput.bind(this));
+ }
+ }
+
+ cleanupEventListeners() {
+ if (this.searchInput) {
+ this.searchInput.removeEventListener('input', this.handleSearchInput.bind(this));
+ }
+ }
+
+ initializeItems() {
+ // Find all items and the count element using semantic containers
+ this.itemCards = Array.from(document.querySelectorAll(this.itemSelector));
+
+ // Count element should be in the same semantic container as the filter
+ const filterContainer = this.closest('.filter-sidebar') || this.closest('.sidebar') || document;
+ this.countElement = filterContainer.querySelector(this.countSelector);
+
+ console.log('GenericFilter initialized:', {
+ itemSelector: this.itemSelector,
+ itemsFound: this.itemCards.length,
+ countElement: this.countElement,
+ searchAttributes: this.searchAttributes
+ });
+
+ if (this.countElement) {
+ this.originalCount = this.itemCards.length;
+ }
+ }
+
+ handleSearchInput(event) {
+ // Clear previous debounce timer
+ if (this.debounceTimer) {
+ clearTimeout(this.debounceTimer);
+ }
+
+ // Debounce the search to avoid excessive filtering
+ this.debounceTimer = setTimeout(() => {
+ this.filterItems(event.target.value.trim());
+ }, 150);
+ }
+
+ filterItems(searchTerm) {
+ if (!this.itemCards.length) return;
+
+ const normalizedSearch = searchTerm.toLowerCase();
+ let visibleCount = 0;
+
+ this.itemCards.forEach(card => {
+ let isMatch = searchTerm === '';
+
+ // Check all configured search attributes
+ if (!isMatch) {
+ for (const attr of this.searchAttributes) {
+ const attrValue = card.getAttribute(attr.trim())?.toLowerCase() || '';
+ if (attrValue.includes(normalizedSearch)) {
+ isMatch = true;
+ break;
+ }
+ }
+ }
+
+ if (isMatch) {
+ card.style.display = '';
+ visibleCount++;
+ } else {
+ card.style.display = 'none';
+ }
+ });
+
+ // Update the count display
+ this.updateCountDisplay(visibleCount, searchTerm);
+ }
+
+ updateCountDisplay(visibleCount, searchTerm) {
+ if (!this.countElement) return;
+
+ if (searchTerm === '') {
+ // Show original count when no search
+ this.countElement.textContent = `Alle ${this.itemType} (${this.originalCount})`;
+ } else if (visibleCount === 0) {
+ // Show no results message
+ this.countElement.textContent = `Keine ${this.itemType} gefunden für "${searchTerm}"`;
+ } else {
+ // Show filtered count
+ const itemTypeText = visibleCount === 1 ? this.itemTypeSingular : this.itemType;
+ this.countElement.textContent = `${visibleCount} von ${this.originalCount} ${itemTypeText}`;
+ }
+ }
+}
+
+// Register the custom element
+customElements.define('generic-filter', GenericFilter);
\ No newline at end of file
diff --git a/views/transform/main.js b/views/transform/main.js
index 4a627ab..02c8751 100644
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -2,6 +2,7 @@ import "./site.css";
import "./search.js";
import "./akteure.js";
import "./places.js";
+import "./generic-filter.js";
import { SinglePageViewer } from "./single-page-viewer.js";
import { ScrollToTopButton } from "./scroll-to-top.js";
import { InhaltsverzeichnisScrollspy } from "./inhaltsverzeichnis-scrollspy.js";
diff --git a/views/transform/search.js b/views/transform/search.js
index 7d85ef9..bcca6b8 100644
--- a/views/transform/search.js
+++ b/views/transform/search.js
@@ -13,418 +13,409 @@ document.body.addEventListener("htmx:configRequest", function (event) {
* Works with server-rendered person list and provides client-side filtering
*/
class PersonJumpFilter extends HTMLElement {
- constructor() {
- super();
- }
+ constructor() {
+ super();
+ }
- connectedCallback() {
- this.setupEventListeners();
- }
+ connectedCallback() {
+ this.setupEventListeners();
+ }
- setupEventListeners() {
- const searchInput = this.querySelector('#person-search');
- const authorsCheckbox = this.querySelector('#authors-only');
- const allPersonsList = this.querySelector('#all-persons');
- const authorsOnlyList = this.querySelector('#authors-only-list');
+ setupEventListeners() {
+ const searchInput = this.querySelector("#person-search");
+ const authorsCheckbox = this.querySelector("#authors-only");
+ const allPersonsList = this.querySelector("#all-persons");
+ const authorsOnlyList = this.querySelector("#authors-only-list");
- if (!searchInput || !authorsCheckbox || !allPersonsList || !authorsOnlyList) {
- return;
- }
+ if (!searchInput || !authorsCheckbox || !allPersonsList || !authorsOnlyList) {
+ return;
+ }
- // Search functionality
- searchInput.addEventListener('input', (e) => {
- const query = e.target.value.toLowerCase().trim();
- this.filterPersons(query);
- });
+ // Search functionality
+ searchInput.addEventListener("input", (e) => {
+ const query = e.target.value.toLowerCase().trim();
+ this.filterPersons(query);
+ });
- // Checkbox functionality
- authorsCheckbox.addEventListener('change', () => {
- this.togglePersonsList();
- // Clear and re-apply search filter
- const query = searchInput.value.toLowerCase().trim();
- this.filterPersons(query);
- });
- }
+ // Checkbox functionality
+ authorsCheckbox.addEventListener("change", () => {
+ this.togglePersonsList();
+ // Clear and re-apply search filter
+ const query = searchInput.value.toLowerCase().trim();
+ this.filterPersons(query);
+ });
+ }
- togglePersonsList() {
- const authorsCheckbox = this.querySelector('#authors-only');
- const allPersonsList = this.querySelector('#all-persons');
- const authorsOnlyList = this.querySelector('#authors-only-list');
+ togglePersonsList() {
+ const authorsCheckbox = this.querySelector("#authors-only");
+ const allPersonsList = this.querySelector("#all-persons");
+ const authorsOnlyList = this.querySelector("#authors-only-list");
- if (!authorsCheckbox || !allPersonsList || !authorsOnlyList) {
- return;
- }
+ if (!authorsCheckbox || !allPersonsList || !authorsOnlyList) {
+ return;
+ }
- if (authorsCheckbox.checked) {
- allPersonsList.style.display = 'none';
- authorsOnlyList.style.display = 'block';
- } else {
- allPersonsList.style.display = 'block';
- authorsOnlyList.style.display = 'none';
- }
- }
+ if (authorsCheckbox.checked) {
+ allPersonsList.style.display = "none";
+ authorsOnlyList.style.display = "block";
+ } else {
+ allPersonsList.style.display = "block";
+ authorsOnlyList.style.display = "none";
+ }
+ }
- filterPersons(query) {
- // Filter items in the currently visible list
- const authorsCheckbox = this.querySelector('#authors-only');
- const currentList = authorsCheckbox?.checked ?
- this.querySelector('#authors-only-list') :
- this.querySelector('#all-persons');
+ filterPersons(query) {
+ // Filter items in the currently visible list
+ const authorsCheckbox = this.querySelector("#authors-only");
+ const currentList = authorsCheckbox?.checked
+ ? this.querySelector("#authors-only-list")
+ : this.querySelector("#all-persons");
- if (!currentList) {
- return;
- }
+ if (!currentList) {
+ return;
+ }
- const personItems = currentList.querySelectorAll('.person-item');
+ const personItems = currentList.querySelectorAll(".person-item");
- personItems.forEach(item => {
- const name = item.querySelector('.person-name')?.textContent || '';
- const life = item.querySelector('.person-life')?.textContent || '';
+ personItems.forEach((item) => {
+ const name = item.querySelector(".person-name")?.textContent || "";
+ const life = item.querySelector(".person-life")?.textContent || "";
- const matches = !query ||
- name.toLowerCase().includes(query) ||
- life.toLowerCase().includes(query);
+ const matches =
+ !query || name.toLowerCase().includes(query) || life.toLowerCase().includes(query);
- if (matches) {
- item.style.display = 'block';
- } else {
- item.style.display = 'none';
- }
- });
- }
+ if (matches) {
+ item.style.display = "block";
+ } else {
+ item.style.display = "none";
+ }
+ });
+ }
}
// Register the custom element
-customElements.define('person-jump-filter', PersonJumpFilter);
+customElements.define("person-jump-filter", PersonJumpFilter);
/**
* PlaceJumpFilter - Web component for filtering places list
- * Works with server-rendered place list and provides client-side filtering
*/
class PlaceJumpFilter extends HTMLElement {
- constructor() {
- super();
- }
+ connectedCallback() {
+ const searchInput = this.querySelector("#place-search");
+ if (searchInput) {
+ searchInput.addEventListener("input", (e) => {
+ const query = e.target.value.toLowerCase().trim();
+ const placeItems = this.querySelectorAll(".place-item");
- connectedCallback() {
- this.setupEventListeners();
- }
-
- setupEventListeners() {
- const searchInput = this.querySelector('#place-search');
- const allPlacesList = this.querySelector('#all-places');
-
- if (!searchInput || !allPlacesList) {
- return;
- }
-
- // Search functionality
- searchInput.addEventListener('input', (e) => {
- const query = e.target.value.toLowerCase().trim();
- this.filterPlaces(query);
- });
- }
-
- filterPlaces(query) {
- const allPlacesList = this.querySelector('#all-places');
-
- if (!allPlacesList) {
- return;
- }
-
- const placeItems = allPlacesList.querySelectorAll('.place-item');
-
- placeItems.forEach(item => {
- const name = item.querySelector('.place-name')?.textContent || '';
-
- const matches = !query || name.toLowerCase().includes(query);
-
- if (matches) {
- item.style.display = 'block';
- } else {
- item.style.display = 'none';
- }
- });
- }
+ placeItems.forEach((item) => {
+ const name = item.querySelector(".place-name")?.textContent || "";
+ const matches = !query || name.toLowerCase().includes(query);
+ item.style.display = matches ? "block" : "none";
+ });
+ });
+ }
+ }
}
-// Register the custom element
-customElements.define('place-jump-filter', PlaceJumpFilter);
+customElements.define("place-jump-filter", PlaceJumpFilter);
+
+/**
+ * CategoryJumpFilter - Web component for filtering categories list
+ */
+class CategoryJumpFilter extends HTMLElement {
+ connectedCallback() {
+ const searchInput = this.querySelector("#category-search");
+ if (searchInput) {
+ searchInput.addEventListener("input", (e) => {
+ const query = e.target.value.toLowerCase().trim();
+ const categoryItems = this.querySelectorAll(".category-item");
+
+ categoryItems.forEach((item) => {
+ const name = item.querySelector(".category-name")?.textContent || "";
+ const matches = !query || name.toLowerCase().includes(query);
+ item.style.display = matches ? "block" : "none";
+ });
+ });
+ }
+ }
+}
+
+customElements.define("category-jump-filter", CategoryJumpFilter);
/**
* YearJumpFilter - Unified web component for Jahr-based navigation
* Allows jumping by Jahr/Ausgabe or Jahr/Seite
*/
class YearJumpFilter extends HTMLElement {
- constructor() {
- super();
- this.issuesByYear = {};
- }
+ constructor() {
+ super();
+ this.issuesByYear = {};
+ }
- connectedCallback() {
- this.parseIssuesData();
- this.setupEventListeners();
- }
+ connectedCallback() {
+ this.parseIssuesData();
+ this.setupEventListeners();
+ }
- parseIssuesData() {
- // Parse issues data from data attributes
- const issuesData = this.dataset.issues;
- if (issuesData) {
- try {
- this.issuesByYear = JSON.parse(issuesData);
- } catch (e) {
- console.error('Failed to parse issues data:', e);
- }
- }
- }
+ parseIssuesData() {
+ // Parse issues data from data attributes
+ const issuesData = this.dataset.issues;
+ if (issuesData) {
+ try {
+ this.issuesByYear = JSON.parse(issuesData);
+ } catch (e) {
+ console.error("Failed to parse issues data:", e);
+ }
+ }
+ }
- setupEventListeners() {
- const yearSelect = this.querySelector('#year-select');
- const issueNumberSelect = this.querySelector('#issue-number-select');
- const issueDateSelect = this.querySelector('#issue-date-select');
- const pageInput = this.querySelector('#page-input');
- const pageJumpBtn = this.querySelector('#page-jump-btn');
+ setupEventListeners() {
+ const yearSelect = this.querySelector("#year-select");
+ const issueNumberSelect = this.querySelector("#issue-number-select");
+ const issueDateSelect = this.querySelector("#issue-date-select");
+ const pageInput = this.querySelector("#page-input");
+ const pageJumpBtn = this.querySelector("#page-jump-btn");
- if (!yearSelect) {
- return;
- }
+ if (!yearSelect) {
+ return;
+ }
- // Year selection change handler
- yearSelect.addEventListener('change', () => {
- this.updateIssueOptions();
- this.updatePageInputState();
- this.clearPageErrors();
- });
+ // Year selection change handler
+ yearSelect.addEventListener("change", () => {
+ this.updateIssueOptions();
+ this.updatePageInputState();
+ this.clearPageErrors();
+ });
- // Issue number selection change handler - jump immediately
- if (issueNumberSelect) {
- issueNumberSelect.addEventListener('change', () => {
- const year = yearSelect.value;
- const issueNum = issueNumberSelect.value;
- if (year && issueNum) {
- window.location.href = `/${year}/${issueNum}`;
- }
- });
- }
+ // Issue number selection change handler - jump immediately
+ if (issueNumberSelect) {
+ issueNumberSelect.addEventListener("change", () => {
+ const year = yearSelect.value;
+ const issueNum = issueNumberSelect.value;
+ if (year && issueNum) {
+ window.location.href = `/${year}/${issueNum}`;
+ }
+ });
+ }
- // Issue date selection change handler - jump immediately
- if (issueDateSelect) {
- issueDateSelect.addEventListener('change', () => {
- const year = yearSelect.value;
- const issueNum = issueDateSelect.value; // value contains issue number
- if (year && issueNum) {
- window.location.href = `/${year}/${issueNum}`;
- }
- });
- }
+ // Issue date selection change handler - jump immediately
+ if (issueDateSelect) {
+ issueDateSelect.addEventListener("change", () => {
+ const year = yearSelect.value;
+ const issueNum = issueDateSelect.value; // value contains issue number
+ if (year && issueNum) {
+ window.location.href = `/${year}/${issueNum}`;
+ }
+ });
+ }
- // Page input handlers
- if (pageInput) {
- pageInput.addEventListener('input', () => {
- this.updatePageJumpButton();
- this.clearPageErrors();
- });
+ // Page input handlers
+ if (pageInput) {
+ pageInput.addEventListener("input", () => {
+ this.updatePageJumpButton();
+ this.clearPageErrors();
+ });
- // Handle Enter key in page input
- pageInput.addEventListener('keydown', (e) => {
- if (e.key === 'Enter') {
- e.preventDefault();
- this.handlePageJump();
- }
- });
- }
+ // Handle Enter key in page input
+ pageInput.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ this.handlePageJump();
+ }
+ });
+ }
- // Page jump button
- if (pageJumpBtn) {
- pageJumpBtn.addEventListener('click', () => {
- this.handlePageJump();
- });
- }
+ // Page jump button
+ if (pageJumpBtn) {
+ pageJumpBtn.addEventListener("click", () => {
+ this.handlePageJump();
+ });
+ }
- // Page jump form submission
- const pageForm = this.querySelector('#page-jump-form');
- if (pageForm) {
- pageForm.addEventListener('submit', (e) => {
- e.preventDefault();
- this.handlePageJump();
- });
- }
+ // Page jump form submission
+ const pageForm = this.querySelector("#page-jump-form");
+ if (pageForm) {
+ pageForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+ this.handlePageJump();
+ });
+ }
- // Initialize everything
- this.updateIssueOptions();
- this.updatePageInputState();
- this.updatePageJumpButton();
- }
+ // Initialize everything
+ this.updateIssueOptions();
+ this.updatePageInputState();
+ this.updatePageJumpButton();
+ }
- updateIssueOptions() {
- const yearSelect = this.querySelector('#year-select');
- const issueNumberSelect = this.querySelector('#issue-number-select');
- const issueDateSelect = this.querySelector('#issue-date-select');
+ updateIssueOptions() {
+ const yearSelect = this.querySelector("#year-select");
+ const issueNumberSelect = this.querySelector("#issue-number-select");
+ const issueDateSelect = this.querySelector("#issue-date-select");
- if (!yearSelect || !issueNumberSelect || !issueDateSelect) {
- return;
- }
+ if (!yearSelect || !issueNumberSelect || !issueDateSelect) {
+ return;
+ }
- const selectedYear = yearSelect.value;
- const issues = this.issuesByYear[selectedYear] || [];
+ const selectedYear = yearSelect.value;
+ const issues = this.issuesByYear[selectedYear] || [];
- // Clear existing options
- issueNumberSelect.innerHTML = '
Nr. ';
- issueDateSelect.innerHTML = '
Datum ';
+ // Clear existing options
+ issueNumberSelect.innerHTML = '
Nr. ';
+ issueDateSelect.innerHTML = '
Datum ';
- // Add options for selected year
- issues.forEach(issue => {
- // Issue number select - just the number
- const numberOption = document.createElement('option');
- numberOption.value = issue.number;
- numberOption.textContent = issue.number;
- issueNumberSelect.appendChild(numberOption);
+ // Add options for selected year
+ issues.forEach((issue) => {
+ // Issue number select - just the number
+ const numberOption = document.createElement("option");
+ numberOption.value = issue.number;
+ numberOption.textContent = issue.number;
+ issueNumberSelect.appendChild(numberOption);
- // Issue date select - date with issue number as value
- const dateOption = document.createElement('option');
- dateOption.value = issue.number; // value is still issue number for navigation
- dateOption.textContent = `${issue.date} [${issue.number}]`;
- issueDateSelect.appendChild(dateOption);
- });
+ // Issue date select - date with issue number as value
+ const dateOption = document.createElement("option");
+ dateOption.value = issue.number; // value is still issue number for navigation
+ dateOption.textContent = `${issue.date} [${issue.number}]`;
+ issueDateSelect.appendChild(dateOption);
+ });
- const hasIssues = issues.length > 0 && selectedYear;
- issueNumberSelect.disabled = !hasIssues;
- issueDateSelect.disabled = !hasIssues;
- }
+ const hasIssues = issues.length > 0 && selectedYear;
+ issueNumberSelect.disabled = !hasIssues;
+ issueDateSelect.disabled = !hasIssues;
+ }
- async handlePageJump() {
- const yearSelect = this.querySelector('#year-select');
- const pageInput = this.querySelector('#page-input');
- const errorContainer = this.querySelector('#jump-errors');
+ async handlePageJump() {
+ const yearSelect = this.querySelector("#year-select");
+ const pageInput = this.querySelector("#page-input");
+ const errorContainer = this.querySelector("#jump-errors");
- if (!yearSelect || !pageInput) {
- return;
- }
+ if (!yearSelect || !pageInput) {
+ return;
+ }
- const year = yearSelect.value;
- const page = pageInput.value;
+ const year = yearSelect.value;
+ const page = pageInput.value;
- if (!year || !page) {
- this.showError('Bitte Jahr und Seite auswählen.');
- return;
- }
+ if (!year || !page) {
+ this.showError("Bitte Jahr und Seite auswählen.");
+ return;
+ }
- try {
- const formData = new FormData();
- formData.append('year', year);
- formData.append('page', page);
+ try {
+ const formData = new FormData();
+ formData.append("year", year);
+ formData.append("page", page);
- const response = await fetch('/jump', {
- method: 'POST',
- body: formData,
- redirect: 'manual'
- });
+ const response = await fetch("/jump", {
+ method: "POST",
+ body: formData,
+ redirect: "manual",
+ });
- // Check for HTMX redirect header
- const hxRedirect = response.headers.get('HX-Redirect');
- if (hxRedirect) {
- window.location.href = hxRedirect;
- return;
- }
+ // Check for HTMX redirect header
+ const hxRedirect = response.headers.get("HX-Redirect");
+ if (hxRedirect) {
+ window.location.href = hxRedirect;
+ return;
+ }
- if (response.status === 302 || response.status === 301) {
- const location = response.headers.get('Location');
- if (location) {
- window.location.href = location;
- return;
- }
- }
+ if (response.status === 302 || response.status === 301) {
+ const location = response.headers.get("Location");
+ if (location) {
+ window.location.href = location;
+ return;
+ }
+ }
- if (response.ok) {
- if (errorContainer) {
- errorContainer.innerHTML = '';
- }
- } else {
- const errorText = await response.text();
- if (errorContainer) {
- errorContainer.innerHTML = errorText;
- }
- }
- } catch (error) {
- console.error('Page jump failed:', error);
- this.showError('Fehler beim Suchen der Seite.');
- }
- }
+ if (response.ok) {
+ if (errorContainer) {
+ errorContainer.innerHTML = "";
+ }
+ } else {
+ const errorText = await response.text();
+ if (errorContainer) {
+ errorContainer.innerHTML = errorText;
+ }
+ }
+ } catch (error) {
+ console.error("Page jump failed:", error);
+ this.showError("Fehler beim Suchen der Seite.");
+ }
+ }
- showError(message) {
- const errorContainer = this.querySelector('#jump-errors');
- if (errorContainer) {
- errorContainer.innerHTML = `
${message}
`;
- }
- }
+ showError(message) {
+ const errorContainer = this.querySelector("#jump-errors");
+ if (errorContainer) {
+ errorContainer.innerHTML = `
${message}
`;
+ }
+ }
- clearPageErrors() {
- const errorContainer = this.querySelector('#jump-errors');
- if (errorContainer) {
- errorContainer.innerHTML = '';
- }
- }
+ clearPageErrors() {
+ const errorContainer = this.querySelector("#jump-errors");
+ if (errorContainer) {
+ errorContainer.innerHTML = "";
+ }
+ }
- updatePageInputState() {
- const yearSelect = this.querySelector('#year-select');
- const pageInput = this.querySelector('#page-input');
+ updatePageInputState() {
+ const yearSelect = this.querySelector("#year-select");
+ const pageInput = this.querySelector("#page-input");
- if (!yearSelect || !pageInput) {
- return;
- }
+ if (!yearSelect || !pageInput) {
+ return;
+ }
- const hasYear = yearSelect.value;
- pageInput.disabled = !hasYear;
+ const hasYear = yearSelect.value;
+ pageInput.disabled = !hasYear;
- if (!hasYear) {
- pageInput.value = '';
- this.updatePageJumpButton();
- }
- }
+ if (!hasYear) {
+ pageInput.value = "";
+ this.updatePageJumpButton();
+ }
+ }
- updatePageJumpButton() {
- const yearSelect = this.querySelector('#year-select');
- const pageInput = this.querySelector('#page-input');
- const pageJumpBtn = this.querySelector('#page-jump-btn');
+ updatePageJumpButton() {
+ const yearSelect = this.querySelector("#year-select");
+ const pageInput = this.querySelector("#page-input");
+ const pageJumpBtn = this.querySelector("#page-jump-btn");
- if (!yearSelect || !pageInput || !pageJumpBtn) {
- return;
- }
+ if (!yearSelect || !pageInput || !pageJumpBtn) {
+ return;
+ }
- const hasYear = yearSelect.value;
- const hasPage = pageInput.value && pageInput.value.trim();
- const shouldEnable = hasYear && hasPage;
+ const hasYear = yearSelect.value;
+ const hasPage = pageInput.value && pageInput.value.trim();
+ const shouldEnable = hasYear && hasPage;
- pageJumpBtn.disabled = !shouldEnable;
- }
+ pageJumpBtn.disabled = !shouldEnable;
+ }
}
// Register the custom element
-customElements.define('year-jump-filter', YearJumpFilter);
+customElements.define("year-jump-filter", YearJumpFilter);
/**
* SchnellauswahlButton - Web component for the quick selection/filter button
* Encapsulates the toggle functionality and HTMX content loading
*/
class SchnellauswahlButton extends HTMLElement {
- constructor() {
- super();
- this.isOpen = false;
- }
+ constructor() {
+ super();
+ this.isOpen = false;
+ }
- connectedCallback() {
- this.createButton();
- this.setupEventListeners();
- }
+ connectedCallback() {
+ this.createButton();
+ this.setupEventListeners();
+ }
- disconnectedCallback() {
- // Clean up event listeners when component is removed
- document.removeEventListener('click', this.handleOutsideClick);
- document.removeEventListener('quickfilter:selection', this.handleSelectionEvent);
- }
+ disconnectedCallback() {
+ // Clean up event listeners when component is removed
+ document.removeEventListener("click", this.handleOutsideClick);
+ document.removeEventListener("quickfilter:selection", this.handleSelectionEvent);
+ }
- createButton() {
- this.innerHTML = `
+ createButton() {
+ this.innerHTML = `
Schnellauswahl
`;
- }
+ }
- setupEventListeners() {
- const button = this.querySelector('button');
- if (button) {
- button.addEventListener('click', (e) => {
- e.stopPropagation();
- this.toggleFilter();
- });
- }
+ setupEventListeners() {
+ const button = this.querySelector("button");
+ if (button) {
+ button.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.toggleFilter();
+ });
+ }
- // Bind event handlers to maintain 'this' context
- this.handleSelectionEvent = this.handleSelectionEvent.bind(this);
- this.handleOutsideClick = this.handleOutsideClick.bind(this);
+ // Bind event handlers to maintain 'this' context
+ this.handleSelectionEvent = this.handleSelectionEvent.bind(this);
+ this.handleOutsideClick = this.handleOutsideClick.bind(this);
- // Listen for person/place selection events
- document.addEventListener('quickfilter:selection', this.handleSelectionEvent);
+ // Listen for person/place selection events
+ document.addEventListener("quickfilter:selection", this.handleSelectionEvent);
- // Listen for outside clicks
- document.addEventListener('click', this.handleOutsideClick);
- }
+ // Listen for outside clicks
+ document.addEventListener("click", this.handleOutsideClick);
+ }
- toggleFilter() {
- const filterContainer = document.getElementById("filter-container");
- const filterButton = this.querySelector('button');
+ toggleFilter() {
+ const filterContainer = document.getElementById("filter-container");
+ const filterButton = this.querySelector("button");
- if (!filterContainer || !filterButton) {
- return;
- }
+ if (!filterContainer || !filterButton) {
+ return;
+ }
- const filterContentDiv = filterContainer.querySelector("div.flex.justify-center");
+ const filterContentDiv = filterContainer.querySelector("div.flex.justify-center");
- if (filterContainer.classList.contains("hidden")) {
- // Show the filter
- filterContainer.classList.remove("hidden");
- filterButton.classList.add("bg-slate-200");
- // Change icon to arrow up when open
- const filterIcon = this.querySelector('i');
- if (filterIcon) {
- filterIcon.className = "ri-arrow-up-line";
- }
- this.isOpen = true;
+ if (filterContainer.classList.contains("hidden")) {
+ // Show the filter
+ filterContainer.classList.remove("hidden");
+ filterButton.classList.add("bg-slate-200");
+ // Change icon to arrow up when open
+ const filterIcon = this.querySelector("i");
+ if (filterIcon) {
+ filterIcon.className = "ri-arrow-up-line";
+ }
+ this.isOpen = true;
- // Load content only if it doesn't exist - check for actual content
- const hasContent = filterContentDiv && filterContentDiv.querySelector("div, form, h3");
- if (!hasContent) {
- htmx
- .ajax("GET", "/filter", {
- target: "#filter-container",
- select: "#filter",
- swap: "innerHTML",
- })
- .then(() => {
- console.log("HTMX request completed");
- // Re-query the element to see if it changed
- const updatedDiv = document.querySelector("#filter-container .flex.justify-center");
- })
- .catch((error) => {
- console.log("HTMX request failed:", error);
- });
- }
- } else {
- this.hideFilter();
- }
- }
+ // Load content only if it doesn't exist - check for actual content
+ const hasContent = filterContentDiv && filterContentDiv.querySelector("div, form, h3");
+ if (!hasContent) {
+ htmx
+ .ajax("GET", "/filter", {
+ target: "#filter-container",
+ select: "#filter",
+ swap: "innerHTML",
+ })
+ .then(() => {
+ console.log("HTMX request completed");
+ // Re-query the element to see if it changed
+ const updatedDiv = document.querySelector("#filter-container .flex.justify-center");
+ })
+ .catch((error) => {
+ console.log("HTMX request failed:", error);
+ });
+ }
+ } else {
+ this.hideFilter();
+ }
+ }
- hideFilter() {
- const filterContainer = document.getElementById("filter-container");
- const filterButton = this.querySelector('button');
+ hideFilter() {
+ const filterContainer = document.getElementById("filter-container");
+ const filterButton = this.querySelector("button");
- if (!filterContainer || !filterButton) {
- return;
- }
+ if (!filterContainer || !filterButton) {
+ return;
+ }
- filterContainer.classList.add("hidden");
- filterButton.classList.remove("bg-slate-200");
- // Change icon back to filter when closed
- const filterIcon = this.querySelector('i');
- if (filterIcon) {
- filterIcon.className = "ri-filter-2-line";
- }
- this.isOpen = false;
- }
+ filterContainer.classList.add("hidden");
+ filterButton.classList.remove("bg-slate-200");
+ // Change icon back to filter when closed
+ const filterIcon = this.querySelector("i");
+ if (filterIcon) {
+ filterIcon.className = "ri-filter-2-line";
+ }
+ this.isOpen = false;
+ }
- handleSelectionEvent(event) {
- if (this.isOpen) {
- this.hideFilter();
- }
- }
+ handleSelectionEvent(event) {
+ if (this.isOpen) {
+ this.hideFilter();
+ }
+ }
- handleOutsideClick(event) {
- const filterContainer = document.getElementById("filter-container");
- const filterButton = this.querySelector('button');
+ handleOutsideClick(event) {
+ const filterContainer = document.getElementById("filter-container");
+ const filterButton = this.querySelector("button");
- if (
- this.isOpen &&
- filterContainer &&
- filterButton &&
- !filterContainer.contains(event.target) &&
- !this.contains(event.target)
- ) {
- this.hideFilter();
- }
- }
+ if (
+ this.isOpen &&
+ filterContainer &&
+ filterButton &&
+ !filterContainer.contains(event.target) &&
+ !this.contains(event.target)
+ ) {
+ this.hideFilter();
+ }
+ }
}
// Register the custom element
-customElements.define('schnellauswahl-button', SchnellauswahlButton);
+customElements.define("schnellauswahl-button", SchnellauswahlButton);
/**
* NavigationMenu - Web component for the main navigation menu
* Web component for the main navigation menu with proper event handling
*/
class NavigationMenu extends HTMLElement {
- constructor() {
- super();
- this.isOpen = false;
- }
+ constructor() {
+ super();
+ this.isOpen = false;
+ }
- connectedCallback() {
- this.createMenu();
- this.setupEventListeners();
- }
+ connectedCallback() {
+ this.createMenu();
+ this.setupEventListeners();
+ }
- disconnectedCallback() {
- document.removeEventListener('click', this.handleOutsideClick);
- document.removeEventListener('quickfilter:selection', this.handleSelectionEvent);
- }
+ disconnectedCallback() {
+ document.removeEventListener("click", this.handleOutsideClick);
+ document.removeEventListener("quickfilter:selection", this.handleSelectionEvent);
+ }
- createMenu() {
- this.innerHTML = `
+ createMenu() {
+ this.innerHTML = `
@@ -587,127 +578,127 @@ class NavigationMenu extends HTMLElement {