Le Deal du moment : -28%
Ring Fit Adventure pour Nintendo Switch à ...
Voir le deal
59.98 €

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Liste déroulante de mises en page Empty Liste déroulante de mises en page

Mar 23 Avr 2019 - 10:40

Toutes versions

Liste déroulante de mises en page


Bonjour bonjour !

Peut-être que, sur ton forum, tu as des mises en page spécifiques pour tes messages. Dans ce cas, il n'est pas toujours évident de retenir par coeur le code à utiliser pour s'en servir.

Dans ce tutoriel, nous allons donc voir comment ajouter des mises en pages prédéfinies dans l'éditeur de texte (aussi bien dans les réponses aux sujets que dans les réponses rapides).

Idea Pré-requis :
• Avoir accès aux templates du forum ;
• Avoir des connaissances de bases en HTML et CSS ;
• Ne pas être effrayé par le javascript.

Du javascript

Tout va se passer en javascript. En réalité, l'édition du template va juste nous servir à appeler sur des pages spécifiques le js que nous allons créer.

La préparation

Pour commencer, il faut :
• définir le nombre de mise en page que l'on va avoir ;
• la mise en page que l'on veut (logique ^^).

Ici, voilà ce qu'on va faire :

• La liste déroulante :
Spoiler:

Liste déroulante de mises en page Mep-li12

• Le code "type" qui est généré :
Spoiler:

Liste déroulante de mises en page Mep-li14

• Le rendu :
Spoiler:

Liste déroulante de mises en page Mep-li10

On a tout ce qu'il faut, à l'attaque !

Le code

On va y aller étape par étape Smile

On crée un tableau qui contient nos infos

On va donc commencer par créer un tableau en javacript :
Code:
// Tableau de mise en page
var listeMep = [];

Chaque entrée du tableau va contenir :
• le texte à afficher dans la liste déroulante,
• le code de la mise en page.

Chaque "ligne" du tableau sera écrite comme ça :
Code:
{
    texte: "le texte à afficher",
    mep: "<div>la mise en page à afficher</div>"
}

Par exemple :
Code:
var listeMep = [
 {
 texte: "Mises en page",
 mep: ""
 },
 {
 texte: "Tambouille - message",
 mep: '<div class="mep">\n' +
 '\t<div class="sur-titre">Sur-titre</div>\n' +
 '\t<div class="titre"><span>Titre</span></div>\n' +
 '\t<div class="content">\n' +
 '\n' +
 'Message\n' +
 '\n' +
 '\t</div>\n' +
 '</div>\n'
 },
 {
 texte: "Tambouille - titre niv. I",
 mep: "<div class=\"titre1\">Titre</div>"
 },
 {
 texte: "Tambouille - titre niv. II",
 mep: "<div class=\"titre2\">Titre</div>"
 },
 {
 texte: "Tambouille - titre niv. III",
 mep: "<div class=\"titre3\">Titre</div>"
        }
 ];

Idea Pour faire en sorte que le javascript ne plante pas à cause des retours à la ligne, on "ferme" la variable, on ajoute un "+" et on la réouvre à la ligne d'en dessous, par exemple :
Code:
var maVariable = 'mon début de code, mais'+
    'je dois retourner à la ligne pour faciler la lecture.';
Idea Pour info, les retours à la ligne dans ton code javascript, de même que les tabulations ne seront pas pris en compte dans l'éditeur. Voilà pourquoi il faut utiliser :
Code:
\r = retour à la ligne
\t = tabulation

On n'affiche la liste que pour un membre connecté

Eh oui ! Pas de liste de mise en page pour un invité ^^ Ici, on  va faire un petit test tout simple : "si la personne peut éditer son profil, c'est qu'elle est connectée". Nickel ! On va se baser sur l'image qui est censé s'afficher au niveau du profil :
Code:
if( $('.mainmenu #i_icon_mini_profile').length){
    // Notre code sera ici                                                                                                
}

Idea Ici, je pars d'un template par défaut où je n'ai pas changé ma barre de navigation et où les ID sont ceux de base Smile

On crée une liste dans l'éditeur de texte

On commence par créer une variable mep (= une sorte de case mémoire) qui contiendra une div à qui on donnera la classe sceditor-group mep-select:
Code:
var mep = document.createElement('div');
mep.setAttribute('class', 'sceditor-group mep-select');

Ensuite, on crée une autre variable selectNew qui contiendra notre liste déroulante select, à qui on donnera un nom name="mep_predef" et un id id="mep-predef" :
Code:
var selectNew = document.createElement('select');
selectNew.setAttribute('name', 'mep_predef');
selectNew.setAttribute('id', 'mep-predef');

Notre liste est prête à recevoir ses items. On a donc ça pour le moment :
Code:
// On crée la nouvelle liste
var mep = document.createElement('div');
mep.setAttribute('class', 'sceditor-group mep-select');
var selectNew = document.createElement('select');
selectNew.setAttribute('name', 'mep_predef');
selectNew.setAttribute('id', 'mep-predef');

On ajoute les items de la liste

Etape suivante : les différentes lignes de notre liste déroulante.

Ici, on va parcourir notre tableau :
Code:
for(var i = 0 ; i < listeMep.length ; i++ ){
    // Le code        
}
                                       
Idea i est un compteur qui augmente de 1 à chaque fois que je change de ligne de tableau et il va augmenter jusqu'à ce que je sois à la dernière ligne du tableau Smile

Pour chaque ligne du tableau, on va créer une variable option qui contient une balise option. On va ensuite lui attribuer une valeur qui correspond à son numéro de ligne dans le tableau (donc notre compteur "i"). Puis, on met comme texte de l'option son équivalent dans le tableau (c'est ce que le membre pourra lire) et enfin, on ajoute ça dans notre variable selectNew (qui contient notre liste). Au final, on a donc ce code :
Code:
/// On ajoute les différents items dans la liste déroulante
 for(var i = 0 ; i < listeMep.length ; i++ ){
            var option = document.createElement('option');
            option.setAttribute('value', i);
            option.text = listeMep[i].texte;
            mep.appendChild(selectNew).appendChild(option);
 }

Maintenant que notre liste déroulante est prête, on va l'intégrer dans l'éditeur de texte.

Comme d'habitude, on crée une variable btnWysiwyg qui va récupérer toute la partie haute de l'éditeur de texte :
Spoiler:

Liste déroulante de mises en page Mep-li13

Et dans cette variable, on y injecte notre liste mepSop :
Code:
// Ajout de la liste dans l'éditeur de texte
       var btnWysiwyg = document.querySelector('.sceditor-toolbar') ;
       btnWysiwyg.appendChild(mep);

On ajoute un code généré quand on sélectionne quelque chose dans la liste déroulante

Maintenant, on va juste dire qu'au changement d'item dans la liste déroulante qui s'appelle #mep-predef, on va faire une fonction :
Code:
$('body').on('change', '#mep-predef', function(){

}

Dans cette fonction, on va commencer par récupérer la valeur de l'item sélectionné
Code:
var type_msg = this.value ;

Si jamais la valeur est égale à 0, c'est l'item par défaut. Eh bien, on ne fait rien :
Code:
if(type_msg == 0){
                return ;
            }

Sinon, on va générer le code. Pour cela, on va créer une variabla code_mep qui va récupérer dans notre tableau la bonne mise en page. Puis, on va injecter dans l'éditeur de texte ce morceau de code.

On a donc ça pour la fonction :
Code:
//Quand on sélectionne une mise en page prédéf
 $('body').on('change', '#mep-predef', function(){

    var type_msg = this.value ;

            // Si c'est l'intitulé du champs, on ne fait rien
    if(type_msg == 0){
        return ;
    }else{
                // Sinon,on récupére la mise en page
 var code_mep = listeMep[type_msg].mep;
                // et on l'injecte dans l'éditeur de texte
 $('#text_editor_textarea').sceditor("instance").insertText( code_mep );
    }

 });

Cette fonction sera prise en compte au chargement de la page

La dernière étape du javascript ^^

Pour que cette fonction se lance au chargement de la page, on va juste l'entourer d'une fonction dite "orpheline" :
Code:
$(function(){

});

Au final

A la fin, ton code javascript devrait ressembler à ça :
Code:

$(function(){

 // On crée un tableau de mise en page
 var listeMep = [
 {
 texte: "Mises en page",
 mep: ""
 },
 {
 texte: "Tambouille - message",
 mep: '<div class="mep">\n' +
 '\t<div class="sur-titre">Sur-titre</div>\n' +
 '\t<div class="titre"><span>Titre</span></div>\n' +
 '\t<div class="content">\n' +
 '\n' +
 'Message\n' +
 '\n' +
 '\t</div>\n' +
 '</div>\n'
 },
 {
 texte: "Tambouille - titre niv. I",
 mep: "<div class=\"titre1\">Titre</div>"
 },
 {
 permission: 0,
 texte: "Tambouille - titre niv. II",
 mep: "<div class=\"titre2\">Titre</div>"
 },
 {
 texte: "Tambouille - titre niv. III",
 mep: "<div class=\"titre3\">Titre</div>"
 }
 ];

    // On teste si le membre est connecté
 if( $('.mainmenu #i_icon_mini_profile').length){

 // On crée la nouvelle liste
 var mep = document.createElement('div');
 mep.setAttribute('class', 'sceditor-group mep-select');
 var selectNew = document.createElement('select');
 selectNew.setAttribute('name', 'mep_predef');
 selectNew.setAttribute('id', 'mep-predef');

        // On ajoute les différents items dans la liste déroulante
 for(var i = 0 ; i < listeMep.length ; i++ ){
            var option = document.createElement('option');
            option.setAttribute('value', i);
            option.text = listeMep[i].texte;
            mep.appendChild(selectNew).appendChild(option);
 }

 // Ajout de la liste dans l'éditeur de texte
 var btnWysiwyg = document.querySelector('.sceditor-toolbar') ;
 btnWysiwyg.appendChild(mepTambouille);

 //Quand on sélectionne une mise en page prédéf
 $('body').on('change', '#mep-predef', function(){

    var type_msg = this.value ;

            // Si c'est l'intitulé du champs, on ne fait rien
    if(type_msg == 0){
        return ;
    }else{
                // Sinon,on récupére la mise en page
 var code_mep = listeMep[type_msg].mep;
                // et on l'injecte dans l'éditeur de texte
 $('#text_editor_textarea').sceditor("instance").insertText( code_mep );
    }

 });

 }

});


La modification du template

Ici, ca va être très simple : on va juste appeler notre javascript dans 2 templates : Général > viewtopic_body (pour les réponses rapides) et Poster & Messages Privées > posting_body pour les pages de réponse "basique".

Pour cela, on va commencer par récupérer le lien du javascript :
Spoiler:

Liste déroulante de mises en page Mep-li15

On l'ajoute ensuite dans ce code :
Code:
<script src="lien" type="text/javascript"></script>

par exemple :
Code:
<script src="http://tambouille-raleuses.forumactif.com/17289.js" type="text/javascript"></script>

Et pour finir, on copie le tout dans les templates, tout en bas de ceux-ci.

On enregistre et on publie.

Exclamation A chaque fois que tu modifies ton javascript, son url change. Il faudra donc penser à aller éditer le lien dans les templates Wink

La CSS

Si jamais tu te rends compte que le rendu de ta liste n'est pas terrible, tu pourras la cibler grâce à la classe .mep-select (pour positionner la liste déroulante) et à l'id #ep-predef (pour mettre en page la liste).




Je sais que le javascript fait peur Smile Alors si tu as un souci avec ce tutoriel, n'hésite pas à nous appeler à l'aide Wink


Ayael
Ayael
Messages : 38

Liste déroulante de mises en page Empty Re: Liste déroulante de mises en page

Jeu 25 Avr 2019 - 16:35
Merci beaucoup pour ce tutoriel très utile ♥
Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses