-44%
Le deal à ne pas rater :
Casque Gamer sans fil STEELSERIES Arctis 7P+ (PS5/PS4, PC)
86.99 € 155.01 €
Voir le deal


 :: Blank Theme sources :: Plugins

Persona (bêta)

Persona (bêta) 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

INTRODUCTION à PERSONA












Aperçu du formulaire et sa mise en page


Persona est un plugin pour les sujets de gestion de personnage (fiche de présentation, fiche de lien, scénarios, …). Il remplace les codes de mise en page à copier/coller dans un sujet par un formulaire à la création et à l’édition d’un sujet.

Parce qu’un exemple est toujours plus parlant, une démonstration d’un Persona de fiche de présentation est accessible à tous (sans compte).




Les avantages
  • Le plugin rend la création et l’édition des sujets de gestion de personnage plus ludiques et plus simples.

  • Les membres n’ont plus besoin de manipuler du code HTML et de plisser les yeux pour savoir où écrire leurs informations. C’est donc plus accessible et ça limite les accidents de mise en page.

  • Seul le staff peut créer et modifier le code de mise en page. C’est idéal pour faire des mises en page plus poussées (avec onglets, par exemple) sans craindre de générer trop de code pour les membres.

  • Le code de mise en page peut-être édité sans avoir à éditer les sujets.


Les craintes
  • L’installation du plugin peut être intimidante la première fois.

  • Les rôlistes sont des créatures d’habitude et le plugin apporte des nouvelles fonctionnalités, cela demandera un temps d’adaptation pour chacun.

  • Les adeptes des mises en page personnalisées auront un peu moins de liberté, mais il est toujours possible de mettre du texte en gras, italique, avec de la couleur ou d’intégrer des images.






Kim

Intermédiaire

Javascript, HTML et CSS

Oui


Ce plugin est une idée de Tamaraa qui souhaitait reprendre un concept existant et l'intégrer au Blank Theme. De nombreux membres du serveur La Piscine ont suivi sa réalisation en échangeant des idées et des solutions. Poumon a été d'une précieuse aide pour certaine fonctionnalités et du debug. Sixtine a réalisé une première maquette de l'interface du formulaire. 'Christa Lostmindy a corrigé la documentation et elle a été une source première d'encouragement.

Installer Persona 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

Installer Persona





Cette partie indique où placer les différents codes du plugin pour une mise en place simple et rapide. Par défaut l’installation est celle d’un Persona pour d’une fiche de présentation.

La suite du tutoriel explique plus en détails son fonctionnement et comment le modifier.

1- Importer le plugin



Dans le template général/overall_footer_end, copiez/collez la ligne de code suivante avant la balise </body> tout en bas du template.

Code:
<script src="https://cdn.jsdelivr.net/gh/gp-kim/Blank-Theme@main/Persona/persona.js"></script>

Votre forum a désormais accès au fichier qui contient le cœur du plugin.
Voir le contenu du fichier

2- Intégrer le formulaire



Le formulaire contient les champs dans lesquels les membres renseigneront leurs informations. C’est ce qui remplace le code de mise en page à copier/coller dans un sujet.

Il s’intègre dans le template poster & messages privés/posting_body



Code:
<br/>{ERROR_BOX}
<form action="{S_POST_ACTION}" method="post" name="post" enctype="multipart/form-data">

    <!----------------------------------------------->
    <!-- ENTETE DE LA PAGE -------------->

    <div class="container">

        <!-- Titre de la page -->
        <h1 class="page-title">{L_POST_A}</h1>

        <!-- Affichage de la prévisualisation (template : posting_topic_review ) -->
        {POST_PREVIEW_BOX}

        <!----------------------------------------------->
        <!-- REGLES DE LA CATEGORIE (si activé) -------------->

        <!-- BEGIN switch_forum_rules -->
        <div class="panel" id="forum_rules">

            <!-- Titre "règlement" -->
            <h3>{L_FORUM_RULES}</h3>

            <!-- Règlement -->
            <div class="postbody">
                <!-- Image du règlement -->
                <!-- BEGIN switch_forum_rule_image -->
                <img class="left logo" src="{RULE_IMG_URL}" alt="" />
                <!-- END switch_forum_rule_image -->

                <!-- Contenu -->
                {RULE_MSG}
            </div>

        </div>
        <!-- END switch_forum_rules -->


        <!----------------------------------------------->
        <!-- AVERTISSEMENT (si trop de citation) -------------->

        <!-- BEGIN switch_quote_limit -->
        <div class="post">
            <br />
            <p class="center" style="color:red">{switch_quote_limit.L_QUOTE_LIMIT_WARNING}</p>
            <br />
        </div>
        <!-- END switch_quote_limit -->
        
        <!----------------------------------------------->
        <!-- CONTENU DE LA SECTION POSTER UN MESSAGE -------------->

        <div class="panel" id="postingbox">
            <!-- BEGIN switch_post_a -->
            <h3>{L_POST_A}</h3>
            <!-- END switch_post_a -->
            <fieldset class="fields1" style="min-width: inherit;">
                <!-- BEGIN switch_username_select -->
                <dl>
                    <dt><label>{L_USERNAME}</label></dt>
                    <dd><input class="inputbox" type="text" name="username" maxlength="25" value="{USERNAME}" /></dd>
                </dl>
                <!-- END switch_username_select -->

                <!-- BEGIN switch_reasons -->
                <dl>
                    <dt><label>{L_REASON}</label></dt>
                    <dd>{REASON_NEW}</dd>
                </dl>
                <!-- END switch_reasons -->
                <!-- BEGIN switch_privmsg -->
                <dl>
                    <dt><label>{L_USERNAME}</label></dt>
                    <dd>
                        <!-- BEGIN switch_username -->
                        <input class="inputbox" style="width:15%;margin:1px 0" type="text" name="username[]" value="{switch_privmsg.switch_username.USERNAME}" /><br />
                        <!-- END switch_username -->
                        <input class="inputbox" style="width:15%;margin:1px 0" type="text" id="username" name="username[]" value="{USERNAME}" tabindex="1" /> 
                        <img id="add_username" src="{ADD_USERNAME_IMG}" class="selectHover" style="vertical-align:middle" alt="" /> 
                        <input class="button2" type="button" id="find_user" value="{L_FIND_USERNAME}" />
                    </dd>
                </dl>

                <!-- BEGIN switch_privmsg_group -->
                <dl>
                    <dt><label>{switch_privmsg.switch_privmsg_group.L_OR_GROUP}</label></dt>
                    <dd>{switch_privmsg.switch_privmsg_group.MASS_PM} <input type="button" value="  ?  " title="{switch_privmsg.switch_privmsg_group.MASS_PM_EXPLAIN}" class="button2" /></dd>
                </dl>
                <!-- END switch_privmsg_group -->
                <!-- END switch_privmsg -->

                <!-- BEGIN switch_icon_checkbox -->
                <dl>
                    <dt><label>{L_ICON_TITLE}</label></dt>
                    <dd>
                        <!-- BEGIN row -->
                        <!-- BEGIN cell -->
                        <label><input type="radio" name="post_icon" value="{switch_icon_checkbox.row.cell.ICON_ID}" {switch_icon_checkbox.row.cell.ICON_CHECKED} id="post_icon_{switch_icon_checkbox.row.cell.ICON_ID}" /> <span onclick="document.forms['post'].post_icon_{switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_icon_checkbox.row.cell.ICON_IMG}</span></label>  
                        <!-- END cell -->
                        <!-- END row -->
                    </dd>
                </dl>
                <!-- END switch_icon_checkbox -->

                <!-- BEGIN switch_subject -->
                <dl>
                    <dt><label>{L_SUBJECT}</label></dt>
                    <dd>
                        <input class="inputbox medium" type="text" name="subject" value="{SUBJECT}" maxlength="{TOPIC_TITLE_MAXLENGTH}" title="{TOPIC_TITLE_LENGTH_EXPLAIN}" onkeypress="if (event.keyCode==13){return false}" />

                        <!-- BEGIN switch_subject_color -->

                        <script type="text/javascript">
                            //<![CDATA[
                            input = document.getElementsByName('subject');
                            //]]>

                        </script>
                        <select name="topic_color" onchange="input[0].style.color = topic_color.value" style="margin-left:10px">
                            {switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_OPTIONS}
                        </select>
                        <script type="text/javascript">
                            //<![CDATA[
                            input[0].style.color = '{switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_DEFAULT}';
                            //]]>

                        </script>

                        <!-- END switch_subject_color -->
                    </dd>
                </dl>
                <!-- END switch_subject -->

                <!-- BEGIN switch_description -->
                <dl>
                    <dt><label>{L_DESCRIPTION}</label></dt>
                    <dd>
                        <input class="inputbox medium" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
                    </dd>
                </dl>
                <!-- END switch_description -->
              
