La chat box se compose de 7 sections :
.chat__box__header: le menu avec les onglets (voir Chat/Header).chat__box__dropzone: la zone pour glisser/deposer les fichiers.chat__box__avatar__menu: le menu aditionnel si on a plus de trois groupes de discussions.chat__box__aside: le menu sur la gauche avec les actions rapides.chat__box__overlay: le contenu des actions rapides, pour le moment la fenêtre de téléchargement.chat__box__content: le contenu du chat avec un div .chat__box__content__inner par discussion (voir Chat/Content).chat__box__footer: la zone de texte (voir Chat/Texte)Il y a un événement Javascript en place afin de refresh le binding des events. Il est attaché sur le body. Afin de l'utiliser suivre cette procédure :
const event = new CustomEvent('CHAT_REFRESH_EVENT');
document.dispatchEvent(event);
<button class="chat__button js-show-chat"><img src="assets/images/icon--chat.svg"/>
<div class="chat__counter">1</div>
</button>
<form class="chat__box js-chatBox" id="formChat" data-accepted=".jpg, .png" action="/" enctype="multipart/form-data">
<div class="chat__box__header js-chatNav1 child-3"><a class="chat__avatar js-tab__trigger is-active" href="#chat__content__1" title="John Doe"><img src="assets/images/avatar-01.png"/><span>John Doe</span></a><a class="chat__avatar js-tab__trigger" href="#chat__content__2" title="Julie Duportier"><img src="assets/images/avatar-02.png"/><span>Julie Duportier</span>
<div class="chat__counter">2</div></a><a class="chat__avatar js-tab__trigger" href="#chat__content__3" title="Avatar avec un nom très très très long"><img src="assets/images/avatar-01.png"/><span>Avatar avec un nom très très très long</span>
<div class="chat__counter">3</div></a><a class="chat__avatar__menu js-chatAvatarMenu has-notification" href=""><span class="c-fonticon__icon-arrow-right-double"></span></a></div>
<!-- .-->
<div class="chat__box__dropzone">Déposez votre fichier ici.</div>
<!-- .-->
<div class="chat__box__avatar__menu">
<div class="chat__box__avatar__menu__inner js-chatNav2"><a class="chat__avatar js-tab__trigger" href="#chat__content__4" title="John Doe"><img src="assets/images/avatar-01.png"/><span>4 John Doe</span></a><a class="chat__avatar js-tab__trigger" href="#chat__content__5" title="Julie Duportier"><img src="assets/images/avatar-02.png"/><span>5 Julie Duportier</span>
<div class="chat__counter">2</div></a><a class="chat__avatar js-tab__trigger" href="#chat__content__6" title="Julie Duportier"><img src="assets/images/avatar-02.png"/><span>6 Julie Duportier</span>
<div class="chat__counter">3</div></a><a class="chat__avatar js-tab__trigger" href="#chat__content__7" title="John Doe"><img src="assets/images/avatar-01.png"/><span>7 John Doe</span></a></div>
</div>
<!-- .-->
<div class="chat__box__aside">
<ul>
<li><a class="js-action__aside" href=".chat__box__download" title="Fichiers uploadés"><span class="c-fonticon__icon-arrow-down"></span></a></li>
</ul>
</div>
<!-- .-->
<div class="chat__box__overlay chat__box__download"><a class="chat__box__overlay__close js-overlayClose" href="" title="Fermer"><span class="c-fonticon__icon-close"></span></a>
<div class="chat__box__download__header">
<div class="cell"></div>
<div class="cell">Nom</div>
<div class="cell">Ajouté le</div>
<div class="cell">Par</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/thumb-img-download.png"/></div>
<div class="cell"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg">consectetur.jpg</a></div>
<div class="cell">28.09.21</div>
<div class="cell">Léa Dupanier</div>
</div>
<div class="chat__box__download__row">
<div class="cell"><img src="assets/images/icon-pdf.png"/></div>
<div class="cell"><a href="">logo-websprint.pdf</a></div>
<div class="cell">28.09.21</div>
<div class="cell">John Doe</div>
</div>
</div>
<!-- .-->
<div class="chat__box__content">
<div class="chat__box__content__inner is-visible" id="chat__content__1">
<div class="chat__item">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Vivamus hendrerit dolor est, a fermentum neque euismod non. Integer faucibus lorem urna, sed vulputate ante congue ac.
</div>
</div>
<div class="chat__item blue right">
<div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
<div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 14:04</span></div>
<div class="chat__item__content">Vivamus hendrerit dolor est, a fermentum neque euismod non.
</div>
</div>
<div class="chat__item blue right">
<div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
<div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 14:10</span></div>
<div class="chat__item__content">Vivamus hendrerit dolor est.
</div>
</div>
<div class="chat__item">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 15:00</span></div>
<div class="chat__item__content">Vivamus hendrerit dolor est, a fermentum neque euismod non.
</div>
</div>
<div class="chat__item borderLess right">
<div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
<div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 15:22</span></div>
<div class="chat__item__content"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg"><img src="assets/images/img-chat.png"/></a>
</div>
</div>
<div class="chat__item white right">
<div class="chat__item__avatar"><img src="assets/images/avatar-02.png"/></div>
<div class="chat__item__title"><span class="pseudo">Léa Dupanier</span><span class="date">Aujourd’hui 15:22</span></div>
<div class="chat__item__content">
<div class="chat__item__media"><img src="assets/images/icon-pdf.png"/><a href="#">logo-websprint.pdf</a></div>
</div>
</div>
<div class="chat__item">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 15:00</span></div>
<div class="chat__item__content">Vivamus hendrerit dolor est.
</div>
</div>
<div class="chat__item borderLess">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 15:00</span></div>
<div class="chat__item__content"><a class="js-openMfp-image" href="assets/images/ripple-big.jpg"><img src="assets/images/img-chat.png"/></a>
</div>
</div>
<div class="chat__item white">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 15:00</span></div>
<div class="chat__item__content">
<div class="chat__item__media"><img src="assets/images/icon-pdf.png"/><a href="#">logo-websprint.pdf</a></div>
</div>
</div>
</div>
<div class="chat__box__content__inner" id="chat__content__2">
<div class="chat__item">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Chat content tab 2
</div>
</div>
</div>
<div class="chat__box__content__inner" id="chat__content__3">
<div class="chat__item blue right">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Chat content tab 3
</div>
</div>
</div>
<div class="chat__box__content__inner" id="chat__content__4">
<div class="chat__item">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Chat content tab 4
</div>
</div>
</div>
<div class="chat__box__content__inner" id="chat__content__5">
<div class="chat__item blue right">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Chat content tab 5
</div>
</div>
</div>
<div class="chat__box__content__inner" id="chat__content__6">
<div class="chat__item">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Chat content tab 6
</div>
</div>
</div>
<div class="chat__box__content__inner" id="chat__content__7">
<div class="chat__item blue right">
<div class="chat__item__avatar"><img src="assets/images/avatar-01.png"/></div>
<div class="chat__item__title"><span class="pseudo">John Doe</span><span class="date">Aujourd’hui 14:02</span></div>
<div class="chat__item__content">Chat content tab 7
</div>
</div>
</div>
</div>
<!-- .-->
<div class="chat__box__footer">
<div class="chat__box__footer__actions dz-default dz-message">
<input type="file" name="file"/>
<div class="icon"><span class="c-fonticon__icon-link"></span></div>
<div class="icon"><span class="c-fonticon__icon-thumb"></span></div>
</div>
<div class="chat__box__footer__textarea">
<textarea class="js-chatTextarea" placeholder="Entrez votre message"></textarea>
<button class="js-chatButtonSubmit" disabled="disabled"><span class="c-fonticon__icon-arrow-up"></span></button>
</div>
</div>
</form>