Plan hiérarchique du forum

[jpb-admin]

Consultation d'un plan qui propose une échelle hiérarchique de toutes les rubriques du forum.
Dans le panneau d'administration ce plan existe et permet de gérer toutes les rubriques du forum :

Panneau d'administration > Général > Catégories et forums

Je me suis servi de ceci en faisant des copies d'écran que j'ai coupé par la moitié pour proposer à mes membres un plan consultable du forum mais sans qu'il puissent accéder aux possibilités de modifications.

https://fanclub-vaillant.forumactif.com/t672-le-nouveau-plan-hierarchique-du-forum

En fait c'est un travail assez fastidieux pour faire les mises à jour car les rubriques sont nombreuses et évoluent sans cesse.
Je me posais donc la question de savoir s'il existait une solution plus simple et plus efficace au moyen par exemple d'un lien ou d'un javascript qui afficherait en direct l'identique du plan du P.A. mais sans la partie de droite des modifications.

J'espère que j'ai posté au bon endroit et que quelqu'un saura me répondre.
Cordialement.

EDIT modération : balises "gras" supprimées, ceci est réservé à la modération

[MlleAlys]

Bonjour,
Ce "plan" est déjà disponible pour les utilisateurs du forum dans les "jump box" en bas des forums et des sujets, et permet de se rendre directement au forum voulu sans repasser par l'index :



Ce plan est mis à jour automatiquement et les forums affichés en fonction des permissions de l'utilisateur.

Si vous le souhaitez, il est possible via javascript d'utiliser cette jump box pour créer un plan qui du coup se met également à jour automatiquement.
Cela peut par exemple être installé sur une page html dont vous afficherez le lien dans un widget ou dans la barre de navigation ou dans les liens de bas de page, afin de rester toujours facilement accessible.

[jpb-admin]

Merci "MlleAlys" pour cette réponse qui me conforte dans mon idée.

En fait j'avais déjà repéré cette jump box lors de ma première tentative d'implémentation car elle correspondait parfaitement à ce que je voulais faire pour mon plan hiérarchique.
Mais malgré plusieurs essais, mes connaissances informatique en javascript étant très limitées, je n'avais pas réussi à mettre en place cette solution d’où mon détournement imparfait et pesant.

Du coup, pourriez vous m'en dire plus sur ce fameux javascript qui me permettrait d'utiliser cette jump box pour créer un plan qui se mettrait également à jour automatiquement et à installer sur une page html et me permettrait d'afficher le lien dans un widget ou dans les liens de bas de page, afin de rester toujours facilement accessible.

Pour moi ce serait la solution idéale mais je suis incapable sans aide de mettre cela en place. Je vous remercie par avance si vous pouviez m'accorder un peu de votre temps et de vos connaissances.

Cordialement

EDIT modération : balises "gras" supprimées, ceci est réservé à la modération

[MlleAlys]

Alors voici le code que j'avais pour ce résultat sur phpbb3 :



A noter que :

- Depuis la première fois que j'avais utilisé le code pour générer automatiquement l'arborescence du forum à partir de la jumpbox, j'ai dû le modifier quelques fois car cette dernière avait été légèrement modifiée : le plan était bien toujours là, mais il n'était plus cliquable car les liens vers les forums avaient disparu. Je ne sais pas si c'est courant voire voulu que forumactif modifie la jumpbox, et la correction à faire dans ce cas pour retrouver les liens n'est pas très compliquée, mais à noter que ça peut arriver.

- Je ne maîtrise pas assez le javascript pour affirmer que le code est optimal, notamment la partie "barre de recherche" qui est un patchwork et bidouillages de codes trouvés en ligne ^^" A priori ça fonctionne sans aucun souci sur mon forum test, mais peut être que quelqu'un qui maîtrise mieux que moi dira que c'est plutôt moche ?


Bref, pour créer cette page telle que sur la capture au dessus (qu'on pourra modifier par la suite si vous le souhaitez) :

- Rendez-vous dans modules > gestion des pages html > "création en mode avancé".
- Titre : "Plan du forum"
- Voulez-vous utiliser le haut et le bas de page de votre forum ? OUI
- Utiliser cette page en tant que page d'accueil ? NON
- Contenu de la page : Copiez/collez le code suivant :

Code:

<div id="truc" style="display:none;"><!-- pour charger la jumpbox--></div>

<div class="panel">
  <h1>Plan du forum</h1>

  <ul id="planautre">
        <li>Navigation
          <ul>
            <li><a href="/faq">Foire aux questions</a></li>
            <li><a href="/search">Rechercher</a></li>
            <li><a href="/memberlist">Membres</a></li>
            <li><a href="/contact">Nous contacter</a></li>
          </ul>
        </li>
  <br/>
    <li>Vie du Forum
      <ul>
        <li><a href="/t7-">Règlement</a></li>
        <li><a href="/search?search_id=newposts">Nouveaux messages</a></li>
        <li><a href="/latest">Sujets du mois</a></li>
        <li><a href="/images">Images partagées</a></li>
        <li><a href="/t136-">Sondages</a></li>
      </ul>
    </li>
    <br/>
        <li>Profil
          <ul>
            <li><a href="/profile?mode=editprofile">Mes informations et options</a></li>
            <li><a href="/privmsg">Ma messagerie privée</a></li>
            <li><a href="/search?search_id=watchsearch">Mes sujets suivis</a></li>
            <li><a href="/search?search_id=egosearch">Mes messages postés</a></li>
            <li><a href="/?mode=delete_cookies">Supprimer les cookies</a></li>
          </ul>
        </li>
  </ul>
  

  <input id="rechercheText" placeholder="Chercher un forum..."/> <button onclick="recherchePlan()"> Chercher </button>
  <br/>
  <br/>
  <ul id="arbo"><!-- emplacement de l'arborescence automatique--></ul>
  
  <div style="clear:both;"></div>
</div>



<script type="text/javascript"> // -------------------- IMPORTATION JUMBOX DANS #ARBO
  $("#truc").load('/f4- form[name="jumpbox"] select[name="selected_id"]', function(){
    var arbo="";
    $( '#truc option' ).each( function() {
      nom = $(this).text();
      if ( $(this).attr('fix') == "any" ) {
        lien = $(this).attr('value');
        arbo = arbo + '<li><a href="/' + lien + '-">' + nom + '</a></li>';
      }
      else {
        arbo = arbo + '<li>' + nom + '</li>'
      };
    });
    $( '#arbo' ).append( arbo );
  $('#arbo li:first-child').html('<a href="/">Index</a>');
  });
</script>



<script type="text/javascript"> // -------------------- LIEN ADMINSITRATION
  $(document).ready(function(){
  if($('#page-footer [href^="/admin"]').length){
  $('#planautre li:first-child ul').prepend('<li><a href="/admin">Panneau d\'administration</a></li>');
  };
  });
</script>


<script type="text/javascript"> // --------------------BARRE DE RECHERCHE
  //pour considérer identiques les majuscules et minuscules  
  jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
  
  //pour valider la recherche en appuyant sur entrer
  $("#rechercheText").on('keyup', function (e) {
    if (e.keyCode == 13) {
  recherchePlan()
    }
});
  
  // pour chercher et ajouter la class aux forums correspondants
function recherchePlan() {
  var rechercheText = $("#rechercheText").val();
  $('a.recherche').removeClass('recherche');
  if ( rechercheText == ""){return;};
  $( "#arbo a:contains('"+rechercheText+"')" ).addClass('recherche');
  if( $(".recherche").length ){
    $('html, body').animate({scrollTop: ($('.recherche').first().offset().top -100 )},1000);
  } else {
  alert('Aucun forum trouvé contenant "'+ rechercheText +'"');
  };
}
</script>



<style>
  #page-body {
  text-align: center;
  font-size: 1.3em;
}
  .panel {
  border-radius: 5px;
  padding: 0.2em 2em 2em;
  margin: 1em 0;
  line-height: normal;
  font-size: 1em;
  text-align:left;
  }
  .panel a {
  text-decoration: none !important;
  }
  .panel h1 {
  font-size:1.5em;
  text-transform: uppercase;
  text-align: center;
}
  #arbo li {
  list-style: none;
  list-style-type: none;
}
  ul#planautre {
  text-align: right;
  float: right;
}
  ul#planautre ul li:after {
    content: " --|";
}
  .panel a.recherche {
    background: yellow;
}
  .panel button, .panel input {
    padding: 0.2em 0.3em;
    font-size: 1em;
    border: 1px solid grey;
    outline: none;
    vertical-align: middle;
    line-height: normal;
}
  .panel input {
    cursor: text;
}
  .panel button {
  cursor: pointer;
  }
