Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4860

Créer un widget de sujets récents personnalisé Empty Créer un widget de sujets récents personnalisé

le Jeu 28 Nov 2019 - 17:15

Toutes versions

Créer un widget de sujets récents personnalisé

Coucou Smile

Le widget des sujets récents est utile, cependant, il est dommage de ne pas pouvoir cibler quels forums nous voulons prendre en compte. C'est donc ce que je te propose de faire ici Smile

Par exemple, voici un widget personnalisé des sujets récents de la zone Un peu de détente.



Idea Pré-requis :
  • Avoir accès aux templates,
  • Savoir utiliser les iframes.


Idea Cette astuce fonctionne pour toutes les versions de forum.

C'est parti !

Un changement de configuration

Pour ce tutoriel, il va falloir changer le format de la date. Pour cela, on va aller dans Panneau d'administration > Général > Forum > Configuration et on va choisir ce format :
Créer un widget de sujets récents personnalisé Format10

Idea Cette modification sera effective pour les visiteurs & nouveaux inscrits. En revanche, les membres vont devoir eux aussi aller faire la modification dans leur profil pour pouvoir voir les widgets.

Des modifications de template

Pour simplifier le javascript, j'ai décidé de faire quelques modifications de template pour ajouter un id et des class css Smile

Quelle que soit la version de ton forum, les changements seront à faire dans le template "topics_list_box" (Panneau d'administration > Affichage > Templates > Général).

Idea Pour la suite, choisis bien ce qui correspond à ta version de forum Smile

Exclamation Ici, je pars du template par défaut. Si ton template est modifié, n'hésite pas à nous demander un coup de pouce.

Modifications communes (sauf pour AwesomeBB)

On va commencer par entourer ceci :
Code:
{topics_list_box.row.LAST_POST_IMG}
par un span avec une class pour cibler le lien du dernier message
Code:
<span class="link-last-msg">{topics_list_box.row.LAST_POST_IMG}</span>

On va aussi entourer la date
Code:
{topics_list_box.row.LAST_POST_TIME}
par un span avec une class pour pouvoir la récupérer
Code:
<span class="date">{topics_list_box.row.LAST_POST_TIME}</span>

Pour PhpBB2

On va remplacer :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
par
Code:
<table class="forumline" id="m-liste-sjts" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>

On va également remplacer :
Code:
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr>
      <!-- BEGIN single_selection -->
par
Code:
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr class="m-sjt">
      <!-- BEGIN single_selection -->

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour PhpBB3

On va remplacer :
Code:
<!-- END multi_selection -->

  <div class="forumbg announcement">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
par
Code:
<!-- END multi_selection -->

  <div class="forumbg announcement" id="m-liste-sjts">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">

On va également remplacer :
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS} m-sjt"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
par
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour PunBB

On va remplacer :
Code:
<div class="main-content">
  <table cellspacing="0" class="table">
      <thead>
        <tr>
            <th class="tcl">{L_TOPICS}</th>
par
Code:
<div class="main-content">
  <table cellspacing="0" class="table" id="m-liste-sjts">
      <thead>
        <tr>
            <th class="tcl">{L_TOPICS}</th>

On va également remplacer :
Code:
      </thead>
      <tbody class="statused">
  <!-- END table_sticky -->
      <tr>
        <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
par
Code:
      </thead>
      <tbody class="statused">
  <!-- END table_sticky -->
      <tr class="m-sjt">
        <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour Invision

On va remplacer :
Code:
<table cellspacing="0" cellpadding="0" class="ipbtable">
            <thead>
              <tr>
                  <th class="icon"></th>
par
Code:
<table cellspacing="0" cellpadding="0" class="ipbtable" id="m-liste-sjts">
            <thead>
              <tr>
                  <th class="icon"></th>

On va également remplacer :
Code:
            <tbody>
        <!-- END table_sticky -->
              <tr>
                  <td class="row1 centered <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
par
Code:
            <tbody>
        <!-- END table_sticky -->
              <tr class="m-sjt">
                  <td class="row1 centered <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour ModernBB

On va remplacer :
Code:
<div class="forumbg">
      <ul class="topiclist topics">
        <li class="header">
