csv2list ~ liste avec points de conduite

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

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 [span class='t-bleu']bleues[/span] avec des petits pois [b style=""color:red""]rouges[/b] entourés d'un liseré jaune pastel, mais très discret"; 15.65€
		Total; 23.75€
{/up csv2list}

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.

Version 1.8 Les mots bleues et rouge sont mis en couleurs en utilisant la nouvelle méthode bbcode

Source externe

{up csv2list=https://lomart.fr/images/demo/android-version.csv 
 | separator=, 
 | leaders		
 | header=version Android, nom de code
}

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.

Pour les utilisateurs de Mac avec Excel, il faut utiliser l'enregistrement sous CSV UTF8 et même s'il indique que le séparateur sera une virgule, dans le paramètre de csv2list utiliser "separator=;"

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
 | css-head=
     #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']&nbsp;bleues[/span] avec des petits pois rouges entourés d'un liseré jaune pastel; mais discret"; 15.65€
Total; 23.75€
{/up csv2list}

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

css-head 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, mais il est préférable d'utiliser la saisie au format bbcode.
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 css-head.
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. Ce qui implique de doubler les guillemets internes ou d'utiliser des guillemets simples.
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

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

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

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

.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

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

.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éécrire la règle.

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

.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

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

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