</style>

- cliquez sur "valider".
=> Votre page a été crée.



Pour afficher la page et récupérer son lien :
- Revenir à l'administration des pages html.
=> La page "plan du forum" est apparue dans la liste.
- cliquez sur l'icone de l'oeil en bout de ligne pour afficher la page crée, vérifier que le code fonctionne correctement, et récupérer l'adresse de la page (normalement, si vous n'avez pas d'autre page crée, ce devrait être /h1-plan-du-forum).



Pour afficher le lien de la page via le lien "Plan du forum" dans votre widget à droite ("Navigation") :
- Rendez-vous dans modules > gestion des widgets du forum > Modifiez le widget "navigation"
- Remplacez le lien précédent (href="/t672-le-plan-hierarchique-du-forum#6412") par le lien de la page crée (href="/h1-plan-du-forum").
- Enregistrez la modification.



Si vous souhaitez ajouter le lien "plan du forum" dans la barre de navigation de votre forum :
- Rendez-vous dans Affichage > En-tête & navigation : Ajouter un menu personnalisé
- Menu : Plan du forum
- Image : celle que vous souhaitez, par exemple https://www.zupimages.net/up/24/22/rmzu.png (que je vous conseille de réhéberger sur votre compte servimg)
- Texte : Plan du forum
- Url de redirection : Celle de la page crée : /h1-plan-du-forum
- permissions : cochez ceux qui vont pouvoir voir le lien, a priori tout le monde
- affichage : comme vous préférez
- enregistrez
- Le lien apparait en fin de liste. Utilisez les flèches à gauche pour placer le lien où vous le souhaitez dans le menu.



Si vous souhaitez afficher le lien en bas de page :
- rendez-vous dans Modules > Liens de bas de page > configuration
- Activer les liens de bas de page : OUI, puis enregistrez.
- cliquez sur le "+" à droite dans la liste pour créer un nouveau lien
- Nom : Plan du forum
- Ancre/ texte du lien : Plan du forum
- titre du lien : Plan du forum
- url du lien : celui de la page, entier : https://fanclub-vaillant.forumactif.com/h1-plan-du-forum
- no follow : non
- ouvrir dans une nouvelle fenêtre : comme vous préférez
- enregistrez.

[jpb-admin]

Bonjour et encore merci "MlleAlys" pour cette réponse et toutes vos explications, c'est le top .

En effet avec vos précisions dans la procédure à suivre et votre javascript, je n'ai eu que de très légères modifications à effectuer pour arriver à un résultat conforme à 98% à ce dont je voulais.

Quant je dit à 98 % c'est parce que seuls les widgets sur la colonne de droite ont subi une légère modification d'aspect par rapport à l'original en terme de police de caractère et de centrage, mais rien de bien méchant, c'est acceptable.

Au final je suis vraiment bluffé par votre travail qui m'a rendu un fier service et je vous remercie donc encore une fois.

Cordialement.

[MlleAlys]

Effectivement, je n'avais pas pensé aux widgets, essayez ainsi :

Code:

