@gouvfr/dsfr-roller 1.0.7 → 1.0.8

package/src/script/main/core/element.js

@@ -1,14 +1,13 @@
 class Element {
   constructor (element) {
     this._element = element;
-    this.init();
   }
 
   get element () {
     return this._element;
   }
 
-  init () {}
+  async init () {}
 
   observeResize (target) {
     this._observer = new ResizeObserver(this.resize.bind(this));
@@ -24,6 +23,11 @@ class Element {
   handleClick () {}
 }
 
-const instantiateElements = (selector, ElementClass) => [...document.querySelectorAll(selector)].map(element => new ElementClass(element));
+const instantiateElements = async (selector, ElementClass) => {
+  const elements = [...document.querySelectorAll(selector)].map(element => new ElementClass(element))
+  const promises = elements.map(element => element.init());
+  await Promise.all(promises);
+  return elements;
+}
 
 export { Element, instantiateElements };

package/src/script/main/core/get-current-repo.js

@@ -0,0 +1,6 @@
+const getCurrentRepo = () => {
+  const pathArray = window.location.pathname.split('/');
+  return `/${pathArray.splice(1, 2).join('/')}`;
+};
+
+export { getCurrentRepo };

package/src/script/main/core/get-query.js

@@ -0,0 +1,12 @@
+const paramsString = window.location.search;
+const searchParams = new URLSearchParams(paramsString);
+
+const getQuery = () => {
+    return searchParams.get('query');
+};
+
+const getCurrentPagination = () => {
+  return parseInt(searchParams.get('page'));
+};
+
+export { getQuery, getCurrentPagination };

package/src/script/main/core/replace-fragments.js

@@ -0,0 +1,4 @@
+export const replaceFragment = (fragment, query) => {
+  if (!fragment) return undefined;
+  return fragment.replace(/\[(\w+)\]\(%s\)/g, query);
+};

package/src/script/main/elements/pagination/index.js

@@ -0,0 +1,23 @@
+import { Element } from '../../core/element.js';
+import { PaginationList } from './pagination-list.js';
+
+class Pagination extends Element {
+    constructor(data, resultsPerPage = 10) {
+        const element = document.createElement('section');
+        element.classList.add('dsfr-doc--pagination', 'fr-my-8v');
+        super(element, 'pagination');
+
+        this._totalPages = Math.ceil(data.length / resultsPerPage);
+    }
+
+    init() {
+        const list = new PaginationList(this._totalPages);
+        const content = list.render();
+
+        this.element.innerHTML = `<nav role="navigation" class="fr-pagination" aria-label="Pagination">
+            ${content}
+        </nav>`;
+    }
+}
+
+export { Pagination };

package/src/script/main/elements/pagination/pagination-item.js

@@ -0,0 +1,94 @@
+const PaginationItemTypes = {
+    FIRST: {
+        type: 'first',
+        disabledAtMin: true,
+    },
+    PREV: {
+        type: 'prev',
+        disabledAtMin: true,
+        hasLGLabel: true,
+    },
+    NEXT: {
+        type: 'next',
+        disabledAtMax: true,
+        hasLGLabel: true,
+    },
+    LAST: {
+        type: 'last',
+        disabledAtMax: true,
+    },
+    PAGE: {
+        type: 'page',
+    },
+    ELLIPSIS: {
+        type: 'ellipsis',
+    },
+};
+
+const PaginationItemPositions = {
+    FIRST: 'first',
+    LAST: 'last',
+};
+
+class PaginationItem {
+    constructor(config, index, isCurrentPage = false, position = null) {
+        this._typeConfig = config;
+        this._index = index;
+        this._type = config.type;
+        this._isPage = this._type === 'page';
+        this._isCurrentPage = isCurrentPage;
+        this._position = position;
+        this._href = this.setPageHref();
+        this._title = `${window.resource?.pagination?.[this._type]} ${this._isPage ? this._index : ''}`;
+        this._label = this._isPage ? this._index : this._title;
+    }
+
+    setPageHref() {
+        const searchUrl = new URL(window.location.href);
+        searchUrl.searchParams.set('page', this._index);
+        return searchUrl.href;
+    }
+
+    getAttributes() {
+        const isDisabled =
+            (this._position === PaginationItemPositions.FIRST &&
+                this._typeConfig.disabledAtMin) ||
+            (this._position === PaginationItemPositions.LAST &&
+                this._typeConfig.disabledAtMax);
+        const classes = ['fr-pagination__link'];
+        if (!this._isPage) classes.push(`fr-pagination__link--${this._type}`);
+        if (this._typeConfig.hasLGLabel)
+            classes.push('fr-pagination__link--lg-label');
+
+        const attributes = {
+            href: !this._isCurrentPage ? this._href : null,
+            'aria-current': this._isCurrentPage && this._isPage ? 'page' : '',
+            class: classes.join(' '),
+        };
+
+        if (isDisabled) {
+            attributes['aria-disabled'] = 'true';
+            attributes.role = 'link';
+            attributes.href = null;
+        }
+
+        return attributes;
+    }
+
+    render() {
+        const id = `pagination-${this._type}${this._isPage ? '-' + this._index : ''}`;
+        const tag = this._type === PaginationItemTypes.ELLIPSIS.type ? 'span' : 'a';
+        const attributes = Object.entries(this.getAttributes())
+            .filter(([key, value]) => value !== null && value !== '')
+            .map(([key, value]) => `${key}="${value}"`)
+            .join(' ');
+
+        return `<li>
+            <${tag} id="${id}" title="${this._title}" ${attributes}>
+                ${this._label}
+            </${tag}>
+        </li>`;
+    }
+}
+
+export { PaginationItem, PaginationItemTypes, PaginationItemPositions };

package/src/script/main/elements/pagination/pagination-list.js

@@ -0,0 +1,131 @@
+import {
+    PaginationItem,
+    PaginationItemTypes,
+    PaginationItemPositions,
+} from './pagination-item.js';
+import { getCurrentPagination } from '../../core/get-query.js';
+
+class PaginationList {
+    constructor(pagesNumber) {
+        this._currentPage = getCurrentPagination() || 1;
+        this._totalPages = pagesNumber;
+        this._items = [];
+        this.init();
+    }
+
+    getPosition() {
+        switch (true) {
+            case this._currentPage === 1:
+                return PaginationItemPositions.FIRST;
+            case this._currentPage === this._totalPages:
+                return PaginationItemPositions.LAST;
+            default:
+                return null;
+        }
+    }
+
+    init() {
+        const position = this.getPosition();
+        this._items.push(
+            new PaginationItem(
+                PaginationItemTypes.FIRST,
+                1,
+                this._currentPage === 1,
+                position
+            )
+        );
+        this._items.push(
+            new PaginationItem(
+                PaginationItemTypes.PREV,
+                Math.max(this._currentPage - 1, 1),
+                this._currentPage === 1,
+                position
+            )
+        );
+
+        const pages =
+            this._totalPages <= 5 ? this.getAllPages() : this.getDynamicPages();
+
+        for (const page of pages) {
+            this._items.push(
+                new PaginationItem(
+                    page.type,
+                    page.index,
+                    this._currentPage === page.index
+                )
+            );
+        }
+
+        this._items.push(
+            new PaginationItem(
+                PaginationItemTypes.NEXT,
+                Math.min(this._currentPage + 1, this._totalPages),
+                this._currentPage === this._totalPages,
+                position
+            )
+        );
+        this._items.push(
+            new PaginationItem(
+                PaginationItemTypes.LAST,
+                this._totalPages,
+                this._currentPage === this._totalPages,
+                position
+            )
+        );
+    }
+
+    getAllPages() {
+        return [
+            ...Array.from({ length: this._totalPages }, (_, i) => ({
+                type: PaginationItemTypes.PAGE,
+                index: i + 1,
+            })),
+        ];
+    }
+
+    getDynamicPages() {
+        const ellipsis = { type: PaginationItemTypes.ELLIPSIS };
+        if (this._currentPage <= 3) {
+            return [
+                ...Array.from({ length: 3 }, (_, i) => ({
+                    type: PaginationItemTypes.PAGE,
+                    index: i + 1,
+                })),
+                ellipsis,
+                { type: PaginationItemTypes.PAGE, index: this._totalPages },
+            ];
+        } else if (this._currentPage >= this._totalPages - 2) {
+            return [
+                { type: PaginationItemTypes.PAGE, index: 1 },
+                ellipsis,
+                { type: PaginationItemTypes.PAGE, index: this._totalPages - 2 },
+                { type: PaginationItemTypes.PAGE, index: this._totalPages - 1 },
+                { type: PaginationItemTypes.PAGE, index: this._totalPages },
+            ];
+        } else {
+            return [
+                { type: PaginationItemTypes.PAGE, index: 1 },
+                ellipsis,
+                {
+                    type: PaginationItemTypes.PAGE,
+                    index: this._currentPage - 1,
+                },
+                { type: PaginationItemTypes.PAGE, index: this._currentPage },
+                {
+                    type: PaginationItemTypes.PAGE,
+                    index: this._currentPage + 1,
+                },
+                ellipsis,
+                { type: PaginationItemTypes.PAGE, index: this._totalPages },
+            ];
+        }
+    }
+
+    render() {
+        return `<ul class="fr-pagination__list">
+            ${this._items.map((item) => item.render()).join('')}
+        </ul>`;
+    }
+}
+
+export { PaginationList };

package/src/script/main/elements/search-bar/index.js

@@ -0,0 +1,64 @@
+import { Element } from '../../core/element.js';
+import { ResultsDropdown } from './results/results-dropdown.js';
+
+class SearchBar extends Element {
+  constructor (element) {
+    super(element, 'searchBar');
+    this._searchInput = this.element.querySelector('#search-input');
+    this._searchButton = this.element.querySelector('#search-button');
+    this._query = this._searchInput.value;
+  }
+
+  async init () {
+    this._url = this._searchButton.getAttribute('data-href');
+
+    this._resultsDropdown = new ResultsDropdown(this._url);
+    this.element.appendChild(this._resultsDropdown.element);
+    await this._resultsDropdown.init();
+
+    document.addEventListener('click', this.handleDocumentClick.bind(this));
+
+    this._searchInput.addEventListener(
+      'focus',
+      this.handleInputFocus.bind(this)
+    );
+
+    this._searchInput.addEventListener(
+      'keyup',
+      this.handleKeyup.bind(this)
+    );
+
+    // Handle search input clear
+    this._searchInput.addEventListener(
+      'search',
+      this.handleKeyup.bind(this)
+    );
+  }
+
+  update (query) {
+    this._query = query;
+    this._searchButton.setAttribute('href', `${this._url}?query=${query}`);
+    this._resultsDropdown.update(query);
+  }
+
+  handleDocumentClick (event) {
+    const outsideClick = !this.element.contains(event.target);
+    if (outsideClick) {
+      this._resultsDropdown.reset();
+    }
+  }
+
+  handleKeyup (event) {
+    if (event.key === 'Enter') {
+      document.location.href = this._searchButton.getAttribute('href');
+    } else {
+      this.update(event.target.value);
+    }
+  }
+
+  handleInputFocus () {
+    this.update(this._query);
+  }
+}
+
+export { SearchBar };

package/src/script/main/elements/search-bar/results/result-item.js

@@ -0,0 +1,13 @@
+class ResultItem {
+  constructor (data) {
+    this._title = data.title;
+    this._url = data.url;
+
+  }
+
+  render () {
+    return `<li><a class="fr-link" href="${this._url}" >${this._title}</a></li>`;
+  }
+}
+
+export { ResultItem };

package/src/script/main/elements/search-bar/results/results-button.js

@@ -0,0 +1,20 @@
+class ResultsButton {
+  constructor (url) {
+    this._url = url;
+    this._query = '';
+  }
+
+  set query (query) {
+    this._query = query;
+  }
+
+  get query () {
+    return this._query;
+  }
+
+  render () {
+    return `<a class="fr-btn fr-btn--secondary fr-mt-2v" href="${this._url}?query=${this._query}" id="search-button">${window.resource?.search?.results?.button}</a>`;
+  }
+}
+
+export { ResultsButton };

package/src/script/main/elements/search-bar/results/results-dropdown.js

@@ -0,0 +1,48 @@
+import { Element } from '../../../core/element.js';
+import { ResultsEmpty } from './results-empty.js';
+import { ResultsButton } from './results-button.js';
+import { ResultsList } from './results-list.js';
+
+class ResultsDropdown extends Element {
+    constructor(url) {
+        const element = document.createElement('div');
+        element.classList.add('dsfr-doc-search-results--dropdown');
+        super(element);
+
+        this._button = new ResultsButton(url);
+    }
+
+    async init() {
+        await window.searchEngine.init('searchBar');
+    }
+
+    reset() {
+        this.element.innerHTML = '';
+    }
+
+    update(query) {
+        if (query.length <= 2) {
+            this.reset();
+            return;
+        }
+
+        const results = window.searchEngine.search(query);
+
+        switch (true) {
+            case !results:
+            case results.length === 0:
+                const empty = new ResultsEmpty(query);
+                this._content = empty.render();
+                break;
+
+            default:
+                const list = new ResultsList(results);
+                this._button.query = query;
+                this._content = list.render() + this._button.render();
+        }
+
+        this.element.innerHTML = `<div class="fr-px-md-4v fr-py-6v">${this._content}</div>`;
+    }
+}
+
+export { ResultsDropdown };

package/src/script/main/elements/search-bar/results/results-empty.js

@@ -0,0 +1,21 @@
+import { replaceFragment } from '../../../core/replace-fragments.js';
+
+class ResultsEmpty {
+  constructor (query) {
+    this._query = query;
+  }
+  render () {
+    const noResults = window.resource?.search?.noresults;
+    return `
+    <p class="fr-mb-2v">
+        <strong>${replaceFragment(noResults?.title, this._query)}</strong>
+    </p>
+    <p class="fr-mb-2v">${noResults?.subtitle}</p>
+    <ul class="dsfr-doc-search-results--list--no-results">
+        <li>${noResults?.suggestions1}</li>
+        <li>${noResults?.suggestions2}</li>
+    </ul>`;
+  }
+}
+
+export { ResultsEmpty };

package/src/script/main/elements/search-bar/results/results-list.js

@@ -0,0 +1,19 @@
+import { ResultItem } from './result-item.js';
+
+const MAX_RESULTS = 6;
+
+class ResultsList {
+  constructor (data) {
+    this._items = data.slice(0, MAX_RESULTS).map(itemData => new ResultItem(itemData));
+  }
+
+  render() {
+    return `<ul class="dsfr-doc-search-results--list">
+${this._items.map(item => item.render()).join('')}
+</ul>`;
+
+  }
+
+}
+
+export { ResultsList };

package/src/script/main/index.js

@@ -1,10 +1,16 @@
+import './minisearch/index.js';
 import { instantiateElements } from './core/element.js'
 import CopySnippet from './elements/copy-snippet.js';
 import Storybook from './elements/storybook.js';
-import { Searchbar } from './elements/searchbar.js'
+import { SearchBar } from './elements/search-bar/index.js';
+import { ConsentManagementPlatform } from './cmp/index.js';
 
-window.onload = () => {
-  instantiateElements('.code-snippet--copy', CopySnippet);
-  instantiateElements('.storybook-leaf iframe', Storybook);
-  instantiateElements('#search', Searchbar);
+window.onload = async () => {
+  await instantiateElements('.code-snippet--copy', CopySnippet);
+  await instantiateElements('.storybook-leaf iframe', Storybook);
+  await instantiateElements('#search', SearchBar);
 };
+
+const consentResource = window.resource?.consent || {};
+const cmp = new ConsentManagementPlatform(consentResource);
+cmp.init();

package/src/script/main/minisearch/index.js

@@ -0,0 +1,46 @@
+import MiniSearch from 'minisearch';
+
+const LOAD_OPTIONS = {
+  fields: ['title', 'keywords', 'summary', 'excerpt', 'text'],
+  storeFields: ['title', 'url', 'boost', 'summary', 'excerpt', 'cover', 'section'],
+};
+
+const SEARCH_OPTIONS = {
+  prefix: true,
+  boost: { title: 2.5, keywords: 2, summary: 1.5, text: 1 },
+  boostDocument: (documentId, query, storedFields) =>
+    storedFields?.boost ?? 1,
+}
+
+const getOptions = (type) => {
+  switch (type) {
+    case 'search':
+      return SEARCH_OPTIONS;
+    default:
+      return LOAD_OPTIONS;
+  }
+}
+
+const ROOT_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>\w+)\/)/;
+const CURRENT_VERSION_REGEX = /^(?<root>\/(?<version>v\d+\.\d+|[\w-]+)\/(?<locale>\w+)\/(?<search>v\d+\.\d+|[\w-]+))/
+
+const getSearchIndex = (type) => {
+  const searchIndexRegex = type === 'searchPage' ? CURRENT_VERSION_REGEX : ROOT_REGEX;
+  const { groups: { root, version, locale } } = window.location.pathname.match(searchIndexRegex);
+  return `${root}/index.json`;
+}
+
+class SearchEngine {
+  async init (type) {
+    const response = await fetch(getSearchIndex(type));
+    const json = JSON.stringify(await response.json());
+    const options = getOptions('load');
+    this._miniSearch = MiniSearch.loadJSON(json, options);
+  }
+
+  search (query) {
+    return this._miniSearch.search(query, getOptions('search'));
+  }
+}
+
+window.searchEngine = new SearchEngine();

package/src/script/search/elements/result-card.js

@@ -0,0 +1,46 @@
+class ResultCard {
+    constructor(data) {
+        this._title = data.title;
+        this._url = data.url;
+        this._desc = data.excerpt ?? data.summary;
+        this._cover = data.cover || '/static/img/placeholder.16x9.png';
+        this._section = data.section;
+    }
+
+    getTags() {
+        if (!this._section) return '';
+        return `<div class="fr-card__start">
+                    <ul class="fr-tags-group">
+                        <li>
+                            <p class="fr-tag">${this._section}</p>
+                        </li>
+                    </ul>
+                </div>`;
+    }
+
+    getCover() {
+        if (!this._cover) return '';
+        return `<div class="fr-card__header">
+                    <div class="fr-card__img">
+                        <img src="${this._cover}" alt="" class="fr-responsive-img">
+                    </div>
+                </div>`;
+    }
+
+    render() {
+        return `<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mb-8v">
+                    <div class="fr-card__body">
+                        <div class="fr-card__content">
+                            <h3 class="fr-card__title">
+                                <a href="${this._url}">${this._title}</a>
+                            </h3>
+                            ${this._desc ? `<p class="fr-card__desc">${this._desc}</p>` : ''}
+                            ${this.getTags()}
+                        </div>
+                    </div>
+                    ${this.getCover()}
+                </div>`;
+    }
+}
+
+export { ResultCard };

package/src/script/search/elements/results-count.js

@@ -0,0 +1,21 @@
+import { replaceFragment } from '../../main/core/replace-fragments.js';
+import { getQuery } from '../../main/core/get-query.js';
+
+class ResultsCount {
+    constructor(count) {
+        this._resourceSearch = window.resource?.search;
+        this._query = getQuery();
+        this._resultsCount = count
+            ? `${count} ${count > 1 ? this._resourceSearch?.results?.count?.start?.plural : this._resourceSearch?.results?.count?.start?.single} ${replaceFragment(this._resourceSearch?.results?.count?.end, this._query)}`
+            : replaceFragment(
+                  this._resourceSearch?.noresults?.title,
+                  this._query
+              );
+    }
+
+    render() {
+        return this._resultsCount;
+    }
+}
+
+export { ResultsCount };

package/src/script/search/elements/results-empty.js

@@ -0,0 +1,21 @@
+import { replaceFragment } from '../../../core/replace-fragments.js';
+
+class ResultsEmpty {
+  constructor (query) {
+    this._query = query;
+  }
+  render () {
+    const noResults = window.resource?.search?.noresults;
+    return `
+    <p class="fr-mb-2v">
+        <strong>${replaceFragment(noResults?.title, this._query)}</strong>
+    </p>
+    <p class="fr-mb-2v">${noResults?.subtitle}</p>
+    <ul class="dsfr-doc-search-results--list--no-results">
+        <li>${noResults?.suggestions1}</li>
+        <li>${noResults?.suggestions2}</li>
+    </ul>`;
+  }
+}
+
+export { ResultsEmpty };

package/src/script/search/elements/results-list.js

@@ -0,0 +1,25 @@
+import { Element } from '../../main/core/element.js';
+import { ResultCard } from './result-card.js';
+import { getCurrentPagination } from '../../main/core/get-query.js';
+
+class ResultsList extends Element {
+    constructor(data, resultsPerPage = 10) {
+        const element = document.createElement('section');
+        element.classList.add('fr-mt-8v', 'fr-mb-14v');
+        super(element, 'resultsList');
+
+        const page = getCurrentPagination() || 1;
+        const results = data.slice(
+            (page - 1) * resultsPerPage,
+            page * resultsPerPage
+        );
+
+        this._cards = results.map((cardData) => new ResultCard(cardData));
+    }
+
+    init() {
+        this.element.innerHTML = this._cards.map((item) => item.render()).join('');
+    }
+}
+
+export { ResultsList };