range-slider.phtml

<!-- 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 -->