Isoler champs de profil dans différents éléments

Bonjour à l'équipe du Blank Theme !  

Souhaitant donner un petit coup de fraîcheur au codage de mon forum (au moins pour l'optimiser un peu et remettre pas mal d'ordre), j'ai donc décidé de repartir du Blank Theme pour reprendre avec plus d'efficacité et de propreté son apparence actuelle.

En arrivant à l'affichage des profils dans les messages, j'ai souhaité déplacer les champs un peu partout. J'ai bien compris que de base, le code pour isoler les champs du profil permettait de ne les déplacer que vers un seul élément, et j'ai vu que vous aviez répondu cette question pour déplacer les champs dans 2 éléments, en adaptant le Javascript, dans ce sujet :
https://blankthemerpg.forumactif.com/t54-js-tag-utilisateur-et-champ-de-profils
Ce qui fonctionne super bien ! Sauf que, voulant me complexifier la vie (évidemment), ce n'est pas dans 2 mais bien dans 5 éléments finaux que j'aimerais déplacer ces champs de profil... Et en essayant de bidouiller, je n'arrive pas à augmenter le nombre d'éléments pouvant les recevoir.

Je souhaitais donc savoir comment augmenter ce chiffre en règle générale et à 5 en particulier !

Merci en tout cas pour le temps accordé, en souhaitant à tou.te.s celleux qui lisent une belle journée

Heyy Kietah ! Ravie que le Blank t'aide

T'as trouvé le bon poste pour t'aider effectivement ! T'es sur la bonne piste, je te laisse continuer en t'aider des commentaires que j'ai laissé dans le code.
Il faut dupliquer chaque "bloc" pour chaque élément dans lequel tu veux déplacer tes champs. Il y a un bloc au début et un bloc à la fin. N'oublie pas de leur donner des ID différents (par exemple j'avais mis moveTo et après moveTo2, mais vaut mieux être explicite pour pas te perdre).

Tu me diras ce qu'il en est !

Coucou Kim

Merci beaucoup pour cette réponse rapide ! Oui le Blank Theme est pratique pour remettre de l'ordre, je suis très contente.

Alors, c'est peut-être parce que je n'ai pas compris tes indications, ou peut-être que j'ai mal décrit mon problème, mais malheureusement ça ne fonctionne pas. Mais je vais essayer de détailler un peu plus.

En gros, quand dans le Javascript je mets ce code (celui proposé dans l'autre tutoriel et adapté au codage de mon forum) :

Code:

// PLACEMENT : Sur les sujets

    // [SPANISH] by Flerex
    // https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

    // Options, by Monomer
    // Possibilité de déplacer un champs dans un autre élément

    !function() {

       const settings = {
                    semicolon: true, // false = retire les (:) après un nom de champs
          cleanUp: true,
            
              // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
              move: ['illustration', 'champ'], // Nom du champs (exemple : 'message')
              moveTo: '.post_illus', // élément dans lequel les champs seront déplacés

              // Deuxième déplacement de champ
              move2: ['pseudo', 'champ'], // Nom du champs (exemple : 'message')
              moveTo2: '.post_rpg' // élément dans lequel les champs seront déplacés
        
       },


       slugify = str => {
            const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
            to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
            reg = new RegExp(from.split('').join('|'), 'g');

            return str.trim().toLowerCase()
                  .replace(/\s+/g, '-')
                  .replace(reg, c => to.charAt(from.indexOf(c)))
                  .replace(/&/g, '-and-')
                  .replace(/[^\w\-]+/g, '')
                    .replace(/\-\-+/g, '-')
                    .replace(/^-+/, '')
                    .replace(/-+$/, '');
        },

        hideSemicolon = (label, name) => {
            if (label.firstElementChild)
                label.lastChild.remove();
            else
                label.textContent = name;
        },

        main = _ => {

           document.querySelectorAll('.user_field').forEach(p => {
              const labelcontainer = p.querySelector('.field_label'),
              label = labelcontainer.querySelector('.label'),
                name = label.textContent.replace(/ *: *$/, ''),
              slug = slugify(name);

              p.classList.add('field-' + slug);
            
    // DEPLACER UN ELEMENT  
              if(settings.move.includes(slug)) {
              p.closest('.post_profile').querySelector(settings.moveTo).appendChild(p);
            }
    // fin

    // AJOUTER DES ELEMENTS A DEPLACER
              if(settings.move2.includes(slug)) {
              p.closest('.post_profile').querySelector(settings.moveTo2).appendChild(p);
            }
    // fin

              if (settings.cleanUp) {
                 labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
              } else if (!settings.semicolon) {
                    hideSemicolon(label, name)
              }
           });

        };

        document.addEventListener('DOMContentLoaded', main);
    }();

Voici le résultat que j'ai (avec l'illustration qui se déplace au-dessus des onglets et du coup le "pseudo" qui passe dans le contenu de l'onglet 2 ici sélectionné).
https://zupimages.net/up/23/33/4dtx.png
Tout fonctionne très bien, sans aucun problème !

Par contre, dès que je veux riper le champ "pronoms" dans l'onglet 3 en dupliquant les deux bloc "move/moveTo" en remplaçant le dernier par "move3/moveTo3", avec ce code :

Code:

// PLACEMENT : Sur les sujets

    // [SPANISH] by Flerex
    // https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

    // Options, by Monomer
    // Possibilité de déplacer un champs dans un autre élément

    !function() {

       const settings = {
                    semicolon: true, // false = retire les (:) après un nom de champs
          cleanUp: true,
            
              // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
              move: ['illustration', 'champ'], // Nom du champs (exemple : 'message')
              moveTo: '.post_illus', // élément dans lequel les champs seront déplacés

              // Deuxième déplacement de champ
              move2: ['pseudo', 'champ'], // Nom du champs (exemple : 'message')
              moveTo2: '.post_rpg' // élément dans lequel les champs seront déplacés
        
              // Deuxième déplacement de champ
              move3: ['pronoms', 'champ'], // Nom du champs (exemple : 'message')
              moveTo3: '.post_joueur' // élément dans lequel les champs seront déplacés
        
       },


       slugify = str => {
            const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
            to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
            reg = new RegExp(from.split('').join('|'), 'g');

            return str.trim().toLowerCase()
                  .replace(/\s+/g, '-')
                  .replace(reg, c => to.charAt(from.indexOf(c)))
                  .replace(/&/g, '-and-')
                  .replace(/[^\w\-]+/g, '')
                    .replace(/\-\-+/g, '-')
                    .replace(/^-+/, '')
                    .replace(/-+$/, '');
        },

        hideSemicolon = (label, name) => {
            if (label.firstElementChild)
                label.lastChild.remove();
            else
                label.textContent = name;
        },

        main = _ => {

           document.querySelectorAll('.user_field').forEach(p => {
              const labelcontainer = p.querySelector('.field_label'),
              label = labelcontainer.querySelector('.label'),
                name = label.textContent.replace(/ *: *$/, ''),
              slug = slugify(name);

              p.classList.add('field-' + slug);
            
    // DEPLACER UN ELEMENT  
              if(settings.move.includes(slug)) {
              p.closest('.post_profile').querySelector(settings.moveTo).appendChild(p);
            }
    // fin

    // AJOUTER DES ELEMENTS A DEPLACER
              if(settings.move2.includes(slug)) {
              p.closest('.post_profile').querySelector(settings.moveTo2).appendChild(p);
            }
    // fin
        
    // AJOUTER DES ELEMENTS A DEPLACER
              if(settings.move3.includes(slug)) {
              p.closest('.post_profile').querySelector(settings.moveTo3).appendChild(p);
            }
    // fin

              if (settings.cleanUp) {
                 labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
              } else if (!settings.semicolon) {
                    hideSemicolon(label, name)
              }
           });

        };

        document.addEventListener('DOMContentLoaded', main);
    }();

Voici le résultat que j'ai :
https://zupimages.net/up/23/33/n9sg.png

Comme tu peux le voir, le code javascript ne s'exécute plus du tout, même pour les deux premières occurrences : c'est le moment où je ne comprends plus ce qui ne va pas.

Mais j'ai poussé le raisonnement plus loin en me demandant pas si c'était un problème d'écriture, donc j'ai supprimé les deux blocs contenant move2/moveTo2, laissant move/moveTo et move3/moveTo3, et là ça marche parfaitement ! Donc j'ai l'impression qu'il y a une espèce de cap à 2, et pas plus, initié quelque part, sans que je ne trouve où et comment Mais il se peut plus probablement que je n'y comprenne rien du tout

Sachant qu'effectivement, je me suis rendue compte que je ne voulais pas déplacer les champs de profil dans 5 éléments différents mais 6 (et je suis pas à l'abri d'autres lubies), c'est vrai que j'aimerais bien comprendre pourquoi ça ne fonctionne pas, quelle erreur je peux bien faire pour corriger tout ça

J'espère avoir réussi à clairement exposer mon problème ! Merci énormément pour le temps consacré et la pédagogie, vraiment, et encore une fois pour le Blank Theme en général !
Je te souhaite une belle journée et un doux week-end.

Ahhh, je sais ! C'est d'ailleurs un "souci" que j'ai corrigé dans la dernière MAJ pour éviter ce genre de problème. Tu as bien modifier le script comme il fallait, en modifiant les bons ID. Il faudrait juste modifier la class dans p.closest('.post_profile') par la class qui englobe totalement un post. Ca doit normalement être .post ou .post_row, comme ça tu peux déplacer les champs vraiment n'importe où alors qu'avant ça se contenait au profil (c'est pour ça que ça marchait pour move3 et pas 2, normalement).

J'espère ne pas être à côté de la plaque non plus, j'ai un peu du mal en ce moment haha.

Coucou Kim

Merci beaucoup pour ta réponse encore une fois si rapide !

Malheureusement, je viens avec une moins bonne nouvelle puisque... ta solution ne fonctionne toujours pas
Que je remplace par ".post" ou "post_row", que j'alterne entre les deux, ou même avec "post_profil", il n'y a rien à faire : dès lors que je mets plus de 2 éléments, ça ne fonctionne plus, de la même façon que celle indiquée plus haut.

Je suis désolée de t'embêter avec ça, prends le temps qu'il te faut pour répondre, merci encore pour toute l'aide que tu apportes