Problème de déplacement des champs profil sur onglets

[d-elirium]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://test-delirium-mv.forumactif.com/

Description du problème

bonsoir, je me glisse par ici car j'ai tenté de mettre en place ce tutoriel sans résultat escompté. je souhaite déplacer certains champs profil des sujets dans le deuxième onglet "noirs désirs", sous l'avatar, mais après pas mal d'essais je désespère. je ne sais pas si cela vient d'une incompréhension de ma part vis à vis de la mise en place des codes ou si cela vient des onglets en eux-mêmes. j'ai d'abord essayé de déplacer le champ "localisation" et l'on peut voir que le label bug comme s'il y avait duplicata au lieu de se trouver dans le bloc "tabBlock-pane2".

j'ignore si ce sera suffisant mais voici une partie des codes que j'ai installé :

HTML :

Code:

    <div class="io_interne_gauche">
    <div class="io_interne_name">{postrow.displayed.POSTER_NAME}</div>
   
    {postrow.displayed.POSTER_AVATAR}
        <div class="io_interne_rank">{postrow.displayed.POSTER_RANK_NEW}</div>
    <div class="io_interne_profile">

     
      <div class="tabBlock">
  <ul class="tabBlock-tabs">
    <li class="tabBlock-tab is-active">corvus</li>
    <li class="tabBlock-tab">noirs désirs</li>
  </ul>
  <div class="tabBlock-content">

    <div class="tabBlock-pane">
    <!-- BEGIN profile_field -->
          <div class="champ_profil">
      <b>{postrow.displayed.profile_field.LABEL}</b> :
    {postrow.displayed.profile_field.CONTENT}
    {postrow.displayed.profile_field.SEPARATOR}
      </div>
      <!-- END profile_field -->
      </div>
   
    <div class="tabBlock-pane2">
     
<div class="cible-champ-localisation"></div>
     
      </div>
   
  </div>
</div>

     
    </div>
  </div>

CSS :

Code:

.io_interne_gauche {
background: #d5d5d5;
padding: 10px;
width: 220px;
color: #000;
min-height: 700px;
border-radius: 5px;
}

.io_interne_droite {
padding: 10px;
width: 578px;
font: 11px 'Open Sans';
}

.io_interne_name {
margin: 0 0 5px 0;
text-align: right;
width: 200px;
}

.io_interne_name a {
font: 14px var(--family3);
text-transform: uppercase;
color: #000;
text-decoration: underline !important;
}

.io_interne_name a strong {
font-weight:normal;
}

.io_interne_avatar {
overflow:hidden;
}
.io_interne_avatar img {
width:200px;
height:320px;
}

.io_interne_rank {
background: var(--color-e);
font:7px var(--family3);
letter-spacing: 1px;
text-transform: uppercase;
color:#fff;
text-align:center;
padding:1px;
margin:5px 0px;
width: 200px;
border-radius:3px;
}

.io_interne_profile {}

.unstyledList, .tabBlock-tabs {
list-style: none;
margin: 0;
padding: 0;}

.tabBlock-content {
overflow:hidden;
padding:5px;
background: #dfdfdf;
width: 200px;
}

.tabBlock-pane {
font: 11px 'Open Sans';
color: #6c6c6c;
text-align: justify;
text-transform: lowercase;
max-height: 233px;
overflow: auto;
scrollbar-width: none;
line-height: 1em;
}

.tabBlock-pane span {}

.tabBlock-pane b {
text-transform:lowercase;
font: 11px 'Open Sans';
font-weight:900;
}

.tabBlock-pane .label {
text-decoration:none;
box-shadow: inset 0 -5px 0 #cdcdcd;
}

.taBlock-pane2 {
font: 11px 'Open Sans';
color: #6c6c6c;
text-align: justify;
text-transform: lowercase;
max-height: 233px;
overflow: auto;
scrollbar-width: none;
line-height: 1em;
}

.tabBlock-pane:last-child a {
display:none;
}

.tabBlock-pane hr {
border: 0 none #ebebeb;
border-top: 1px solid #ebebeb;
}

.tabBlock-tab {
-webkit-transition: .1s ease-in-out;
background:#dfdfdf;
color: #000;
cursor: pointer;
display: inline-block;
float: none;
margin-bottom: 5px;
padding:1px 0 2px 0;
transition: .1s ease-in-out;
width: 100px;
font: 8px var(--family1);
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
}

.tabBlock-tab::before, .tabBlock-tab::after {
content: "";
display: block;
height: 4px;
position: absolute;
-webkit-transition:all 300ms;
transition:all 300ms;
}

.tabBlock-tab.is-active {
position: relative;
z-index: 1;
text-decoration: none;
}

.tabBlock-tab.is-active::before {
background-color: #fff;
}

.tabBlock-tab.is-active::after {}

.tabBlock-pane > :last-child {
margin-bottom: 0;
}

.tabBlock-tab:first-child {
margin-right:5px;
}

.tabBlock-pane br:first-child {
display: none;
}

.tabBlock-tab:last-child {
width:95px;
}

.tabBlock-pane img {
margin: auto;
max-width: 188px;
}

JS des onglets profil :

Code:

var TabBlock = {
  s: {
    animLen: 00
  },
 
  init: function() {
    TabBlock.bindUIActions();
    TabBlock.hideInactive();
  },
 
  bindUIActions: function() {
    $('.tabBlock-tabs').on('click', '.tabBlock-tab', function(){
      TabBlock.switchTab($(this));
    });
  },
 
  hideInactive: function() {
    var $tabBlocks = $('.tabBlock');
   
    $tabBlocks.each(function(i) {
      var
        $tabBlock = $($tabBlocks[i]),
        $panes = $tabBlock.find('.tabBlock-pane'),
        $activeTab = $tabBlock.find('.tabBlock-tab.is-active');
     
      $panes.hide();
      $($panes[$activeTab.index()]).show();
    });
  },
 
  switchTab: function($tab) {
    var $context = $tab.closest('.tabBlock');
   
    if (!$tab.hasClass('is-active')) {
      $tab.siblings().removeClass('is-active');
      $tab.addClass('is-active');
 
      TabBlock.showPane($tab.index(), $context);
    }
  },
 
  showPane: function(i, $context) {
    var $panes = $context.find('.tabBlock-pane');
 
 
    $panes.slideUp(TabBlock.s.animLen);
    $($panes[i]).slideDown(TabBlock.s.animLen);
 
  }
   
};

$(function() {
  TabBlock.init();
});

JS pour déplacer les champs profil :

Code:

/**
* Script for Forumotion
* Gives a unique identifier to profile fields in posts
* optionnally moves said fields in other containers in the post
*
* Script pour ForumActif
* Attribue un identifiant unique aux champs de profil dans les messages
* Optionnellement, permet de déplacer ces champs de profil
*
* Emplacement : sur les sujets
* Contributeurs : Flerex, Monomer, 'Christa Lostmindy
*/

!(function () {
  const SETTINGS_PROFILE = {
      semicolon: false, //false = retire les (:) après un nom de champ
      selectorField: '.champ_profil', //Le sélecteur d'un champ de profil
      selectorPost: '.post', //Le sélecteur d'un message entier
 
      // Optionnel : déplacer les éléments
      moveFromTo : [
          {
              target : '.tabBlock-pane2',
              fields : ['localisation',]
          },
          {
              target : '.classeCible2',
              fields : ['elementDeplace5', 'elementDeplace6']
          }
      ]
  },


  /**
    * Turns the given string into a slug
    * Transforme la chaine de caractères donnée en identifiant
    * @param {String} str The field text label
    * @returns {String} The newly generated slug
    */
  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(/-+$/, '');
  },
 
  /**
    * Find if a given field's slug is among the list of fields that should be moved elsewhere, and returns the selector of the target
    * Vérifie qu'un identifant attribué à un champ fait partie de la liste de champs à déplacer, et renvoie le sélecteur de la cible
    * @param {String} slug The slug attributed to the field
    * @return {String} The selector of the target if the tested field should be moved
    */
  findTarget = (slug) => {
      let target;
      SETTINGS_PROFILE.moveFromTo.forEach(i => {
          if (i.fields.includes(slug)) target = i.target;
      });
      return target;
  },
 
  main = _ => {
      document.querySelectorAll(SETTINGS_PROFILE.selectorField).forEach(champ => {
          const label = champ.querySelector('.label'),
          name = label.textContent.replace(/ *: *$/, ''),
          slug = slugify(name);
 
          champ.classList.add("field-" + slug);
 
          let movingSomewhere = findTarget(slug);
          if (movingSomewhere) {
              champ.closest(SETTINGS_PROFILE.selectorPost).querySelector(movingSomewhere)?.appendChild(champ);
          }
         
          label.textContent = SETTINGS_PROFILE.semicolon ? name + ': ' : name;
      });
 
  };
  document.addEventListener('DOMContentLoaded', main);
})();

si quelqu'un peut m'éclairer, je vous remercie d'avance.

[Toryudo]

Bonjour !

Chez vous, selectorPost n'est pas .post mais .io_interne_total, vous avez juste à changer cette ligne dans le "JS pour déplacer les champs profil" :

Code:

selectorPost: '.io_interne_total', //Le sélecteur d'un message entier

Je pense qu'il y a d'autres problèmes, parce que .tabBlock-pane2 n'est pas masqué automatiquement, mais je vous laisse tenter ?

[d-elirium]

Bonsoir, merci beaucoup pour votre réponse!    Ne m'y connaissant pas en JS (m'étant aidée de codes libre-service) j'ai tenté quelques recherches pour ce problème mais j'ai du mal à cerner d'où il vient. J'avais renommé .tabBlock-pane pour .tabBlock-pane2 car je me suis dis que ça aurait pu venir du fait qu'il ne reconnait pas l'onglet "noirs désirs" même s'il semble s'ouvrir au clic. Mais peut-être que je ne sais pas où chercher.

[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 »

[d-elirium]

petit up, je n'ai toujours pas réussi à régler ce problème.

[Toryudo]

Bonjour !

Je ne vois plus les .tabBlock-pane2, est-ce que vous avez changé quelque chose depuis ?
Apparemment, les blocs se ferment bien au clic maintenant, il n'y a plus que le déplacement qui ne se fait plus.

Si c'est bien ça, je pense qu'il suffit de modifier la partie :

Code:

          {
              target : '.tabBlock-pane2',
              fields : ['localisation',]
          },

En :

Code:

          {
              target : '.cible-champ-localisation',
              fields : ['localisation',]
          },

Et normalement, ce sera bon !

[d-elirium]

bonjour, oui effectivement j'ai modifié le nom de la balise entre temps car je pense que le soucis venait en partie de là. aussi, un énorme merci car ça fonctionne à merveille désormais! je n'avais pas pensé à retenter avec '.cible-champ-localisation'. je vais noter ce sujet comme résolu (et vous créditer pour toute l'aide que vous avez pu m'apporter jusqu'ici à travers mes différents soucis en matière de codage, vos réponses sont pédagogue et j'en suis sincèrement reconnaissante).