@gouvfr/dsfr-roller 1.0.9 → 1.0.10

package/package.json

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

package/src/node/directive/components/card/card-container-directive.js

@@ -2,6 +2,27 @@ import { Node } from '../../../node.js'
 
 class CardContainerDirective extends Node {
   structure (data) {
+    const col = data.properties.col || '';
+    const colSm = data.properties.colSm || '';
+    const colMd = data.properties.colMd || '';
+    const colLg = data.properties.colLg || '';
+
+    return super.structure(
+      col || colSm || colMd || colLg ? {
+        type: 'htmlContainer',
+        tagName: 'div',
+        classes: [
+          col ? `fr-col-${col}` : '',
+          colSm ? `fr-col-sm-${colSm}` : '',
+          colMd ? `fr-col-md-${colMd}` : '',
+          colLg ? `fr-col-lg-${colLg}` : ''
+        ],
+        children: [this.structureCard(data)]
+      } : this.structureCard(data)
+    );
+  }
+
+  structureCard (data) {
     this._data = data;
     const horizontal = data.properties.horizontal === true;
     const download = data.properties.download === true;
@@ -12,7 +33,7 @@ class CardContainerDirective extends Node {
     const hintStart = this.structureHintStart;
     const hintEnd = this.structureHintEnd;
 
-    return super.structure({
+    return {
       type: 'htmlContainer',
       tagName: 'div',
       classes: ['fr-card', 'fr-enlarge-link', horizontal ? 'fr-card--horizontal' : '', download ? 'fr-card--download' : ''],
@@ -60,7 +81,7 @@ class CardContainerDirective extends Node {
           ]
         }
       ]
-    });
+    };
   }
 
   get structureHintStart() {
@@ -74,10 +95,12 @@ class CardContainerDirective extends Node {
           {
             type: 'paragraph',
             classes: ['fr-card__detail'],
-            children: {
-              type: 'text',
-              value: this._data.properties.hintStart
-            }
+            children: [
+              {
+                type: 'text',
+                value: this._data.properties.hintStart
+              }
+            ]
           }
         ]
       }
@@ -96,10 +119,12 @@ class CardContainerDirective extends Node {
           {
             type: 'paragraph',
             classes: ['fr-card__detail'],
-            children: {
-              type: 'text',
-              value: this._data.properties.hintEnd
-            }
+            children: [
+              {
+                type: 'text',
+                value: this._data.properties.hintEnd
+              }
+            ]
           }
         ]
       }

package/src/node/directive/components/tile/tile-container-directive.js

