Header

Partagez | 

[FA] Liste déroulante de mises en page

Message Sujet: [FA] Liste déroulante de mises en page   Jeu 14 Jan - 17:09

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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:
 

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

>> Le rendu :
Spoiler:
 

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

Le code

On va y aller étape par étape Smile

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

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

Ensuite, on crée une autre variable selectSoP qui contiendra notre liste déroulante select, à qui on donnera un nom name="mep_predef" et un id id="mep-predef" :
Code:
var selectSoP = document.createElement('select');
        selectSoP.setAttribute('name', 'mep_predef');
        selectSoP.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 mepSop = document.createElement('div');
        mepSop.setAttribute('class', 'sceditor-group mep-sop');

        var selectSoP = document.createElement('select');
        selectSoP.setAttribute('name', 'mep_predef');
        selectSoP.setAttribute('id', 'mep-predef');

On prépare les items de la liste

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

On commence par créer un point par défaut qui sera tout simplement vide Smile Comme pour la liste, on crée une variable option_defaut qui contient une balise option. Pour celle-ci, on va lui donner une valeur de -1 (ça va nous permettre de le cibler pour ne pas générer de code). Ensuite, on met comme texte de l'option Présentations SoPiennes (c'est ce que le membre pourra lire) et enfin, on ajoute ça dans notre variable selectSoP (qui contient notre liste). Au final, on a ce code pour l'option par défaut :
Code:
// Défaut
        var option_defaut = document.createElement('option');
        option_defaut.setAttribute('value', '-1');
        option_defaut.text = 'Présentations SoPiennes';
        mepSop.appendChild(selectSoP).appendChild(option_defaut);

Le principe est le même pour tous les autres points de la liste, sauf qu'on ajoute +1 à la valeur. Par exemple, sur SoP, voici les différents items de la liste :
Code:
 // Défaut
        var option_defaut = document.createElement('option');
        option_defaut.setAttribute('value', '-1');
        option_defaut.text = 'Présentations SoPiennes';
        mepSop.appendChild(selectSoP).appendChild(option_defaut);

        // règle
        var option_regle = document.createElement('option');
        option_regle.setAttribute('value', '0');
        option_regle.text = 'Règle';
        mepSop.appendChild(selectSoP).appendChild(option_regle);

        // annonce
        var option_annonce = document.createElement('option');
        option_annonce.setAttribute('value', '1');
        option_annonce.text = 'Annonce';
        mepSop.appendChild(selectSoP).appendChild(option_annonce);

        // J-SoP
        var option_jsop = document.createElement('option');
        option_jsop.setAttribute('value', '2');
        option_jsop.text = 'Journal de SoP';
        mepSop.appendChild(selectSoP).appendChild(option_jsop);

        // Olympiades
        var option_olympiades = document.createElement('option');
        option_olympiades.setAttribute('value', '3');
        option_olympiades.text = 'Olympiades';
        mepSop.appendChild(selectSoP).appendChild(option_olympiades);

        // Satisfaction
        var option_satisfaction = document.createElement('option');
        option_satisfaction.setAttribute('value', '4');
        option_satisfaction.text = 'Formulaire de satisfaction';
        mepSop.appendChild(selectSoP).appendChild(option_satisfaction);

        // Autres
        var option_autres = document.createElement('option');
        option_autres.setAttribute('value', '5');
        option_autres.text = 'Autres';
        mepSop.appendChild(selectSoP).appendChild(option_autres);

On ajoute la liste dans l'éditeur de test

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:
 

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(mepSop);

On fait un tableau de mise en page

On attaque maintenant la partie "comment savoir quelle mise en page j'ai sélectionné". Pour cela, on va créer un tableau qui s'appellera liste_mep et qui va contenir une classe par mise en page.

Idea Pour rappel, en javascript, la première case d'un tableau est la numéro 0

Ici, dans notre tableau (si on reprend l'exemple de SoP), on va avoir :
- case 0 = Règles
- case 1 = Annonces
- case 2 = J-SoP
- case 3 = Olympiades
- case 4 = Satisfaction
- case 5 = Autres

Et ça va se coder tout simplement comme ça :
Code:
var liste_mep = [
            'rules' ,
            'annonce' ,
            'j-sop' ,
            'olympiades' ,
            'satisfaction' ,
            'autres'
            ];

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 c'est la valeur est inférieur à 0 (donc 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.

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 ;

            if(type_msg < 0){
                return ;
            }else{

                // On génére le code
            }

        });

On fait le code généré

Une fois encore, devine quoi, on crée une variable code_mep qui contiendra tout le code ^^

