Couleur et police par défaut pour un utilisateur

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonjour,

Suite à ce lien : https://forum.forumactif.com/t372814-couleur-et-police-par-defaut-pour-un-utilisateur
J'ai trouvé l'idée génialissime.

Cependant, j'ai tenté de personnaliser pour supprimer le choix du "font" qui ne m'intéresse pas. Je peux faire disparaître l'option du profil sans problème mais dès que je touche à la profondeur du code JS, tout bug dû à mon incompétence notoire à comprendre les codes JS...

Code:

jQuery(function($){
   var t = $('#text_editor_textarea');
   if(location.pathname == '/profile' && /\?mode=editprofile&page_profil=preferences/.test(location.href)){
      $('form#register .forumline tr:last').before('<tr><td class="row1"><span class="gen">Couleur de vos messages :</span></td><td class="row2"><select name="color_choice" id="my_color"><option value="default" selected>défaut</option><option value="#660000">Rouge foncé</option><option value="#FF0000">Rouge</option><option value="#FF9933">Orange</option><option value="#663300">Marron</option><option value="#FFFF00">Jaune</option><option value="#006600">Vert</option><option value="#666633">Olive</option><option value="#00FFFF">Cyan</option><option value="#0000FF">Bleu</option><option value="#000099">Bleu foncé</option><option value="#6600FF">Indigo</option><option value="#990099">Violet</option><option value="#999999">Gris</option><option value="#EEEEEE">Blanc</option><option value="#000000">Noir</option></select></td></tr><tr><td class="row1"><span class="gen">Police de vos messages :</span></td><td class="row2"><select name="font_choice" id="my_font"><option value="default" selected>défaut</option><option value="Arial">Arial</option><option value="Arial Black">Arial Black</option><option value="Comic Sans MS">Comic Sans MS</option><option value="Courrier New">Courrier New</option><option value="Georgia">Georgia</option><option value="Impact">Impact</option><option value="Sans-serif">Sans-serif</option><option value="Serif">Serif</option><option value="Times New Roman">Times New Roman</option><option value="Trebuchet MS">Trebuchet MS</option><option value="Verdana">Verdana</option></select></td></tr>');
      var lc = localStorage.color_choice, lf = localStorage.font_choice;
      if(lc == undefined && lf == undefined){ lc = 'default'; lf = 'default'; }
      $('#my_color option[value="'+lc+'"]').attr('selected', true);
      $('#my_font option[value="'+lf+'"]').attr('selected', true);
      $('#my_color option').each(function(){ $(this).css('color', $(this).val()) });
      $('#my_font option').each(function(){ $(this).css('font-family', $(this).val()) });
      var c = $('#my_color'), f = $('#my_font'), s = 'option:selected';
      c.css({'color': lc, 'font-family': lf}).on('change', function(){
         var v = $(this).find(s).val();
         $(this).css('color', v);
         f.css('color', v);
         localStorage.setItem('color_choice', v);
      });
      f.css({'color': lc, 'font-family': lf}).on('change', function(){
         var v = $(this).find(s).val();
         $(this).css('font-family', v);
         c.css('font-family', v);
         localStorage.setItem('font_choice', v);
      });
   }else if(t.length != 0){
      t.parents('form[action="/post"]').on('submit', function(){
         var i = t.sceditor('instance'), lc = localStorage.color_choice, lf = localStorage.font_choice, sc = new RegExp('\^\\[color='+lc+'\\]'), sf = new RegExp('\^\\[font='+lf+'\\]');
         if(!i.val().match(sc) && !i.val().match(sf)){
            if(lc == 'default' && lf != 'default') i.val('[font='+lf+']'+i.val()+'[/font]');
            else if(lf == 'default' && lc != 'default') i.val('[color='+lc+']'+i.val()+'[/color]');
            else if(lc != 'default' && lf != 'default') i.val('[font='+lf+'][color='+lc+']'+i.val()+'[/color][/font]');
         }
      })
   }
});

[Toryudo]

Bonjour !
Alors attendez, je vais essayer de comprendre ce que vous voulez faire. Vous souhaitez que le script que vous avez fourni affiche uniquement "Couleur de vos messages :" dans la page /profile?mode=editprofile&page_profil=preferences

Voilà qui devrait convenir :

Code:

