Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Dégradé dans les pseudos (JS)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Dégradé dans les pseudos (JS) Empty Dégradé dans les pseudos (JS)

Message par Kaiji le Mer 25 Mar 2020 - 14:28

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:
Dégradé dans les pseudos (JS) Unknown

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();
});

Dégradé dans les pseudos (JS) Unknown

Merci beaucoup,

Bonne journée !
Kaiji

Kaiji
****

Féminin
Messages : 273
Inscrit(e) le : 06/06/2010

Voir le profil de l'utilisateur http://www.disjointedsocieties.com
Kaiji a été remercié(e) par l'auteur de ce sujet.

Dégradé dans les pseudos (JS) Empty Re: Dégradé dans les pseudos (JS)

Message par Kardo le Ven 27 Mar 2020 - 14:29

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());


Dernière édition par Kardo le Ven 27 Mar 2020 - 17:20, édité 1 fois
Kardo

Kardo
**

Messages : 69
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Dégradé dans les pseudos (JS) Empty Re: Dégradé dans les pseudos (JS)

Message par Kardo le Ven 27 Mar 2020 - 15:55

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 -->
Kardo

Kardo
**

Messages : 69
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Dégradé dans les pseudos (JS) Empty Re: Dégradé dans les pseudos (JS)

Message par Kaiji le Ven 27 Mar 2020 - 21:36

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 !
Kaiji

Kaiji
****

Féminin
Messages : 273
Inscrit(e) le : 06/06/2010

Voir le profil de l'utilisateur http://www.disjointedsocieties.com
Kaiji a été remercié(e) par l'auteur de ce sujet.

Dégradé dans les pseudos (JS) Empty Re: Dégradé dans les pseudos (JS)

Message par Chacha le Jeu 2 Avr 2020 - 9:55

Dégradé dans les pseudos (JS) UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 62268
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Dégradé dans les pseudos (JS) Empty Re: Dégradé dans les pseudos (JS)

Message par Kaiji le Ven 3 Avr 2020 - 19:42

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" silent

Merci d'avance
Kaiji

Kaiji
****

Féminin
Messages : 273
Inscrit(e) le : 06/06/2010

Voir le profil de l'utilisateur http://www.disjointedsocieties.com
Kaiji a été remercié(e) par l'auteur de ce sujet.

Dégradé dans les pseudos (JS) Empty Re: Dégradé dans les pseudos (JS)

Message par Kardo le Lun 6 Avr 2020 - 14:04

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 !
Kardo

Kardo
**

Messages : 69
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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