csv2list ~ liste avec points de conduite

Un moyen rapide de saisir des listes de prix, de résultats.

➠ csv2list : Conversion d'un contenu au format CSV en liste avec point de conduite

Cliquer pour lire la documentation

1/ {up csv2list=emplacement-fichier} // le contenu est lu dans un fichier
2/ {up csv2list}
article 1;5€
article 2;25€
{/up csv2list}
Ressources : caractères unicode, caractères spéciaux et couleurs sures
author LOMART version 1.0 license GNU/GPLv3
  • csv2list: chemin vers fichier à afficher
  • separator = ;: separateur des colonnes
  • HTML = b,a,span,strong,i,em,u,mark,small,img,code: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
  • model = stack: nom de la classe modele dans le fichier csv2list.css
  • leaders = 0: points de conduite
  • leaders-color: couleur points de conduite
  • class: classe(s) pour la balise UL
  • style: style inline pour la balise UL
  • col-style-*: style inline pour les nièmes balise SPAN
  • list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
  • bgcolor: couleur de fond. #FFF par defaut
  • header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
  • header-class: classe(s) pour la première balise LI si titre
  • header-style: style pour la première balise LI si titre
  • header-bgcolor: couleur de fond du titre
  • footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
  • footer-class: classe(s) pour la dernière balise LI si pied
  • footer-style: style pour la dernière balise LI si pied
  • footer-bgcolor: couleur de fond de la dernière ligne
  • base-css: règles CSS définies par le webmaster (ajout dans le head)

    Cette action s'inspire de cet article du W3C.

    J'avais besoin de saisir une liste des temps nécessaires pour rejoindre d'autres villes. J'aurais pu coder à la main, mais j'ai trouvé plus pratique de créer cette action réutilisable.
    Ce type de liste est très utilisé pour des menus, des listes d'ingrédients, des résultats sportifs, ...

    Pour la démo, je vais utiliser une liste de course, saisie sous forme d'un fichier CSV.

    {up csv2list | leaders=1 | header=1 | footer=1}
    <p>Produit;Prix TTC</p>
        Pinceau; 2.50€
    <p>   Rouleau; 5.60€</p>
    "Peinture à rayures bleues avec des petits pois rouges entourés d'un liseré jaune pastel, mais très discret"; 15.65€
    		Total; 23.75€
    {/up csv2list}
    • Produit Prix TTC
    • Pinceau2.50€
    • Rouleau5.60€
    • Peinture à rayures bleues avec des petits pois rouges entourés d'un liseré jaune pastel; mais très discret15.65€

    La liste est saisie entre les shortcodes en respectant la norme CSV. Chaque colonne est séparée par un point-virgule. Si le texte contient un point-virgule, il est possible de le mettre entre guillemets. Vous remarquerez que les balises HTML, lignes et espaces inutiles sont supprimés du contenu. L'important est que chaque ligne de la liste soit sur une ligne spécifique.

    L'option leaders indique que l'on affiche des points de conduite et header / footer que la première et la dernière ligne sont le titre et le pied de la liste.

    Source externe

    Dans l'exemple ci-dessous, nous utilisons le contenu d'un fichier situé sur un autre site.

    {up csv2list=https://lomart.fr/images/demo/android-version.csv 
     | separator=, 
     | leaders		
     | header=version Android, nom de code
    }
    • version Android nom de code
    • 2.3.3 – 2.3.7Gingerbread
    • 4.0.3 – 4.0.4Ice Cream Sandwich
    • 4.1.x, 4.2.x et 4.3Jelly Bean
    • 4.4KitKat
    • 5.0 et 5.1Lollipop
    • 6.0Marshmallow
    • 7.0 et 7.1Nougat
    • 8.0 et 8.1Oreo
    • 9Pie

    Le nom de l'action csv2list reçoit comme argument le chemin du fichier et separator le caractère utilisé dans le fichier pour séparer les colonnes. leaders demande l'affichage des points de conduite. Comme le fichier ne contient pas les titres de colonnes, nous les spécifions comme arguments de header. Notez que le séparateur est le même que celui utilisé dans le fichier.

    Un peu de style

    On aime ou on n'aime pas, mais cet exemple montre l'ensemble des possibilités pour décorer votre liste.

    Ceci peut être fait à 2 niveaux :

    • ❶ les personnalisations globales dans le shortcode
    • ❷ ligne par ligne dans les données
    {up csv2list
     | leaders=>## | leaders-color=red
     | bgcolor=LightBlue | style=border:2px solid #01315A | class=ombreMax
     | list-style=2714,#080
     | col-style-1=font-style:italic | col-style-3=color:red;font-weight:bold
     | header=1  | header-bgcolor=#069  | header-style=color:white;border:none 
     | footer=1 | footer-bgcolor=#069 | footer-style=color:white
     | base-css=
         #id a[text-decoration:underline] 
         #id li[padding:0 5px] 
         li.fond-jaune,li.fond-jaune > span, li.fond-jaune:not(.header):not(.footer)::before[background:yellow !important;]
    }
    Produit;Prix TTC
    <a href="https://www.qwant.com/?q=Pinceau&t=web" target="_blank">Pinceau</a>; 2.50€
    [ico-moins]Rouleau <img src="images/admin/menu/A16.png">; 5.60€; Promo
    "[fond-jaune]Peinture à rayures <span class='bg-bleu'>bleues</span> avec des petits pois rouges entourés d'un liseré jaune pastel; mais discret"; 15.65€
    Total; 23.75€
    {/up csv2list}
    

     

    • Produit Prix TTC
    • Pinceau 2.50€Promo
    • Rouleau5.60€
    • Peinture à rayures bleues avec des petits pois rouges entourés d'un liseré jaune pastel; mais discret15.65€

    L'explication du shortcode

    Ligne 2
    L'argument leaders est le symbole utilisé comme point de conduite. Les dièses (#) seront remplacés par des espaces. Pour mémoire, il suffit de mettre leaders seul ou égal à 1 pour utiliser les points de conduite par défaut.
    leaders-color est simplement la couleur des points de conduites.
    Ligne 3
    un fond bleu clair est défini par bgcolor pour le bloc liste. Il faut toujours utiliser les paramètres pour indiquer les couleurs de fond afin de laisser l'action créer les règles CSS qui en dépendent.
    Le paramètre style ajoute une bordure bleue et class un effet d'ombrage
    Ligne 4
    par défaut, aucune puce au début des lignes, mais il est possible de faire mieux en indiquant comme argument de list-style le code hexadécimal du caractère à utiliser et sa couleur sous une des formes autorisées (nom, code hexa, rgb(r,v,b). Voir caractères unicode et caractères spéciaux sur mon site.
    Ligne 5
    le paramètre col-style-1 permet d'indiquer le style commun à la première colonne du CSV.
    col-style-3 contient le style pour la 3ème colonne (Promo)
    Ligne 6
    header=1 pour utiliser la première ligne comme titre avec header-bgcolor comme couleur de fond. header-style force le texte en blanc et annule la bordure par défaut
    Ligne 7
    footer=1 pour utiliser la dernière ligne comme titre avec footer-bgcolor comme couleur de fond.
    footer-style force le texte en blanc. J'ai volontairement omis le "border:none" du header pour montrer la bordure grise par défaut.
    Ligne 8-11
    Base-css permet d'ajouter des règles CSS dans le head de la page. Pour plus de clarté, j'écris chaque règle CSS sur une nouvelle ligne.
    9 / #id sera remplacé par l'identifiant unique du shortcode pour que le soulignage des liens soit actif uniquement pour cette liste.
    10 / Aucun des paramètres ne ciblant globalement les lignes, nous ajoutons un padding sur les lignes.
    11 / Définition d'un ensemble de règles 'fond-jaune' que nous utiliserons à la ligne 16
    Comme d'habitude, les crochets [] seront remplacés par des accolades {}.
    Ligne 13
    Le texte pour le titre en première ligne comme demandé par le paramètre header
    Ligne 14
    le contenu de la liste accepte les balises HTML suivantes : a, b, strong, em, i, u, span, mark, small, img, code.
    sur cette ligne, notez une 3ème colonne qui permet d'indiquer l'info supplémentaire 'Promo'. L'action peut gérer 6 colonnes.
    Ligne 15
    si le texte d'une ligne commence par des crochets, on considère que c'est le nom d'une classe. Ici, nous changeons la puce pour la ligne. Plus d'explication dans la section les puces
    Il est possible d'indiquer l'unicode hexadécimal et sa couleur. Exemple [2776,#f00]. Attention, cette méthode est incompatible avec l'utilisation de list-style
    Ligne 16
    nous demandons l'utilisation de la classe définie 'fond-jaune' dans base-css.
    Si l'ajout d'un fond à la ligne li.fond-jaune est évident, li.fond-jaune > span demande de changer la couleur, blanche par défaut, de fond des textes qui masque les points de conduites,
    li.fond-jaune:not(.header):not(.footer)::before cible le fond de la puce définie par list-style.
    Notez au passage que le texte est entre guillemets pour autoriser le point-virgule dans la chaîne.
    Vous aurez aussi remarqué que les points de conduite passent bien à la ligne avec le texte.
    Ligne 17
    Le texte pour le pied de liste comme demandé par le paramètre footer
    Ligne 18
    et bien sûr, on n'oublie pas le shortcode de fermeture

    Et pour la liste numérotée ...

    c'est simplement l'ajout du code hexa du caractère unicode et de sa couleur

    • ❶ les personnalisations globales dans le shortcode
    • ❷ ligne par ligne dans les données
    {up csv2list}
    [2776,#369]les personnalisations globales dans le shortcode
    [2777,#369]ligne par ligne dans les données
    {/up csv2list}

    Personnaliser pour gagner du temps en saisie

    Pour faciliter le travail des rédacteurs et uniformiser la présentation de votre site, utilisez les options de personnalisation de UP.

    • créez un fichier pref.ini dans le sous-dossier custom de l'action avec les valeurs par défaut des paramètres du shortcode
    • dupliquez le fichier csv2list.css ou sa version scss dans le sous-dossier custom de l'action. Vous pouvez le modifier et le compléter, il ne sera jamais remplacé lors d'une mise à jour

    Avec ce shortcode, on obtient ceci :

    {up csv2list | model=soleil  | header | footer | leaders }
    Produit;Prix TTC
    Pinceau; 2.50€
    Rouleau; 5.60€
    "Peinture à rayures bleues avec des petits pois rouges entourés d'un liseré jaune pastel, mais discret"; 15.65€
    Total; 23.75€
    {/up csv2list}
    
    • Produit Prix TTC
    • Pinceau2.50€
    • Rouleau5.60€Promo
    • Peinture à rayures bleues avec des petits pois rouges entourés d'un liseré jaune pastel, mais discret15.65€

    La classe "soleil" est dans la version de base de l'action. Le code SCSS est le suivant :

    ul.csv2list.soleil {
        padding:0 5px;
        background:LemonChiffon;
        box-shadow: 10px 10px 30px 0 rgba(128,128,128,.5);
        // le fond des textes pour cacher les points de conduite
        li > span {
            background:LemonChiffon;}
        // les séparations avec titre et pied
        .header {border-bottom: 3px skyBlue dotted;}    
        .footer {border-top: 3px skyBlue dotted;}    
        // la puce devant les lignes    
        li:not(.header):not(.footer):before {
            content:url(img/seasun.png)"\A0\A0"; // \A0 est un espace
            background:LemonChiffon;} // pour masquer les leaders
    }
    

    Les puces

    Pour simuler des puces en début de ligne, on dispose de plusieurs méthodes.

    des images

    Le résultat
    • les puces 'image'
    • img-oui
    • img-non
    • img-plus
    • img-moins
    Le shortcode
    {up csv2list | model=soleil | header=les puces 'image'}
    	[img-oui] img-oui
    	[img-non] img-non
    	[img-plus] img-plus
    	[img-moins] img-moins
    {/up csv2list}
    
    Le CSS
    .img-oui{background:url(img/ok.png) no-repeat 2px center ; padding-left:25px !important}
    .img-non{background:url(img/error.png) no-repeat 2px center; padding-left:25px !important}
    .img-plus{background:url(img/plus.png) no-repeat 2px center; padding-left:25px !important}
    .img-moins{background:url(img/moins.png) no-repeat 2px center; padding-left:25px !important}
    

    des caractères unicode

    Le résultat
    • les puces 'Unicode'
    • uni-oui
    • uni-non
    • uni-coeur
    • uni-etoile
    Le shortcode
    {up csv2list | header=les puces 'Unicode' | footer=0}
      [uni-oui] uni-oui 
      [uni-non] uni-non
      [uni-coeur] uni-coeur
      [uni-etoile] uni-etoile
    {/up csv2list}
    
    Le CSS
    .uni-oui:before {content:"\2705  " !important}
    .uni-non:before {content:"\274C  " !important}
    .uni-coeur:before {content:"\2764  " !important; color:red !important}
    .uni-etoile:before {content:"\2B50  " !important}
    

    des caractères icomoon, fontAwesome, ...

    Il serait possible d'utiliser directement les classes de la police d'icône installée sur votre site, mais elles sont prévues pour une utilisation inline comme avec une balise span. Pour éviter ces inconvénients, il est préférable de réecrire la règle.

    Le résultat
    • les puces icomoon & Cie
    • ico-oui
    • ico-non
    • ico-plus
    • ico-moins
    Le shortcode
    {up csv2list | model=tan | header=les puces icomoon & Cie}
      [ico-oui] ico-oui 
      [ico-non] ico-non
      [ico-plus] ico-plus
      [ico-moins] ico-moins
    {/up csv2list}
    
    Le CSS
    .ico-oui:before{font-family: 'IcoMoon';content: "\47  " !important;color:green !important}
    .ico-non:before{font-family: 'IcoMoon';content: "\49  " !important;color:red !important}
    .ico-plus:before{font-family: 'FontAwesome';content: "\f067  " !important;color:green !important}
    .ico-moins:before{font-family: 'FontAwesome';content: "\f068  " !important;color:red !important}
    

    Les listes des caractères Icomoon et font-awesome sont disponibles sur mon site principal. Utilisez l'inspecteur de code pour récupérer le code du caractère.

    Cas particulier : fond de ligne coloré

    Pour ajouter un fond coloré sur une ligne, il suffit d'indiquer une classe couleur comme celles proposées par UP en plus d'une des règles "puces" ci-dessus. La présence de points de conduite complique la chose. Il faut intégrer la couleur dans la règle ou créer des règles couleurs spécifiques

    • Avec classe couleur sans point de conduite
    • uni-oui bg-jaune
    • ico-non bg-bleuPale
    • img-plus bg-violet
    • Avec classe couleur et point de conduite
    • uni-oui bg-jaune
    • ico-non bg-bleuPale
    • img-plus bg-violet
    • Avec CSS incluant la couleur de fond
    • uni-oui-jaune
    • ico-non-bleuPale
    • img-plus-violet
    li.uni-oui-jaune { 
        background:$jaune;
        &:before{content:"\2705  " !important}
        &:not(.header):not(.footer) > span {background:$jaune}
    }
    li.ico-non-bleuPale {
        background:$bleuPale;
        &:before{font-family: 'IcoMoon';content: "\49  " !important;color:red !important}
        &:not(.header):not(.footer) > span {background:$bleuPale}
    }
    li.img-plus-violet {
        color:#fff;
        background:$violet url(img/plus.png) no-repeat 2px center; padding-left:25px !important;
        &:not(.header):not(.footer) > span {background:$violet}
    }
    
    • Avec classe "Puces" + classe couleur spécifique
    • uni-oui jaune
    • ico-non bleuPale
    • img-plus violet

    L'avantage de cette méthode :
    il est possible d'utiliser n'importe quelle puce avec n'importe quelle couleur !

    notes:
    1/ le selecteur CSS restreint l'utilisation à cette action
    2/ on utilise background-color pour être compatible avec le cas d'une puce image (qui utilise background)

    .csv2list .jaune{
        background-color:$jaune;
        &:not(.header):not(.footer) > span {background:$jaune}
    }
    .csv2list .bleuPale{
        background-color:$bleuPale;
        &:not(.header):not(.footer) > span {background:$bleuPale}
    }
    .csv2list .violet{
        background-color:$violet; color:#fff;
        &:not(.header):not(.footer) > span {background:$violet}
    }