<div class="personaForm" data-persona-name="fiche">

  <fieldset>
    <legend>Identité</legend>
    <div class="field">
      <label>Titre de la fiche</label>
      <div class="description">Veillez à ce qu'il ne soit pas trop long</div>
      <textarea name="titrefiche" placeholder="Écrire ici"></textarea>
    </div>

    <div class="field">
      <label>Citation</label>
      <div class="description">Citation sous le titre</div>
      <textarea name="titreCitation" placeholder="Écrire ici"></textarea>
    </div>


    <div class="field">
      <label>Prénom(s), nom</label>
      <div class="description">Description for the input</div>
      <textarea name="prenomNom" placeholder="écrire ici"></textarea>
    </div>

    <div class="field columns">
      <div class="field">
        <label>Âge</label>
        <textarea name="naissanceAge" placeholder="Âge, date/lieux de naissance, ..."></textarea>
      </div>

      <div class="field">
        <label>Genre, pronoms</label>
        <textarea name="genrePronoms" placeholder="Écrire ici"></textarea>
      </div>
    </div>

    <div class="field">
      <label>Métier(s), occupation(s)</label>
      <textarea name="occupation" placeholder="Écrire ici"></textarea>
    </div>

    <div class="field columns">
      <select name="groupe">
        <option value="">Choisir le groupe</option>
        <option value="alpha">Alpha</option>
        <option value="beta">Bêta</option>
        <option value="charlie">Charlie</option>
      </select>

      <select name="typePersonnage">
        <option value="">Type de personnage</option>
        <option value="inventé">Inventé</option>
        <option value="Scénario">Scénario</option>
        <option value="temporaire">Temporaire</option>
      </select>
    </div>
  </fieldset>

  <fieldset>
    <legend>Anecdotes</legend>

    <div class="field">
      <label>Titre de la section</label>
      <div class="description">Veillez à ce qu'il ne soit pas trop long</div>
      <textarea name="sectionAnecdote" placeholder="Écrire ici"></textarea>
    </div>

    <div class="field">
      <label>Citation</label>
      <div class="description">Citation sous le titre de section</div>
      <textarea name="sectionCitation" placeholder="Écrire ici"></textarea>
    </div>

    <template data-name="anecdote">
      <!-- Bloc de champs qui peut être multiplié -->

      <div class="field">
        <label>Anecdote</label>
        <input type="text" name="titreAnecdote" placeholder="Nom de l'anecdote" />
        <textarea name="textAnecdote" placeholder="Description de l'anecdote"></textarea>
      </div>
      <!-- -->
    </template>

    <div data-container-name="anecdote">
      <!-- Les blocs créés s'afficheront automatiquement ici -->
    </div>

    <button class="addField" name="anecdote"><i class='ion-ios-plus-empty'></i> Ajouter une anecdocte</button>
  </fieldset>

  <fieldset>
    <legend>Avatar</legend>

    <div class="field image">
      <div>
        <div class="field">
          <label>URL Avatar</label>
          <input type="text" name="urlAvatar" placeholder="https://..." />
        </div>
        <div class="field">
          <label>Crédit de l'avatar</label>
          <input type="text" name="creditAvatar" placeholder="Pseudo du graphiste" />
        </div>
      </div>
      <div class="image-preview avatar" data-preview="urlAvatar"></div>
    </div>
  </fieldset>

  <fieldset>
    <legend>Derrière l'écran</legend>

    <div class="field columns">
      <div class="field">
        <label>Pseudo, prénom</label>
        <textarea name="irlPseudo" placeholder="Écrire ici"></textarea>
      </div>

      <div class="field">
        <label>Tranche d'âge</label>
        <textarea name="irlAge" placeholder="Écrire ici"></textarea>
      </div>

      <div class="field">
        <label>Fuseau horaire</label>
        <textarea name="fuseauHoraire" placeholder="Écrire ici"></textarea>
      </div>
    </div>

    <div class="field">
      <label>Appréciez-vous ce plugin ?</label>
      <div class="choice-input">
        <input type="radio" name="avis" id="oui" value="Oui, top !" />
        <label for="oui" class="choice">Oui, top !</label>

        <input type="radio" name="avis" id="non" value="Meh, peut mieux faire." />
        <label for="non" class="choice">Meh, peut mieux faire.</label>

        <input type="radio" name="avis" id="troll" value="J'aurai pu donner un avis sérieux mais j'ai préféré troll" />
        <label for="troll" class="choice">La réponse D</label>
      </div>
    </div>

  </fieldset>

</div>

                <div class="message-edition">
                    <div id="smiley-box">
                        <div id="smileyContainer">{L_SMILIES_PREVIEW_NEW}</div>
                    </div>
    
                    <div id="message-box">
                        <div class="left-box"><span id="helpbox" class="helpline"></span></div>
                        <div id="textarea_content">
                            <textarea id="text_editor_textarea" name="message">{MESSAGE}</textarea>
                        </div>
                    </div>
                </div>

                <div class="clear"></div>
            </fieldset>
        </div>
      
        <!----------------------------------------------->
        <!-- BOUTONS (envoyer, prévisu,...) -------------->
            <fieldset class="submit-buttons posting-buttons">
                {S_HIDDEN_FORM_FIELDS}
                <input type="hidden" name="lt" value="{LAST_TOPIC_ID}" />
                <!-- BEGIN switch_preview -->
                <input class="button2" type="submit" name="preview" value="{L_PREVIEW}" tabindex="5" /> 
                <!-- END switch_preview -->
                <!-- BEGIN switch_draft -->
                 <input class="button2 {BTN_DRAFT_CLASS}" type="submit" name="draft" value="{L_DRAFT}" title="{L_DRAFT_TITLE}" tabindex="7" accesskey="d" {switch_draft.DISABLED_DRAFT} /> 
                <!-- END switch_draft -->
                <!-- BEGIN switch_publish -->
                 <input class="button2" type="submit" name="publish" value="{L_PUBLISH}" tabindex="8" accesskey="p" /> 
                <!-- END switch_publish -->
                 <input class="button1" type="submit" name="post" value="{L_SUBMIT}" title="{L_SUBMIT_TITLE}" tabindex="6" accesskey="s" {DISABLED_SUBMIT} />
                <!-- BEGIN switch_signature -->
                 <input type="hidden" name="submit" value="{L_SUBMIT}" />
                <!-- END switch_signature -->
                <!-- BEGIN switch_warning_msg -->
                <br/>
                <span class="info">{switch_warning_msg.WARNING_CONTENT}</span>
                <!-- END switch_warning_msg -->
            </fieldset>

    </div>
  <br/>
  
    <!----------------------------------------------->
    <!-- SECTION : DÉS -------------->

    <!-- BEGIN switch_roll_dice -->
    <div class="panel">
    <h3>{ROLL_DICE_TITLE}</h3>
        <script type="text/javascript">
            function add_dice(dice_number, dice, number) {
                var content = document.getElementById('post_dice').innerHTML;
                document.getElementById('dice_to_del').innerHTML = '';
                document.getElementById('dice_to_del').id = '';

                var new_tr = document.createElement('tr');
                new_tr.appendChild(document.createElement('td'));
                new_tr.firstChild.innerHTML = '{ROLL_DICE_TITLE_LOW} #' + (dice_number + 1) + ' : <select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select> <label for="nb_rolls">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls" value="' + number + '" /> <span id="dice_to_del"><a href="javascript:add_dice(' + (dice_number + 1) + ',\'\',1)">+</a></span>';
                document.getElementById('list_dice').lastChild.appendChild(new_tr);

                var select_dice = document.getElementById('post_dice_' + dice_number);
                if (dice == '') {
                    select_dice.selectedIndex = 0;
                }
                for (var i = 1; select_dice.options[i]; i++) {
                    select_dice.options[i].selected = (select_dice.options[i].value == dice);
                }
            }

        </script>
        <table style="width:100%" id="list_dice">
            <tr>
                <td>
                    {ROLL_DICE_TITLE_LOW} #1 : 
                    <select name="post_dice_0" id="post_dice">
                        <option value="">-</option>
                        <!-- BEGIN row_replace -->
                        <option value="{switch_roll_dice.row_replace.DICE_ID}" {switch_roll_dice.row_replace.DICE_SELECTED}>{switch_roll_dice.row_replace.DICE_NAME}</option>
                        <!-- END row_replace -->
                    </select>
                     <label for="nb_rolls">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls" value="{switch_roll_dice.S_DICE_ROLLS_VALUE}" />
                     <span id="dice_to_del"><a href="javascript:add_dice(1,'',1)">+</a></span>
                </td>
            </tr>
        </table>
        {switch_roll_dice.DICE_SCRIPT}
    </div>
    <!-- END switch_roll_dice -->


    <!----------------------------------------------->
    <!-- SECTION : OPTION DU MESSAGE -------------->
    
    <div class="panel">
    <h3>{L_OPTIONS}</h3>
        <!-- BEGIN switch_topic_modif -->
        <fieldset class="fields1">
            <!-- BEGIN switch_icon_checkbox -->
            <dl>
                <label>{POST_ICON_TITLE}</label>
                <dd>
                    <!-- BEGIN row -->
                    <!-- BEGIN cell -->
                    <label><input type="radio" name="post_icon" value="{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" id="post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" {switch_topic_modif.switch_icon_checkbox.row.cell.ICON_CHECKED} /> <span onclick="document.forms['post'].post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_IMG}</span></label>
                    <!-- END cell -->
                    <!-- END row -->
                </dd>
            </dl>
            <!-- END switch_icon_checkbox -->
            <dl>
                <dt><label for="modif_topic_title">{L_TOPIC_TITLE_MODIFY}</label></dt>
                <dd>
                    <input type="text" class="inputbox medium" name="modif_topic_title" id="modif_topic_title" value="{MODIF_TOPIC_TITLE}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
                    <!-- BEGIN switch_topic_button -->
                     <input type="button" class="button2" value="{L_SOLVED_WITHOUT_BRAKETS}" onclick="set_solved(this.form.elements['modif_topic_title'],'{L_SOLVED}')" style="display:none" id="button_solved" />
                    <script type="text/javascript">
                        //<![CDATA[
                        document.getElementById('button_solved').style.display = 'inline';
                        //]]>

                    </script>
                    <!-- END switch_topic_button -->
                </dd>
            </dl>
        </fieldset>
        <hr class="dashed" />
        <!-- END switch_topic_modif -->
        <fieldset class="fields1">
            <!-- BEGIN switch_html_checkbox -->
            <label><input type="checkbox" name="disable_html" {S_HTML_CHECKED} /> {L_DISABLE_HTML}</label><br />
            <!-- END switch_html_checkbox -->

            <!-- BEGIN switch_bbcode_checkbox -->
            <label><input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} /> {L_DISABLE_BBCODE}</label><br />
            <!-- END switch_bbcode_checkbox -->

            <!-- BEGIN switch_smilies_checkbox -->
            <label><input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} /> {L_DISABLE_SMILIES}</label><br />
            <!-- END switch_smilies_checkbox -->

            <!-- BEGIN switch_signature_checkbox -->
            <label><input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} /> {L_ATTACH_SIGNATURE}</label><br />
            <!-- END switch_signature_checkbox -->

            <!-- BEGIN switch_notify_checkbox -->
            <label><input type="checkbox" name="notify" {S_NOTIFY_CHECKED} /> {L_NOTIFY_ON_REPLY}</label><br />
            <!-- END switch_notify_checkbox -->

            <!-- BEGIN switch_delete_checkbox -->
            <label><input type="checkbox" name="delete" /> {L_DELETE_POST}</label><br />
            <!-- END switch_delete_checkbox -->

            <!-- BEGIN switch_type_toggle -->
            <br />{S_TYPE_TOGGLE}
            <!-- END switch_type_toggle -->
        </fieldset>
    </div>

    <!----------------------------------------------->
    <!-- SECTION : SONDAGE -------------->
    {POLLBOX}
    
</form>



<!----------------------------------------------->
<!-- SAUTER VERS UN FORUM -------------->

<!-- BEGIN switch_jumpbox -->
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false}">
    <p class="right">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="button2" type="submit" value="{L_GO}" /></p>
</form>
<!-- END switch_jumpbox -->



<!----------------------------------------------->
<!-- HISTORIQUES DES MESSAGES -------------->
<!-- (template : posting_topic_review (message) // privmsg_topic_review (messages privés)-->

{TOPIC_REVIEW_BOX}


<!----------------------------------------------->
<!---------------->

<!-- BEGIN switch_privmsg -->
<div id="find_username" class="jqmWindow"></div>
<div id="group_pm_explain" class="jqmWindow"></div>

<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<!-- END switch_privmsg -->
<script type="text/javascript">
//<![CDATA[
$(function(){
<!-- BEGIN switch_privmsg -->
    privmsg_add_username('{U_SEARCH_USER}', '<br /><input class="inputbox" style="width:15%;margin:1px 0" type="text" name="username[]" />');
<!-- END switch_privmsg -->
<!-- BEGIN switch_image_resize -->
    resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} });
<!-- END switch_image_resize -->
});
//]]>
</script>

{SCEDITOR}



Code:
<div class="personaForm" data-persona-name="fiche">

  <fieldset>
    <legend>Identité</legend>
    <div class="field">
      <label>Titre de la fiche</label>
      <div class="description">Veillez à ce qu'il ne soit pas trop long</div>
      <textarea name="titrefiche" placeholder="Écrire ici"></textarea>
    </div>

    <div class="field">
      <label>Citation</label>
      <div class="description">Citation sous le titre</div>
      <textarea name="titreCitation" placeholder="Écrire ici"></textarea>
    </div>


    <div class="field">
      <label>Prénom(s), nom</label>
      <div class="description">Description for the input</div>
      <textarea name="prenomNom" placeholder="écrire ici"></textarea>
    </div>

    <div class="field columns">
      <div class="field">
        <label>Âge</label>
        <textarea name="naissanceAge" placeholder="Âge, date/lieux de naissance, ..."></textarea>
      </div>

      <div class="field">
        <label>Genre, pronoms</label>
        <textarea name="genrePronoms" placeholder="Écrire ici"></textarea>
      </div>
    </div>

    <div class="field">
      <label>Métier(s), occupation(s)</label>
      <textarea name="occupation" placeholder="Écrire ici"></textarea>
    </div>

    <div class="field columns">
      <select name="groupe">
        <option value="">Choisir le groupe</option>
        <option value="alpha">Alpha</option>
        <option value="beta">Bêta</option>
        <option value="charlie">Charlie</option>
      </select>

      <select name="typePersonnage">
        <option value="">Type de personnage</option>
        <option value="inventé">Inventé</option>
        <option value="Scénario">Scénario</option>
        <option value="temporaire">Temporaire</option>
      </select>
    </div>
  </fieldset>

  <fieldset>
    <legend>Anecdotes</legend>

    <div class="field">
      <label>Titre de la section</label>
      <div class="description">Veillez à ce qu'il ne soit pas trop long</div>
      <textarea name="sectionAnecdote" placeholder="Écrire ici"></textarea>
    </div>

    <div class="field">
      <label>Citation</label>
      <div class="description">Citation sous le titre de section</div>
      <textarea name="sectionCitation" placeholder="Écrire ici"></textarea>
    </div>

    <template data-name="anecdote">
      <!-- Bloc de champs qui peut être multiplié -->

      <div class="field">
        <label>Anecdote</label>
        <input type="text" name="titreAnecdote" placeholder="Nom de l'anecdote" />
        <textarea name="textAnecdote" placeholder="Description de l'anecdote"></textarea>
      </div>
      <!-- -->
    </template>

    <div data-container-name="anecdote">
      <!-- Les blocs créés s'afficheront automatiquement ici -->
    </div>

    <button class="addField" name="anecdote"><i class='ion-ios-plus-empty'></i> Ajouter une anecdocte</button>
  </fieldset>

  <fieldset>
    <legend>Avatar</legend>

    <div class="field image">
      <div>
        <div class="field">
          <label>URL Avatar</label>
          <input type="text" name="urlAvatar" placeholder="https://..." />
        </div>
        <div class="field">
          <label>Crédit de l'avatar</label>
          <input type="text" name="creditAvatar" placeholder="Pseudo du graphiste" />
        </div>
      </div>
      <div class="image-preview avatar" data-preview="urlAvatar"></div>
    </div>
  </fieldset>

  <fieldset>
    <legend>Derrière l'écran</legend>

    <div class="field columns">
      <div class="field">
        <label>Pseudo, prénom</label>
        <textarea name="irlPseudo" placeholder="Écrire ici"></textarea>
      </div>

      <div class="field">
        <label>Tranche d'âge</label>
        <textarea name="irlAge" placeholder="Écrire ici"></textarea>
      </div>

      <div class="field">
        <label>Fuseau horaire</label>
        <textarea name="fuseauHoraire" placeholder="Écrire ici"></textarea>
      </div>
    </div>

    <div class="field">
      <label>Appréciez-vous ce plugin ?</label>
      <div class="choice-input">
        <input type="radio" name="avis" id="oui" value="Oui, top !" />
        <label for="oui" class="choice">Oui, top !</label>

        <input type="radio" name="avis" id="non" value="Meh, peut mieux faire." />
        <label for="non" class="choice">Meh, peut mieux faire.</label>

        <input type="radio" name="avis" id="troll" value="J'aurai pu donner un avis sérieux mais j'ai préféré troll" />
        <label for="troll" class="choice">La réponse D</label>
      </div>
    </div>

  </fieldset>

</div>



Code:
/* Structure du formulaire */
.personaForm {
    display: none; /* Ne pas retirer */

    fieldset, legend {
        all: unset;
        box-sizing: border-box;
    }

    /* Contenur d'une section */
    fieldset {
        display: block;
        margin: 25px 0;
        position: relative;
        border-top: var(--border);
        padding-top: 40px;
    }

    /* Titre d'une section */
    legend {
        display: block;
        margin-top: 15px;
        color: var(--contrastLight);
        font-size: var(--medium-size);
        font-weight: 700;
        position: absolute;
        left: 0;
        top: 0;
    }

    /* Conteneur d'un champ */
    .field {
        margin: 10px 0;
        padding-left: 235px;

        /* titre du champ */
        label {
            font-weight: 700;
        }

        /* Description du champ */
        .description {
            font-style: italic;
            font-size: 13px;
            opacity: .8;
        }
    }

    /* Contenur pour mettre des champs en deux colonnes */
    .field.columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;

        .field { padding: 0}
    }

    /* Conteneur pour mettre l'aperçu d'une image à côté du champ */
    .field.image {
        display: grid;
        grid-template-columns: 1fr max-content;
        gap: 15px;

        .field { padding: 0}
    }

}

/*-- Champs du formulaire --*/
.personaForm {
    /* Input des formulaires */
    textarea, select, input[type="text"] {
        margin: 5px 0;
        background-color: var(--neutralDark);
        font-family: var(--font);
        width: 100%;
    }

    textarea {
        width: 100%;
        resize: vertical;
    }

    /* Input au focus (quand on clique dessus) */
    :focus:is(textarea, select, input[type="text"]) {
        outline: 1px solid var(--accentClr);
    }

    /* Erreur d'un input */
    .input-error, .input-error:focus {
        outline: 2px solid darkred;
    }

    .input-error-message {
        color: darkred;
    }

}

/* -- Aperçu d'une image -- */
/* Conteneur */
.image-preview {
    position: relative;
    border-radius: 5px;
    
    /* Bordure en pointillé */
    &:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 5px;
        background: var(--contrastLight); /* couleur des pointillés */
        opacity: .2;
        mask-image: url('data:image/svg+xml,%3csvg width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" stroke="%23333" stroke-width="2" stroke-dasharray="6%2c 10" stroke-dashoffset="0" stroke-linecap="round"/%3e%3c/svg%3e');
    }

    /* reire les pointillés lorsqu'il y a une image*/
    &:has(img) {
        &:after {display: none;}
    }

    & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Image dans l'aperçu */
.image-preview.avatar {
    width: 120px;
    height: 192px;
}


/* -- Input radio personnalisé --*/
/* Conteneur des inputs */
.choice-input {
    margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 5px;
}

/* Cache le rond à checker */
.choice-input > input {
    display: none;
}

/* Apparence du choix */
label.choice {
    position: relative;
    background-color: var(--neutralDark);
    border-radius: 5px;
    padding: 8px 10px;
    border: 1px solid transparent;
    cursor: pointer;
}

/* Personalise le choix quand il est checké */
input[type="radio"]:checked + label.choice {
    border: 1px solid var(--accentClr);
    color: var(--accentClr);
}


/* -- Champ duplicable -- */
.duplicable-field:has(.delete-field) {
    position: relative;
    padding-right: 25px;
}

/* Bouton de suppression d'un champ duplicable */
.delete-field {
    --red: rgb(156, 26, 26);
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 14px;
    border-radius: 100%;
    width: 17px;
    height: 17px;
    padding: 0;
    background-color: var(--red);
    border: none;
    color: #e9e9e9;
    cursor: pointer;
    line-height: 0;
}

.delete-field:hover {
    opacity: .7;
}

/* Bouton ajout d'un champs duplicable */
.addField {
    background-color: var(--neutralDarker);
    border-radius: 20px;
    font-weight: 600;
    padding: 5px 10px 5px 5px;

    /* icon + */
    > i {
        background: var(--accentClr);
        border-radius: 20px;
        width: 18px;
        display: inline-block;
        margin-right: 3px;
    }

    /* au survol*/
    &:hover {
        background-color: var(--accentClr);
        color: var(--contrast);
    }
}



/* -- Apparence de la barre d'option en bas du formulaire --*/
/* Cette partie peut très bien être mise dans le template directement ou avant la balise </head>
/* Ca permettra de libérer de la place dans votre CSS */
.persona-toolbar {
    border-radius: 5px;
    background-color: var(--neutralDark);
    position: relative;
    padding: 5px;
}