$(function() {
   var t = $('#text_editor_textarea');
   if(location.pathname == '/profile' && /\?mode=editprofile&page_profil=preferences/.test(location.href)){
      $('form#register .forumline tr:last').before('<tr><td class="row1"><span class="gen">Couleur de vos messages :</span></td><td class="row2"><select name="color_choice" id="my_color"><option value="default" selected>défaut</option><option value="#660000">Rouge foncé</option><option value="#FF0000">Rouge</option><option value="#FF9933">Orange</option><option value="#663300">Marron</option><option value="#FFFF00">Jaune</option><option value="#006600">Vert</option><option value="#666633">Olive</option><option value="#00FFFF">Cyan</option><option value="#0000FF">Bleu</option><option value="#000099">Bleu foncé</option><option value="#6600FF">Indigo</option><option value="#990099">Violet</option><option value="#999999">Gris</option><option value="#EEEEEE">Blanc</option><option value="#000000">Noir</option></select></td></tr>');

      var lc = localStorage.color_choice;
      if(lc == undefined){
         lc = 'default';
      }

      $('#my_color option[value="' + lc + '"]').attr('selected', true);
      $('#my_color option').each(function(){
         $(this).css('color', $(this).val());
      });

      var c = $('#my_color');
      c.css({'color': lc}).on('change', function(){
         var v = $(this).val();
         $(this).css('color', v);
         localStorage.setItem('color_choice', v);
      });
   }
   else if (t.length != 0){
      t.parents('form[action="/post"]').on('submit', function(){
         var i = t.sceditor('instance'), lc = localStorage.color_choice, sc = new RegExp('\^\\[color='+lc+'\\]');
         if (!i.val().match(sc)){
            if (lc != 'default'){
               i.val('[color=' + lc + ']' + i.val() + '[/color]');
            }
         }
      })
   }
});

Ensuite, vous parlez d'une couleur en fonction du personnage, c'est là que je ne vous suis plus forcément. Si vous pouvez changer la valeur de la couleur dans le profil, comment est-ce que ça va vous permettre de changer la couleur de chaque pseudo d'un profil ? Ou alors, vous souhaitez que pour le compte qui a 10 personnages, apparaisse 10 fois le choix de la couleur ? Du style "Couleur de vos messages pour Apolline de Sieburg :", puis "Couleur de vos messages pour Blanche-Plume :", etc. ?

Pourriez-vous décrire le fonctionnement final que vous souhaiteriez avoir pour votre forum ? Ça permettrait de mieux saisir ce qu'il faut modifier !

[Kaehlyth]

Bonjour !

Merci de votre explication et de votre aide concernant la première partie. Je m'excuse d'avoir été très brouillon pour la seconde partie.

Des joueurs ont beaucoup de mal à se souvenir de la couleur de leur personnage, ce qui n'est pas un mal. Je voulais alors que la première partie que vous m'avez aidé à corriger puisse être appliqué pour chaque changement de personnage.

En quelque sorte :
Personnage 1 : couleur # fff0f9
Personnage 2 : couleur #fff4ff

Ect.

J'avais donc tenté la solution numéro deux qui allait chercher le nom de l'utilisateur et lui appliquer automatiquement une couleur mais cela n'a pas fonctionné.

J'espère avoir été plus claire.
Merci à vous !

[Toryudo]

D'accord, je comprends un peu mieux, on partirait plutôt sur le deuxième script du coup.
Puisque le template est modifié, il faut adapter un peu le script, comme ceci :

Code:

var pseudo;
var color;
function PseudoCouleur(pseudo,color){
  this.pseudo = pseudo;
  this.color = color;
}

var pseudos_couleur = new Array();
pseudos_couleur[0] = new PseudoCouleur("Naeisia", "#FF0000");

function estPseudoCouleur(pseudo){
  for(i = 0; i < pseudos_couleur.length; i++){
     if(pseudo == pseudos_couleur[i].pseudo){
       return pseudos_couleur[i];
     }
  }
  return null;
}

$(function() {
  //DANS LES SUJETS CLASSIQUES
  $(".name strong").each(function(){
     var pseudo_couleur = estPseudoCouleur($(this).text());
     if(pseudo_couleur != null){
       $(this).parents("tr.post").find("div.postbody div").css('color', pseudo_couleur.color);
     }
  });
});

Je viens de tester, ça a l'air de marcher sur votre version avec votre Template. Par contre, il va peut-être falloir combiner les deux scripts, parce que je ne suis pas sûr qu'ils s'attendent l'un l'autre : si le changement de couleur passe avant que le pseudo du personnage n'ait été modifié, il ne fera rien !

Si ça ne marche pas tout de suite, est-ce que vous pourriez rendre visible une page pour les invités, page où il devrait y avoir la modification mais où elle ne fonctionne finalement pas ?

[Kaehlyth]

Rebonjour,

J'ai testé votre seconde partie de code ! 
Me concernant en tout cas, cela fonctionne ici : https://albastrya.bbactif.com/viewtopic?t=134&topic_name#591

Le sujet était normalement déjà de base ouvert pour les invités ! 

Je vais voir si j'applique cela à un compte à sous couleur... 
Et cela fonctionne ! J'ai parlé avec "Conteuse" juste en dessous et miracle, le texte est blanc et cela, juste avec la seconde partie que vous avez fourni et non pas la toute première. 

J'ai ensuite directement rajouté la couleur au pseudo "Conteuse" et cela l'a pris automatiquement en compte ! 



Merci encore, cela n'a pas l'air de faire bug d'autre JS