@gouvfr/dsfr-roller
Version:
Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR
158 lines (150 loc) • 4.99 kB
JavaScript
import { Node } from '../../../node.js'
class TileContainerDirective 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.structureTile(data)]
} : this.structureTile(data)
);
}
structureTile(data) {
const pictogramUrl = data.properties.pictogram;
const image = Node.getImageChild(data);
const imgDarkUrl = data.imgDarkUrl;
const hasImage = image || imgDarkUrl;
const contentChildren = data.children.filter(child => !Node.getImageChild(child));
const title = contentChildren.find(child => child.type === 'heading');
const description = contentChildren[1];
const details = contentChildren[2];
const classes = ['fr-tile'];
switch (true) {
case data.properties.enlargeLink === true:
case data.properties.enlargeLink !== false && title?.children[0]?.type === 'link':
classes.push('fr-enlarge-link');
break;
}
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');
return {
type: 'htmlContainer',
tagName: 'div',
classes: classes,
children: [
{
type: 'htmlContainer',
tagName: 'div',
classes: ['fr-tile__body'],
children: [
{
type: 'htmlContainer',
tagName: 'div',
classes: ['fr-tile__content'],
children: [
{
classes: ['fr-tile__title'],
...title
},
description ? {
classes: ['fr-tile__desc'],
...description
} : {},
details ? {
classes: ['fr-tile__detail'],
...details
} : {},
]
},
]
},
pictogramUrl || hasImage ? {
type: 'htmlContainer',
tagName: 'div',
classes: ['fr-tile__header'],
children: [
pictogramUrl ? {
type: 'htmlContainer',
tagName: 'div',
classes: ['fr-tile__pictogram'],
children: [
{
type: 'htmlContainer',
classes: ['fr-artwork'],
tagName: 'svg',
attributes: {
'aria-hidden': true,
viewBox: '0 0 80 80',
width: '80px',
height: '80px'
},
children: [
{
type: 'htmlContainer',
classes: ['fr-artwork-decorative'],
tagName: 'use',
attributes: {
href: pictogramUrl + '#artwork-decorative'
}
},
{
type: 'htmlContainer',
classes: ['fr-artwork-minor'],
tagName: 'use',
attributes: {
href: pictogramUrl + '#artwork-minor'
}
},
{
type: 'htmlContainer',
classes: ['fr-artwork-major'],
tagName: 'use',
attributes: {
href: pictogramUrl + '#artwork-major'
}
}
]
}
]
} : {},
hasImage ? {
type: 'htmlContainer',
tagName: 'div',
classes: ['fr-tile__img'],
children: [
{
classes: ['fr-responsive-img', imgDarkUrl ? 'fr-tile__img--light' : ''],
attributes: {
'aria-hidden': 'true',
},
...image,
},
imgDarkUrl ? {
classes: ['fr-responsive-img', 'fr-tile__img--dark'],
type: 'image',
attributes: {
src: imgDarkUrl,
'aria-hidden': 'true'
}
} : {}
]
} : {}
]
} : {},
]
}
}
}
TileContainerDirective.NAME = 'fr-tile';
export { TileContainerDirective };