par
Code:
<div class="forumbg" id="m-liste-sjts">
      <ul class="topiclist topics">
        <li class="header">

On va également remplacer :
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
par
Code:
<!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS} m-sjt"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >

Idea N'oublie pas de faire la manipulation commune Wink

Exclamation N'oublie pas de sauvegarder et publier.

Pour AwesomeBB

Ici, il y a plein de choses à changer Smile

1) On va remplacer :
Code:
<!-- END multi_selection -->

<div class="posts">
    <div class="posts-header">
par
Code:
<!-- END multi_selection -->

<div class="posts" id="m-liste-sjts">
    <div class="posts-header">

2) On va également remplacer :
Code:
<div class="posts">
    <!-- END table_sticky -->
    <div class="posts-section" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
        <div class="posts-icon {topics_list_box.row.FOLDER_CLASSNAME}">
par
Code:
<div class="posts">
    <!-- END table_sticky -->
    <div class="posts-section m-sjt" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
        <div class="posts-icon {topics_list_box.row.FOLDER_CLASSNAME}">

3) On va ensuite entourer ceci :
Code:
<a class="posts-lastpost-time" href="{topics_list_box.row.LAST_POST_IMG}">
                          <i class="material-icons">access_time</i>{topics_list_box.row.LAST_POST_TIME}
                        </a>
d'un span avec une class pour cibler le lien du dernier message
Code:
<span class="link-last-msg"><a class="posts-lastpost-time" href="{topics_list_box.row.LAST_POST_IMG}">
                          <i class="material-icons">access_time</i>{topics_list_box.row.LAST_POST_TIME}
                        </a></span>

4) Et pour finir, on va remplacer ça
Code:
<a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
par
Code:
<a href="{topics_list_box.row.U_VIEW_TOPIC}" class="topictitle">{topics_list_box.row.TOPIC_TITLE}</a>
pour ajouter une class au lien du titre afin de récupérer son texte.

Exclamation N'oublie pas de sauvegarder et publier.

Une page HTML

Tout comme si on utilisait le widget des derniers messages de FA, on va mettre tout ça sur une page HTML en mode avancé (Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des pages HTML).

Voici le contenu de cette page :
Code:
<!DOCTYPE html>
<html>
<head>
          <link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sujets Récents</title>

    <style>
 
:root{
    --hauteur-bloc: 200px;
    --hauteur-bloc-negatif: -200px;
    --vitesse-defilement: 10000ms;
}

body{
    color: #de5252;
    font-size: 13px;
    font-family: 'PT Sans', sans serif;
}

body span {
    margin-left: 25px;
    }


ul li{
    list-style-type: none;
    margin-bottom: 5px;
}
li:before {
    content: "» ";
}
     
a{
    color: #de5252;
    text-decoration: none;
}

a:hover{
    color: #e07e7e;
    text-decoration: none;
}
 
 #titre12 {
  border-bottom:1px solid #7f0101;
  box-shadow: 0px 15px 0px #fffbf5;
  color: #590000;
  font-size: 14px;
  font-family: "Armata", sans-serif;
  font-weight:bold;
  font-variant: small-caps;
}

/*** --- NE PAS CHANGER LA CSS SOUS CETTE LIGNE --- ***/
.m-d-none{
    display: none;
}

#last-subjects{
  height:  var(--hauteur-bloc);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.do-marquee .marquee {
  display: block;
  width: 100%;
  position: absolute;
  animation: marquee var(--vitesse-defilement) linear infinite;
  height: auto !important;
  top: var(--hauteur-bloc);
}

.do-marquee .marquee:hover{
  animation-play-state:paused;
  cursor: pointer;
}

@keyframes marquee {
  0% { top: var(--hauteur-bloc)); }
  100% { top: var(--hauteur-bloc-negatif); }
}

    </style>
</head>
<body>

    <div id="forum-1" class="m-d-none"></div>
    <div id="forum-2" class="m-d-none"></div>
      <div id="forum-3" class="m-d-none"></div>
 
  <span id="titre12">Zone détente :</span>
    <div id="last-subjects"><div class="marquee"></div></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script>

    ; (function () {

        // on indique l'url du forum
        var urlForum = "https://zone-pub.forumactif.com";
     
        // on indique le nombre de sujet qu'on veut afficher
        var nbSjt= 5;
     
        // on indique si les sujets doivent défiler ou non
        // true = défilement
        // false = fixe
        var defilement = false;
     
        // On récupére la liste des sujets
        var listeSjt = [],
            listeLs = [],
        // On indique les forums ou sous-forum à récupérer
        // ainsi que la div cachée dans laquelle stocker les infos
        dernierSujets = [{
      divHide: "forum-1",
      url: "/f85-discussion-generale"
          },{
            divHide: "forum-2",
      url: "/f87-jeux"
          },{
            divHide: "forum-3",
      url: "/f33-concours"
          }];
           
        /*** --- NE PAS CHANGER LE JS SOUS CETTE LIGNE --- ***/
     
        var chemin = "#m-liste-sjts .m-sjt"
        ,  cible = ".m-sjt"
        ,  dateMsgSplit
    , listeMois = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil ','Aoû', 'Sep', 'Oct', 'Nov', 'Déc '];

        // On remplit les div cachées des sujets de chaque forum
        for(var i = 0 ; i < dernierSujets.length ; i++){
          $('#'+ dernierSujets[i].divHide +'').load(''+ urlForum +''+ dernierSujets[i].url +''+ chemin +''
          );
        };

        setTimeout( function(){
            // On va parcourir chaque div cachée
            for(var i = 0 ; i < dernierSujets.length ; i++){
                // Pour trier les sujets
                triTopic(dernierSujets[i].divHide);
            };

            var contentListeSjt = "";

            for( var i = 0 ; i < nbSjt ; i ++){
            // On sauvegarde les 5 derniers messages, tous forums confondus
            contentListeSjt += "<li><a href=\""+ urlForum +""+ listeSjt[i].link +"\" target=\"_blank\">"+ listeSjt[i].title +"</a></li>";
            }

            // On affiche au bon endroit la liste
            contentListeSjt = '<ul>'+ contentListeSjt +'</ul>';
            $('.marquee').append(contentListeSjt);

        }, 800);

        function triTopic(divHide){
     
            // On parcourt chaque sujet de chaque div cachée
            $('#'+ divHide +' '+ cible +'').each( function(){
                var $this = $(this),
                    // On récupére le titre du sujet
                    title = $this.find('a.topictitle').text(),
                    // la date
                    date = $this.find('span.date').text(),
                    // et le lien vers le dernier message
                    link = $(this).find('.link-last-msg a').attr('href');
             
                // On sépare la date du message pour récupérer le jour & l'heure
        dateMsgSplit= date.split(" ");

        // Si la date est aujourd'hui
        if( dateMsgSplit[0] === "Aujourd'hui"){
          // On récupère la date du jour + le jour, le mois et l'année.
            var dateNow = new Date(),
            jourLastPost = dateNow.getDate(),
            nbmonth = dateNow.getMonth(),
            anneeLastPost = dateNow.getFullYear();

              // On récupére l'heure
              heureLastPost = dateMsgSplit[2].split(':')[0],
              minLastPost = dateMsgSplit[2].split(':')[1];

        }else if( dateMsgSplit[0] === "Hier"){
          // On récupère la date du jour + le jour, le mois et l'année.
            var dateNow = new Date(),
            jourLastPost = dateNow.getDate() - 1,
            nbmonth = dateNow.getMonth(),
            anneeLastPost = dateNow.getFullYear();

              // On récupére l'heure
              heureLastPost = dateMsgSplit[2].split(':')[0],
              minLastPost = dateMsgSplit[2].split(':')[1];

        }else{
          // Si la date est antérieure à aujourd'hui

          // On récupère la date du jour + le jour, le mois, l'année et l'heure
          var jourLastPost = dateMsgSplit[2],
              moisLastPost = dateMsgSplit[3],
              anneeLastPost = dateMsgSplit[4],
              heureLastPost = dateMsgSplit[6].split(':')[0],
              minLastPost = dateMsgSplit[6].split(':')[1];

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

        // On met la date en millisecondes pour pouvoir comparer
        var dateLastPost = new Date(anneeLastPost, nbmonth, jourLastPost, heureLastPost, minLastPost);
            dateLastPost = dateLastPost.getTime();

                // on enregistre toutes les infos
                obj = {
                    "date" : dateLastPost,
                    "link" : link,
                    "title" : title
                };

                // et on met le tout dans le tableau qui contiendra tous nos sujets
                listeSjt.push(obj);
            });

            // Une fois le tableau rempli, on le range en fonction de l'id des messages
            // les plus grands (donc les messages les plus récents) seront au début du tableau
            listeSjt.sort(function (a, b) {
              return b.date - a.date;
            });
 
        }
     
         
        // Met en place défilement
        if(defilement){
            var gestionMarquee = setInterval(function () {
                // si on doit faire défiler, on ajoute une classe
                // pour gérer l'animation en CSS
                $('#last-subjects').addClass('do-marquee');
                stopGestionMarquee();
            }, 100);
        }

        function stopGestionMarquee() {
            clearInterval(gestionMarquee);
        };

    })();

    </script>
 
</body>
</html>

Idea Le code est commenté pour que tu puisses le comprendre.

Ce que tu dois/peux modifier

Au niveau de la CSS

Tout ce qui se trouve au-dessus de "NE PAS CHANGER LA CSS SOUS CETTE LIGNE" Very Happy

Dans le HTML

Cette partie correspond au nombre de forums qu'on va observer pour récupérer les derniers messages :
Code:
<div id="forum-1" class="m-d-none"></div>
    <div id="forum-2" class="m-d-none"></div>
    <div id="forum-3" class="m-d-none"></div>
    <div id="forum-4" class="m-d-none"></div>
    <div id="forum-5" class="m-d-none"></div>
    <div id="forum-6" class="m-d-none"></div>
Ici, je vais parcourir 6 forums, du coup, il me faut 6 div cachées Smile

Si tu veux modifier le titre du bloc, c'est ici :
Code:
<h3>Les derniers messages de la zone "détente"</h3>

Dans le Javascript

Tu peux modifier ce qui se trouve au-dessus de "NE PAS CHANGER LE JS SOUS CETTE LIGNE".

La majorité des choses sont assez parlantes, je ne m'attarderai donc que sur ceci :
Code:

dernierSujets = [{
    divHide: "forum-1",
    url: "/f44-vidons-nous-la-tete"
  },{
    divHide: "forum-2",
    url: "/f12-test-public"
  },{
    divHide: "forum-3",
    url: "/f36-la-salle-d-exposition"
  },{
    divHide: "forum-4",
    url: "/f50-commandes-graphiques"
  },{
    divHide: "forum-5",
    url: "/f51-tutoriels-ressources"
  },{
    divHide: "forum-6",
    url: "/f52-libre-service"
  }];
Pour chaque forum à parcourir, on va devoir indiquer :
• son url,
• la div cachée qui récupérera la liste des sujets.

Chaque forum doit être mis entre accolade ( {}) et chacun d'eux doit être séparé par une virgule (,).

C'est tout, le js fera le reste du travail pour toi Smile

Appeler le widget

Pour finir, il te suffit d'appeler le wigdet où tu le désires en utilisant une iframe. Par exemple :

Code:
<iframe name="Sujets récents zone détente" src="http://tambouille-raleuses.forumactif.com/h1-nps-tuto-dernier-message-zone-un-peu-de-detente" marginheight="0" scrolling="no" style="width: 100%; height: 200px;" frameborder="0" align="middle"> </iframe>




Si tu as un souci pour mettre en place ce widget, tu peux compter sur nous pour t'aider Smile Rendez-vous ici ^^




Dernière édition par Miettes le Mer 4 Déc 2019 - 17:01, édité 1 fois

_________________
Féli
Féli
Messages : 665
http://feli.forumactif.org

Créer un widget de sujets récents personnalisé Empty Re: Créer un widget de sujets récents personnalisé

le Lun 2 Déc 2019 - 17:15
super chouette ça
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses