@gouvfr/dsfr-roller/src/script/search/elements/search-page.js

Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR

import { Element } from '../../main/core/element.js';
import { getQuery } from '../../main/core/get-query.js';
import { ResultsList } from './results-list.js';
import { ResultsCount } from './results-count.js';
import { Pagination } from '../../main/elements/pagination/index.js';

const RESULTS_PER_PAGES = 10;

class SearchPage extends Element {
  constructor(element) {
    super(element, 'searchPage');

    this._query = getQuery();
    this._searchBarInput = document.querySelector('#search-input');
    this._resultsCount = document.querySelector('#results-count');
    this._resultsList = document.querySelector('#results-cards');
    this._container = element.querySelector('#results-page--container');
  }

  async init() {
    await window.searchEngine.init('searchPage');

    if (this._query) {
      this._searchBarInput.value = this._query;
      const results = window.searchEngine.search(this._query);

      const count = new ResultsCount(results.length);
      const resultsList = new ResultsList(results, RESULTS_PER_PAGES);

      this._resultsCount.innerHTML = count.render();
      document.title = `${document.title} - ${count.render()}`;

      this._container.appendChild(resultsList.element);
      resultsList.init();

      if (results.length > RESULTS_PER_PAGES) {
        const pagination = new Pagination(results, RESULTS_PER_PAGES);
        this._container.appendChild(pagination.element);
        pagination.init();
      }
    }
  }
}

export { SearchPage };