@gouvfr/dsfr-roller 1.0.68 → 1.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.68",
+  "version": "1.0.71",
   "description": "Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR",
   "keywords": [
     "Système de Design de l'État",
@@ -56,7 +56,7 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.68",
+    "@gouvfr/dsfr-forge": "=1.0.71",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.2",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/component/components/sidemenu.js

@@ -1,23 +1,7 @@
 import { Component } from '../component.js';
 import { formatLink } from '../../core/format-link.js';
 import { log } from '@gouvfr/dsfr-forge';
-
-const Badges = {
-  BETA: {
-    id: 'beta',
-    type: 'info',
-    icon: false,
-    size: 'sm',
-  },
-  NEW: {
-    id: 'new',
-    type: 'new',
-    icon: true,
-    size: 'sm',
-  }
-}
-
-const BadgesMap = new Map(Object.values(Badges).map(badge => [badge.id, badge]));
+import { BadgesMap } from '../../page/body/badges-map.js';
 
 class Sidemenu extends Component {
   constructor (data, badgeLabels) {

package/src/node/generic/code-node.js

@@ -26,7 +26,7 @@ class CodeNode extends Node {
     return `
       <div class="code-snippet fr-mb-6v">
         <pre><code${this.renderAttributes()}>${convertHTMLEntities(this.value)}</code></pre>
-        <button type="button" class="code-snippet--copy fr-btn fr-btn--sm fr-btn--tertiary" data-label-copied="${this.data?.fragments?.button?.copied}">${this.data?.fragments?.button?.copy}</button>
+        <button type="button" class="code-snippet--copy fr-btn fr-btn--sm fr-btn--tertiary" data-label-copied="${this.data?.fragments?.button?.['text-copied']}">${this.data?.fragments?.button?.copy}</button>
       </div>
     `;
   }

package/src/page/body/badges-map.js

@@ -0,0 +1,18 @@
+const BadgeVariants = {
+  BETA: {
+    id: 'beta',
+    type: 'info',
+    icon: false,
+    size: 'sm',
+  },
+  NEW: {
+    id: 'new',
+    type: 'new',
+    icon: true,
+    size: 'sm',
+  }
+};
+
+const BadgesMap = new Map(Object.values(BadgeVariants).map(badge => [badge.id, badge]));
+
+export { BadgesMap };

package/src/page/body/badges.js

@@ -1,21 +1,5 @@
 import { log } from '@gouvfr/dsfr-forge';
-
-const BadgeVariants = {
-  BETA: {
-    id: 'beta',
-    type: 'info',
-    icon: false,
-    size: 'sm',
-  },
-  NEW: {
-    id: 'new',
-    type: 'new',
-    icon: true,
-    size: 'sm',
-  }
-};
-
-const BadgesMap = new Map(Object.values(BadgeVariants).map(badge => [badge.id, badge]));
+import { BadgesMap } from './badges-map.js';
 
 class Badges {
   constructor(data) {

package/src/page/page.js

@@ -31,6 +31,7 @@ class Page extends Renderable {
       boost: this.data.boost,
       text: this._html.text,
       section: this.data.section,
+      badge: this.data.badge,
     }
   }
 

package/src/script/main/elements/copy-link.js

@@ -0,0 +1,79 @@
+import { Element } from '../core/element.js'
+
+class CopyLink extends Element {
+  init() {
+    this._copiedLabel = this.button.getAttribute('data-label-copied');
+    this._isCopied = false;
+    this._heading = this.button.parentElement;
+    this.listenClick(this.button);
+  }
+
+  get button () {
+    return this.element;
+  }
+
+  get anchor () {
+    return this._heading && this._heading.id ? `#${this._heading.id}` : '';
+  }
+
+  get url () {
+    return window.location.origin + window.location.pathname + window.location.search;
+  }
+
+  get anchoredUrl () {
+    return this.url + this.anchor;
+  }
+
+  get isCopied () {
+    return this._isCopied;
+  }
+
+  set isCopied (value) {
+    this._isCopied = value;
+    if (value && this._tooltip) {
+      this._tooltip.innerText = this._copiedLabel;
+      this.button.setAttribute('aria-label', this._copiedLabel);
+    }
+  }
+
+  createTooltip() {
+    const tooltip = document.createElement("span");
+    tooltip.id = `${this.button.id}-tooltip`;
+    tooltip.className = 'fr-tooltip fr-placement';
+    tooltip.setAttribute('aria-hidden', 'true');
+    this.button.setAttribute('aria-describedby', tooltip.id);
+    this._heading.insertAdjacentElement('beforeend', tooltip);
+    return tooltip;
+  }
+
+  removeTooltip() {
+    if (this._tooltip) {
+      this._tooltip.remove();
+      this._tooltip = null;
+    }
+  }
+
+  handleClick () {
+    navigator.clipboard.writeText(this.anchoredUrl).then(() => {
+      if (this._tooltip) return;
+      this._tooltip = this.createTooltip();
+      this.isCopied = true;
+
+      setTimeout(() => {
+        if (typeof window.dsfr === 'function') {
+          window.dsfr(this._tooltip).tooltip.show();
+          window.dsfr(this._tooltip).tooltip.isEnabled = false;
+          setTimeout(this._handleTimeout.bind(this), 1500);
+        }
+      }, 10);
+    });
+  }
+
+  _handleTimeout () {
+    window.dsfr(this._tooltip).tooltip.hide();
+    this.isCopied = false;
+    this.removeTooltip();
+  }
+}
+
+export default CopyLink;

package/src/script/main/index.js

@@ -1,12 +1,14 @@
 import './minisearch/index.js';
 import { instantiateElements } from './core/element.js'
 import CopySnippet from './elements/copy-snippet.js';
+import CopyLink from './elements/copy-link.js';
 import Storybook from './elements/storybook.js';
 import { SearchBar } from './elements/search-bar/index.js';
 import { ConsentManagementPlatform } from './cmp/index.js';
 
 window.onload = async () => {
   await instantiateElements('.code-snippet--copy', CopySnippet);
+  await instantiateElements('.dsfr-doc-anchor-heading__button', CopyLink);
   await instantiateElements('.dsfr-doc-storybook-leaf iframe', Storybook);
   await instantiateElements('#search', SearchBar);
 };

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

@@ -1,46 +1,74 @@
+import { BadgesMap } from '../../../page/body/badges-map.js';
+
 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>`;
-    }
+  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;
+    this._badge = data.badge || [];
+  }
+
+  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>`;
+  }
+
+  getBadges () {
+    if (!this._badge?.length) return '';
+
+    const badges = Array.isArray(this._badge) ? this._badge : this._badge.split(',').map(b => b.trim());
+    const badgeItems = badges
+      .map(badge => {
+        const badgeData = BadgesMap.get(badge);
+        if (!badgeData) return null;
+
+        const badgeLabel = window.resource?.badge?.[badge] || badge;
+        let iconClass = '';
+        if (badgeData.icon === false) {
+          iconClass = ' fr-badge--no-icon';
+        } else {
+          iconClass = ` fr-badge--icon-${badgeData.icon}`;
+        }
+        return `<li><span class="fr-badge fr-badge--${badgeData.type} fr-badge--${badgeData.size}${iconClass}">${badgeLabel}</span></li>`;
+      })
+      .filter(Boolean)
+      .join('');
+
+    return `<ul class="fr-badges-group fr-mb-2v">${badgeItems}</ul>`;
+  }
+
+  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>
+      ${this.getBadges()}
+    </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/search-page.js

@@ -7,39 +7,39 @@ 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');
-    }
+  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');
+  async init() {
+    await window.searchEngine.init('searchPage');
 
-        if (this._query) {
-            this._searchBarInput.value = this._query;
-            const results = window.searchEngine.search(this._query);
+    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);
+      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._resultsCount.innerHTML = count.render();
+      document.title = `${document.title} - ${count.render()}`;
 
-            this._container.appendChild(resultsList.element);
-            resultsList.init();
+      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();
-            }
-        }
+      if (results.length > RESULTS_PER_PAGES) {
+        const pagination = new Pagination(results, RESULTS_PER_PAGES);
+        this._container.appendChild(pagination.element);
+        pagination.init();
+      }
     }
+  }
 }
 
 export { SearchPage };

package/src/style/main/utility/_dsfr-doc-anchor-heading.scss

@@ -1,5 +1,3 @@
-.dsfr-doc-anchor-heading {
-  &:not(:hover) {
-    --underline-img: none;
-  }
+.dsfr-doc-anchor-heading__button {
+  margin-left: 0.25rem;
 }

package/src/template/template.js

@@ -5,18 +5,23 @@ const PERMALINK_CONTENT_REGEX = /<!--\s*NO_PERMALINK_START\s*-->\s(?<content>[\s
 const PREVENT_PERMALINKS_REGEX = /(?<permalinks><!--\s*NO_PERMALINK_START\s*-->\s(?:[\s\S]*)\s<!--\s*NO_PERMALINK_END\s*-->)/g;
 const HEADING_REGEX = /<h(?<level>[2-6])(?<attrs>[^>]*)>(?<content>.*?)<\/h\1>/g;
 const ATTRIBUTE_ID_REGEX = /\sid=["'](?<id>[^"']+)["']/;
-const PERMALINK_CLASS = 'dsfr-doc-anchor-heading';
+const HEADING_BUTTON_CLASS = 'fr-btn--tooltip fr-btn fr-btn--sm fr-icon-link fr-btn--tertiary-no-outline dsfr-doc-anchor-heading__button';
 
-const injectPermaLink = (match, level, attrs, content) => {
+const injectPermaLink = (match, level, attrs, content, fragments) => {
   const idMatch = attrs.match(ATTRIBUTE_ID_REGEX);
   if (!idMatch || !idMatch.groups?.id) return match;
-  const link = `<a href="#${idMatch.groups.id}" class="${PERMALINK_CLASS}">${content}</a>`;
-  return `<h${level}${attrs}>${link}</h${level}>`;
+  const copied = fragments?.button?.['link-copied'];
+  const copy = fragments?.button?.['copy-link'];
+  const buttonId = `${idMatch.groups.id}-anchor`;
+  const anchorButton = `<button type="button" id="${buttonId}" title="${copy}" data-label-copied="${copied}" class="${HEADING_BUTTON_CLASS}"></button>`;
+  return `<h${level}${attrs}>${content}${anchorButton}</h${level}>`;
+
 };
 
 class Template extends Renderable {
   constructor (data, hasPermaLinks = false) {
     super(data);
+    this._fragments = data.fragments;
     nodeFactory.populate(data.fragments);
     this._hasPermaLinks = hasPermaLinks;
     this._content = nodeFactory.create({
@@ -45,7 +50,10 @@ class Template extends Renderable {
       if (match && match.groups && match.groups.content) {
         return match.groups.content;
       }
-      return part.replace(HEADING_REGEX, injectPermaLink);
+
+      return part.replace(HEADING_REGEX, (match, level, attrs, content) => {
+        return injectPermaLink(match, level, attrs, content, this._fragments);
+      });
     }).join('');
   }