Indication de nouveaux messages non fonctionnelle

[foxies]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous !

Me voici avec un nouveau problème que je n'arrive pas à résoudre toute seule. Je vais tenter d'être le plus claire possible car c'est assez complexe...

Il y a quelques temps de cela maintenant, j'ai installé sur mon forum encore en construction un système d'icônes (FontAwesome) présents au niveau du titre des différents forums et qui s'animent en cas de nouveaux messages. Pour ce faire, j'ai installé ce script qui permet d'attribuer un id aux icônes pour chaque forum afin de pouvoir les mettre en forme via le CSS :

Code:

$(function() {
    $('.cat-title a:contains(Bureau)').closest('.cat-forum').find('.cat-icon').attr('id', 'office');
    $('.cat-title a:contains(Réglement)').closest('.cat-forum').find('.cat-icon').attr('id', 'rules');
    $('.cat-title a:contains(Guide)').closest('.cat-forum').find('.cat-icon').attr('id', 'guide');
    $('.cat-title a:contains(Annonces)').closest('.cat-forum').find('.cat-icon').attr('id', 'announcements');
    $('.cat-title a:contains(Mises à jour)').closest('.cat-forum').find('.cat-icon').attr('id', 'updates');
    $('.cat-title a:contains(Registre)').closest('.cat-forum').find('.cat-icon').attr('id', 'registers');
    $('.cat-title a:contains(Communauté)').closest('.cat-forum').find('.cat-icon').attr('id', 'community');
    $('.cat-title a:contains(Discussions)').closest('.cat-forum').find('.cat-icon').attr('id', 'chat');
    $('.cat-title a:contains(Entraide)').closest('.cat-forum').find('.cat-icon').attr('id', 'assistance');
    $('.cat-title a:contains(Les Sims)').closest('.cat-forum').find('.cat-icon').attr('id', 'thesims');
    $('.cat-title a:contains(Graphisme)').closest('.cat-forum').find('.cat-icon').attr('id', 'graphism');
    $('.cat-title a:contains(Clubs)').closest('.cat-forum').find('.cat-icon').attr('id', 'clubs');
    $('.cat-title a:contains(Blogs)').closest('.cat-forum').find('.cat-icon').attr('id', 'blogs');
    $('.cat-title a:contains(Services)').closest('.cat-forum').find('.cat-icon').attr('id', 'services');
});

Par exemple, pour l'un des forums, voici ce que ça donne au niveau du CSS :

Code:

#office:before {
    color: #353738;
    content: '\f02e';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 12px;
    font-weight: 900;
    margin: auto;
}

Rien qu'à ce stade, je fais face à un soucis qui apparaît en cas de présence de sous-forums. 1) En effet, puisqu'à chaque forum est attribué un id différent et donc un icône qui lui est propre, les sous-forums ont également chacun le leur. Or, dans ce cas, l'icône du forum "parent" si je puis dire, ne s'affiche pas. A la place, c'est l'icône du dernier sous-forums qui apparaît. Par exemple, dans un forum appelé "Communauté", j'ai créé 3 sous-forums : "Discussions", "Entraide", "Clubs". L'icône qui devrait s'afficher quand on se trouve sur la page des catégories, au niveau du forum "Communauté", ne s'affiche pas. C'est l'icône du sous-forum "Clubs" qui s'affiche à cet emplacement. D'ailleurs, chose étrange, quand je fais une inspection d'élément sur .cat-icon, voici ce que je trouve (l'id devrait être normalement "community" pour communauté mais c'est celui de "clubs" qui s'affiche...) :

Code:

<div class="cat-icon" data-link="/f2-communaute" id="clubs"><span class="hidden">https://2img.net/i/fa/modernbb/forum_read_category.png</span></div>

2) Un autre script a été implanté afin de pouvoir faire en sorte que lorsqu'il y a un nouveau message dans un forum, l'icône de ce dernier s'anime (il clignote, grâce à l'ajout de la class .flash) :

Code:

$(function(){
var c='https://2img.net/i/fa/modernbb/forum_unread.png';
$('.hidden:contains("'+c+'")').closest('div').addClass('flash');
});

Après quelques tests, il s'avère que :
- S'il y a un nouveau message dans un forum sans sous-forums, le script fonctionne. C'est à dire que l'icône clignote.
- S'il y a un nouveau message dans un forum avec sous-forums, le script ne fonctionne pas.
- S'il y a un nouveau message dans un des sous-forums, le script ne fonctionne qu'au niveau de ce sous-forum. C'est à dire que l'icône va clignoter quand on se trouve au niveau de la liste des sous-forums mais l'icône du forum "parent" ne clignote pas quand on se trouve au niveau des catégories. Ainsi, impossible de savoir lorsqu'il y a des nouveaux messages dans les sous-forums depuis les catégories.

