[Invision, ModernBB, AwesomeBB] Sélectionner des catégories à déplier/replier en un clic

Hello hello

Dans ce tutoriel, nous allons voir comment ajouter un bloc qui contient une liste de cases à cocher représentant nos catégories. Ces cases à cocher nous permettrons d'ouvrir ou fermer les catégories correspondantes.

Par exemple :

Spoiler:

Tu peux voir un exemple sur mon forum de test.

Pré-requis :
• Avoir accès aux templates du forum.

Ce tutoriel ne fonctionne que pour les forums en Invision, ModernBB et AwesomeBB.

Ici, je pars du principe que les templates sont ceux par défaut. Logiquement, le tutoriel est assez simple à appliquer même sur des templates personnalisés. Cela dit, si tu coinces, n'hésite pas à venir nous demander un coup de pouce.


Quelque soit la version de ton forum, il va y avoir 2 templates à modifier. Pour cela, on va aller dans :
Panneau d'affichage > Affichage > Templates > Général.


Juste après la balise "body"

Spoiler:

on va ajouter ceci :

Code:

<div id="content-checkbox-cate"><h2>Catégories à fermer</h2><div class="content"></div></div>

On sauvegarde et on publie.



Remplacer ça

Code:

<div class="maintitle floated clearfix">

par ça

Code:

<div class="maintitle floated clearfix" data-id-cate="{catrow.tablehead.ID}">

Remplacer ça

Code:

<li class="header">

par ça

Code:

<li class="header" data-id-cate="{catrow.tablehead.ID}">

Remplacer ça

Code:

<div class="forum-header">

par ça

Code:

<div class="forum-header" data-id-cate="{catrow.tablehead.ID}">

On sauvegarde et on publie.


Voici ensuite le javascript à n'afficher que sur l'index. Pour cela, on va aller dans Panneau d'affichage > Modules > HTML & Javascript > Gestion des codes Javascript, on va créer un nouveau javascript et cocher Sur l'index". Voici le code à y mettre. Celui-ci est commenté pour que tu puisses le comprendre.

Choisis bien celui correspondant à ta version de forum.

Code:

$(function(){
    // Une fois la page chargée
    $(document).ready( function(){
        // On crée notre liste de case à cocher
        var listCheckbox = "";
       
        // On attend que le js qui ouvre/ferme les catégories ait été exécuté
        // Pour ça, on attend 1 seconde
        setTimeout( function(){
            // On parcourt chaque catégorie
            $('div[data-id-cate]').each( function(){
                // On récupére :
                // l'id de la catégorie (idCate)
                // le titre de la catégorie (titleCate)
                // son état, c'est-à-dire si elle est ouverte ou fermée (state)
                var $this = $(this),
                    idCate = $this.attr('data-id-cate'),
                    titleCate = $this.find("h2")[0].innerHTML,
                    state = $this.find('div').attr('class');

                if(state == "expand"){
                    // si elle est fermée, notre case sera cochée
                    listCheckbox += '<p><input type="checkbox" class="checkbox-cate" checked data-ckb-id="'+idCate+'">'+titleCate+'</p>';
                }else if(state == "contract"){
                    // Si elle est ouverte, notre case ne sera pas cochée
                    listCheckbox += '<p><input type="checkbox" class="checkbox-cate" data-ckb-id="'+idCate+'">'+titleCate+'</p>';
                }
            });

            // On injecte la liste dans notre div "#content-checkbox-cate"
            $('#content-checkbox-cate .content').append(listCheckbox);
           
            // On affiche le bloc en fondu
            $('#content-checkbox-cate').toggleClass('show');
 
        }, 1000);
       
       
    });
   
    // Si on clique sur une case à cocher, on fait comme si on avait cliquer sur le bouton pour afficher/masquer la catégorie
    $('body')
        .on('change', '#content-checkbox-cate .checkbox-cate', function(){
            var idCate = $(this).attr('data-ckb-id');
       
            $('div[data-id-cate="'+ idCate +'"] > div').trigger('click');
        });
 
 });

Code:

$(function(){
    // Une fois la page chargée
    $(document).ready( function(){
        // On crée notre liste de case à cocher
        var listCheckbox = "";
       
        // On attend que le js qui ouvre/ferme les catégories ait été exécuté
        // Pour ça, on attend 1 seconde
        setTimeout( function(){
            // On parcourt chaque catégorie
            $('li.header[data-id-cate]').each( function(){
                // On récupére :
                // l'id de la catégorie (idCate)
                // le titre de la catégorie (titleCate)
                // si elle est ouverte (state)
                var $this = $(this),
                    idCate = $this.attr('data-id-cate'),
                    titleCate = $this.find("h2")[0].innerHTML,
                    state = $this.find('.btn-collapse .ion-android-add-circle').hasClass('hidden');

                if(state){
                    // Si elle est ouverte, notre case ne sera pas cochée
                    listCheckbox += '<p><input type="checkbox" class="checkbox-cate" data-ckb-id="'+idCate+'">'+titleCate+'</p>';
                }else{
                    // si elle est fermée, notre case sera cochée
                    listCheckbox += '<p><input type="checkbox" class="checkbox-cate" checked data-ckb-id="'+idCate+'">'+titleCate+'</p>';
                }
            });

            // On injecte la liste dans notre div "#content-checkbox-cate"
            $('#content-checkbox-cate .content').append(listCheckbox);
           
            // On affiche le bloc en fondu
            $('#content-checkbox-cate').toggleClass('show');
 
        }, 1000);
       
       
    });
   
    // Si on clique sur une case à cocher, on fait comme si on avait cliquer sur le bouton pour afficher/masquer la catégorie
    $('body')
        .on('change', '#content-checkbox-cate .checkbox-cate', function(){
            var idCate = $(this).attr('data-ckb-id');
       
            $('li.header[data-id-cate="'+ idCate +'"] .btn-collapse').trigger('click');
        });
 
 });

