From ea8b8472b56295cbffe3c1e758702a43dd559b59 Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Fri, 15 Jan 2021 19:16:04 +0100
Subject: [PATCH] refs #18936 [finc] barf: overwrite bootstrap ranges-slider
* add aria-label for slider
* add aria-label for slider handles
** by javascript because slider is generated by js library without possibility to set attributes
---
.../Recommend/SideFacets/range-slider.phtml | 81 +++++++++++++++++++
1 file changed, 81 insertions(+)
create mode 100644 themes/finc/templates/Recommend/SideFacets/range-slider.phtml
diff --git a/themes/finc/templates/Recommend/SideFacets/range-slider.phtml b/themes/finc/templates/Recommend/SideFacets/range-slider.phtml
new file mode 100644
index 00000000000..8dc4975ac49
--- /dev/null
+++ b/themes/finc/templates/Recommend/SideFacets/range-slider.phtml
@@ -0,0 +1,81 @@
+<!-- finc - recommend - sidefacets - rangeslider -->
+<?php
+ /** this is a copy of the bootstrap3 version and adds an aria-label to the
+ * slider-container element
+ */
+?>
+<div class="facet">
+ <form name="<?=$this->escapeHtmlAttr($this->title)?>Filter" id="<?=$this->escapeHtmlAttr($this->title)?>Filter">
+ <?=$results->getUrlQuery()->asHiddenFields(['page' => "/./", 'filter' => "/^{$this->title}:.*/"])?>
+ <input type="hidden" name="<?=$this->escapeHtmlAttr($this->facet['type'])?>range[]" value="<?=$this->escapeHtmlAttr($this->title)?>"/>
+ <div class="date-fields">
+ <?php $extraInputAttribs = ($this->facet['type'] == 'date') ? 'maxlength="4" ' : ''; ?>
+ <div class="date-from">
+ <label id="from-label" for="<?=$this->escapeHtmlAttr($this->title)?>from">
+ <?=$this->transEsc('date_from')?>:
+ </label>
+ <input type="text" class="form-control" name="<?=$this->escapeHtmlAttr($this->title)?>from" id="<?=$this->escapeHtmlAttr($this->title)?>from" value="<?=isset($this->facet['values'][0]) ? $this->escapeHtmlAttr($this->facet['values'][0]) : ''?>" <?=$extraInputAttribs?>/>
+ </div>
+ <div class="date-to">
+ <label id="to-label" for="<?=$this->escapeHtmlAttr($this->title)?>to">
+ <?=$this->transEsc('date_to')?>:
+ </label>
+ <input type="text" class="form-control" name="<?=$this->escapeHtmlAttr($this->title)?>to" id="<?=$this->escapeHtmlAttr($this->title)?>to" value="<?=isset($this->facet['values'][1]) ? $this->escapeHtmlAttr($this->facet['values'][1]) : ''?>" <?=$extraInputAttribs?>/>
+ </div>
+ </div>
+ <?php if ($this->facet['type'] == 'date'): ?>
+ <?php /* next line finc specific, adds aria-label */?>
+ <div class="slider-container"><input type="text" class="hidden" id="<?=$this->escapeHtmlAttr($this->title)?><?=$this->escapeHtml($this->facet['type'])?>Slider" aria-label="<?=$this->transEsc('Range-from-to')?>"/></div>
+ <?php endif; ?>
+ <input class="btn btn-default" type="submit" value="<?=$this->transEsc('Set')?>"/>
+ </form>
+</div>
+<?php if ($this->facet['type'] == 'date'): ?>
+ <?php $this->headScript()->appendFile('vendor/bootstrap-slider.min.js'); ?>
+ <?php $this->headLink()->appendStylesheet('vendor/bootstrap-slider.min.css'); ?>
+ <?php
+ $min = !empty($this->facet['values'][0]) ? min($this->facet['values'][0], 1400) : 1400;
+ $future = date('Y', time() + 31536000); // next year
+ $max = !empty($this->facet['values'][1]) ? max($future, $this->facet['values'][1]) : $future;
+ $low = !empty($this->facet['values'][0]) ? $this->facet['values'][0] : $min;
+ $high = !empty($this->facet['values'][1]) ? $this->facet['values'][1] : $max;
+ $script = <<<JS
+$(document).ready(function() {
+ var fillTexts = function() {
+ var v = {$this->escapeHtmlAttr($this->title)}dateSlider.getValue();
+ $('#{$this->escapeHtmlAttr($this->title)}from').val(v[0]);
+ $('#{$this->escapeHtmlAttr($this->title)}to').val(v[1]);
+ };
+ var {$this->escapeHtmlAttr($this->title)}dateSlider = $('#{$this->escapeHtmlAttr($this->title)}dateSlider')
+ .slider({
+ 'min':{$min},
+ 'max':{$max},
+ 'handle':"square",
+ 'tooltip':"hide",
+ 'value':[{$low},{$high}]
+ })
+ .on('change', fillTexts)
+ .data('slider');
+
+ $(".slider-handle.min-slider-handle").attr("aria-labelledby", "from-label");
+ $(".slider-handle.max-slider-handle").attr("aria-labelledby", "to-label");
+});
+
+$('#{$this->escapeHtmlAttr($this->title)}from, #{$this->escapeHtmlAttr($this->title)}to').change(function () {
+ var fromValue = Number($('#{$this->escapeHtmlAttr($this->title)}from').val());
+ var toValue = Number($('#{$this->escapeHtmlAttr($this->title)}to').val());
+ $('#{$this->escapeHtmlAttr($this->title)}dateSlider').slider(
+ 'setValue',
+ [
+ isNaN(fromValue) || fromValue <= 0 ? {$min} : fromValue,
+ isNaN(toValue) || toValue <= 0 ? {$max} : toValue
+ ],
+ true
+ );
+});
+
+JS;
+ ?>
+ <?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, $script, 'SET'); ?>
+<?php endif; ?>
+<!-- finc - recommend - sidefacets - rangeslider - END -->
--
GitLab