csv2def ~ liste de définition

Un moyen rapide de saisir un glossaire, un dictionnaire, une collection, des descriptifs, un trombinoscope, ...

Cette action fait partie d'une trilogie avec csv2table et csv2list

➠ csv2def : Conversion d'un contenu au format CSV en liste de définition (DL/DT/DD)

Cliquer pour lire la documentation

1/ {up csv2def=emplacement-fichier} // le contenu est lu dans un fichier
2/ {up csv2def}
[=item=]definition
[=item1; "item;2"; ...=]
definition1
{===}
definition 2
{/up csv2def}
author LOMART version 1.0 license GNU/GPLv3
  • csv2def: chemin vers fichier à afficher
  • separator = ;: separateur des colonnes (fichier uniquement)
  • HTML = 0: pour fichier (contenu CSV): 0=affiche le rendu, 1=affiche le code ou liste des tags conserves (strip_tags)
  • model = stack: empile par defaut, sinon nom de la classe principale : flex. Voir csv2def.css
  • class: classe(s) pour la balise DL
  • style: style inline pour la balise DL
  • term-class: classe(s) pour le bloc des termes
  • term-style: style pour le bloc des termes
  • term-style-separator: style pour separer les differents termes
  • def-class: classe(s) pour le bloc des definitions
  • def-style: style pour le bloc des definitions
  • def-style-separator: style pour separer les differentes definitions
  • base-css: règles CSS définies par le webmaster (ajout dans le head)
  • flex-vgap = 10: espace vertical (px) entre les blocs dt/dd
  • flex-hgap = 10: espace horizontal (px) entre les blocs dt et dd
  • flex-term-width = 25: largeur en pourcentage de la colonne des termes

    L'intérêt de cette action est de présenter une liste de définition en respectant les standards du web au niveau sémantique.

    De base, cette liste peut être présentée sous 2 formes :

    Empilé par défaut

    {up csv2def}
    un terme à définir
    autre
    la définition unique pour ce terme

    un autre terme
    un synonyme du terme
    la définition

    soleil du texte ou des images ...

    Une deuxième définition pour ce terme

    Sur 2 colonnes

    {up csv2def | model=flex }
    un terme à définir
    la définition unique pour ce terme

    un autre terme
    un synonyme du terme
    la définition

    soleil du texte ou des images ...

    Une deuxième définition pour ce terme

    La source des données peut être :

    • Le contenu d'un fichier au format CSV
      {up csv2def=chemin du fichier}
      Le fichier doit contenir un terme et sa définition sur une ligne au format csv. Exemple : terme;"définition".

      Le fichier langage du module LMCustom

      Le code
      {up csv2def=modules/mod_lmcustom/language/fr-FR/fr-FR.mod_lmcustom.sys.ini | separator== | HTML=0 | class=bd-violet p2 }
      

      le chemin vers le fichier est l'argument principal de l'action. Le séparateur d'un fichier langue de Joomla étant le signe égal, on l'indique. HTML=0 demande d'afficher le rendu HTML et class ajoute une bordure violette et un padding pour la présentation.

      Le résultat
      [system]
      MOD_LMCUSTOM
      LM-Custom-SITE - Contenu personnalisé avancé
      MOD_LMCUSTOM_XML_DESCRIPTION

      Module LM-CUSTOM (version Site) : Module personnalisé avancé.

      LM-CUSTOM ajoute les fonctionnalités suivantes au module MOD_CUSTOM

      • saisie contenu avec un éditeur de code
      • possibilité de code PHP dans le contenu
      • insertion fichier(s) JS/CSS dans le HEAD de la page
      • insertion code JS/CSS dans le HEAD de la page
      • Code libre dans le Head (version site uniquement)
      • Gestion GoogleFont (version site uniquement)
      • Affichage sous condition (version site uniquement)

      Existe en version site et administrator

      Documentation sur le site lomart.fr

    • le texte saisi entre les shortcodes ouvrant et fermant, comme dans l'exemple ci-dessus :
      La saisie en mode code
      {up csv2def}
        <p>[=un terme à définir=]la définition unique pour ce terme</p>
        <p>[=un autre terme; un <span class="t-rouge">synonyme</span> du terme=]</p>
        <h5>la définition</h5>
        <p class="pb1"><img src="images/actions-demo/csv2/seasun2.png" alt="soleil" /> du texte ou des images ...</p>
        <p>{===}</p>
        <p>Une deuxième définition pour ce terme</p>
      {/up csv2def}
      
      La saisie avec TinyMCE
      scv2def avec TinyMCE

      Le ou les termes ainsi que son unique définition peuvent être sur une ou plusieurs lignes. La saisie sur plusieurs lignes est conseillée avec un éditeur comme TinyMCE ou JCE.
      Les termes à définir sont encadrés par [= et =]. Il est possible de les enrichir avec des balises "inline" (span,b,strong,i,em,u,mark,a,code,img)
      la définition est du code HTML libre. {===}" est utilisé pour séparer les différentes définitions d'un m^me terme.

      Note: le modèle de saisie au format CSV a été abandonné afin d'augmenter les possibilités de présentation.

    Les paramètres

    pour l'interprétation des données d'un fichier

    separator
    caractère séparant le terme de sa définition dans un fichier CSV. Sans objet, si saisie entre shortcodes. Point-virgule par défaut.
    HTML
    traitement dans le cas où la définition contient des balises HTML.
    • 0 : par défaut, on affiche le résultat. Exemple : l'image
    • 1 : les balises sont converties en entités HTML. Exemple : <img src="images/img.png">
    • autre : liste des balises conservées pour un affichage du résultat. Les autres balises sont supprimées. Exemple:a,img

    pour la mise en forme

    model
    stack (empilé) par défaut, ou flex pour une présentation sur 2 colonnes. Si vous ajoutez vos propres modèles, le nom de la classe
    class
    style
    appliqué à la balise principale (DL)
    term-class
    term-style
    enrichissement des termes (DT)
    def-class
    def-style
    enrichissement des définitions (DD)
    term-style-separator
    def-style-separator
    style appliqué pour séparer visuellement les différents termes et définitions
    exemple : border-bottom:1px solid gray ou background:LightYellow;padding:10px
    Note: la bordure inférieure du dernier item d'un groupe est toujours supprimée.

    pour la mise en forme FLEX sur 2 colonnes

    flex-term-width
    largeur en pourcentage de la colonne des termes. La colonne des définitions occupant la place restante. model=flex uniquement
    flex-vgap
    flex-hgap
    uniquement si model=flex; espace vertical et horizontal (en pixels) entre les blocs d'une présentation flex

    Petit guide pour personnaliser

    Avec une classe 'model'

    Je vais reprendre le premier exemple en ajoutant uniquement la classe "blue" au paramètre model du shortcode.
    {up csv2def | model=flex blue }

    Le résultat
    un terme à définir
    la définition unique pour ce terme

    un autre terme
    un synonyme du terme
    la définition

    soleil du texte ou des images ...

    Une deuxième définition pour ce terme

    Il suffit d'ajouter les personnalisations.
    La largeur de colonnes, la suppression des espaces et bordures inutiles sont toujours actives

    Le SCSS commenté
    dl.csv2def.flex.blue {
        > *:nth-child(odd) {
            // la colonne DT
            background-color:$bleu;
            color:#fff;
            text-align:left;
        }
        > *:nth-child(even) {
            // la colonne DD
            background-color:$bleuPale;
        }
        > div > dt {
            // le separateur pour multi-terme
            border-bottom:#ff8 solid 2px;
        }
        > div > dd {
            // le separateur pour multi-definition
            border-bottom:$bleu solid 2px;
        }
    }

    uniquement avec les paramètres du shortcode

    Pour une utilisation unique, il peut être préférable de ne pas créer de classe modèle.
    Dans l'exemple suivant, nous obtenons le même résultat uniquement avec les options du shortcode.
    Je vous laisse étudier le shortcode ...

    Le résultat
    un terme à définir
    la définition unique pour ce terme

    un autre terme
    un synonyme du terme
    la définition

    soleil du texte ou des images ...

    Une deuxième définition pour ce terme

    J'ai profité de cet exemple pour modifier la largeur des colonnes flex-term-width et les espaces entre les blocs flex-vgap/flex-hgap. J'aurais pu adapter le SCSS, mais Il est tellement plus simple de laisser UP faire les calculs.
    Pour les courageux, voici le code CSS correspondant :

    dl.csv2def.blue{padding:4px 0px 0 0px}
    dl.csv2def.blue > *:nth-child(odd){margin:0 0px 4px 0;width:40%}
    dl.csv2def.blue > *:nth-child(even){margin:0 0 4px 0;width:calc(60% - 0px)}
    
    Le shortcode
    {up csv2def | model=flex 
    | term-class=bg-bleu t-blanc
    | term-style=text-align:left
    | term-style-separator=border-bottom:#ff8 solid 2px;
    | def-class=bg-bleuPale
    | def-style-separator=border-bottom:#369 solid 2px;
    | flex-term-width=40
    | flex-vgap=4
    | flex-hgap=0
    }
    <p>[=un terme à définir=]la définition unique pour ce terme</p>
    <p>[=un autre terme; un <span class="t-rouge">synonyme</span> du terme=]</p>
    <h5>la définition</h5>
    <p class="pb1"><img src="images/actions-demo/csv2/seasun2.png" alt="soleil" /> du texte ou des images ...</p>
    <p>{===}</p>
    <p>Une deuxième définition pour ce terme</p>
    {/up csv2def}
    

    Si vous voulez que toutes vos listes de définitions aient cette présentation, il suffit de créer un fichier prefs.ini dans le sous dossier custom avec les paramètres par défaut. Inspirez-vous du fichier prefs.ini.dist