Code:

$(function(){
    // Une fois la page chargée
    $(document).ready( function(){
        // On crée notre liste de case à cocher
        var listCheckbox = "";
       
        // On attend que le js qui ouvre/ferme les catégories ait été exécuté
        // Pour ça, on attend 1 seconde
        setTimeout( function(){
            // On parcourt chaque catégorie
            $('div.forum-header[data-id-cate]').each( function(){
                // On récupére :
                // l'id de la catégorie (idCate)
                // le titre de la catégorie (titleCate)
                // si elle est ouverte (state)
                var $this = $(this),
                    idCate = $this.attr('data-id-cate'),
                    titleCate = $this.find("h2")[0].innerHTML,
                    state = $this.find('.forum-hide').hasClass('forum-show');

                if(state){
                    // si elle est fermée, notre case sera cochée
                    listCheckbox += '<p><input type="checkbox" class="checkbox-cate" checked data-ckb-id="'+idCate+'">'+titleCate+'</p>';
                }else{
                    // Si elle est ouverte, notre case ne sera pas cochée
                    listCheckbox += '<p><input type="checkbox" class="checkbox-cate" data-ckb-id="'+idCate+'">'+titleCate+'</p>';
                }
            });

            // On injecte la liste dans notre div "#content-checkbox-cate"
            $('#content-checkbox-cate .content').append(listCheckbox);
           
            // On affiche le bloc en fondu
            $('#content-checkbox-cate').toggleClass('show');
 
        }, 1000);
       
       
    });
   
    // Si on clique sur une case à cocher, on fait comme si on avait cliquer sur le bouton pour afficher/masquer la catégorie
    $('body')
        .on('change', '#content-checkbox-cate .checkbox-cate', function(){
            var idCate = $(this).attr('data-ckb-id');
       
            $('div.forum-header[data-id-cate="'+ idCate +'"] .forum-hide').trigger('click');
        });
 
 });

Pour finir, il ne nous reste plus qu'à mettre la CSS pour masquer au départ ce bloc et ensuite, travailler sa mise en page une fois affiché.

Pour cela, on va aller dans Panneau d'affichage > Affichage > Images & Couleurs > Couleurs > Feuille de style CSS et on va y mettre le code suivant :

Code:


/*** --- BLOC de CHECKBOX pour les catégories --- ***/
/* Le bloc */
#content-checkbox-cate{
    background: #f2eacb; /* La couleur de fond */
    border: #dbc8a4 2px solid; /* La bordure */
    border-radius: 30px 8px; /* Les coins arrondis */
    left: 20px; /* Position par rapport à la gauche de la page */
    opacity: 0;
    padding: 10px; /* L'espace entre le bord du bloc et le texte */
    position: fixed;
    top: 50px; /* Position par rapport au haut de la page */
    width: 200px; /* Largeur du bloc */
    z-index: 999;
}
   
#content-checkbox-cate.show{
    opacity: 1;
    transition: opacity ease-out .8s;
}

/* Le titre */
#content-checkbox-cate h2{
    color: #e0704e; /* Couleur */
    font: bold 14px/1 'Pacifico', cursive; /* la police */
    position: absolute;
    text-align: center;
    text-shadow: #dbc8a4 1px 1px 2px, #dbc8a4 -1px -1px 2px, #dbc8a4 1px -1px 2px, #dbc8a4 -1px 1px 2px; /* L'ombrage du texte */
    top: -10px; /* Sa position par rapport au bord haut du bloc */
    width: 100%;
}

/* Le bloc contenant le texte & les cases à cocher */
#content-checkbox-cate .content{
    box-shadow: 0 0 7px rgba(219, 200, 164, 0.6); /* L'ombrage du bloc contenant les cases */
    border-radius: 30px 8px; /* Les coins arrondis */
    padding: 10px; /* L'espace entre le bord du bloc et le texte */
}
 
/* Le texte & les cases à cocher */
#content-checkbox-cate .content,
#content-checkbox-cate .content p{
    color: #444 !important; /* La couleur du texte */
    font-size: 12px; /* La taille du texte */
}
   
#content-checkbox-cate .content p{
    margin: 0;
    padding: 0;
}

---

C'est tout pour ce tutoriel En cas de problème ou si tu as des questions, n'hésite pas à poster à la suite de ce message