Add date range inputs

catalogues/dictionary_de.xml

@@ -267,6 +267,7 @@
     <entry xml:id="lyricists">Textdichtung von </entry>
     <entry xml:id="occupations">Tätigkeiten</entry>
     <entry xml:id="alphabetic">Alphabetisch</entry>
+    <entry xml:id="chronoFrom">von</entry>
     <entry xml:id="chronoTo">bis</entry>
     <entry xml:id="chronology">Chronologie</entry>
     <entry xml:id="undated">undatiert</entry>

catalogues/dictionary_en.xml

@@ -265,6 +265,7 @@
     <entry xml:id="lyricists">Lyricists</entry>
     <entry xml:id="occupations">Occupations</entry>
     <entry xml:id="alphabetic">Alphabetic</entry>
+    <entry xml:id="chronoFrom">from</entry>
     <entry xml:id="chronoTo">to</entry>
     <entry xml:id="chronology">Chronology</entry>
     <entry xml:id="undated">undated</entry>

resources/js/init.js

@@ -134,20 +134,81 @@ function formatFacet (facet) {
     return facet;
 }
 
-$.fn.rangeSlider = function () 
-{
+/* 
+ * Helper functions 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);
+}
+
+function getInputDateFormat() {
+    const lang = getLanguage();
+    return (lang === 'de') ? "DD.MM.YYYY" : "MM/DD/YYYY";
+}
+
+function formatInputDate(timestamp) {
+    return moment(timestamp).locale(getLanguage()).format(getInputDateFormat());
+}
+
+$('.allFilter').on('change', '.chronology-from, .chronology-to', function () {
+    const slider = $('.rangeSlider').data('ionRangeSlider');
+    if (!slider) return;
+
+    const val = $(this).val().trim(),
+        m = moment(val, getInputDateFormat(), 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 +218,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(formatInputDate(data.from));
+            $('.chronology-to').val(formatInputDate(data.to));
+        },
+        onChange: function (data) {
+            $('.chronology-from').val(formatInputDate(data.from));
+            $('.chronology-to').val(formatInputDate(data.to));
+        },
+        onFinish: function (data) { applyChronologyFilter(data); }
     });
 };
 

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;

templates/ajax/correspondence.html

@@ -5,13 +5,25 @@ <h2><a href="#allFilter" class="collapseSingle" aria-expanded="true" data-toggle
         <div class="allFilter panel-collapse collapse show" id="allFilter">
             <h4 data-template="lang:translate">chronology</h4>
             <input type="text" class="rangeSlider" name="chronology-slider" data-template="app:set-slider-range"/>
+            <div class="row chronology-input">
+                <div class="col-6">
+                    <h4 data-template="lang:translate">chronoFrom</h4>
+                    <input type="text" class="chronology-from"/>
+                </div>
+                <div class="col-6">
+                    <h4 data-template="lang:translate">chronoTo</h4>
+                    <input type="text" class="chronology-to"/>
+                </div>
+            </div>
+            <hr/>
             <div class="input-group facet-group checkbox">
                 <input type="checkbox" name="undated" id="undatedLetters" data-template="app:set-facet-checkbox" data-template-key="undated"/>
                 <label for="undatedLetters" data-template="lang:translate">showUndatedDocuments</label>
                 <br/>
                 <input type="checkbox" name="hideRevealed" id="hideRevealed" data-template="app:set-facet-checkbox" data-template-key="hideRevealed"/>
                 <label for="hideRevealed" data-template="lang:translate">hideRevealedLetters</label>
             </div>
+            <hr/>
             <h4 data-template="lang:translate">sender</h4>
             <select multiple="multiple" data-template="facets:select" name="sender"/>
             <h4 data-template="lang:translate">addressees</h4>