@gouvfr/dsfr-roller 1.0.6 → 1.0.8

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

@@ -0,0 +1,246 @@
+import { Node } from '../../node.js';
+class HpSliceVideoContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const categoryLabel = data.properties.category;
+    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;
+
+    let structureCategoryLabel = {};
+    if (categoryLabel) structureCategoryLabel = {
+      type: 'paragraph',
+      classes: ['dsfr-doc-hp-slice-video__category'],
+      children: [
+        {
+          type: 'text',
+          value: categoryLabel
+        }
+      ]
+    };
+
+    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',
+      classes: ['dsfr-doc-hp-slice-video', 'fr-background-contrast--info'],
+      attributes: {
+        'dsfr-doc-show-on-scroll': ''
+      },
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'style',
+          children: [
+            {
+              type: 'text',
+              value: `
+                @media (min-width: 48em) {
+                  .dsfr-doc-hp-slice-video > .fr-container::before {
+                    background-image: url('${data.imgBgUrl}');
+                  }
+                }
+
+                [data-fr-theme='dark'] {
+                  @media (min-width: 48em) {
+                    .dsfr-doc-hp-slice-video > .fr-container::before {
+                      background-image: url('${data.imgDarkBgUrl}');
+                    }
+                  }
+                }
+              `
+            }
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-grid-row', 'fr-grid-row--gutters'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-slice-video__content', 'fr-col-12', 'fr-col-md-5'],
+                  children: [
+                    structureCategoryLabel,
+                    {
+                      type: 'htmlContainer',
+                      tagName: 'h2',
+                      classes: ['dsfr-doc-hp-slice-video__title'],
+                      children: title.children
+                    },
+                    {
+                      type: 'htmlContainer',
+                      tagName: 'button',
+                      classes: ['dsfr-doc-hp-slice-video__btn', 'fr-btn', 'fr-btn--secondary'],
+                      attributes: {
+                        'data-fr-opened': 'false',
+                        'aria-controls': modalId
+                      },
+                      children: [
+                        {
+                          type: 'text',
+                          value: buttonLabel
+                        }
+                      ]
+                    },
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-slice-video__img', 'fr-col-12', 'fr-col-md-6', 'fr-col-offset-md-1'],
+                  attributes: {
+                    'aria-controls': modalId,
+                    'data-fr-opened': 'false',
+                  },
+                  children: [
+                    {
+                      type: 'image',
+                      classes: ['dsfr-doc-hp-slice-video__img--light'],
+                      attributes: {
+                        src: imgUrl,
+                        alt: ''
+                      }
+                    },
+                    {
+                      type: 'image',
+                      classes: ['dsfr-doc-hp-slice-video__img--dark'],
+                      attributes: {
+                        src: imgDarkUrl,
+                        alt: ''
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'dialog',
+          classes: ['fr-modal'],
+          attributes: {
+            id: modalId,
+            'aria-labelledby': modalId + '-title',
+            role: 'dialog'
+          },
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-container', 'fr-container--fluid', 'fr-container-md'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['fr-grid-row', 'fr-grid-row--center'],
+                  children: [
+                    {
+                      type: 'htmlContainer',
+                      tagName: 'div',
+                      classes: ['fr-col-12', 'fr-col-md-10', 'fr-col-lg-8'],
+                      children: [
+                        {
+                          type: 'htmlContainer',
+                          tagName: 'div',
+                          classes: ['fr-modal__body'],
+                          children: [
+                            {
+                              type: 'htmlContainer',
+                              tagName: 'div',
+                              classes: ['fr-modal__header'],
+                              children: [
+                                {
+                                  type: 'htmlContainer',
+                                  tagName: 'button',
+                                  classes: ['fr-btn', 'fr-btn--close'],
+                                  attributes: {
+                                    type: 'button',
+                                    'aria-controls': modalId,
+                                    'title': data.fragments.button.close,
+                                  },
+                                  children: [
+                                    {
+                                      type: 'text',
+                                      value: data.fragments.button.close
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              type: 'htmlContainer',
+                              tagName: 'div',
+                              classes: ['fr-modal__content'],
+                              children: [
+                                {
+                                  type: 'htmlContainer',
+                                  tagName: 'h3',
+                                  classes: ['fr-modal__title'],
+                                  attributes: {
+                                    id: modalId + '-title'
+                                  },
+                                  children: [
+                                    {
+                                      type: 'text',
+                                      value: title.children[0].value
+                                    }
+                                  ]
+                                },
+                                {
+                                  type: 'htmlContainer',
+                                  tagName: 'iframe',
+                                  classes: ['fr-responsive-vid'],
+                                  attributes: {
+                                    ...videoAttributes
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpSliceVideoContainerDirective.NAME = 'hp-slice-video';
+
+export { HpSliceVideoContainerDirective };

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

@@ -10,7 +10,7 @@ class LinkNode extends Node {
       href: data.url,
       blank
     };
-    if (blank) actionData.attributes = { title: `${this.text} - ${data.fragments.blank}` };
+    if (blank) actionData.attributes = { title: `${data.title || this.text} - ${data.fragments.blank}` };
     this._action = new Action(actionData);
   }
   async render () {

package/src/node/node-factory.js

@@ -24,21 +24,38 @@ 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 { 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';
+import { HpSliceVideoContainerDirective } from './directive/home/hp-slice-video-container-directive.js';
+import { HpGoalsContainerDirective } from './directive/home/hp-goals-container-directive.js';
+import { HpShowcaseContainerDirective } from './directive/home/hp-showcase-container-directive.js';
+import { HpShowcaseCardContainerDirective } from './directive/home/hp-showcase-card-container-directive.js';
+import { HpCommunityContainerDirective } from './directive/home/hp-community-container-directive.js';
+import { HpCommunityTileContainerDirective } from './directive/home/hp-community-tile-container-directive.js';
+import { HpNewsContainerDirective } from './directive/home/hp-news-container-directive.js';
+import { HpFaqContainerDirective } from './directive/home/hp-faq-container-directive.js';
+import { HpAnalyticsContainerDirective } from './directive/home/hp-analytics-container-directive.js';
+import { AccordionContainerDirective } from './directive/components/accordion/accordion-container-directive.js';
+import { AccordionsGroupContainerDirective } from './directive/components/accordion/accordions-group-container-directive.js';
+import { ButtonLeafDirective } from './directive/components/button/button-leaf-directive.js'
+import { CardContainerDirective } from './directive/components/card/card-container-directive.js';
+import { TableContainerDirective } from './directive/components/table/table-container-directive.js';
+import { TabContainerDirective } from './directive/components/tabs/tab-container-directive.js'
+import { TabsContainerDirective } from './directive/components/tabs/tabs-container-directive.js'
+import { TileContainerDirective } from './directive/components/tile/tile-container-directive.js';
+import { AnatomyContainerDirective } from './directive/doc/guidance/anatomy-container-directive.js';
+import { PinLeafDirective } from './directive/doc/guidance/pin-leaf-directive.js';
+import { GuidelineContainerDirective } from './directive/doc/guidance/guideline-container-directive.js';
+import { GuidelinesContainerDirective } from './directive/doc/guidance/guidelines-container-directive.js';
 import { TabNavigationContainerDirective } from './directive/doc/tab-navigation-container-directive.js';
 import { StorybookLeafDirective } from './directive/doc/storybook-leaf-directive.js';
 import { FigmaLeafDirective } from './directive/doc/figma-leaf-directive.js';
-import { AnatomyContainerDirective } from './directive/doc/anatomy-container-directive.js';
-import { PinLeafDirective } from './directive/doc/pin-leaf-directive.js';
-import { AccordionContainerDirective } from './directive/doc/accordion-container-directive.js';
-import { AccordionsGroupContainerDirective } from './directive/doc/accordions-group-container-directive.js';
-import { GuidelineContainerDirective } from './directive/doc/guideline-container-directive.js';
-import { GuidelinesContainerDirective } from './directive/doc/guidelines-container-directive.js';
-import { TableContainerDirective } from './directive/doc/table-container-directive.js';
-import { TabContainerDirective } from './directive/doc/tab-container-directive.js'
-import { TabsContainerDirective } from './directive/doc/tabs-container-directive.js'
+import { PageItemListLeafDirective } from './directive/doc/page-item-list-leaf-directive.js';
+import { PageItemCardContainerDirective } from './directive/doc/page-item-card-container-directive.js';
+import { VideoLeafDirective } from  './directive/doc/video-leaf-directive.js';
 import { ImageTextDirective } from './directive/doc/image-text-directive.js'
 import { ChangelogLeafDirective } from './directive/doc/changelog-leaf-directive.js'
-import { ButtonLeafDirective } from './directive/doc/button-leaf-directive.js'
 
 
 const NODES = [
@@ -72,8 +89,23 @@ const NODES = [
 const nodesMap = new Map(NODES.map(Node => [Node.TYPE, Node]));
 
 const DIRECTIVE_CONTAINERS = [
+  HpHeroContainerDirective,
+  HpDiscoverContainerDirective,
+  HpDiscoverTileContainerDirective,
+  HpSliceVideoContainerDirective,
+  HpGoalsContainerDirective,
+  HpShowcaseContainerDirective,
+  HpShowcaseCardContainerDirective,
+  HpCommunityContainerDirective,
+  HpCommunityTileContainerDirective,
+  HpNewsContainerDirective,
+  HpFaqContainerDirective,
+  HpAnalyticsContainerDirective,
   AccordionContainerDirective,
   AccordionsGroupContainerDirective,
+  CardContainerDirective,
+  PageItemCardContainerDirective,
+  TileContainerDirective,
   GuidelineContainerDirective,
   GuidelinesContainerDirective,
   TabNavigationContainerDirective,
@@ -87,7 +119,9 @@ const DIRECTIVE_LEAFS = [
   StorybookLeafDirective,
   FigmaLeafDirective,
   ChangelogLeafDirective,
-  PinLeafDirective
+  PinLeafDirective,
+  VideoLeafDirective,
+  PageItemListLeafDirective
 ];
 const DIRECTIVE_TEXTS = [
   ImageTextDirective

package/src/page/head/head.js

@@ -3,6 +3,7 @@ import { Canonical } from './canonical.js';
 import { Stylesheets } from './stylesheets.js';
 import { Renderable } from '../../core/renderable.js';
 import { Favicon } from './favicon.js';
+import { Resource } from './resource.js';
 import { Share } from './share.js';
 
 class Head extends Renderable {
@@ -12,6 +13,7 @@ class Head extends Renderable {
     this._title = new Title(data);
     this._canonical = new Canonical(data);
     this._favicon = new Favicon(data);
+    this._resource = new Resource(data);
     this._share = new Share(data);
     this._stylesheets = new Stylesheets(data);
   }
@@ -27,6 +29,7 @@ class Head extends Renderable {
         ${await this._favicon.render()}
         ${await this._share.render()}
         ${await this._stylesheets.render()}
+        ${await this._resource.render()}
       </head>
     `;
   }

package/src/page/head/resource.js

@@ -0,0 +1,17 @@
+import { Renderable } from '../../core/renderable.js';
+
+class Resource extends Renderable {
+    async render() {
+        const resource = {
+            meta: this._data.resource.meta,
+            search: this._data.resource.search,
+            pagination: this._data.resource.pagination,
+            consent: this._data.resource.consent
+        };
+        return `<script>
+            window.resource = ${JSON.stringify(resource)};
+        </script>`;
+    }
+}
+
+export { Resource };

package/src/page/head/share.js

@@ -1,13 +1,31 @@
 import { Renderable } from '../../core/renderable.js';
 
 class Share extends Renderable {
-  constructor (data) {
-    super(data);
+  constructor(data) {
+    super(data, 'share');
+    this._resource = data.resource || {};
+    this._title = `${data.title} - ${this._resource?.meta?.title}`;
+    this._description = data.description || this._resource?.meta?.description;
+    this._cover = data.cover || '/static/img/placeholder.16x9.png';
+    this._url = this._resource?.meta?.baseUrl + data.url;
+    this._locale = `${data.lang}_${data.lang.toUpperCase()}`;
   }
 
-  async render () {
-    // facebook, twitter, linkedin, bluesky
-    return '<!-- Share -->';
+  async render() {
+    return `
+      <meta property="og:title" content="${this._title}">
+      <meta property="og:description" content="${this._description}">
+      <meta property="og:image" content="${this._cover}">
+      <meta property="og:type" content="website">
+      <meta property="og:url" content="${this._url}">
+      <meta property="og:locale" content="${this._locale}">
+
+      <meta name="twitter:card" content="summary_large_image">
+      <meta name="twitter:title" content="${this._title}">
+      <meta name="twitter:description" content="${this._description}">
+      <meta name="twitter:site" content="@gouvernementFR">
+      <meta name="twitter:image" content="${this._cover}">
+    `;
   }
 }
 

package/src/page/head/stylesheets.js

@@ -11,7 +11,8 @@ const DEFAULT_LIB_FILES = [
 ];
 
 const STYLES_MAP = new Map([
-  ['search', 'dsfr-doc-search']
+  ['search', 'dsfr-doc-search'],
+  ['home', 'dsfr-doc-home'],
 ]);
 
 class Stylesheets extends Renderable {

package/src/page/page.js

@@ -26,8 +26,10 @@ class Page extends Renderable {
       keywords: this.data.keywords,
       summary: this.data.summary,
       excerpt: this.data.excerpt,
+      cover: this.data.cover,
       boost: this.data.boost,
-      text: this._html.text
+      text: this._html.text,
+      section: this.data.section,
     }
   }
 

package/src/page/scripts/scripts.js

@@ -11,7 +11,8 @@ const DEFAULT_LIB_FILES = [
 ];
 
 const SCRIPTS_MAP = new Map([
-  ['search', 'dsfr-doc-search']
+  ['search', 'dsfr-doc-search'],
+  ['home', 'dsfr-doc-home']
 ]);
 
 class Scripts extends Renderable {

package/src/script/home/index.js

@@ -0,0 +1,10 @@
+import { instantiateElements } from '../main/core/element.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);
+};

package/src/script/home/inject-svg.js

@@ -0,0 +1,28 @@
+import { Element } from '../main/core/element.js'
+
+class InjectSvg extends Element {
+  init() {
+    this._src = this._element.getAttribute('src');
+    this._class = this._element.getAttribute('class');
+    this._ariaHidden = this._element.getAttribute('aria-hidden');
+    this._alt = this._element.getAttribute('alt');
+    this.replaceSvg();
+  }
+
+  replaceSvg() {
+    fetch(this._src)
+      .then(response => response.text())
+      .then(svg => {
+        const parser = new DOMParser();
+        const svgDocument = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = svgDocument.querySelector('svg');
+        if (this._class) svgElement.setAttribute('class', this._class);
+        if (this._ariaHidden !== null) svgElement.setAttribute('aria-hidden', this._ariaHidden);
+        if (this._alt) svgElement.setAttribute('aria-label', this._alt);
+        this._element.parentNode.insertBefore(svgElement, this._element);
+        this._element.remove();
+      });
+  }
+}
+
+export { InjectSvg };

package/src/script/home/show-on-scroll.js

@@ -0,0 +1,24 @@
+import { Element } from '../main/core/element.js'
+
+class ShowOnScroll extends Element {
+  init() {
+    this._observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.setAttribute('dsfr-doc-in-view', true);
+          return;
+        }
+
+        entry.target.setAttribute('dsfr-doc-in-view', false);
+      });
+    }, {
+      rootMargin: '0px 0px -35% 0px',
+      threshold: 0
+    });
+
+    this._observer.observe(this._element);
+  }
+
+}
+
+export { ShowOnScroll };

package/src/script/home/stop-video-on-close.js

@@ -0,0 +1,20 @@
+import { Element } from '../main/core/element.js'
+
+class StopVideoOnClose extends Element {
+  init() {
+    this._element.addEventListener('dsfr.conceal', () => {
+      this._iframe = this._element.querySelector('iframe');
+      if (this._iframe) {
+        this._iframe.setAttribute('src', this._iframe.getAttribute('src'));
+      }
+
+      this._video = this._element.querySelector('video');
+      if (this._video) {
+        this._video.pause();
+      }
+    });
+  }
+
+}
+
+export { StopVideoOnClose };

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

@@ -0,0 +1,72 @@
+import { tarteaucitron } from './tarteaucitron/tarteaucitron';
+import { getCurrentRepo } from '../core/get-current-repo';
+import config from './tarteaucitron/config';
+import tacLang from './tarteaucitron/lang';
+
+import {
+    youtube,
+    vimeo,
+    // 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;
+    }
+
+    get services() {
+        return this._services.map((service) => service.key);
+    }
+
+    get tacConfig() {
+        return config(this._legalNoticeLink);
+    }
+
+    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);
+        });
+    }
+
+    loadLang() {
+        Object.assign(
+            this.tac.lang,
+            tacLang(this._data?.tarteaucitron, this._legalNoticeLink)
+        );
+    }
+
+    initTac() {
+        this.loadLang();
+        this.tac.init(this.tacConfig);
+    }
+
+    init() {
+        this.addServices();
+        this.addJobs();
+        this.initTac();
+    }
+}
+
+export { ConsentManagementPlatform };

package/src/script/main/cmp/tarteaucitron/config.js

@@ -0,0 +1,34 @@
+export default function (link) {
+  return {
+      privacyUrl: link /* Privacy policy url */,
+      bodyPosition:
+          'top' /* or top to bring it as first element for accessibility */,
+      hashtag: '#consent-modal' /* Open the panel with this hashtag */,
+      cookieName: 'tarteaucitron' /* Cookie name */,
+      orientation: 'bottom' /* Banner position (top - bottom) */,
+      groupServices: false /* Group services by category */,
+      showDetailsOnClick: false /* Click to expand the description */,
+      serviceDefaultState: 'wait' /* Default state (true - wait - false) */,
+      showAlertSmall: false /* Show the small banner on bottom right */,
+      cookieslist: false /* Show the cookie list */,
+      closePopup: false /* Show a close X on the banner */,
+      showIcon: false /* Show cookie icon to manage cookies */,
+      // "iconSrc": "", /* Optionnal: URL or base64 encoded image */
+      iconPosition:
+          'BottomRight' /* BottomRight, BottomLeft, TopRight and TopLeft */,
+      adblocker: false /* Show a Warning if an adblocker is detected */,
+      DenyAllCta: true /* Show the deny all button */,
+      AcceptAllCta: true /* Show the accept all button when highPrivacy on */,
+      highPrivacy: true /* HIGHLY RECOMMANDED Disable auto consent */,
+      handleBrowserDNTRequest: false /* If Do Not Track == 1, disallow all */,
+      removeCredit: true /* Remove credit link */,
+      moreInfoLink: true /* Show more info link */,
+      useExternalCss: true /* If false, the tarteaucitron.css file will be loaded */,
+      useExternalJs: true /* If false, the tarteaucitron.js file will be loaded */,
+      // "cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */
+      readmoreLink: link /* Change the default readmore link */,
+      mandatory: false /* Show a message about mandatory cookies */,
+      mandatoryCta: true /* Show the disabled accept button when mandatory on */,
+      // "customCloserId": "" /* Optional a11y: Custom element ID used to open the panel */
+  };
+}

package/src/script/main/cmp/tarteaucitron/lang.js

@@ -0,0 +1,14 @@
+import { replaceFragment } from '../../core/replace-fragments.js';
+
+export default function (tarteaucitron, legalNoticeLink) {
+    return {
+        ...tarteaucitron,
+        alertBigPrivacy: {
+            title: tarteaucitron?.alertBigPrivacy?.title,
+            content: replaceFragment(
+                tarteaucitron?.alertBigPrivacy?.content,
+                legalNoticeLink
+            ),
+        },
+    };
+}