@gouvfr/dsfr-roller 1.0.70 → 1.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.70",
+  "version": "1.0.72",
   "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,8 +56,8 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.70",
-    "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.2",
+    "@gouvfr/dsfr-forge": "=1.0.72",
+    "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.3",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",
     "highlight.js": "^11.10.0",

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/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/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('');
   }