Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2313

Mettre en avant un sujet dans sa barre de nav' Empty Mettre en avant un sujet dans sa barre de nav'

le Jeu 9 Mai - 10:14

Toutes versions sauf AwesomeBB

Mettre en avant un sujet dans sa barre de nav'

Hello hello Smile

Dans ce tutoriel, nous allons voir comment ajouter un bouton dans la barre de navigation et lier celui-ci à un sujet du forum en particulier. L'idée étant : s'il n'y a pas de nouveau message dans le sujet, le bouton reste celui par défaut, s'il y a un nouveau message, le bouton change pour attirer l'attention du membre.

Idea Pré-requis :
• avoir accès aux templates du forum ;
• fonctionne pour toutes les versions de forum sauf AwesomeBB.

C'est parti !

La préparation HTML

Une mini modification de template

Tout d'abord, nous allons avoir besoin de créer une div cachée qui va récupérer les informations du forum contenant notre sujet (en gros, on mettra dans cette div le tableau contenant les liens vers les sujets).
Code:
<div id="recup_info" style="display:none"></div>

Dans le template "overall_header", nous allons mettre ce code juste après :
Code:
<body>

Idea On n'oublie pas de sauvegarder et de publier son template Smile

On ajoute notre bouton

On va ajouter dans la barre de nav' un nouveau texte ou image qui changera. Pour le moment, on met le texte ou l'image "normale", c'est-à-dire quand il n'y a pas de nouveau message.

Pour cela, tu vas dans : Panneau d'administration >> Affichage >> Page d'accueil >> En-tête et navigation ::  ajouter un menu personnalisé.. Je te laisse remplir toi-même les informations.
Idea le lien renvoie vers le sujet que l'on veut mettre en avant.
Idea Dans la suite du tutoriel, nous allons nous baser sur ce que tu as écrit dans "Texte".
Spoiler:

Mettre en avant un sujet dans sa barre de nav' Mea-na10

Notre base est prête, on peut passer au JS Smile

Ça se complique avec le javascript

Avant tout, voilà ce que va devoir faire notre javascript :
• il va aller jeter un oeil dans la catégorie/forum contenant le sujet que l'on veut mettre en avant ;
• si ce sujet est marqué comme "non lu", alors, ça signifiera qu'il y a un message "non lu" par le membre (logique) ;
• dans ce cas, on change le bouton de la barre de nav.

C'est tout Smile

Allez ! On y va Smile

On écrit le js

Tout d'abord, on va renseigner un certain nombre d'information :
• le forum dans lequel se trouve le sujet ;
• le lien du sujet mais sans l'adresse du forum
• le nom du nouveau bouton que nous avons ajouté dans la barre de nav
• le lien vers la nouvelle image à afficher s'il y a un nouveau message (non obligatoire)

ça donne donc ça :
Code:
var forumSujet = "http://miettes.lebonforum.com/f16-test-invite",
 lienSujet = "/t52-test-message-invite",
 nomLienNav = "Tambouille",
 nouvelleImage = "https://illiweb.com/fa/responsive/icons/desktop.png" ;

Ici, tu peux changer tout ce qui est entre guillemet pour mettre les informations liées au forum.
Idea Il est à noter que nouvelleImage n'est pas obligatoire. Dans ce cas, il te suffit de laisser les guillemets vide :
Code:
nouvelleImage = "" ;

Ensuite, on indique la version de notre forum : invision, phpbb2, phpbb3, punbb ou modernbb.

Code:
var versionForum = 'modernbb';

Idea Attention à bien respecter l'écriture Smile

Ta partie est terminée Smile Eh oui, il n'y a rien d'autres à changer, tout est prêt. Cela dit, tu me connais, j'aime bien tout expliqué Smile Cela dit, tu verras, tout est mis directement dans le js si ça t'intéresse de savoir ce qu'on fait dans le détail Smile

Voici donc le javascript complet :

Code:
/* Une fois la page chargée */
$(function(){

 /* ---- Infos à remplir ---- */
 // forumSujet = le forum dans lequel se trouve ton sujet
 // lienSujet = le lien de ton sujet sans l'adresse du forum
 // nomLienNav = le nom du nouveau bouton que tu as ajouté dans la barre de nav
 // nouvelleImage = le lien vers la nouvelle image à afficher s'il y a un nouveau message et que ta nav' est en image
 var forumSujet = "http://miettes.lebonforum.com/f16-test-invite",
 lienSujet = "/t52-test-message-invite",
 nomLienNav = "Tambouille",
 nouvelleImage = "https://illiweb.com/fa/responsive/icons/desktop.png" ;

 // on indique la version du forum
   // attention de bien respecter les écritures ci-dessous
   // invision, phpbb2, phpbb3, punbb, modernbb
   var versionForum = 'modernbb';

   // On crée des variables qui vont être définit en fonction de la version de ton forum
 var listeTopics,
 cheminNav;

 // En fonction de la version du forum, on récupére les bons élements à cibler
    switch(versionForum){
        // Si on est sur invision
        case 'invision':
        listeTopics = '.borderwrap .ipbtable .lastaction';
        cheminNav = '#ipbwrapper #submenu .mainmenu';
          break;

        // Si on est sur phpbb2
        case 'phpbb2':
        listeTopics = '.forumline tr td .postdetails';
        cheminNav = '.bodyline > table td[align="center"] .mainmenu';
          break;

       // Si on est sur phpbb3
        case 'phpbb3':
          listeTopics = '.forumbg .topiclist.topics .lastpost';
          cheminNav = '.navbar .navlinks .mainmenu';
          break;

        // Si on est sur punbb
        case 'punbb':
        listeTopics = '.main.paged .main-content .table .tcr';
        cheminNav = '#pun-head #pun-navlinks .mainmenu';
          break;

        // Si on est sur modernbb
        default:
          listeTopics = '.forumbg .topiclist.topics .lastpost';
          cheminNav = '.headerbar .navbar.navlinks .mainmenu';
          break;
    }

    var listeTopicsRecup = forumSujet + listeTopics ;
    // On récupére le lien du topic cible
 $('#recup_info').load(''+listeTopicsRecup +'', function(){
 // S'il y a un nouveau message
 if($(this).html().indexOf(''+ lienSujet +'?view=newest') > -1){
 $(cheminNav).find('img[title='+nomLienNav+'').parent().addClass('new-msg');
 if(nouvelleImage != ""){
 $(cheminNav).find('img[title='+nomLienNav+'').attr('src', nouvelleImage);
 }
 }
 });
});

On installe le js

Maintenant qu'on a tout ce qu'il faut, il ne reste plus qu'à l'installer Smile

Pour cela, il te suffit d'aller dans Panneau d'administration >> Modules >> HTML & Javascript >> Gestion des codes javascript. Tu crées un nouveau javascript que tu appelles sur toutes les pages et tu y colles le code donné plus haut Smile

C'est tout ^^

Evidemment, en cas de souci, n'hésite pas à nous demander un coup de pouce Wink


Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses