<!-- fid_adlr: Recommend - SideFacets - range-slider --> <?php /* compare with finc */?> <?php /** finc: usability date range slider #22511: * set boundary values for daterange input and slider * min & max values of handles and inputs are defined by search results * if date range filter is applied additionaly: lowest and highest record years can be within filter values */ foreach ($cluster['list'] as $facet) { $years[] = $facet['value']; } $facetmin = min($years); $facetmax = max($years); $low = $facetmin; $min = !empty($this->facet['values'][0]) ? $this->facet['values'][0] : $facetmin; $high = $facetmax; $max = !empty($this->facet['values'][1]) ? $this->facet['values'][1] : $facetmax; ?> <?php /* finc changes div into li for compatibility with facet list structure */ ?> <li class="facet"> <?php /* finc adds landmarks for active facets */ ?> <?php if (!empty($this->facet['values'][0])): ?> <?php $this->sideFacet()->setAppliedFacet($this->transEsc('Skip to facet', ['%%filter_name%%' => $this->transEsc('Year of Publication')]), $this->escapeHtmlAttr($this->title) . 'from')?> <?php elseif (!empty($this->facet['values'][1])): ?> <?php $this->sideFacet()->setAppliedFacet($this->transEsc('Skip to facet', ['%%filter_name%%' => $this->transEsc('Year of Publication')]), $this->escapeHtmlAttr($this->title) . 'to')?> <?php endif; ?> <?php /* finc adds landmarks for active facets - END */ ?> <form class="facet-range-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)?>"/> <?php /* fid_adlr: place slider here instead of further down */ ?> <?php if ($this->facet['type'] == 'date'): ?> <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; ?> <div class="date-fields"> <?php /* finc: usability date range slider #22511: prefill min & max attributes by possible date range (given by search results or chosen date range filter) */ ?> <?php $extraInputAttribs = ($this->facet['type'] == 'date') ? " min=\"{$min}\" max=\"{$max}\" " : ''; ?> <div class="date-from"> <?php /* finc adds label ids */ ?> <label id="from-label" for="<?=$this->escapeHtmlAttr($this->title)?>from"> <?php /* fid_adlr: modify result list; remove colon #15967 */ ?> <?=$this->transEsc('date_from')?> </label> <?php /* finc: usability date range slider #22135, #22511: change input type and value */ ?> <input type="number" class="form-control" name="<?=$this->escapeHtmlAttr($this->title)?>from" id="<?=$this->escapeHtmlAttr($this->title)?>from" value="<?=!empty($this->facet['values'][0]) ? $this->escapeHtmlAttr($low) : ''?>" <?=$extraInputAttribs?>/> </div> <div class="date-to"> <label id="to-label" for="<?=$this->escapeHtmlAttr($this->title)?>to"> <?php /* fid_adlr: modify result list; remove colon #15967 */ ?> <?=$this->transEsc('date_to')?> </label> <?php /* finc: usability date range slider #22135, #22511: change input type and value input */ ?> <input type="number" class="form-control" name="<?=$this->escapeHtmlAttr($this->title)?>to" id="<?=$this->escapeHtmlAttr($this->title)?>to" value="<?=!empty($this->facet['values'][1]) ? $this->escapeHtmlAttr($high) : ''?>" <?=$extraInputAttribs?>/> </div> </div> <input class="btn btn-default" type="submit" value="<?=$this->transEsc('Set')?>"/> </form> </li> <?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 /* finc: usability date range slider #22511: variables moved to top */ $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'); // finc: set aria-labelledby by id #18936 $(".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; ?> <!-- fid_adlr: Recommend - SideFacets - range-slider - END -->