On va ensuite tout simplement coder notre code (ahem) :
Code:
<div class="wrapper-box-msg mep-js '+liste_mep[type_msg]+'">
                  <div class="type-msg">Type message</div>
                    <div class="sous-titre">Sous titre</div>
                    <div class="titre"><span>Titre</span></div>
                  <br /><br />
                  <div class="box-msg">
                      Ton texte est ici
                  </div>
                </div>
Si on laisse comme ça, le code généré va etre comme ça :
Code:
<div class="wrapper-box-msg mep-js rules"><div class="type-msg">Type message</div><div class="sous-titre">Sous titre</div><div class="titre"><span>Titre</span></div><br/><br/><div class="box-msg">Ton texte est ici</div></div>
Ce qui n'est pas très lisible ^^

On va donc ajouter des retours à la ligne et des tabulations pour rendre ça plus clair :
\r = retour à la ligne
\t = tabulation


Pour le code généré sur SoP on aura donc ça :
Code:
\r<div class="wrapper-box-msg mep-js '+liste_mep[type_msg]+'">
                  \r\t<div class="type-msg">Type message</div>
                    \r\t<div class="sous-titre">Sous titre</div>
                    \r\t<div class="titre"><span>Titre</span></div>
                  \n\t<br /><br />
                  \n\t<div class="box-msg">
                      \n\t\tTon texte est ici
                  \n\t</div>
                \n</div>
On enregistre tout ce code dans notre variable et on l'injecte dans la zone de texte de l'éditeur de texte :
Code:
// On génére le code
                var code_mep = '\r<div class="wrapper-box-msg mep-js '+liste_mep[type_msg]+'">
                  \r\t<div class="type-msg">Type message</div>
                    \r\t<div class="sous-titre">Sous titre</div>
                    \r\t<div class="titre"><span>Titre</span></div>
                  \n\t<br /><br />
                  \n\t<div class="box-msg">
                      \n\t\tTon texte est ici
                  \n\t</div>
                \n</div>';
               
                $('#text_editor_textarea').sceditor("instance").insertText( code_mep );


Idea '+liste_mep[type_msg]+' permet d'ajouter la classe que nous avons défini dans notre tableau.

Par exemple, si on a sélectionner "Olympiades", notre valeur est de 3. Il va donc récupérer la case 3 du tableau : liste_mep[3], ce qui correspond à la classe "olympiades" (n'oublie pas, on commence à compter à partir de 0 Smile ).

Cette fonction ne sera prise en compte que si l'utilisateur est connecté

Un petit bug qu'on m'a remonté (merci Eileen ^^). Eh oui ! Si on ne précise que le script ne doit s'exécuter qu si on est connecté, Internet Explorer va nous gérer une erreur. On va donc tout simplement vérifier si l'image "profil" existe ^^

Code:
if( $('.bodyline .mainmenu #i_icon_mini_profile').length){

}

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

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 fonctione dite "orpheline" :
Code:
$(function(){

});

Au final

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


$(function(){
    if( $('.bodyline .mainmenu #i_icon_mini_profile').length){

        $(function(){

            //// On crée la nouvelle liste
            var mepSop = document.createElement('div');
            mepSop.setAttribute('class', 'sceditor-group mep-sop');

            var selectSoP = document.createElement('select');
            selectSoP.setAttribute('name', 'mep_predef');
            selectSoP.setAttribute('id', 'mep-predef');

            // Défaut
            var option_defaut = document.createElement('option');
            option_defaut.setAttribute('value', '-1');
            option_defaut.text = 'Présentations SoPiennes';
            mepSop.appendChild(selectSoP).appendChild(option_defaut);

            // règle
            var option_regle = document.createElement('option');
            option_regle.setAttribute('value', '0');
            option_regle.text = 'Règle';
            mepSop.appendChild(selectSoP).appendChild(option_regle);

            // annonce
            var option_annonce = document.createElement('option');
            option_annonce.setAttribute('value', '1');
            option_annonce.text = 'Annonce';
            mepSop.appendChild(selectSoP).appendChild(option_annonce);

            // J-SoP
            var option_jsop = document.createElement('option');
            option_jsop.setAttribute('value', '2');
            option_jsop.text = 'Journal de SoP';
            mepSop.appendChild(selectSoP).appendChild(option_jsop);

            // Olympiades
            var option_olympiades = document.createElement('option');
            option_olympiades.setAttribute('value', '3');
            option_olympiades.text = 'Olympiades';
            mepSop.appendChild(selectSoP).appendChild(option_olympiades);

            // Satisfaction
            var option_satisfaction = document.createElement('option');
            option_satisfaction.setAttribute('value', '4');
            option_satisfaction.text = 'Formulaire de satisfaction';
            mepSop.appendChild(selectSoP).appendChild(option_satisfaction);

            // Autres
            var option_autres = document.createElement('option');
            option_autres.setAttribute('value', '5');
            option_autres.text = 'Autres';
            mepSop.appendChild(selectSoP).appendChild(option_autres);

            // Ajout de la liste dans l'éditeur de texte
          var btnWysiwyg = document.querySelector('.sceditor-toolbar') ;
          btnWysiwyg.appendChild(mepSop);
           
            ///// On crée un tableau qui contient toutes les mises en page
            // 0 = Règles ; 1 = Annonce ; 2 = J-SoP ; 3 = Olympiades ; 4 = Satisfaction ; 5 = autres

            var liste_mep = [
                'rules' ,
                'annonce' ,
                'j-sop' ,
                'olympiades' ,
                'satisfaction' ,
                'autres'
                ];

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

                var type_msg = this.value ;

                if(type_msg < 0){
                    return ;
                }else{

                    // On génére le code
                    var code_mep = '\r<div class="wrapper-box-msg mep-js '+liste_mep[type_msg]+'">
                      \r\t<div class="type-msg">Type message</div>
                        \r\t<div class="sous-titre">Sous titre</div>
                        \r\t<div class="titre"><span>Titre</span></div>
                      \n\t<br /><br />
                      \n\t<div class="box-msg">
                          \n\t\tTon texte est ici
                      \n\t</div>
                    \n</div>';
                   
                    $('#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 template : 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:
 

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

par exemple :
Code:
<script src="http://www.school-of-progress.fr/42867.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.

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 qu'on a donné à sa div parent et à l'id qu'on lui a donné Wink




Evidemment, ici, on a fait en sorte que la mise en page soit la même à chaque fois, et que seule une CSS change. On peut aussi faire plus de tests et faire une mise en page par item. Dans ce cas, on utilisera le test switch qui veut dire en gros "en fonction de la valeur d'un truc, on fera..." .

Par exemple, on peut remplacer ça :

Code:
if(type_msg < 0){
                return ;
            }else{



                // On génére le code
                var code_mep = '\r<div class="wrapper-box-msg mep-js '+liste_mep[type_msg]+'">
                  \r\t<div class="type-msg">Type message</div>
                    \r\t<div class="sous-titre">Sous titre</div>
                    \r\t<div class="titre"><span>Titre</span></div>
                  \n\t<br /><br />
                  \n\t<div class="box-msg">
                      \n\t\tTon texte est ici
                  \n\t</div>
                \n</div>';
               
                $('#text_editor_textarea').sceditor("instance").insertText( code_mep );
            }
par ça :
Code:
switch (type_msg) {
                case '-1':
                    // Cas où on ne sélectionne rien
                  return ;
                case '0':
                    // On sélectionne "règle"
                  var code_mep = '\r<table>
                        \r\t<tr>
                            \r\t\t<td>Règle !</td>
                            \r\t\t<td>--- Mon contenu --- </td>
                        \r\t</tr>
                  \r</table>';

                  break;

                case '1':
                    // On sélectionne "Annonce"
                  var code_mep = '\r<div class="titre1">!!!Annonce Sopienne !!!</div>
                    \r\t<blockquote>---Contenu de l\'annonce ---</blockquote>';
                 
                  break;

              case '2':
                    // On sélectionne "Olympiades"
                  var code_mep = '\r<div class="titre1">Welcome dans les Olympiades</div>
                    \r\--- Ton texte est ici ---';
                 
                  break;

                default:
                  // Sinon, on utilise le truc du tuto
                  var code_mep = '\r<div class="wrapper-box-msg mep-js '+liste_mep[type_msg]+'">
                              \r\t<div class="type-msg">Type message</div>
                                \r\t<div class="sous-titre">Sous titre</div>
                                \r\t<div class="titre"><span>Titre</span></div>
                              \n\t<br /><br />
                              \n\t<div class="box-msg">
                                  \n\t\tTon texte est ici
                              \n\t</div>
                            \n</div>';
            }

              $('#text_editor_textarea').sceditor("instance").insertText( code_mep );

        });

Pour avoir une structure différente en fonction de ce qu'on sélectionne Wink




Un souci avec ce tutoriel ? N'hésite pas à venir poser ta question [ici]

Idea n'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "[FA] Liste déroulante de mises en page" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Liste déroulante de mises en page
Page 1 sur 1
 Sujets similaires
-
» Créer une liste déroulante dans un widgets
» Liste déroulante dans un widget
» Problème - Liste déroulante + go
» Rajout de boutons personnalisé avec liste déroulante sur le nouvel éditeur
» [Sujet] Liste déroulante de TAGs précédant le titre personnalisées
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens