Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

[PunBB] Faire disparaitre / remplacer les "icones de messages" automatiquement Empty [PunBB] Faire disparaitre / remplacer les "icones de messages" automatiquement

le Lun 9 Sep - 17:55

[PunBB] Faire disparaitre / remplacer les "icones de messages" automatiquement


Avant toute chose, ce tutoriel est long et diffère selon la version. Afin de réduire la lourdeur et de faciliter la compréhension, tu trouveras un tutoriel par version (s'ils n'y sont pas encore, ça va venir Smile ).
Pour la version PhpBB2 c'est ici , AwesomeBB c'est ici , ModernBB c'est ici., phpBB3 c'est ici et Invision ici

Bonjour à toi !

Encore une fois, un nom bien long... Mais le résultat est tout simple et je te l'explique un peu plus clairement. Ce tutoriel vient d'une demande de CamilleHau, si tu veux un exemple concret.

Avec ForumActif, tu as la possibilité de mettre des "icônes de sujets" (PA > Affichage > Gestion des images > Icônes de messages) :
Spoiler:
[PunBB] Faire disparaitre / remplacer les "icones de messages" automatiquement Icones10

Mais tu peux avoir besoin, pour X ou Y raison, de supprimer ou changer l'icône automatiquement au bout d'un certain temps. Le faire à la main peut être long et fastidieux... Alors on va voir comment automatiser un peu. Je vais présenter ici 2 cas :
> Suppression de l'image au bout d'un certain temps :
- En se basant sur la date de création
- En se basant sur la date du dernier message

Quelques exemples concrets :
> Retirer un bouton "nouveau" au bout d'un mois que le sujet a été posté (qu'il ai des réponses récentes ou non)
> Remplacer un bouton "En cours" par "Archivé" au bout de 6 jours après la dernière réponse

Exclamation A savoir :
> Ce sujet concerne la version : PunBB
> Je pars de templates non personnalisés pour ce tutoriel
> Je pars du principe que tes icônes sont déjà installés
> Les icônes peuvent être changés à la main, et dans ce cas il ré-apparaitront, à moins de remettre celui qui doit être caché / modifié

Idea Prérequis :
> Des connaissances de base en HTML / CSS sont les bienvenues
> Tu ne vois pas avoir peur du Javascript et le comprendre est un plus

Première étape : on prépare les templates

Tout d'abord, on va modifier nos templates afin de pouvoir récupérer toutes les informations dont on a besoin via notre script.
Fais bien attention, certaines modifications ne sont pas nécessaire selon ton cas d'utilisation.

topics_list_box
Ici, une modification à faire selon ce que tu souhaites.

Pour te baser sur la date de création du sujet
tu vas rechercher cette partie :
Code:
{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}

Et la remplacer par ceci (On ajoute la date de création du sujet) :
Code:
{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR} - <span class="date">le {topics_list_box.row.FIRST_POST_TIME}</span>

Pour te baser sur la date de dernière réponsedu sujet
Tu vas chercher ceci :
Code:
{topics_list_box.row.LAST_POST_TIME}

Et la remplacer par ceci (On ajoute la date de création du sujet) :
Code:
<span class="LastPostDate">{topics_list_box.row.LAST_POST_TIME}</span>

Tu peux bien entendu faire les 2 modifications.

On va également ajouter une class pour nos icônes, et remplacer ceci :
Code:
{topics_list_box.row.ICON}

par :
Code:
<span class="case_icone">{topics_list_box.row.ICON}</span>

Tu enregistres et surtout, tu n'oublies pas de publier.

viewtopic_body
Arrow Modification à faire quelque soit ton cas d'utilisation
Ici, tu vas rechercher cette partie :
Code:
<h2>
 <strong>{postrow.displayed.COUNT_POSTS}</strong>
 {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
 </h2>

Et la remplacer par ceci (On ajoute une classe pour repérer notre icône dans le message) :
Code:
<h2>
 <strong>{postrow.displayed.COUNT_POSTS}</strong>
 <span class="icon_message">{postrow.displayed.ICON}</span> <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
 </h2>

Puis ensuite, tu vas remplacer ceci :
Code:
{postrow.displayed.POST_DATE_NEW}

par ceci :
Code:
<span class="topic-date">{postrow.displayed.POST_DATE_NEW}</span>

Tu enregistres et surtout, tu n'oublies pas de publier.

Deuxième étape : on configure le format de la date

Ici, c'est tout simple mais très important, il faut que le format de la date soit comme ceci : Le jour, le mois et l'année, dans cet ordre.
[PunBB] Faire disparaitre / remplacer les "icones de messages" automatiquement Format11

Tu peux configurer dans dans ton PA > Général > Forum > Configuration.
Tes membres ne verront pas les changements s'ils ne sont pas au même format (ils peuvent le gérer via leurs profils).

Troisième étape : Le script "magique"

Voilà le script à ajouter dans PA > Module > Gestion des codes Javascript > Créer. Et tu l'applique aux sous-forums et aux sujets.
Spoiler:
[PunBB] Faire disparaitre / remplacer les "icones de messages" automatiquement Script11

Version pour supprimer (cacher) l'image au bout de 30 jours après sa création
Tu dois mettre à jour le script avec l'url de ton image à ces 2 endroits :
Code:
if($(this).find('.tdtopics .case_icone img').attr('src')=="URL DE TON IMAGE"){

Code:
if($(this).find('.icon_message img').attr('src')=="URL DE TON IMAGE"){

Si tu veux 10 jours au lieu de 30, remplace le 30 par 10 ici :
Code:
nbDateMax =  new Date(anneeCreation, nbmonth, dateCreation.getDate() + 30),

Le script est commenté pour que tu puisse comprendre. Si tu as la moindre question, n'hésite pas.
Code:
//Au chargement de la page
$(function(){
    //On crée une fonction qui va nous servir à comparer les dates
    function ComparerDate(DateEntree) {
      //On déclare une variable qui va accueillir les différentes parties de la date
      // Et une autre qui contient les mois
      var dateMsgSplit,
      listeMois = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil ','Aoû', 'Sep', 'Oct', 'Nov', 'Déc '];
      
      //On va "split" la date qu'on a récupéré par les espaces. On va récupérer un tableau comme ceci [le, jour de la semaine, jour, mois, année, heure]
      //On récupère le jour, le mois et l'année
      dateMsgSplit=DateEntree.split(" ");
      var jourCreation = dateMsgSplit[2],
      moisCreation = dateMsgSplit[3],
      anneeCreation = dateMsgSplit[4];

      //On récupère l'index qui correspond à notre mois récupéré
      var nbmonth=listeMois.indexOf(moisCreation);

      // On récupère la date du jour + le jour, le mois et l'année.
      var dateNow = new Date(),
      day = dateNow.getDate(),
      month = dateNow.getMonth(),
      year = dateNow.getFullYear();
      
      //On crée une variable au format date qui est notre date de création du sujet
      // La date max (notre date + 30 jours)
      // La date du jour
      var dateCreation = new Date(anneeCreation, nbmonth, jourCreation),
      nbDateMax =  new Date(anneeCreation, nbmonth, dateCreation.getDate() + 30),
      nbDateToday =  new Date(year, month, day);

      // On met toutes ces dates en millisecondes en fait, ça na vous ressortir des nombres qu'on va pouvoir comparer
      dateCreation = dateCreation.getTime();
      nbDateMax = nbDateMax.getTime();
      nbDateToday = nbDateToday.getTime();
      
      //Si la date d'aujourd'hui est après notre date max, on retourne "vrai",
      //sinon, on retourne "faux"
      if( nbDateToday > nbDateMax){
        return true;
      }else{
        return false;
      }
    }
    
  //On parcours la listes des sujets, et pour chacun
   //si on trouve la class "date" on va récupérer cette date
   // Si l'image qui est présente dans l'icône est celle que l'on cherche
   //On appelle la fonction qui compare les dates
   // Si le retour est "true" on retire l'image
   $('.statused tr').each(function(){
    if($(this).find('.date')){
      var dateMsg = $(this).find('.date').text();
      if($(this).find('.tdtopics .case_icone img').attr('src')=="URL DE TON IMAGE"){

       if(ComparerDate(dateMsg)){
          $(this).find('.tdtopics .case_icone img').css("display","none");
       }      
     }
   }
 });
  
    //On parcours la listes des messages, et pour chacun
   //si on trouve la class "topic-date" on va récupérer cette date
   // Si l'image qui est présente dans l'icône est le "nouveau"
   //On appelle la fonction qui compare les dates
   // Si le retour est "true" on retire l'image
   $('.postmain').each(function(){
    if($(this).find('.topic-date')){
     var dateMsg = $(this).find('.topic-date').text();
     if($(this).find('.icon_message img').attr('src')=="URL DE TON IMAGE"){
       if(ComparerDate(dateMsg)){
         $(this).find('.icon_message img').css("display", "none");
       }
     }
   }
 });

 });

Version pour supprimer (cacher) l'image au bout de 6 jours sans réponse
Tu dois mettre à jour le script avec l'url de ton image à ces 2 endroits :
Code:
if($(this).find('.tdtopics .case_icone img').attr('src')=="URL DE TON IMAGE"){

Code:
if($(this).find('.icon_message img').attr('src')=="URL DE TON IMAGE"){

Si tu veux 3 jours au lieu de 6, remplace le 6 par 3ici :
Code:
nbDateMax =  new Date(anneeCreation, nbmonth, dateCreation.getDate() + 6),

Le script est commenté pour que tu puisse comprendre. Si tu as la moindre question, n'hésite pas.
Code:
//Au chargement de la page
$(function(){
    //On crée une fonction qui va nous servir à comparer les dates
    function ComparerDate(DateEntree) {
      //On déclare une variable qui va accueillir les différentes parties de la date
      // Et une autre qui contient les mois
      var dateMsgSplit,
      listeMois = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil ','Aoû', 'Sep', 'Oct', 'Nov', 'Déc '];
      
      //On va "split" la date qu'on a récupéré par les espaces. On va récupérer un tableau comme ceci [le, jour de la semaine, jour, mois, année, heure]
      //On récupère le jour, le mois et l'année
      dateMsgSplit=DateEntree.split(" ");
      var jourCreation = dateMsgSplit[2],
      moisCreation = dateMsgSplit[3],
      anneeCreation = dateMsgSplit[4];

      //On récupère l'index qui correspond à notre mois récupéré
      var nbmonth=listeMois.indexOf(moisCreation);

      // On récupère la date du jour + le jour, le mois et l'année.
      var dateNow = new Date(),
      day = dateNow.getDate(),
      month = dateNow.getMonth(),
      year = dateNow.getFullYear();
      
      //On crée une variable au format date qui est notre date de dernière réponse
      // La date max (notre date + 6 jours)
      // La date du jour
      var dateCreation = new Date(anneeCreation, nbmonth, jourCreation),
      nbDateMax =  new Date(anneeCreation, nbmonth, dateCreation.getDate() + 6),
      nbDateToday =  new Date(year, month, day);

      // On met toutes ces dates en millisecondes en fait, ça na vous ressortir des nombres qu'on va pouvoir comparer
      dateCreation = dateCreation.getTime();
      nbDateMax = nbDateMax.getTime();
      nbDateToday = nbDateToday.getTime();
      
      //Si la date d'aujourd'hui est après notre date max, on retourne "vrai",
      //sinon, on retourne "faux"
      if( nbDateToday > nbDateMax){
        return true;
      }else{
        return false;
      }
    }
    
  //On parcours la listes des sujets, et pour chacun
   //si on trouve la class "LastPostDate" on va récupérer cette date
   // Si l'image qui est présente dans l'icône est celle que l'on cherche
   //On appelle la fonction qui compare les dates
   // Si le retour est "true" on retire l'image
   $('.statused tr').each(function(){
    if($(this).find('.LastPostDate')){
      var dateMsg = $(this).find('.LastPostDate').text();
      if($(this).find('.tdtopics .case_icone img').attr('src')=="URL DE TON IMAGE"){

       if(ComparerDate(dateMsg)){
          $(this).find('.tdtopics .case_icone img').css("display","none");
       }      
     }
   }
 });
  
    //On parcours la listes des messages, et pour chacun
   //si on trouve la class "topic-date" on va récupérer cette date
   // Si l'image qui est présente dans l'icône est le "nouveau"
   //On appelle la fonction qui compare les dates
   // Si le retour est "true" on retire l'image
   $('.postmain').each(function(){
    if($(this).find('.topic-date')){
     var dateMsg = $(this).find('.topic-date').text();
     if($(this).find('.icon_message img').attr('src')=="URL DE TON IMAGE"){
       if(ComparerDate(dateMsg)){
         $(this).find('.icon_message img').css("display", "none");
       }
     }
   }
 });

 });

Pour remplacer l'image et non la supprimer
Si tu veux remplacer l'image dans la supprimer (par exemple passer de "En cours" à "Archivé" suite à un délestage automatique), il te suffit de remplacer, quelque soit ton cas de figure, les ligne suivantes :
Code:
$(this).find('.tdtopics .case_icone img').css("display","none");
par
Code:
$(this).find('.tdtopics .case_icone img').attr('src','URL DE LA NOUVELLE IMAGE');

et
Code:
$(this).find('.icon_message img').css("display", "none");
par
Code:
$(this).find('.icon_message img').attr('src','URL DE LA NOUVELLE IMAGE');



Si tu rencontres des difficultés avec ce tutoriel, ou si tu vois un souci dans un script ou autre, n'hésite surtout pas à le dire, soit à la suite de ce message, soit dans la zone de questions, nous te répondrons dans les plus brefs délais.

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