<div id="truc" style="display:none;"><!-- pour charger la jumpbox à partir du forum f4 accessible aux invités --></div>
 
<div class="panel plan">
  <h1>Plan hiérarchique du forum</h1>  
 
  <input id="rechercheText" placeholder="Chercher un forum..."/> <button onclick="recherchePlan()"> Chercher </button>
  <br/>
  <br/>
  <ul id="arbo"><!-- emplacement de l'arborescence automatique--></ul>
  
</div>
 
 
 
<script type="text/javascript"> // -------------------- IMPORTATION JUMBOX DANS #ARBO
  $("#truc").load('/f4- form[name="jumpbox"] select[name="selected_id"]', function(){
    var arbo="";
    $( '#truc option' ).each( function() {
      nom = $(this).text();
      if ( $(this).attr('fix') == "any" ) {
        lien = $(this).attr('value');
        arbo = arbo + '<li><a href="/' + lien + '-">' + nom + '</a></li>';
      }
      else {
        arbo = arbo + '<li>' + nom + '</li>'
      };
    });
    $( '#arbo' ).append( arbo );
  $('#arbo li:first-child').html('<a href="/">Index</a>');
  });
</script>
 
 
<script type="text/javascript"> // --------------------BARRE DE RECHERCHE
  //pour considérer identiques les majuscules et minuscules  
  jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
  
  //pour valider la recherche en appuyant sur entrer
  $("#rechercheText").on('keyup', function (e) {
    if (e.keyCode == 13) {
  recherchePlan()
    }
});
  
  // pour chercher et ajouter la class aux forums correspondants
function recherchePlan() {
  var rechercheText = $("#rechercheText").val();
  $('a.recherche').removeClass('recherche');
  if ( rechercheText == ""){return;};
  $( "#arbo a:contains('"+rechercheText+"')" ).addClass('recherche');
  if( $(".recherche").length ){
    $('html, body').animate({scrollTop: ($('.recherche').first().offset().top -100 )},1000);
  } else {
  alert('Aucun forum trouvé contenant "'+ rechercheText +'"');
  };
}
</script>
 
 
 
<style>
  #page-body {
  text-align: center;
  font-size: 1.3em;
}
  .panel.plan {
  border-radius: 5px;
  padding: 0.2em 5em 2em;
  margin: 1em 0;
  line-height: normal;
  font-size: 1em;
  text-align:left;
  }
  .plan a {
  text-decoration: none !important;
  }
  .plan h1 {
  font-size:1.5em;
  text-transform: uppercase;
  text-align: center;
}
  #arbo li {
  list-style: none;
  list-style-type: none;
}
  .plan a.recherche {
    background: yellow;
}
  .plan button, .plan input {
    padding: 0.2em 0.3em;
    font-size: 1em;
    border: 1px solid grey;
    outline: none;
    vertical-align: middle;
    line-height: normal;
}
  .plan input {
    cursor: text;
}
  .plan button {
  cursor: pointer;
  }
#right {
  font-size: 0.7rem;
}
</style>

[jpb-admin]

Désolé "MlleAlys" votre dernière modification ne change rien au problème.

Mais ne vous inquiétez pas je suis satisfait dans l'état, ce n'est juste que de la cosmétique concernant ces widgets qui au final ne sont légèrement modifiés dans leur apparence que sur cette page, en effet partout ailleurs sur le site ils retrouvent leur aspect original.

Merci encore pour votre temps et votre aide, j'apprécie vraiment.

Cordialement

[MlleAlys]

Hmmm alors je dirais que la différence ne vient pas de mon code, mais en ajoutant le css suivant dans affichage > couleurs > onglet feuille de style css, ça devrait remettre la même apparence à tous les modules quelque soit la page :

Code:



/*taille et alignement des widgets*/
.module {
  font-size: 0.8rem;
  text-align: left;
}



[jpb-admin]

YES, BRAVO, 100%, LA GRANDE CLASSE !!!! ....

Merci pour tout ....