Le contenu est géré sur plusieurs layers. Les layers sont statiques et comportent trois niveaux :
Toute la zone de contenu se trouve dans .chatbot__box__content.
Au niveau du code, chaque level est imbriqué dans l'autre :
Le wrapping de chaque level suit la convention de nommage suivante :
.chatbot__box__content--level-0.chatbot__box__content--level-1.chatbot__box__content--level-2.chatbot__box__content--level-3À partir du level 1, il est possible de revenir au layer précédent grâce à .chatbot__return--level-X.
Cette div contient une icône de retour.
Chaque layer est composé d'items avec leur nom et le nombre d'items que l'on retrouvera dans le layer suivant si l'on clique dessus.
Ce nombre d'items est récupéré en JavaScript grâce à item0.children.length.
Tout le contenu des layers est généré dynamiquement en JavaScript grâce au fichier contentChatBot.json, situé dans src/app/public.
Le chemin des icônes est généré dans le constructeur, ce qui permet d'utiliser this.imgDir.
Le dernier layer est particulier, car il n'affiche que du contenu WYSIWYG.
Il suit une structure standard : titre, date, puis contenu WYSIWYG.
Le contenu est stocké dans la div .wysiwyg-content.
Pour le dernier layer, vous pouvez ajouter tout le contenu HTML que vous souhaitez. Cependant, il y a une particularité concernant les balises <a> : si vous voulez les inclure dans un texte, vous devez les entourer d'une balise <p>. En effet, chaque élément ajouté au DOM est, par défaut, interprété comme un bloc distinct et provoque un retour à la ligne.
Le level 3 possède également une fonctionnalité permettant d'agrandir la fenêtre du chatbot pour améliorer la visibilité.
De plus, le header disparaît complètement à ce niveau, puis réapparaît lorsqu'on revient aux niveaux précédents.
L'agrandissement de la fenêtre se fait grâce au lien <a href> avec la classe .moresize.
<!-- start fake div content-->
<div style="height: 90vh; background-color: white; padding: 100px;"></div>
<!-- end fake div content-->
<form class="chatbot__box js-chatbotBox" id="formChatbot" data-accepted=".jpg, .png" action="/" enctype="multipart/form-data">
<div class="chatbot__box__content js-chatbox-content">
<div class="chatbot__box__content--level-3 active-content">
<div class="header--level-3"><a class="chatbot__return--level-3"><img class="returnonglet" src="assets/images/returnOnglet.svg"/>Retour</a><a class="moresize"><img class="returnonglet default" src="assets/images/moreSize.svg" alt="More Size"/><img class="returnonglet cloe" style="display: none;" src="assets/images/moreSizeCloe.svg" alt="Close Size"/></a></div>
<div class="wysiwyg-content">
<h3>C’est quoi un projet ?</h3>
<p>Actualisé il y a 8 mois</p>
<p>1. DataSprint regroupe tous vos projets. Ils sont accessibles à partir de la liste principale.</p><img class="returnonglet" src="assets/images/imageExemple.png"/>
<p>2. Un projet regroupe toutes les informations relative à votre travail :</p>
<ul>
<li>
<les>données brutes de vos sondages</les>
</li>
<li>
<les>données brutes de vos sondages</les>
</li>
<li>
<les>données brutes de vos sondages</les>
</li>
</ul>
</div>
</div>
</div>
<div class="chatbot__box__footer"><a class="help-link returnlevel0 first-btn-title" data-json="public/contentChatBot.json"><img src="assets/images/chatbotFooter.svg"/>Centre d'aide</a><a class="help-link returnlevel0 second-btn-title" data-json="public/contentChatBot2.json"><img src="assets/images/chatbotFooter.svg"/>Centre d'aide 2</a></div>
</form>