.persona-limit { text-align: center; }
.persona-limit-number { font-weight: bold;}

.persona-options {
    background-color: var(--neutralDark);
    border-radius: 5px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.persona-options.open {
    background-color: var(--accentClr);
    .persona-options-list {
        display: block;
        width: max-content;
    }
    .persona-options-button {
        background-color: var(--accentClr);
    }
}

.persona-options-list {
    display: none;
    background-color: var(--neutral);
    border-radius: 3px;
    padding: 10px;
    margin: 5px;
    margin-bottom: 0;
}

button.persona-options-button {
        float: right;
    width: 30px;
    height: 30px;
    padding: 0 0 0 2px;
    border-radius: 5px;
    background-color: var(--neutralDark);
}

.persona-options-button:hover {
    background-color: var(--accentClr);
}

.persona-code-parameters {
    display: none;
    position: relative;
    background: var(--neutralDark);
    border-radius: 5px;
    padding: 10px;
}

.persona-code-parameters.open {
    display: block;
}

.persona-code-parameters {
    .copy-button {
        position: absolute;
        right: 10px;
        text-transform: uppercase;
        font-size: 12px;
        font-family: monospace;
        background: none;
        padding: 0;
    }
}




Il est recommandé d’intégrer le formulaire entre la description du sujet et la boîte de smileys Voir en image

3- Initialiser le plugin



L’initialisation du plugin sert à activer le Persona sur votre forum. En même temps, vous allez le paramétrer pour qu’il gère les fiches de présentation dans une catégorie choisie.

Créez une nouvelle page javascript (tutoriel : installer du javascript) en cochant l’activation sur toutes les pages et copiez/collez le code suivant :

Code:
// PERSONA D'UNE FICHE DE PRESENTATION
// A cocher : sur toutes les pages

document.addEventListener("DOMContentLoaded", () => {
  new Persona({
    category: [8], // Numéro de la catégorie
    name: "fiche", // Nom du Persona
    // Autre paramètres ici, séparé par une virgule
    //
    personaHTML: function (data) {
    // Début des données du formulaire

      const {
        // Liste des noms des champs
        titrefiche,
        titreCitation,
        prenomNom,
        naissanceAge,
        genrePronoms,
        occupation,
        groupe,
        typePersonnage,
        sectionAnecdote,
        sectionCitation,
        urlAvatar,
        creditAvatar,
        irlPseudo,
        irlAge,
        fuseauHoraire,
        avis,
        //
      } = data;

      // Liste de toutes les anecdotes
      const anecdotesList = data.anecdote.map(({
        // Liste des noms des champs d'une anecdote
        titreAnecdote,
        textAnecdote,
        //
      }) => `
        <!-- Mise en page d'une anecdote -->

        <div class="fiche_anecdotes"><b>${titreAnecdote}</b>
        <br/>
        ${textAnecdote}</div>

        <!-- -->
      `).join("");
      //

    // Fin des données du formulaire

      const html = `
<!-- Début du code de la mise en page -->

<div class="fiche">
<div class="ficheBloc">
<div class="ficheBloc_head">
<div class="ficheBloc_head_title">${titrefiche}</div>
<span class="ficheBloc_head_subtitle">${titreCitation}</span>
</div>
<div class="fiche_presentation">
<div class="fiche_presentation_content">
<label>Nom, prénom(s)</label> ${prenomNom}
<br>
<label>Naissance, âge</label> ${naissanceAge}
<br>
<label>Genre, pronoms</label> ${genrePronoms}
<br>
<label>Métier, occupation</label> ${occupation}
<hr>
<label>Groupe</label> ${groupe}
<br>
<label>Type de personnage</label> ${typePersonnage}
</div>
<div class="fiche_avatar"><img src="${urlAvatar}" /></div>
</div>
</div>

<div class="ficheBloc">
<div class="ficheBloc_head">
<div class="ficheBloc_head_title">${sectionAnecdote}</div>
<span class="ficheBloc_head_subtitle">${sectionCitation}</span>
</div>
${anecdotesList}
</div>

<div class="fiche_joueur">
<label>Pseudo, prénom</label> ${irlPseudo}
 
<label>Âge</label> ${irlAge}
 
<label>Fuseau horaire</label> ${fuseauHoraire}
 
<label>Crédit de l'avatar</label> ${creditAvatar}
 
<label>Aimez-vous ce plugin ?</label> ${avis}
</div>
</div>

<!-- Fin du code de la mise en page -->
`;
      return html;
    },
  });
});

Associer une catégorie



Indiquez le numéro de la catégorie des fiches de présentation entre les crochets category: [3] ou category: [3, 11, 17] pour associer plusieurs catégories.

Ouvrez la catégorie dans votre navigateur pour retrouver son numéro dans l’adresse URL. Exemple : votrerpg.forumactif.com/f3-fiche-de-presentation le numéro de la catégorie est 3

Mise en page de la fiche



Le code HTML de la mise en page de la fiche de présentation se trouve déjà dans le code que vous venez d’installer. C’est le seul endroit où il doit être placé. Vous apprendrez dans les étapes suivantes à le personnaliser.

Vous trouverez ci-dessous le CSS facultatif pour la fiche de présentation par défaut.

Code:
/* Créer une petite animation de chargement avant que le Persona apparaisse */
.persona:not(.loaded) {
  --gradient: var(--neutralDarker);

  word-break: break-word;
  min-height: 800px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  color: transparent!important;

  &::after {
    position: absolute;
    inset: 0;
    opacity: .3;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--gradient) 25%, rgba(255,255,255,0) 50%);
    animation: shimmer 2s infinite;
    content: '';
  }
}
@keyframes shimmer {100% { ransform: translateX(100%);}}


.ficheBloc {
  border-radius: 10px;
  background: var(--neutralDark);
  padding: 10px;
  margin-bottom: 10px;
}

.ficheBloc_head {
  margin: 15px 0 20px;
  text-align: center;
  line-height: 15px;
}

.ficheBloc_head_title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
}

.ficheBloc_head_subtitle {
  font-style: italic;
  font-size: 12px;
  opacity: .8;
}

.fiche_presentation {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 5px;
}

.fiche_presentation_content {
  background: var(--neutral);
  padding: 15px;
  border-radius: 5px;
  text-align: justify;
  height: 320px;
  overflow: auto;
}

.fiche_presentation_content br:nth-child(n+2) {display: initial;}

.fiche_avatar img {
  width: 200px;
  height: 320px;
  object-fit: cover;
}

.fiche_anecdotes {
  background: var(--neutral);
  padding: 15px;
  text-align: justify;
  border-radius: 5px;
  margin-bottom: 5px;
}

.fiche label {
  display: inline;
  margin-right: 5px;
  font-size: 11px;
  color: var(--accentClr);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .5px;
}

.fiche_joueur {
  border-radius: 10px;
  border: var(--border);
  padding: 15px;
}





Vous n’utilisez pas le Blank Theme ou vous avez modifié le template posting_body



Explications
Des paramètres supplémentaires seront sûrement nécessaires pour le bon fonctionnement du plugin.

Code:

// PERSONA D'UNE FICHE DE PRESENTATION
// A cocher : sur toutes les pages

document.addEventListener("DOMContentLoaded", () => {
  new Persona({
    category: [8], // Numéro de la catégorie
    name: "fiche", // Nom du Persona
    pageTitleElement: ['.class', '.class'], // Sélecteur des titres de la page du formulaire
    textEditorContainer: '.texteditor-container', // Sélecteur du container de l'éditeur de texte
    // Autre paramètres ici, séparé par une virgule
    //
    personaHTML: function (data) {
    // Début des données du formulaire

      const {
        // Liste des noms des champs
        titrefiche,
        titreCitation,
        prenomNom,
        naissanceAge,
        genrePronoms,
        occupation,
        groupe,
        typePersonnage,
        sectionAnecdote,
        sectionCitation,
        urlAvatar,
        creditAvatar,
        irlPseudo,
        irlAge,
        fuseauHoraire,
        avis,
        //
      } = data;

      // Liste de toutes les anecdotes
      const anecdotesList = data.anecdote.map(({
        // Liste des noms des champs d'une anecdote
        titreAnecdote,
        textAnecdote,
        //
      }) => `
        <!-- Mise en page d'une anecdote -->

        <div class="fiche_anecdotes"><b>${titreAnecdote}</b>
        <br/>
        ${textAnecdote}</div>

        <!-- -->
      `).join("");
      //

    // Fin des données du formulaire

      const html = `
<!-- Début du code de la mise en page -->

<div class="fiche">
<div class="ficheBloc">
<div class="ficheBloc_head">
<div class="ficheBloc_head_title">${titrefiche}</div>
<span class="ficheBloc_head_subtitle">${titreCitation}</span>
</div>
<div class="fiche_presentation">
<div class="fiche_presentation_content">
<label>Nom, prénom(s)</label> ${prenomNom}
<br>
<label>Naissance, âge</label> ${naissanceAge}
<br>
<label>Genre, pronoms</label> ${genrePronoms}
<br>
<label>Métier, occupation</label> ${occupation}
<hr>
<label>Groupe</label> ${groupe}
<br>
<label>Type de personnage</label> ${typePersonnage}
</div>
<div class="fiche_avatar"><img src="${urlAvatar}" /></div>
</div>
</div>

<div class="ficheBloc">
<div class="ficheBloc_head">
<div class="ficheBloc_head_title">${sectionAnecdote}</div>
<span class="ficheBloc_head_subtitle">${sectionCitation}</span>
</div>
${anecdotesList}
</div>

<div class="fiche_joueur">
<label>Pseudo, prénom</label> ${irlPseudo}
 
<label>Âge</label> ${irlAge}
 
<label>Fuseau horaire</label> ${fuseauHoraire}
 
<label>Crédit de l'avatar</label> ${creditAvatar}
&nbsp;
<label>Aimez-vous ce plugin ?</label> ${avis}
</div>
</div>

<!-- Fin du code de la mise en page -->
`;
      return html;
    },
  });
});

  • pageTitleElement ce paramètre attend le sélecteur des titres de la page. Vous pouvez récupérer ces sélecteurs en faisant clic droit > inspecter l’élément sur les titres.

    Exemple: si le titre principal se construit ainsi <div class="big-title">{POST}</div> alors le paramètre sera pageTitleElement: ['.big-title']

  • textEditorContainer ce paramètre attend le sélecteur de l’élément qui contient la boîte de smiley ainsi que l’éditeur de texte. Créez-en un dans votre template si ce n’est pas déjà fait et renseignez la class dans le paramètre.

    Exemple: <div class="container-texteditor">{SMILEYS} {TEXTEDITOR}</div> alors le paramètre sera textEditorContainer: '.container-texteditor'




Voir la section des paramètres avancés


Personnaliser un Persona (formulaire) 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

Personnaliser un Persona (formulaire)




    Avant de se lancer dans la personnalisation, faisons un petit point vocabulaire pour comprendre les explications à venir.
  • mise en page : code de présentation d’une fiche (de présentation, lien, scénario, …).

  • formulaire : l’interface de champs qui apparait à la création où à l’édition d’un sujet.

  • champs : visuellement, c’est le rectangle dans lequel l’utilisateur peut écrire des informations.

  • donnée : une information écrite et enregistrée dans un champ.

  • input : en code, c’est la balise HTML qui permet de créer des champs.

  • attribut : dans une balise HTML, ce sont des informations supplémentaires qui définissent un fonctionnement.

    • Exemple: class="" ou name="" sont des attributs, l’un permet de styliser un élément, l’autre permet de lui donner un nom.


Editer le formulaire





Pour éditer le formulaire du Persona intégré lors de l’installation, il faut se rendre dans le template poster & messages privés/posting_body

Cette section va survoler l’essentiel du fonctionnement d’un formulaire. La section construire son formulaire permet d’aller encore plus loin dans la personnalisation.

Le formulaire



Un formulaire est contenu dans une balise qui prend impérativement cette forme :

Code:
<div class="personaForm" data-persona-name="fiche">
 ...
</div>

  • class="personaForm" - permet de styliser le formulaire avec la class .personaForm
  • data-persona-name="fiche" (OBLIGATOIRE) - définit le nom du Persona. Ici le nom "fiche" permet de lier ce formulaire au Persona des fiches de présentation.
    Si vous voulez le modifier, n’utilisez pas d’espace ou de caractères spéciaux.


Les champs





En HTML, un champ se construit avec des balises HTML bien précises, comme la balise <input>

Par exemple, voici le HTML du champ qui attend l’âge du personnage :

Code:
<input type="text" name="age" />

  • type="text" Il s’agit du type d’input. Le type text crée un champ dans lequel on peut mettre du texte. C’est le plus commun mais il en existe plein d’autres, détaillés dans la section construire son formulaire

  • name="age" (OBLIGATOIRE) Il s’agit de l’identifiant de l’input. Cet identifiant est très important car c’est avec lui que vous allez retrouver la donnée enregistrée par l’utilisateur.
      Impératifs :
    • Chaque input doit avoir un identifiant unique.

    • Utilisez des identifiants clairs et précis.

    • N’utilisez pas d’espace ou de caractères spéciaux.


Les champs duplicables





Les champs duplicables sont des champs que l’on peut ajouter autant de fois que l’on veut dans le formulaire. Par exemple, dans l’installation par défaut du Persona, il y a la possibilité d’ajouter plusieurs anecdotes (voir gif ci-dessus).

Le bloc HTML pour réaliser des champs duplicables se présente ainsi :

Code:
<template data-name="anecdote">
 <!-- Contenu duplicable -->                    
<div class="field">
<label>Anecdote</label>
<input type="text" name="titreAnecdote" placeholder="Nom de l'anecdote"/>
<textarea name="anecdote" placeholder="Écrire ici une anecdote"></textarea>
</div>
<!-- Fin du contenu duplicable -->
</template>
                 
<div data-container-name="anecdote">
<!-- Les blocs créés s'afficheront ici -->
</div>

<!-- Bouton pour ajouter un champ -->
<button class="addField" name="anecdote"><i class='ion-ios-plus-empty'></i> Ajouter une anecdocte</button>

Ce bloc se compose de trois éléments importants auxquels il faut donner le même identifiant afin qu’ils interagissent ensemble. Dans l’exemple, ils portent tous le nom "anecdotes" :

  • <template data-name="anecdote"> contient le modèle du contenu duplicable

  • <div data-container-name="anecdote"> reçoit les champs dupliqués

  • <button name="anecdote">Ajouter</button> permet d’ajouter un nouveau champ


Ce qui se trouve dans la balise <template> sert de modèle. C’est ce contenu qui sera dupliqué. Ce contenu est modifiable comme vous le souhaitez en ajoutant un ou plusieurs input.


Personnaliser un Persona (mise en page et fonctionnalités) 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

Personnaliser un Persona (mise en page et fonctionnalités)



Paramétrer le plugin



Le paramétrage du Persona se fait dans la page de javascript créée à la troisième étape de l’installation.

Paramètres essentiels



  • category attend le numéro de la ou des catégories dans laquelle le Persona sera utilisé (pour rappel, ce numéro se retrouve dans l’URL de la catégorie).

  • name attend le nom du Persona. Ce nom doit être le même que celui indiqué dans le formulaire dans data-persona-name=""

D’autres paramètres sont disponibles dans la section Paramètres avancés

Mise en page





Pour mettre en page votre Persona, il faut commencer par récupérer toutes les données qui sont enregistrées par le formulaire. On fait référence à ces données par le nom que l’on a donné aux champs/inputs du formulaire.

En reprenant l’exemple du champ qui attend l’âge du personnage, l’input était : <input type="text" name="age" /> alors on utilisera le mot clé age pour indiquer où s’affichera la donnée enregistrée de l’âge.

Ci-dessous, on voit comment récupérer toutes les données dans une liste où chaque nom doit être séparé d’une virgule :

Code:
const {
 prenom,
 age,
 metier
} = data;

(C’est un peu fastidieux, heureusement, le plugin prévoit le faire automatiquement. Voir la partie automatisation.

Ensuite, le code HTML de la mise en page peut être inséré à l’endroit indiqué dans les commentaires du script.

Code:
<!-- Début du code de la mise en page -->
<div class="fiche">
  <h1>Jane Doe</h1>
  <b>Age :</b> 45 ans
  <b>Métier :</b> Présidente
</div>
<!-- Fin du code de la mise en page -->

Pour que les données soient placées au bon endroit de votre mise en page, il faut les transformer en variable. Tout simplement avec cette syntaxe : ${prenom} ou ${age} ou encore ${metier}

Le code HTML de la mise en page sera donc :

Code:
<!-- Début du code de la mise en page -->
<div class="fiche">
  <h1>${prenom}</h1>
  <b>Age :</b> ${age}
  <b>Métier :</b> ${metier}
</div>
<!-- Fin du code de la mise en page -->



Mise en page des champs duplicables


(Si cette étape est un peu difficile à comprendre, n’ayez crainte. Passez à l’étape suivante sur l’automatisation de cette étape et revenez la lire plus tard pour mieux comprendre.)

Pour rappel, les champs duplicables sont ceux que l’on peut ajouter autant de fois que l’on veut dans un formulaire. Pour reprendre l’exemple des anecdotes : le nombre d’anecdotes pouvant varier d’un personnage à l’autre, il est impossible d’anticiper combien de données on doit placer dans notre mise en page.

La récupération des données de ces champs et leur mise en page doit être réalisée légèrement à part. Voici comment ça se présente :

Code:
const anecdotesList = data.anecdote.map(({ titreAnecdote, textAnecdote }) => `
<!-- Début de mise en page d'une anecdote -->
<div class="fiche_anecdotes"><b>${titreAnecdote}</b>
<br/>
${textAnecdote}</div>
<!-- Fin de mise en page d'une anecdote -->
` ).join("");

  • anecdotesList un nom personnalisé qui fait référence à toutes les anecdotes créées par l’utilisateur. Donnez le nom que vous voulez, ici ça aurait pu s’appeler également listOfAnecdote ou bien allAnecdotes par exemple.

  • data.anecdote.map contient le nom du champ duplicable. C’est le nom que vous avez donné à l’ensemble du bloc des champs duplicables dans le formulaire.

  • { titreAnecdote, textAnecdote } sont les données que contient chaque anecdote.


Le code HTML qui est intégré ici sera la mise en page d’une anecdote. Cette mise en page va se répéter autant de fois qu’il y a d’anecdotes.

Dans votre code de mise en page globale du Persona, c’est le nom personnalisé qu’il faut utiliser pour placer tous les champs duplicables. Dans notre exemple ça sera ${anecdotesList}

Code:
<!-- Début du code de la mise en page -->
<div class="fiche">
  <h1>${prenom}</h1>
  <b>Age :</b> ${age}
  <b>Métier :</b> ${metier}
  <div class="facts">
  ${anecdotesList}
 </div>
</div>
<!-- Fin du code de la mise en page -->

Automatisation





Lister toutes les données récupérées par votre formulaire et gérer les champs duplicables sont des opérations assez fastidieuses. Heureusement, le plugin vous propose de faire tout cela automatiquement !

Ouvrez un nouveau sujet afin de voir votre formulaire. Cliquez sur la petite roue crantée (visiblement unique par les admins) et activez l’affichage des données du formulaire (voir image ci-dessus) et elle vous fournira l’extraction automatique des données de votre formulaire à copier/coller dans votre code.
Utiliser plusieurs Personas 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

Utiliser plusieurs Personas



Un Persona est valable pour un type de sujet de gestion de personnage. Tout au long de ce tutoriel, nous avons installé et paramétré le Persona d’une fiche de présentation. Il est possible de faire la même chose pour une fiche de lien ou une fiche de scénario, par exemple.

Pour cela, installez un nouveau Persona à partir de la deuxième étape.

Intégrer un (nouveau) formulaire



Créez un nouveau formulaire sur la même base que le premier. Vous pouvez le mettre après ou avant, peu importe. Changez le nom du formulaire dans l’attribut data-persona-name Par exemple, pour un Persona de lien :

Code:
<div id="personaForm" data-persona-name="lien">
 ...
</div>

Modifiez les champs du formulaire comme souhaitez.

Initialiser un (nouveau) plugin



Créez une nouvelle page javascript avec un nouveau nom et n’oubliez pas de cocher l’activation sur toutes les pages. Copiez/collez le code suivant en pensant à bien modifier les informations essentielles sur la catégorie et le nom du Persona :

Code:
document.addEventListener("DOMContentLoaded", () => {
 new Persona({
 category: [5], // Numéro de la catégorie
 name: 'lien', // Nom du Persona
 personaHTML: function (data) {
  ...
Construire un formulaire 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

Construire un formulaire



Créer des champs de formulaire



Les champs de formulaire sont créés avec des balises HTML bien précises. Ces balises fonctionnent avec des attributs qui définissent leur fonctionnement.



Input


Code:
<!-- Exemple de champ pour l'âge -->
<input type="text" name="age" placeholder="Écrire ici"/>

    La balise de champ par défaut. Elle se décline sous plusieurs type :
  • type text pour les champs de texte simple

  • type number pour les champs qui n’acceptent que des nombres

  • type range pour créer des jauges numériques

  • type color pour créer un sélecteur de couleur

  • type radio pour sélectionner un choix parmi une liste (voir Input radio)


Textarea


Code:
<!-- Exemple de champ pour le caractère -->
<textarea name="caractere" placeholder="Décrivez ses qualités et ses défauts"></textarea>

Elle permet de créer un champ pour recevoir du texte plus long et l’utilisateur peut modifier sa taille.



Select


Code:
<!-- Exemple d'un menu déroulant pour choisir un groupe -->
<select name="groupe">
 <option value="groupe">Choisir le groupe</option>
 <option value="Alpha">Alpha</option>
 <option value="Bêta">Bêta</option>
 <option value="Charlie">Charlie</option>
</select>

Elle crée un menu déroulant avec des choix prédéfinis.

C’est la balise <select> qui prend l’attribut name=""

Chaque choix doit être défini dans une balise <option> et c’est l’attribut value="" qui comporte la donnée qui sera enregistrée et affichée dans un sujet.

La première balise <option> est le choix par défaut du champ. L’attribut value="" peut être laissé vide.

Input radio




Code:
<!-- Exemple d'une liste à choix -->
<input type="radio" name="avis" id="oui" value="Oui, top !" /> <label for="oui">Oui, top !</label>

<input type="radio" name="avis" id="non" value="Non, pas du tout." /> <label for="non">Non, pas du tout.</label>

<input type="radio" name="avis" id="troll" value="La réponse D" /> <label for="troll">La réponse D</label>

L’input de type radio créé une liste de choix prédéfinis où seul un choix peut être coché.

Tous les <input> appartenant à la même liste de choix doivent contenir le même attribut name=""

Il faut créer une combinaison des deux balises <input> et <label> pour chaque choix disponible.

Pour lier les deux balises entre elles, la balise <input> doit contenir un attribut id="" et la balise <label> doit contenir un attribut for="", tous les deux avec une valeur identique (et unique).

Enfin, c’est l’attribut value="" qui comporte la valeur qui sera enregistrée et affichée dans un sujet.




Structure



Les codes ci-dessous sont facultatifs. Ce sont des petits composants déjà codés pour vous aider à organiser votre formulaire.

Groupe de champs



Permet de regrouper plusieurs champs dans une section avec un titre.

Code:
<fieldset>
 <!-- Titre de la section -->
 <legend>Identité</legend>
 
 <!-- Liste des champs de la section -->
 
</fieldset>

Champ



Contient l’intitulé d’un champ et de sa description.

Code:
<div class="field">
 <!-- Intitulé du champ -->
 <label>Prénom(s), nom(s)</label>
 <div class="field-description">Description du champs</div>
 <!-- Balise du champ -->
 <textarea name="prenomNom" placeholder="Écrire ici"></textarea>
</div>

Deux colonnes



Permet d’afficher autant de champs que désiré dans deux colonnes.

Code:
<div class="fields-columns">
 <div class="field">
 <!-- Balise du champ -->
 </div>
                      
  <div class="field">
 <!-- Balise du champ -->
 </div>
</div>

Input à choix personnalisés



Personnalisation de l’input type radio.

Code:
<div class="checkbox-input">
 <input type="radio" name="avis" id="oui" value="Oui, top !" />
 <label for="oui" class="checkbox">Oui, top !</label>
 
 <input type="radio" name="avis" id="non" value="Non, pas du tout." />
 <label for="non" class="checkbox">Non, pas du tout.</label>
 
 <input type="radio" name="avis" id="troll" value="La réponse D" />
 <label for="troll" class="checkbox">La réponse D</label>
</div>

Aperçu d’une image



Permet de créer un aperçu de l’URL d’un champ.

L’élément qui contient la prévisualisation doit avoir la même valeur que le nom du champ de l’URL dans l’attribut data-preview=""  comme dans l’exemple suivant :

Code:
<!-- Élement qui affichera la prévisualisation de l'avatar -->
<div class="image-preview avatar" data-preview="urlAvatar"></div>

<!-- Champ pour l'URL de l'avatar -->
<div class="field">
 <label for="urlAvatar">URL Avatar</label>
 <input type="text" name="urlAvatar" placeholder="https://..." />
</div>
Paramètres avancés du plugin 
Blank
Admin

Blank

En ligne

Pronoun(s) : Elle/she
Messages : 149

   

Paramètres avancés du plugin



Les paramètres sont à ajouter dans la page javascript qui initialise le plugin. Ils sont à lister à la suite des paramètres category ou name qui sont déjà présents et ils doivent être séparés par une virgule, comme ici :

Code:
new Persona({
 category: [17,9],
 name: 'fiche',
 deleteButton: '<i class="bi bi-x"></i>',
 enableCheckImage: true,
 option: valeur,
 autreOption: valeur,
 ...
})

Syntaxe



    Les paramètres sont des options qui attendent des types de valeurs très précises. Ici, vous allez en rencontrer quatre :
  • boolean est une valeur binaire qui peut être soit true (vrai) soit false (faux), pour activer ou désactiver une option.

  • string est une valeur en chaîne de caractère qui s’écrit entre doubles guillemets "". On peut y mettre du texte mais aussi du HTML. Attention ! Remplacez les guillemets de votre HTML par de simples apostrophes sinon votre string va se fermer trop tôt. <i class="icon"></i> → <i class='icon'></i>

  • array est un tableau, une valeur qui peut en recevoir plusieurs. Chaque valeur doit être séparée par une virgule.

  • function est une fonction qui va effectuer une action.


Paramètres



Chaque paramètre possède une valeur par défaut qui sera appliquée si ce paramètre n’est pas renseigné dans l’initialisation du script.

Category


Valeur par défaut : [0] (array)

La valeur attend le numéro de la ou des catégories où est activé le Persona.
Pour trouver ce numéro, ouvrez la catégorie dans votre navigateur et regardez dans son URL. Exemple : votrerpg.forumactif.com/f3-fiche-de-presentation le numéro de la catégorie est 3

Name


Valeur par défaut : "fiche" (string)

La valeur attend le nom du Persona. Ce nom doit être le même que celui qui est renseigné dans l’attribut data-persona-name du formulaire intégré dans le template posting_body.





pageTitleElement


Valeur par défaut : ["h1.page-title", ".panel h3"] (array)

Ce paramètre attend les sélecteurs permettant de cibler les titres de la page de création ou édition d’un sujet. Par défaut, ce sont les sélecteurs propres au Blank Theme, à savoir h1.page-title et .panel h3 (pour vous aider à les repérer, cherchez {L_POST_A} dans votre template posting_body ou en faisant clic droit > inspecter l’élément sur les titre de la page).
Leur contenu sera modifié par la phrase indiquée dans le paramètre personaPageTitle.

personaPageTitle


Valeur par défaut :
Code:
personaPageTitle: function (action) {
 return action + " sa fiche de présentation";
},

Cette fonction permet de modifier le titre de la page où s’affiche le formulaire. Normalement, le titre affiche “Poster un nouveau sujet” mais grâce à ce paramètre le titre est désormais “Poster sa fiche de présentation”.

La phrase commencera obligatoirement par un verbe d’action qui peut être “poster” ou “editer”.





textEditorContainer


Valeur par défaut : ".message-edition" (string)

Ce paramètre attend le sélecteur de l’élément qui contient la boîte de smileys et l’éditeur de texte de le page.
Si vous n’utilisez pas le Blank Theme, assurez-vous d’avoir ces deux éléments dans une balise commune. Cela permettra au plugin de masquer l’éditeur de texte et les smileys dans la page.



deleteButton


Valeur par défaut : "" (string)

Ce paramètre attend le texte ou le HTML du bouton de suppression d’un champ duplicable.
Par défaut, le bouton utilise une icône issue de la bibliothèque  Ionicons utilisé par défaut par Forumactif. En change la classe de la balise <i> par une de celle listé dans leur documentation, vous obtiendrez des icones différents.





enableCheckTag


Valeur par défaut : true (boolean)
Ce paramètre active la vérification des balises HTML intégrées par l’utilisateur dans un champ (bonne syntaxe, balise fermée, guillemets présents, …).

messageTagError


Valeur par défaut : "Vérifiez votre code HTML." (string)

Ce paramètre détermine le message d’erreur qui s’affiche aux utilisateurs lorsqu’une erreur HTML a été détectée dans leur champ.





enableCheckImage


Valeur par défaut : true (boolean)

Ce paramètre active la vérification d’un lien valable d’une image hébergée.

messageImageError


Valeur par défaut : "Vérifiez l'URL ou l'hébergement de votre image." (string)

Ce paramètre détermine le message d’erreur qui s’affiche aux utilisateurs lorsque le lien d’une image est faux ou mal hébergé.



personaScript


Valeur par défaut :
Code:
function (persona) {
 // Javascript ici
},

Permet d’ajouter du javascript à la mise en page d’un Persona. L’argument persona vous permet de cibler directement la mise en page.
Re: Persona (bêta) 
Contenu sponsorisé


En ligne


   

 

Follow the Fairies LA SOUVERAINETales of Warlordsheaven in hidingDichotomiaEsotericWE DARE YOUBless with a CurseNEVER FADE AWAYWHAT REMAINSRuins & RisingAll delighted peopleCloud City 20177The Ninth Moon

Airpéger

Outils d'écriture

Bottin des RPG

Serveur discord de publicité

La Piscine

Serveur discord d'entraide de code

Poumon.io

Blog et libre-service de code