@@ -23,18 +23,22 @@ class TileContainerDirective extends Node {
   }
 
   structureTile(data) {
-    const noBorder = data.properties.noBorder || false;
+    const classes = ['fr-tile'];
+    if (data.properties.enlargeLink || title?.children[0]?.type === 'link') classes.push('fr-enlarge-link');
+    if (data.properties.noBorder) classes.push('fr-tile--no-border');
+    if (data.properties.horizontal) classes.push('fr-tile--horizontal');
+    if (data.properties.download) classes.push('fr-tile--download');
     const pictogramUrl = data.properties.pictogram;
     const image = Node.getImageChild(data);
     const contentChildren = data.children.filter(child => !Node.getImageChild(child));
-    const title = contentChildren[0];
+    const title = contentChildren.find(child => child.type === 'heading');
     const description = contentChildren[1];
     const details = contentChildren[2];
 
     return {
       type: 'htmlContainer',
       tagName: 'div',
-      classes: ['fr-tile', noBorder ? 'fr-tile--no-border' : ''],
+      classes: classes,
       children: [
         {
           type: 'htmlContainer',

package/src/node/directive/core/col-container-directive.js

@@ -0,0 +1,20 @@
+import { Node } from '../../node.js'
+
+class ColContainerDirective extends Node {
+  constructor (data) {
+    super(data, 'div');
+    this.attributes.addClass('fr-col-' + data.properties.col || 12);
+    if (data.properties.colSm) this.attributes.addClass('fr-col-sm-' + data.properties.colSm);
+    if (data.properties.colMd) this.attributes.addClass('fr-col-md-' + data.properties.colMd);
+    if (data.properties.colLg) this.attributes.addClass('fr-col-lg-' + data.properties.colLg);
+    if (data.properties.alignV) this.attributes.addClass('fr-col--' + data.properties.alignV);
+    if (data.properties.offset) this.attributes.addClass('fr-col-offset-' + data.properties.offset);
+    if (data.properties.offsetSm) this.attributes.addClass('fr-col-offset-sm-' + data.properties.offsetSm);
+    if (data.properties.offsetMd) this.attributes.addClass('fr-col-offset-md-' + data.properties.offsetMd);
+    if (data.properties.offsetLg) this.attributes.addClass('fr-col-offset-lg-' + data.properties.offsetLg);
+  }
+}
+
+ColContainerDirective.NAME = 'fr-col';
+
+export { ColContainerDirective };

package/src/node/directive/home/hp-slice-video-container-directive.js

@@ -10,9 +10,11 @@ class HpSliceVideoContainerDirective extends Node {
     const imgUrl = data.imgUrl;
     const imgDarkUrl = data.imgDarkUrl;
     const buttonLabel = data.properties.button;
-    const vimeoUrl = data.properties.vimeo;
-    const youtubeUrl = data.properties.youtube;
     const modalId = data.properties.modalId;
+    const videoProperties = {
+      videoId: data.videoId,
+      provider: data.provider,
+    };
 
     let structureCategoryLabel = {};
     if (categoryLabel) structureCategoryLabel = {
@@ -26,22 +28,6 @@ class HpSliceVideoContainerDirective extends Node {
       ]
     };
 
-    const videoAttributes = {
-      frameborder: '0',
-      allowfullscreen: '',
-    };
-
-    if (vimeoUrl) {
-      videoAttributes.title= 'Vimeo',
-      videoAttributes.allow = 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media',
-      videoAttributes.src = 'https://player.vimeo.com/video/' + vimeoUrl.match(/\/([^\/]+)$/)[1];
-    } else if (youtubeUrl) {
-      videoAttributes.title= 'Youtube',
-      videoAttributes.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
-      videoAttributes.referrerpolicy = "strict-origin-when-cross-origin",
-      videoAttributes.src = 'https://www.youtube.com/embed/' + youtubeUrl.match(/\/([^\/]+)$/)[1];
-    }
-
     return super.structure({
       type: 'htmlContainer',
       tagName: 'div',
@@ -217,11 +203,10 @@ class HpSliceVideoContainerDirective extends Node {
                                   ]
                                 },
                                 {
-                                  type: 'htmlContainer',
-                                  tagName: 'iframe',
-                                  classes: ['fr-responsive-vid'],
-                                  attributes: {
-                                    ...videoAttributes
+                                  type: 'leafDirective',
+                                  name: 'dsfr-doc-video',
+                                  properties: {
+                                    ...videoProperties,
                                   }
                                 }
                               ]

package/src/node/node-factory.js

@@ -24,6 +24,8 @@ import { TableRowNode } from './gfm/table-row-node.js';
 import { TableHeaderNode } from './gfm/table-header-node.js';
 import { TableCellNode } from './gfm/table-cell-node.js';
 import { NodeRoot } from './node-root.js';
+import { GridContainerDirective } from './directive/core/grid-container-directive.js';
+import { ColContainerDirective } from './directive/core/col-container-directive.js';
 import { HpHeroContainerDirective } from './directive/home/hp-hero-container-directive.js';
 import { HpDiscoverContainerDirective } from './directive/home/hp-discover-container-directive.js';
 import { HpDiscoverTileContainerDirective } from './directive/home/hp-discover-tile-container-directive.js';
@@ -112,7 +114,9 @@ const DIRECTIVE_CONTAINERS = [
   TableContainerDirective,
   TabContainerDirective,
   TabsContainerDirective,
-  AnatomyContainerDirective
+  AnatomyContainerDirective,
+  GridContainerDirective,
+  ColContainerDirective
 ];
 const DIRECTIVE_LEAFS = [
   ButtonLeafDirective,

package/src/script/home/index.js

@@ -1,10 +1,12 @@
 import { instantiateElements } from '../main/core/element.js'
+import { SearchBar } from '../main/elements/search-bar/index.js';
 import { InjectSvg } from './inject-svg.js'
 import { ShowOnScroll } from './show-on-scroll.js'
 import { StopVideoOnClose } from './stop-video-on-close.js'
 
-window.onload = () => {
-  instantiateElements('img[src$=".svg"]', InjectSvg);
-  instantiateElements('[dsfr-doc-show-on-scroll]', ShowOnScroll);
-  instantiateElements('.fr-modal', StopVideoOnClose);
+window.onload = async () => {
+  await instantiateElements('#search', SearchBar);
+  await instantiateElements('img[src$=".svg"]', InjectSvg);
+  await instantiateElements('[dsfr-doc-show-on-scroll]', ShowOnScroll);
+  await instantiateElements('.fr-modal', StopVideoOnClose);
 };

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

@@ -4,69 +4,68 @@ import config from './tarteaucitron/config';
 import tacLang from './tarteaucitron/lang';
 
 import {
-    youtube,
-    vimeo,
-    // dailymotion,
-    // twitterembed,
-    // instagram,
-    // facebook,
+  vimeo,
+  // youtube,
+  // dailymotion,
+  // twitterembed,
+  // instagram,
+  // facebook,
 } from './tarteaucitron/services';
 
 class ConsentManagementPlatform {
-    constructor(data) {
-        this._data = data;
-        this._legalNoticeLink =
-            getCurrentRepo() + this._data?.tarteaucitron?.legalNoticeLink;
-        this._services = [
-            youtube,
-            vimeo,
-            // dailymotion,
-            // twitterembed,
-            // instagram,
-            // facebook,
-        ];
-        this.tac = tarteaucitron;
-    }
+  constructor(data) {
+    this._data = data;
+    this._legalNoticeLink =
+      getCurrentRepo() + this._data?.tarteaucitron?.legalNoticeLink;
+    this._services = [
+      vimeo,
+      // youtube,
+      // dailymotion,
+      // twitterembed,
+      // instagram,
+      // facebook,
+    ];
+    this.tac = tarteaucitron;
+  }
 
-    get services() {
-        return this._services.map((service) => service.key);
-    }
+  get services() {
+    return this._services.map((service) => service.key);
+  }
 
-    get tacConfig() {
-        return config(this._legalNoticeLink);
-    }
+  get tacConfig() {
+    return config(this._legalNoticeLink);
+  }
 
-    addServices() {
-        this._services.forEach(
-            (service) => (this.tac.services[service.key] = service)
-        );
-    }
+  addServices() {
+    this._services.forEach(
+      (service) => (this.tac.services[service.key] = service)
+    );
+  }
 
-    addJobs() {
-        this.tac.job = this.tac.job || [];
-        this._services.forEach((service) => {
-            if (!this.tac.job.includes(service.key))
-                this.tac.job.push(service.key);
-        });
-    }
+  addJobs() {
+    this.tac.job = this.tac.job || [];
+    this._services.forEach((service) => {
+      if (!this.tac.job.includes(service.key)) this.tac.job.push(service.key);
+    });
+  }
 
-    loadLang() {
-        Object.assign(
-            this.tac.lang,
-            tacLang(this._data?.tarteaucitron, this._legalNoticeLink)
-        );
-    }
+  loadLang() {
+    Object.assign(
+      this.tac.lang,
+      tacLang(this._data?.tarteaucitron, this._legalNoticeLink)
+    );
+  }
 
-    initTac() {
-        this.loadLang();
-        this.tac.init(this.tacConfig);
-    }
+  initTac() {
+    this.loadLang();
+    this.tac.init(this.tacConfig);
+  }
 
-    init() {
-        this.addServices();
-        this.addJobs();
-        this.initTac();
-    }
+  init() {
+    this.addServices();
+    this.addJobs();
+    this.initTac();
+  }
 }
 
 export { ConsentManagementPlatform };