custom dateslider componenet

Author: emgeier

browse.html

@@ -7,7 +7,7 @@
     <link rel="shortcut icon" href="/resources/images/fav-icons/mss-favicon.ico" />
     <link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="resources/css/syr-icon-fonts.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
+    <link rel="stylesheet" href="resources/css/dateRangeSlider.css">
     <style>
         body { padding-top: 70px; }
         .facet-panel { background: #f8f9fa; padding: 15px; border-radius: 5px; }
@@ -17,14 +17,7 @@
         .result-item:hover { background: #f8f9fa; }
         .result-count { color: #666; margin-bottom: 15px; }
         .clear-filters { margin-top: 10px; }
-        #dateRangeSlider { margin: 20px 0; height: 8px; }
-        .date-values { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 10px; }
-        
-        /* Custom slider styling */
-        .noUi-target { background: #e0e0e0; border: none; }
-        .noUi-connect { background: #888; }
-        .noUi-handle { display: none; }
-        .noUi-horizontal { height: 8px; }
+
 
         /* Navbar font and icon sizing */
         .navbar-brand { font-size: 24px; line-height: 50px; height: 50px; padding: 0 15px; display: flex; align-items: center; }
@@ -59,7 +52,7 @@ <h2>Browse Manuscripts</h2>
         </div>
     </div>
     <script src="resources/js/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
+    <script src="resources/js/dateRangeSlider.js"></script>
     <script>
         // Determine base URL based on environment
         const getBaseUrl = () => {
@@ -162,63 +155,43 @@ <h2>Browse Manuscripts</h2>
             $('#facets').html(facetsHtml + buildDateSlider());
         }
 
+        let dateSlider = null;
+
         // Build date range slider
         function buildDateSlider() {
             const dates = [];
             allData.forEach(item => {
-                if (item.dateNotBefore) {
-                    const d = Array.isArray(item.dateNotBefore) ? item.dateNotBefore[0] : item.dateNotBefore;
-                    dates.push(parseInt(d));
-                }
-                if (item.dateNotAfter) {
-                    const d = Array.isArray(item.dateNotAfter) ? item.dateNotAfter[0] : item.dateNotAfter;
-                    dates.push(parseInt(d));
-                }
-                if (item.dateWhen) {
-                    const d = Array.isArray(item.dateWhen) ? item.dateWhen[0] : item.dateWhen;
-                    dates.push(parseInt(d));
-                }
+                ['dateNotBefore','dateNotAfter','dateWhen'].forEach(key => {
+                    if (item[key]) {
+                        const d = Array.isArray(item[key]) ? item[key][0] : item[key];
+                        dates.push(parseInt(d));
+                    }
+                });
             });
-            
             if (dates.length === 0) return '';
-            
+
             const minDate = Math.min(...dates);
             const maxDate = Math.max(...dates);
-            
+
             setTimeout(() => {
-                const slider = document.getElementById('dateRangeSlider');
-                if (slider && !slider.noUiSlider) {
-                    noUiSlider.create(slider, {
-                        start: [minDate, maxDate],
-                        connect: true,
-                        range: { min: minDate, max: maxDate },
-                        step: 1,
-                        format: { to: v => Math.round(v), from: v => Math.round(v) }
-                    });
-                    
-                    slider.noUiSlider.on('update', (values) => {
-                        $('#dateMinValue').text(values[0]);
-                        $('#dateMaxValue').text(values[1]);
-                    });
-                    
-                    slider.noUiSlider.on('change', (values) => {
-                        activeFilters.dateMin = parseInt(values[0]);
-                        activeFilters.dateMax = parseInt(values[1]);
+                const el = document.getElementById('dateSliderContainer');
+                if (!el) return;
+                dateSlider = new DateRangeSlider(el, {
+                    min: minDate, max: maxDate,
+                    onChange: function (s, e) {
+                        activeFilters.dateMin = s;
+                        activeFilters.dateMax = e;
                         filterData();
-                    });
-                }
-            }, 100);
-            
-            return `
-                <div class="facet-group">
-                    <label>Date Range</label>
-                    <div id="dateRangeSlider"></div>
-                    <div class="date-values">
-                        <span id="dateMinValue">${minDate}</span>
-                        <span id="dateMaxValue">${maxDate}</span>
-                    </div>
-                </div>
-            `;
+                    },
+                    onReset: function () {
+                        delete activeFilters.dateMin;
+                        delete activeFilters.dateMax;
+                        filterData();
+                    }
+                });
+            }, 0);
+
+            return '<div class="facet-group" id="dateSliderContainer"></div>';
         }
 
         // Apply filter
@@ -383,6 +356,7 @@ <h2>Browse Manuscripts</h2>
             displayResults();
         }
 
+
         // Initialize
         $(document).ready(() => {
             loadData();