From a97efa5fbc54eb68a681ffd8dfa20e965ac45f2d Mon Sep 17 00:00:00 2001 From: SteffenAstheimer Date: Tue, 2 Dec 2025 20:53:38 +0100 Subject: [PATCH 1/2] add text input for letter by date filter add input boxes for from and to search date move the chronology filter update logic into a helper function add a method for date input to trigger chronology filter logic connect slider and input boxes to display the same dates prettify the slider --- catalogues/dictionary_de.xml | 1 + catalogues/dictionary_en.xml | 1 + resources/js/init.js | 86 ++++++++++++++++++++++------- resources/sass/layout/_sidebar.scss | 4 ++ templates/ajax/correspondence.html | 12 ++++ 5 files changed, 84 insertions(+), 20 deletions(-) diff --git a/catalogues/dictionary_de.xml b/catalogues/dictionary_de.xml index de9148e5b..78f888950 100644 --- a/catalogues/dictionary_de.xml +++ b/catalogues/dictionary_de.xml @@ -267,6 +267,7 @@ Textdichtung von Tätigkeiten Alphabetisch + von bis Chronologie undatiert diff --git a/catalogues/dictionary_en.xml b/catalogues/dictionary_en.xml index eb89c92e0..7a00a688c 100644 --- a/catalogues/dictionary_en.xml +++ b/catalogues/dictionary_en.xml @@ -265,6 +265,7 @@ Lyricists Occupations Alphabetic + from to Chronology undated diff --git a/resources/js/init.js b/resources/js/init.js index 3d3ecd6b3..ace34ce14 100644 --- a/resources/js/init.js +++ b/resources/js/init.js @@ -134,20 +134,72 @@ function formatFacet (facet) { return facet; } -$.fn.rangeSlider = function () -{ +/* + * Helper function for rangeSlider and chronology input + */ +function applyChronologyFilter (data) { + /* Get active facets to append as URL params */ + const params = active_facets(), + newFrom = moment(data.from).locale("de").format("YYYY-MM-DD"), + newTo = moment(data.to).locale("de").format("YYYY-MM-DD"); + + /* Overwrite date params with new values from the slider */ + params.sliderDates.fromDate = newFrom; + params.sliderDates.toDate = newTo; + params.sliderDates.oldFromDate = moment(data.min).locale("de").format("YYYY-MM-DD"); + params.sliderDates.oldToDate = moment(data.max).locale("de").format("YYYY-MM-DD"); + updatePage(params); +} + +$('.allFilter').on('change', '.chronology-from, .chronology-to', function () { + const slider = $('.rangeSlider').data('ionRangeSlider'); + if (!slider) return; + + const val = $(this).val().trim(); + m = moment(val, "YYYY-MM-DD", true); + if (!m.isValid()) return; + + const timestamp = +m; + currentFrom = slider.result.from; + currentTo = slider.result.to; + min = slider.result.min; + max = slider.result.max; + if (timestamp < min || timestamp > max) return; + + const isFrom = $(this).hasClass('chronology-from'); + if (isFrom && timestamp > currentTo) return; + if (!isFrom && timestamp < currentFrom) return; + + if (isFrom) { + slider.update({ from: timestamp }); + applyChronologyFilter({ + from: timestamp, + to: currentTo, + min: min, + max: max + }); + } else { + slider.update({ to: timestamp }); + applyChronologyFilter({ + from: currentFrom, + to: timestamp, + min: min, + max: max + }); + } +}); + +$.fn.rangeSlider = function () { this.ionRangeSlider({ min: +moment($(this).attr('data-min-slider')), max: +moment($(this).attr('data-max-slider')), from: +moment($(this).attr('data-from-slider')), to: +moment($(this).attr('data-to-slider')), - grid: true, + grid: false, skin: "flat", step: 100, force_edges: true, type: "double", - //force_edges: true, - grid_num: 3, keyboard: true, prettify: function (num) { const lang = getLanguage(), @@ -157,21 +209,15 @@ $.fn.rangeSlider = function () else { format = "MMM D, YYYY" } return m.format(format); }, - onFinish: function (data) { - /* Get active facets to append as URL params */ - const params = active_facets(), - newFrom = moment(data.from).locale("de").format("YYYY-MM-DD"), - newTo = moment(data.to).locale("de").format("YYYY-MM-DD"); - - /* - * Overwrite date params with new values from the slider - */ - params.sliderDates.fromDate = newFrom; - params.sliderDates.toDate = newTo; - params.sliderDates.oldFromDate = moment(data.min).locale("de").format("YYYY-MM-DD"); - params.sliderDates.oldToDate = moment(data.max).locale("de").format("YYYY-MM-DD"); - updatePage(params); - } + onStart: function (data) { + $('.chronology-from').val(moment(data.from).format("YYYY-MM-DD")); + $('.chronology-to').val(moment(data.to).format("YYYY-MM-DD")); + }, + onChange: function (data) { + $('.chronology-from').val(moment(data.from).format("YYYY-MM-DD")); + $('.chronology-to').val(moment(data.to).format("YYYY-MM-DD")); + }, + onFinish: function (data) { applyChronologyFilter(data); } }); }; diff --git a/resources/sass/layout/_sidebar.scss b/resources/sass/layout/_sidebar.scss index be280142b..6c0914313 100644 --- a/resources/sass/layout/_sidebar.scss +++ b/resources/sass/layout/_sidebar.scss @@ -116,6 +116,10 @@ a.checkbox-only { } } + .chronology-input input { + width: 100% + } + #settings { background-color: $gray-lightest; border-left: 4px solid $gray-light; diff --git a/templates/ajax/correspondence.html b/templates/ajax/correspondence.html index b22586190..bf79f964d 100644 --- a/templates/ajax/correspondence.html +++ b/templates/ajax/correspondence.html @@ -5,6 +5,17 @@

chronology

+
+
+

chronoFrom

+ +
+
+

chronoTo

+ +
+
+
@@ -12,6 +23,7 @@

chronology

+

sender