@gouvfr/dsfr-roller
Version:
Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR
239 lines (231 loc) • 8.3 kB
JavaScript
import { Node } from '../../node.js';
class HpSliceVideoContainerDirective extends Node {
constructor (data) {
super(data);
}
structure (data) {
const title = data.children.find(child => child.type === 'heading');
const transcription = data.children.find(child => child.name === 'fr-accordion');
const categoryLabel = data.properties.category;
const imgUrl = data.imgUrl;
const imgDarkUrl = data.imgDarkUrl;
const buttonLabel = data.properties.button;
const modalId = data.properties.modalId;
const videoProperties = {
videoId: data.videoId,
provider: data.provider,
};
let structureCategoryLabel = {};
if (categoryLabel) structureCategoryLabel = {
type: 'paragraph',
classes: ['dsfr-doc-hp-slice-video__category'],
children: [
{
type: 'text',
value: categoryLabel
}
]
};
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: '',
'aria-hidden': 'true'
}
},
{
type: 'image',
classes: ['dsfr-doc-hp-slice-video__img--dark'],
attributes: {
src: imgDarkUrl,
alt: '',
'aria-hidden': 'true'
}
}
]
}
]
}
]
},
{
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: 'paragraph',
classes: ['fr-modal__title'],
attributes: {
id: modalId + '-title'
},
children: [
{
type: 'text',
value: title.children[0].value
}
]
},
{
type: 'leafDirective',
name: 'dsfr-doc-video',
classes: ['fr-mb-6v'],
properties: {
...videoProperties,
}
},
{
...transcription
}
]
}
]
}
]
}
]
}
]
}
]
}
]
});
}
}
HpSliceVideoContainerDirective.NAME = 'hp-slice-video';
export { HpSliceVideoContainerDirective };