Voici mon template index_box si besoin :

Code:

<div class="cat">
    <!-- BEGIN catrow -->

    <!-- BEGIN tablehead -->

    <div style="display:none">{catrow.tablehead.L_FORUM}</div>

    <!-- END tablehead -->

    <!-- BEGIN forumrow -->

    <div class="cat-forum wow fadeInDown" data-link="{catrow.forumrow.U_VIEWFORUM}">
        <div class="cat-title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            <div class="cat-sub" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            <div class="cat-icon" data-link="{catrow.forumrow.U_VIEWFORUM}"><span class="hidden">{catrow.forumrow.FORUM_FOLDER_IMG}</span></div>
            <script type="text/javascript">
                jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g, ' ')).removeAttr('id');
            </script>
        </div>
        <div class="cat-stats">
            <div class="cat-sujets">{catrow.forumrow.TOPICS} <span>sujets</span></div>
            <div class="cat-messages">{catrow.forumrow.POSTS} <span>messages</span></div>
        </div>
        <div class="cat-last masterTooltip" title="Dernier message">
            <!-- BEGIN avatar -->
            <div class="last-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
            <!-- END avatar -->
            <a href="{catrow.forumrow.U_LATEST_TOPIC_POST}" class="last-topic">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
            <div class="last-date">{catrow.forumrow.USER_LAST_POST}</div>
        </div>
    </div>
    <!-- END forumrow -->


Je vous remercie d'avance de vous pencher sur ce problème, qui j'espère peut trouver une solution Un compte test est disponible alors si jamais, vous pouvez me demander les identifiants par MP. Merci et bonne journée

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

UP ! Bonne journée à tous

[Walt]

Bonjour,

Ligne 13 de votre template, remplacez :

Code:

<div class="cat-title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

par :

Code:

<div class="cat-title"><a class="forum-name" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

Puis votre JS par :

Code:

$(function() {
  $('.cat-title a.forum-name:contains(Bureau)').closest('.cat-forum').find('.cat-icon').attr('id', 'office');
  $('.cat-title a.forum-name:contains(Réglement)').closest('.cat-forum').find('.cat-icon').attr('id', 'rules');
  $('.cat-title a.forum-name:contains(Guide)').closest('.cat-forum').find('.cat-icon').attr('id', 'guide');
  $('.cat-title a.forum-name:contains(Annonces)').closest('.cat-forum').find('.cat-icon').attr('id', 'announcements');
  $('.cat-title a.forum-name:contains(Mises à jour)').closest('.cat-forum').find('.cat-icon').attr('id', 'updates');
  $('.cat-title a.forum-name:contains(Registre)').closest('.cat-forum').find('.cat-icon').attr('id', 'registers');
  $('.cat-title a.forum-name:contains(Communauté)').closest('.cat-forum').find('.cat-icon').attr('id', 'community');
  $('.cat-title a.forum-name:contains(Discussions)').closest('.cat-forum').find('.cat-icon').attr('id', 'chat');
  $('.cat-title a.forum-name:contains(Entraide)').closest('.cat-forum').find('.cat-icon').attr('id', 'assistance');
  $('.cat-title a.forum-name:contains(Les Sims)').closest('.cat-forum').find('.cat-icon').attr('id', 'thesims');
  $('.cat-title a.forum-name:contains(Graphisme)').closest('.cat-forum').find('.cat-icon').attr('id', 'graphism');
  $('.cat-title a.forum-name:contains(Clubs)').closest('.cat-forum').find('.cat-icon').attr('id', 'clubs');
  $('.cat-title a.forum-name:contains(Blogs)').closest('.cat-forum').find('.cat-icon').attr('id', 'blogs');
  $('.cat-title a.forum-name:contains(Services)').closest('.cat-forum').find('.cat-icon').attr('id', 'services');
});

Ça devrait déjà résoudre le problème des id mal attribués.

Pour le second souci, votre script vérifie si l'élément .hidden contient l'URL https://2img.net/i/fa/modernbb/forum_unread.png
Or, certains de vos sous-forums sont en réalité des catégories. Donc l'URL de l'image n'est pas la même :



Si vous mettez la même URL ça devrait fonctionner que le forum contienne des sous-forums ou non.

Cordialement,
Walt

[foxies]

Super, ça fonctionne correctement maintenant ! Un grand merci pour votre aide Walt, ainsi que pour les explications claires