[PHPBB3] Couleur pour évènement à venir

Hello Serge,
alors peux tu tester ce script en remplacement:

Code:

//Derniers évènements
    $(function() {
      $.get( "/events", function( data ) {
       
        var f_id = 23;
       
        var version = $('.bodylinewidth')[0] ? 0 :
          document.getElementById('phpbb') ? 1 :
          $('.pun')[0] ? 2 :
          document.getElementById('ipbwrapper') ? 3 :
          document.getElementById('modernbb') ? 4 :
          document.getElementById('mpage-body-modern') ? 5 :
          'badapple';
   
        var vdata = {
          ev_item : ['.EV_Row', '.EV_Item', '.EV_Item', '.EV_Item', '.EV_Item', ''][version],
          f_closest : ['tr', 'li.row', 'tr', 'tr', 'li.row', '.forum-content'][version],
          f_content_class : ['gensmall', 'eventInForum', 'eventInForum', 'eventInForum', 'eventInForum', 'eventInForum'][version],
          f_infos_splitter : [' ', ' ', '<i class="ion-calendar"></i> ', '<i class="ion-calendar"></i> ', '<i class="ion-calendar"></i>', ''][version],
          f_child_topics : ['td.row3', 'dd.topics', 'td.tc2', 'td:eq(1)', 'dd.topics', ''][version],
          f_child_posts : ['td:eq(3)', 'dd.posts', 'td.tc3', 'td:eq(2)', 'dd.posts', '.forum-statistics'][version],
          f_child_lastposts : ['td.row3.over', 'dd.lastpost', 'td.tcr', 'td.row1:not(.centered)', 'dd.lastpost', '.forum-lastpost-time'][version],
          separator : ['<br />', '<br />', '<br />', '<br />', '<br />', ''][version]
        };
   
        if( $('.EV_List', data).length ) {
          var count_future = 0,
              count_past = 0,
              nextEvent = "Aucun",
              date = '',
              location = '';
         
          if( $( ".EV_List[id*='new']", data ).length ) {
            var number=$(this).length;
       
            var future = $( ".EV_List[id*='new']", data ),
           
                next = $(vdata.ev_item + ' .EV_ItemTitle:first', future).find('a'),
                infos = $(vdata.ev_item + ' .EV_ItemTitle:first', future).find('p').html();
           
            if( version != 5 ) { /* not displayed on mobile version */
              if( infos.search( vdata.f_infos_splitter ) != '-1' ) {
                var infos = infos.split( vdata.f_infos_splitter ),
                    date = infos[1].replace(/ /g, ''),
                    location = infos[0].replace(/ /g, '');
              } else {
                var date = infos,
                    location = '';
              }
            }
           
            var count_future = $('.EV_ItemTitle', future).length,
                nextEvent = '<a href="' + next.attr('href') +'">' + next.text() + '</a>' + vdata.separator + date + vdata.separator + location;
          }
   
          if( $( ".EV_List[id*='old']", data ).length ) {
            var past = $( ".EV_List[id*='old']", data );
            var count_past = $('.EV_ItemTitle', past).length;
          }
   
          if( $('a[href^="/f'+ f_id +'-"]').length ) {
            var t_forum = $('a[href^="/f'+ f_id +'-"]'),
                t_closest = t_forum.closest( vdata.f_closest );
         
          if( version == 5) {
            t_forum.attr('href', '/events');
            t_forum.find( vdata.f_child_posts ).html('<span class="'+ vdata.f_content_class +'">' + count_future + ' à venir</span>');
            t_forum.find( vdata.f_child_lastposts ).html('<span class="'+ vdata.f_content_class +'">Prochain : ' + nextEvent + '</span>');
          } else {
            t_forum.attr('href', '/events');
            t_closest.find( vdata.f_child_topics ).html('<span class="'+ vdata.f_content_class +'">' + count_past + ' passé' + ((count_past > 1) ? "s" : "") +'</span>');
            if(count_future==0)
            {
            t_closest.find( vdata.f_child_posts ).html('<span class="'+ vdata.f_content_class +'">' + count_future + ' à venir</span>');
            }
            else
            {
            t_forum.closest('li').addClass('event');
            t_closest.find( vdata.f_child_posts ).html('<span class="more_event'+ vdata.f_content_class +'">' + count_future + ' à venir</span>');
            }

           
            t_closest.find( vdata.f_child_lastposts ).html('<span class="'+ vdata.f_content_class +'">Prochain : ' + nextEvent + '</span>');
          }
          } else {
            console.log('%c Error : Forum '+ f_id +' doesn\'t exist.', 'background: #E54732; color: white; display: block;');
          }
        } else if(data.search('afficher pour le moment') != '-1') {
          console.log('%c Error : There is no event created yet.', 'background: #E54732; color: white; display: block;');
        }
      }).fail(function() {
        console.log('%c Error : The events aren\'t activated. If you are the forum administrator, please check in your administration panel.', 'background: #E54732; color: white; display: block;');
      });
    });

Normalement si tu as un ou des événement(s) a venir , tu devrais avoir un background rouge sur toute la largeur et le texte rouge.

Je n'ai pas trop saisi ta demande concernant:

Et/ou mettre en rouge l'image du dterm (comme quand il y a u nouveau message) ou l'image du titre du forum Evènement.

Le script va ajouter une class à la balise li et une class à la balise span (xx a venir) .

A partir de là, tu pourra personnaliser tout cela:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*EN CAS DE PROCHAIN EVENEMENT*/
li.M14_event{background:yellow;}
/*ON COLORISE EN CAS OU PROCHAIN EVENEMENT*/
.M14_more_event{color:red;}


Penser a cliquer sur le bouton

Bonjour Philippe,

Merci pour ton script.

ça ne fonctionne pas chez moi.
Il me semble qu'il en manque un bout, je ne vois pas l'ajout des 2 class que tu sites.

Je n'ai pas trop saisi ta demande concernant:
Et/ou mettre en rouge l'image du dterm (comme quand il y a u nouveau message) ou l'image du titre du forum Evènement.

Je pensais à ces 2 images Phil:

Re Serge,
les class ajoutées se trouvent ici dans le script:

Code:

 else
            {
            t_forum.closest('li').addClass('event');
            t_closest.find( vdata.f_child_posts ).html('<span class="more_event'+ vdata.f_content_class +'">' + count_future + ' à venir</span>');
            }

Ensuite, j'ai un script similaire ou l'on pourra faire presque ce que l'on souhaite.
Mais il faudra attendre demain car pour ce soir je vais me
consacrer un peu de temps de repos.

Re Phil,

Tu as bien raison de te consacrer du temps de repos, moi j'avoue avoir du mal et le temps passe trop vite.

Pour le script, je n'ai pas compris pour les class. D'après ton css, je pensais trouver "M14_event" et "M14_more_event"

Saches que rien ne presse Phil, et si j'ai bien compris tu as un script différent et meilleur.

Prends soin de toi et passe une bonne soirée l'ami.



Edit:
Pour que ton script fonctionne, j'ai remplacé ton css par celui-ci:

Code:


/*EN CAS DE PROCHAIN EVENEMENT*/
li.row.event{background:yellow;}
/*ON COLORISE EN CAS OU PROCHAIN EVENEMENT*/
.more_eventeventInForum{color:red;}


Mais je vais attendre ton script de demain Phil.

Hello Serge,
alors toutes mes excuses car j'avais déjà anticipé ma nouvelle css,
c'est logique que rien ne fonctionnait .

Alors normalement, le script suivant doit:
Affichera l'identique (ou presque) et aura des class personnalisées (commentées).

Si le script trouve le lien pour afficher les derniers événements passés:



Alors il donnera la totalité sur l'index.
Le script précédent ne le prenait pas en compte!!

On repart donc à zéro mon ami.


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur l'index.



Déposer ceci:

Code:


//Derniers évènements
$(function() {
  var fofo=$('a.forumtitle[href^="/f23-"]');
$.get("/events", function( data ) {
var news=$(data).find('ul[id="#EV_LIST_new"]').find('li.EV_Item.row').length;
var old=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_Item.row').length;
var newsonelink=$(data).find('ul[id="#EV_LIST_new"]').find('.EV_ItemTitle:first a[href]').attr('href');
var newsonetext=$(data).find('ul[id="#EV_LIST_new"]').find('.EV_ItemTitle:first a[href]').text();
var newsonetextdate=$(data).find('ul[id="#EV_LIST_new"]').find('.EV_ItemTitle:first p').text();
var eventNext=$(data).find('ul[id="#EV_LIST_old"]').find('a[href$="/events?page=old"]').length;
$.get("/events?page=old", function( data ) {
var eventNext_texte=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_Item.row').length;
if(fofo){fofo.attr('href', '/events');
if(old)
{
fofo.closest('li').find('dd.topics').html('<span class="M14_old">'+old+' passé(s)</span>');
}
if(eventNext)
{
fofo.closest('li').find('dd.topics').html('<span class="M14_old">'+eventNext_texte+' passés</span>');  
}  
if(news)
{
fofo.closest('li').addClass('LI_M14_news').find('dd.posts').html('<span class="M14_news">'+news+' a venir</span>');
fofo.closest('li').find('dd.lastpost').html('<span class="M14_news_last">Prochain :<a href="'+newsonelink+'">'+newsonetext+'</a> <br /> <i>'+newsonetextdate+'</i></span>');
}
if(!news)
{
fofo.closest('li').find('dd.posts').html('<span class="M14_news_none">Aucun</span>');
fofo.closest('li').find('dd.lastpost').html('<span class="M14_news_none">Prochain : Aucun</span>');}}
});});});


Penser a cliquer sur le bouton




Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*SI NOUVEL EVENEMENT*/
.LI_M14_news .dterm img
{
 background:red;
}

/*LE NOMBRE D EVENEMENT PASSES CASE SUJET*/
.M14_old
{
  color:green;
}
/*LE NOMBRE D EVENEMENT A VENIR CASE MESSAGE*/
.M14_news
{
color:darkred;
}
/*PAS D EVENEMENT A VENIR CASE MESSAGE*/
.M14_news_none
{
 color:black;
}
/*PROCHAIN EVENEMENT TEXTE CASE DERNIERS MESSAGES*/
.M14_news_last
{
color:black;  
}
/*PROCHAIN EVENEMENT LIEN CASE DERNIERS MESSAGES*/
.M14_news_last a
{
  color:darkgreen!important;
}
/*PROCHAIN EVENEMENT DATE CASE DERNIERS MESSAGES*/
.M14_news_last i
{
  color:#20aec8;
}



Penser a cliquer sur le bouton



L'aperçu :




Tu as aussi ce script qui si pas d'évènements récents affichera dans la case des derniers messages le lien avec le texte et au survol une infobulle mentionnant "Dernier évènement":

Code:

//Derniers évènements
$(function() {
  var fofo=$('a.forumtitle[href^="/f23-"]');
$.get("/events", function( data ) {
var news=$(data).find('ul[id="#EV_LIST_new"]').find('li.EV_Item.row').length;
var old=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_Item.row').length;
var oldonelink=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_ItemTitle:first a[href]').attr('href');
var oldonetext=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_ItemTitle:first a[href]').text();
var oldonetextdate=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_ItemTitle:first p').text();
var newsonelink=$(data).find('ul[id="#EV_LIST_new"]').find('.EV_ItemTitle:first a[href]').attr('href');
var newsonetext=$(data).find('ul[id="#EV_LIST_new"]').find('.EV_ItemTitle:first a[href]').text();
var newsonetextdate=$(data).find('ul[id="#EV_LIST_new"]').find('.EV_ItemTitle:first p').text();
var eventNext=$(data).find('ul[id="#EV_LIST_old"]').find('a[href$="/events?page=old"]').length;
$.get("/events?page=old", function( data ) {
var eventNext_texte=$(data).find('ul[id="#EV_LIST_old"]').find('.EV_Item.row').length;
if(fofo){fofo.attr('href', '/events');
if(old){fofo.closest('li').find('dd.topics').html('<span class="M14_old">'+old+' passé(s)</span>');}
if(eventNext){fofo.closest('li').find('dd.topics').html('<span class="M14_old">'+eventNext_texte+' passés</span>');  }  
if(news){fofo.closest('li').addClass('LI_M14_news').find('dd.posts').html('<span class="M14_news">'+news+' a venir</span>');
fofo.closest('li').find('dd.lastpost').html('<span class="M14_news_last">Prochain :<a href="'+newsonelink+'">'+newsonetext+'</a> <br /> <i>'+newsonetextdate+'</i></span>');}
if(!news)
{fofo.closest('li').find('dd.posts').html('<span class="M14_news_none">Aucun</span>');
fofo.closest('li').find('dd.lastpost').html('<span class="M14_none_last" title="Dernier évènement"><a href="'+oldonelink+'">'+oldonetext+'</a> <br /> <i>'+oldonetextdate+'</i></span>');
}}});});  });

La css a ajouter:

Code:

/*PAR DEFAUT SI PAS DE NOUVEAU EVENEMENT*/
.M14_none_last a,.M14_none_last i
{
 color:black;
}

L'aperçu:

Bonjour Philippe,

Impec ce dernier développement!

ça marche à merveille et on a tous les éléments pour adapter à sa sauce

Un grand merci l'ami pour tout ça.

De rien Serge,