index.html

---
layout: default
additional_css: homepage
searchExamples:
  - quotient familial
  - revenu fiscal de référence
  - cadastre
---

<section id="mission-statement">
  <div class="header-with-image">
    <img class="ui small image" src="/img/Apigouv_visual.svg"
         alt="Une API connecte des services à la puissance d'internet" />
    <div>
      <h1 class="ui header">
        {{ site.description }}
      </h1>
      <div class="ui search">
        <div class="ui fluid left icon input">
          <input class="prompt"
                placeholder="{{ page.searchExamples | join: ', '}}…"
                type="search">
          <i class="search icon"></i>
        </div>
        <div class="results transition hidden">
        </div>
      </div>
    </div>
  </div>
</section>

<section id="apis">
  <div class="ui container">
    <div class="ui three stackable cards">
      {% for api in site.api %}
        {% include api-card.html description=api %}
      {% endfor %}
    </div>
  </div>
</section>

<script>
function spanHighlight(val) {
  return '<span class="result-highlight">' + val + '</span>';
}

function highlight(value, term) {
  var lowerCasedTerm = term.unidecode().toLowerCase();
  var valueUnidecoded = value.unidecode().toLowerCase();
  var pasOccurrences = [];
  var pos = valueUnidecoded.indexOf(lowerCasedTerm);
  while (pos !== -1) {
    pasOccurrences.push(pos);
    pos = valueUnidecoded.indexOf(lowerCasedTerm, pos + 1);
  }
  $.each(pasOccurrences.reverse(), function () {
    value = value.substring(0, this)
      + spanHighlight(value.substr(this, lowerCasedTerm.length))
      + value.substring(this + lowerCasedTerm.length);
  });
  return value;
}

function getHighLightFromArray(array, label, searchTerm) {
  var termHighlighted = [];
  $.each(array, function () {
    var val = this.innerHTML;
    if (val.search(searchTerm) !== -1) {
      termHighlighted.push(spanHighlight(val));
    }
  });
  if (termHighlighted.length > 0) {
    return '<br>' + label + '&nbsp;: ' + termHighlighted.slice(0, 3).join(', ');
  } else {
    return ''
  }
}

function onSearchQuery(searchTerm) {
  //this part higlights results
  var module = $(this);
  $.each(module.find('.content'), function () {
    var content = $(this);
    $.each(content.find('.description'), function () {
      var description = $(this);
      description.html(highlight($(this).html(), searchTerm));
      $.each([['keywords', 'tags'],
        ['partners', 'partenaires'],
        ['clients', 'clients']], function () {
        var HighLightFromArray = getHighLightFromArray(
          content.find('.' + this[0] + ' ul li'),
          this[1],
          searchTerm
        );
        if (HighLightFromArray) {
          description.append(HighLightFromArray);
          return false;
        }
      });
    });
  });
}

function customTemplate(response, fields) {
  var html = '';
  $.each(response[fields.results], function (index, value) {
    html += '<a class="result" href="' + value.url + '">'
      + '<div class="image"><img src="/img/' + value.image + '" /></div>'
      + '<div class="content">'
      + '<div class="title">' + value.title + '</div>'
      + '<div class="description">' + value.description + '</div>';
    $.each(['keywords', 'partners'], function (i, key) {
      html += '<div class="' + key + '" hidden="true"><ul>';
      $.each(value[key], function (i, v) {
        html += '<li>' + v + '</li>';
      });
      html += '</ul></div>';
    });
    html += '</div>';
    html += '</a>';
  });
  return html;
}

// from https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript#answer-901144
function getFilterInQueryParams() {
  var regex = new RegExp('[?&]filter(=([^&#]*)|&|#|$)');
  var results = regex.exec(window.location.href);
  if (!results) return null;
  if (!results[2]) return null;
  return results[2];
}

$(document).ready(function () {
  $.getJSON('/api/v1/api.json', function (toSearch) {
    var searchFields = ['title', 'description', 'keywords', 'tags', 'partners'];
    for (var i = 0; i < toSearch.length; i++) {
      toSearch[i]['unidecoded'] = searchFields.map(
        function (v) {
          return toSearch[i][v];
        })
        .join()
        .unidecode()
      ;
    }
    searchFields.push('unidecoded');
    $('.ui.search').search({
      type: 'custom',
      source: toSearch,
      searchFields: searchFields,
      searchFullText: false,
      showNoResults: true,
      regExp: {
        escape: /[\-\[\]\/{}()*+?.\\^$|]/g,
        beginsWith: ''
      },
      onSearchQuery: onSearchQuery,
      templates: {
        custom: customTemplate
      }
    });
  });

  var filter = getFilterInQueryParams();

  if (filter) {
    $('.api-card').not(":has(.api-tag." + filter + ")").css('display', 'none');
  }
});
</script>