Ce modèle de page est à utiliser lorsque l’on souhaite avoir un espacement entre la zone de contenu avec l’en-tête et le pied de page.
Langage: HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titre de la page - Nom du projet</title>
<meta name="description" content="Titre de la page">
<link href="https://cdn.francetravail.fr/studio/design-system/css/styles.css" rel="stylesheet">
<script src="https://cdn.francetravail.fr/webco/v1/ft-autoloader.js"></script>
</head>
<body class="ft-gabarit candidat">
<ft-header connecte="true" espace="candidat" notifications="3" utilisateur="Baptiste Guéry"></ft-header>
<main id="contents" role="main" class="main">
<div class="main-header-footer container-fluid">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</main>
<ft-footer espace="candidat"></ft-footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (document.body.classList.contains('outil-agent') || document.body.classList.contains('conseiller')) {
try {
// Version future : il faudra sûrement un mécanisme pour attendre que ftAutoloader soit chargé dans la page.
window.ftAutoloader.knownComponents.forEach(component => {
if (component.startsWith('ft-')) {
document.querySelectorAll(component).forEach(el => el.classList.add('outil-agent'));
}
})
} catch (e) {
console.log('Un erreur est survenue lors de l\'ajout automatique de la classe outil-agent', e);
}
}
});
</script>
</body>
</html>
// L'aperçu n'est pas disponible pour les dépendances externes
// Script de toggle du mode "Contraste renforcé"
const ftContrast = {
_TOGGLES: [],
_STORAGE: {
key: 'ft-contrast-mode',
activeValue: 'on',
inactiveValue: 'off'
},
_EVENTS: { updated: 'ft-contrast-updated' },
_ACTIVE_CLASS: 'high-contrast',
_ICONS: {
enable: {
selector: '.enable-contrast-icon',
svg: null
},
disable:{
selector: '.disable-contrast-icon',
svg: null
}
},
LABELS: {
enable: "Activer le contraste renforcé",
disable: "Désactiver le contraste renforcé"
},
_syncButtonState($btn) {
this.updateIcon($btn);
this.updateText($btn);
},
updateIcon($btn) {
const $currentIcon = $btn.querySelector('.icon');
const svgHTML = this.isEnabled ? this._ICONS.disable.svg : this._ICONS.enable.svg;
const svgElement = new DOMParser().parseFromString(svgHTML, "text/html").body.firstChild;
if ($currentIcon) {
$currentIcon.replaceWith(svgElement);
} else {
$btn.prepend(svgElement);
}
},
updateText($btn) {
$btn.querySelector('.btn-content').innerHTML = this.isEnabled ? this.LABELS.disable : this.LABELS.enable;
},
set currentState(state) {
localStorage.setItem(this._STORAGE.key, state);
window.dispatchEvent(new Event(this._EVENTS.updated));
},
get currentState() {
return localStorage.getItem(this._STORAGE.key);
},
get isEnabled() {
return this.currentState === this._STORAGE.activeValue;
},
get nextStatus() {
return this.isEnabled ? this._STORAGE.inactiveValue : this._STORAGE.activeValue;
},
captureIcons() {
const enableIconElement = document.querySelector(this._ICONS.enable.selector);
const disableIconElement = document.querySelector(this._ICONS.disable.selector);
if (enableIconElement) {
this._ICONS.enable.svg = enableIconElement.outerHTML;
}
if (disableIconElement) {
this._ICONS.disable.svg = disableIconElement.outerHTML;
}
},
init() {
this.captureIcons();
this._TOGGLES = document.querySelectorAll('[data-toggle-contrast]');
this._TOGGLES.forEach($btn => {
$btn.querySelector(this._ICONS.enable.selector).remove();
$btn.querySelector(this._ICONS.disable.selector).remove();
$btn.addEventListener('click', function () {
ftContrast.currentState = ftContrast.nextStatus;
});
});
window.addEventListener(this._EVENTS.updated, function (e) {
document.body.classList.toggle(ftContrast._ACTIVE_CLASS, ftContrast.isEnabled);
ftContrast._TOGGLES.forEach($btn => {
ftContrast._syncButtonState($btn);
});
});
// On initialise l'état des boutons en fonction du mode en localStorage
window.dispatchEvent(new Event(this._EVENTS.updated));
}
}
window.addEventListener('DOMContentLoaded', function () {
ftContrast.init();
});