[VUFIND-1731] Aria hide sliders and replace slider library

themes/bootstrap5/js/advanced_search.js

@@ -165,7 +165,10 @@ deleteGroup = function _deleteGroup(group) {
 
 $(function advSearchReady() {
   $('.clear-btn').on("click", function clearBtnClick() {
-    $('input[type="text"]').val('');
+    document.querySelectorAll('input[type="text"],input[type="number"]').forEach(input => {
+      input.value = '';
+      input.dispatchEvent(new Event('input'));
+    });
     $('input[type="checkbox"],input[type="radio"]').each(function onEachCheckbox() {
       var checked = $(this).data('checked-by-default');
       checked = (checked == null) ? false : checked;

themes/bootstrap5/js/date_range_slider.js

@@ -0,0 +1,127 @@
+/*global VuFind, noUiSlider*/
+VuFind.register("dateRangeSlider", function dateRangeSlider() {
+  const _updatedSliderEvent = new Event('updated-slider');
+
+  let _defaultOptions = {
+    connect: [false, true, false],
+    step: 1,
+    format: {
+      to: (value) => Math.round(value),
+      from: (value) => Number(value)
+    },
+    handleAttributes: [
+      { 'aria-hidden': 'true', 'tabindex': '-1' },
+      { 'aria-hidden': 'true', 'tabindex': '-1' },
+    ]
+  };
+
+  /**
+   * Parse the value of an input to an integer
+   * @param {Element} input Input element
+   * @returns {number} Value of input as integer
+   */
+  function _parseInput(input) {
+    return parseInt(input.value, 10);
+  }
+
+  /**
+   * Create a slider
+   * @param {Element} sliderElement Slider base element
+   * @param {object} extraOptions Additional options for the slider. Range and starting values have to be included.
+   * @param {?Element} inputMin Optional input element that should be connected to the lower handle.
+   * @param {?Element} inputMax Optional input element that should be connected to the upper handle.
+   * @returns {object} Slider object
+   */
+  function create(sliderElement, extraOptions, inputMin = null, inputMax = null) {
+    let options = Object.assign({}, _defaultOptions, extraOptions);
+    let slider = noUiSlider.create(sliderElement, options);
+
+    if (inputMin === null || inputMax === null) {
+      if (inputMin !== null || inputMax !== null) {
+        console.error("Invalid parameters passed to dateRangeSlider.create. Either both or none of the inputs must be null.");
+      }
+      return slider;
+    }
+
+    slider.on('slide', (values) => {
+      if (_parseInput(inputMin) !== values[0] || _parseInput(inputMax) !== values[1]) {
+        inputMin.value = values[0];
+        inputMax.value = values[1];
+        sliderElement.dispatchEvent(_updatedSliderEvent);
+      }
+    });
+
+    /**
+     * Set the slider handles to the values of the input.
+     */
+    function setRangeToInput() {
+      let selectionMin = _parseInput(inputMin);
+      let selectionMax = _parseInput(inputMax);
+      if (isNaN(selectionMin)) {
+        selectionMin = options.start[0];
+      }
+      if (isNaN(selectionMax)) {
+        selectionMax = options.start[1];
+      }
+      if (selectionMin > selectionMax) {
+        [selectionMin, selectionMax] = [selectionMax, selectionMin];
+      }
+      if (options.range.min <= selectionMin && selectionMin <= selectionMax && selectionMax <= options.range.max) {
+        slider.set([selectionMin, selectionMax]);
+      }
+      sliderElement.dispatchEvent(_updatedSliderEvent);
+    }
+    inputMin.addEventListener('input', setRangeToInput);
+    inputMax.addEventListener('input', setRangeToInput);
+
+    /**
+     * Switches the values of the inputs if they are out of order
+     */
+    function sortInput() {
+      let selectionMin = _parseInput(inputMin);
+      let selectionMax = _parseInput(inputMax);
+      if (selectionMin > selectionMax) {
+        inputMin.value = selectionMax;
+        inputMax.value = selectionMin;
+        setRangeToInput();
+      }
+    }
+    inputMin.addEventListener('change', sortInput);
+    inputMax.addEventListener('change', sortInput);
+
+    return slider;
+  }
+
+  /**
+   * Initializes the sliders in the provided container
+   * @param {object} params Params (has to include a container element)
+   */
+  function updateContainer(params) {
+    let container = params.container;
+    container.querySelectorAll('.range-slider').forEach((sliderElement) => {
+      if (sliderElement.dataset.options !== undefined && sliderElement.dataset.initialized !== "true") {
+        sliderElement.dataset.initialized = "true";
+        let options = JSON.parse(sliderElement.dataset.options);
+        let inputMinId = sliderElement.dataset.inputMinId;
+        let inputMaxId = sliderElement.dataset.inputMaxId;
+        let inputMin = null;
+        let inputMax = null;
+        if (inputMinId !== undefined && inputMaxId !== undefined) {
+          inputMin = document.getElementById(inputMinId);
+          inputMax = document.getElementById(inputMaxId);
+        }
+        create(sliderElement, options, inputMin, inputMax);
+      }
+    });
+  }
+
+  /**
+   * Init date range sliders
+   */
+  function init() {
+    updateContainer({container: document});
+    VuFind.listen('VuFind.sidefacets.loaded', updateContainer);
+  }
+
+  return { init, create };
+});

themes/bootstrap5/js/facets.js

@@ -1,4 +1,4 @@
-/*global VuFind, multiFacetsSelectionEnabled */
+/*global VuFind, multiFacetsSelectionEnabled, unwrapJQuery */
 
 /**
  * Returns if multiFacetsSelectionEnabled is set. Fallback if the value is missing for false
@@ -565,7 +565,7 @@ VuFind.register('sideFacets', function SideFacets() {
           }
         }
         setupFacetFormListeners();
-        VuFind.emit('VuFind.sidefacets.loaded');
+        VuFind.emit('VuFind.sidefacets.loaded', {container: unwrapJQuery($container)});
       })
       .fail(function onGetSideFacetsFail() {
         $container.find('.facet-load-indicator').remove();

themes/bootstrap5/js/vendor/nouislider_LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Léon Gersen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

themes/bootstrap5/package.json

@@ -11,6 +11,7 @@
     "bootstrap": "5.3.3",
     "chart.js": "^4.4.0",
     "jquery": "^3.7.1",
+    "nouislider": "^15.8.1",
     "simple-keyboard": "^3.6.0",
     "simple-keyboard-layouts": "^3.0.0",
     "vanilla-cookieconsent": "3.0.0"