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

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 :

{up csv2def}

{up csv2def | model=flex }

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

  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 (+BODY version site)
  • insertion code JS/CSS dans le HEAD de la page (+BODY version site)
  • Code libre dans le Head et Body(version site uniquement)
  • Gestion GoogleFont (version site uniquement)
  • Affichage sous condition (version site uniquement)
  • possibilité commentaires (lignes commençant par un point-virgule ou dièse+espace) New v2.6

  Existe en version site et administrator

  Documentation sur le site lomart.fr

  Voir un exemple avec un fichier langage de Joomlareplier
• 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

  

  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 saisi 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 }

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 ...

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)}

{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