Skip to content
Snippets Groups Projects
Commit ea8b8472 authored by Robert Lange's avatar Robert Lange
Browse files

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
parent 8af86967
No related merge requests found
<!-- 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 -->
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment