Dégradé dans les pseudos (JS)

[Kaiji]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :

Voir l'image:

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,

Je fais suite à la réponse de Kardo que j'ai reçue dans ma précédente demande pour le même problème : https://forum.forumactif.com/t402337-degrade-de-couleur-dans-les-pseudos

J'ai fait les mêmes réglages que sur ses screens et c/c son script, mais ça ne fonctionne pas (JS et HTML bien activés, templates non-modifiés).
Plus bizarre encore, lorsque je l'active sur toutes les pages, il fait buguer les autres scripts présents (un JS d'onglets et la messagerie instantanée d'Ange Tuteur).

Quelqu'un pourrait m'aider ?

Code:

$(document).ready(function () {
  /* Définition des couleurs des groupes var NomDuGroupe = '#COULEUR' */
  var Groupe1 = '#ff0000';
  var Groupe2 = '#00ff00';
  var Groupe3 = '#0000ff';
 
  /* On boucle dans la liste de groupes */
  $('ul.profile_field_list').each(function(i, obj) {
    var Gradient = '';
    $(this).children('li').each(function(e,o) {
      if (eval(this.innerText)){
        /* On ajoute la couleur des groupes si elle existe au dégradé */
        Gradient += ','+eval(this.innerText);
        /* On applique le dégradé sur le pseudo */
        $(this).closest('td').children('.name')[0].setAttribute('style', 'background:-webkit-linear-gradient(180deg'+Gradient+')!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;');
      }
    });
  })
    /* On cache les groupes precedemment ajoutés */
  $('span.label:contains("Groupes")').hide(); 
  $('ul.profile_field_list li').hide();
});

Merci beaucoup,

Bonne journée !

[Kardo]

Bonjour,
En testant l'ancien script, j'arrive bien à l'utiliser, donc aucune idée d'où pourrait venir le problème (peut être un conflit ?)

J'ai cependant mis en place une v2 de ce script qui va directement chercher les groupes des utilisateurs ainsi que les couleurs associées pour en faire un dégradé.
Pour le faire fonctionner, il faut ajouter un id "group-legend" dans index_body à la ligne suivante :

Code:

<td class="row1"><span id="group-legend" class="gensmall">{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</span></td>

Ainsi que la classe "gradient-name" dans viewtopic_body à la ligne suivante :

Code:

<span class="name gradient-name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />

Le script fonctionne de cette façon sur le thème phpbb2 mais devrait fonctionner sur les autres versions en changeant les sélecteurs dans le js.

Code:

function ajaxGroups(){
  $.ajax({
  url: location.protocol+'//'+location.hostname+'/forum',
  cache: false,
  success: function(response) {
      waitForAnObject(response,'', '1');
    }
  });
}

function ajaxGroupsMembers(group, color){
  $.ajax({
  url: location.protocol+'//'+location.hostname+group,
  cache: false,
  success: function(response) {
      waitForAnObject(response, color,'2');
    }
  });
}

function getGroups(response){

  $(response).find("#group-legend b a").each(function(e){
    var text = this.getAttribute('href') + " = " + $(this).css('color');
    var keyValuePair = text.replace(/ /g,'').split('=');
    dict[ keyValuePair[0] ] = keyValuePair[1];
  });
  for (var key in dict){
    ajaxGroupsMembers(key, dict[key]);
  }
}


function waitForAnObject(response, color, fc){
  if ($(response).length == 0){
    console.log('empty');
    setTimeout(waitForAnObject,125);
  }
  else if (fc == '1'){    
    getGroups(response);
  }
  else if (fc == '2'){
    listUsersOfGroup(response, color);
  }
}

function listUsersOfGroup(response, color){
  UsersInGroup[color] = new Array();
  $(response).find('.gen[href^="/u"]').each(function(e){
    var usr = this.href.match(/\/u\d+$/);
    UsersInGroup[color].push(usr[0]);
  });
  assignColorsToNames();
}

function assignColorsToNames(){
  $('.gradient-name').each(function(e){
    var uhref = '';
    var gradient = '';
    uhref = $(this).find('strong a[href^="/u"]').attr('href');
    for (var key in UsersInGroup){
      console.log(UsersInGroup[key], uhref);
      if (UsersInGroup[key].indexOf(uhref) > -1){
        gradient+=','+key;
      }
    }
    if (gradient.length > 17){
       this.setAttribute('style', 'background:-webkit-linear-gradient(180deg'+gradient+')!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;');
    }
  });
}

var UsersInGroup = {};
var dict = Array();
$(ajaxGroups());

[Kardo]

Petit complément d'information, en ajoutant la classe "gradient-name" au bon endroit, il est possible de faire fonctionner ce script sur toutes les pages du forum, du moment que l'on affiche un nom d'utilisateur cliquable, comme par exemple en l'ajoutant dans topics_list_box comme suit :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
 var all_checked = true;
 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }
 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
}
</script>
<!-- END multi_selection -->

<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">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
 <th align="center" nowrap="nowrap" width="80">&nbsp;{topics_list_box.row.L_REPLIES}&nbsp;</th>
 <th align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
 <th align="center" nowrap="nowrap" width="50">&nbsp;{topics_list_box.row.L_VIEWS}&nbsp;</th>
 <th align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</th>
 <!-- BEGIN multi_selection -->
 <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
 <!-- END multi_selection -->
 </tr>
 <!-- BEGIN pagination -->
 <tr>
 <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END pagination -->
 <!-- END header_table --><!-- BEGIN header_row -->
 <tr>
 <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall">&nbsp;<b>{topics_list_box.row.L_TITLE}</b></span></td>
 </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 <tr>
 <!-- BEGIN single_selection -->
 <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
 <!-- END single_selection -->
 <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
 <!-- BEGIN icon -->
 <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
 <!-- END icon -->
 <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
 <div class="topictitle">
 {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
 <h2 class="topic-title">
 <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
 </h2>
 </div>

 <!-- BEGIN switch_description -->
 <span class="genmed">
 <br />
 {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
 </span>
 <!-- END switch_description -->
 <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>&nbsp;
 <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
 </td>

 <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
 <td class="row3" align="center" valign="middle"><span class="name gradient-name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
 <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
 <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

                  <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br /><span class="gradient-name"><strong>{topics_list_box.row.LAST_POST_AUTHOR}</strong></span> {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
<!-- BEGIN multi_selection -->
 <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
 <!-- END multi_selection -->
 </tr>
 <!-- END topic --><!-- BEGIN no_topics -->
 <tr>
 <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
 </tr>
 <!-- END no_topics --><!-- BEGIN bottom -->
 <tr>
 <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
 </tr>
 </table>
 </td>
 </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

[Kaiji]

Bonjour Kardo,

Merci infiniment de ta réponse et de ton aide.
En allant chercher l'information directement dans le groupe, est-ce que le script ne risque pas d'alourdir considérablement le forum ?

Je vais tester la v2 de ton script, merci !

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Kaiji]

Bonjour !

Ma recherche est toujours d'actualité. Le script fonctionne parfaitement, toutefois je me demande toujours s'il ne serait pas trop lourd appliqué à tout le forum ?
EDIT: Également, comment l'adapter pour les zones où le pseudo est intégré à une variable, telle que dans index_box ou index_body pour le QEEL ? Je n'arrive à le faire fonctionner que sur les span class="name"

Merci d'avance

[Kardo]

Bonjour,
Désolé pour le temps entre chaque réponse, je me suis un peu écarté des forums ces derniers jours, pour ce qui est du script, il ne s'exécute qu'une fois la page prête, donc cela ne devrait pas poser de problèmes à l'affichage pour vos utilisateurs.
Pour ce qui est du fait d'allourdir les pages, le script va juste chercher sur la page du groupe la couleur de ce dernier et si le membre est présent dans celui-ci, donc ça ne devrait pas impacter plus qu'une iframe selon moi (rien de sûr ceci dit).
De plus, le javascript n'étant pas mon domaine de prédilection, il y a sûrement moyen d'optimiser ce script.

Pour les zones où le pseudo est intégré à une variable, ça n'a pas l'air de fonctionner pour le moment, il faudrait que je refasse le sélecteur pour qu'il fonctionne dans ces cas là, mais je risque de ne pas avoir le temps de me pencher dessus ces prochains jours.
Bonne journée !

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.