@gouvfr/dsfr-roller 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "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.16",
+    "@gouvfr/dsfr-forge": "=1.0.17",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.13.1",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/node/directive/doc/storybook-leaf-directive.js

@@ -1,15 +1,16 @@
 import { Node } from '../../node.js';
 
 class StorybookLeafDirective extends Node {
+  constructor (data) {
+    super(data, 'iframe');
+  }
 
-  // TODO:
-  //  - script externe pour le resize de l'iframe
-  //  - apossibilité de multiple storybook (baser sur id de la story ?)
-  //  - bug resize down
-  //  - bouton communication avec iframe pour changer le theme exemple
-  //  - changement theme iframe en fonction theme parent
   async render() {
-    return `<div class="storybook-leaf"><iframe ${this.renderAttributes()}></iframe></div>`;
+    return `
+      <div class="dsfr-doc-storybook-leaf">
+        ${await super.render()}
+      </div>
+    `;
   }
 }
 

package/src/script/main/elements/storybook.js

@@ -1,19 +1,55 @@
-import { Element } from '../core/element.js'
+import { Element } from '../core/element.js';
 
 class Storybook extends Element {
-  get iframe () {
+  get iframe() {
     return this.element;
   }
 
   init() {
-    this._iframeDoc = this.iframe.contentDocument;
-    if (!this._iframeDoc) return;
-    this.observeResize(this._iframeDoc.body);
+    this.isResized = false;
+    this.setIframeTheme();
+    this.listenChangeDisplay();
+    window.addEventListener('message', this.handleMessage.bind(this));
   }
 
-  resize () {
-    const height = this._iframeDoc.body?.scrollHeight ?? this._iframeDoc.documentElement?.scrollHeight;
-    this.iframe.style.height = isNaN(height) || !height ? '100%' : height + 'px';
+  handleMessage(event) {
+    const eventType = JSON.parse(event.data)?.event?.type;
+    if (!eventType) return;
+
+    if (eventType === 'storyRendered') {
+      this._iframeDoc = this.iframe.contentDocument;
+      if (!this._iframeDoc || this.isResized) return;
+
+      this.resize();
+      this.isResized = true;
+    }
+  }
+
+  resize() {
+    const height =
+      this._iframeDoc.body?.scrollHeight ??
+      this._iframeDoc.documentElement?.scrollHeight;
+    this.iframe.style.height =
+      isNaN(height) || !height ? '100%' : height + 'px';
+  }
+
+  setIframeTheme() {
+    const theme = document.documentElement.getAttribute('data-fr-theme');
+    if (theme) {
+      const url = new URL(window.location.origin + this.iframe.dataset.src);
+      url.searchParams.set('globals', `theme:${theme}`);
+      this.iframe.src = url.toString();
+    }
+  }
+
+  listenChangeDisplay() {
+    const display = document.getElementById('fr-display');
+    const radios = display.querySelectorAll('input');
+    radios.forEach((radio) => {
+      radio.addEventListener('change', () => {
+        this.setIframeTheme();
+      });
+    });
   }
 }
 

package/src/script/main/index.js

@@ -7,7 +7,7 @@ import { ConsentManagementPlatform } from './cmp/index.js';
 
 window.onload = async () => {
   await instantiateElements('.code-snippet--copy', CopySnippet);
-  await instantiateElements('.storybook-leaf iframe', Storybook);
+  await instantiateElements('.dsfr-doc-storybook-leaf iframe', Storybook);
   await instantiateElements('#search', SearchBar);
 };