J'ai créé cette action pour afficher la liste des icônes pour la démo de l'action treeview.
Elle permet d'avoir une liste filtrée et mise en forme du contenu d'un dossier (et sous-dossiers) sur le serveur
{up folder_list=folder_relative_path_on_server | template=##file## (##size)}0##file## : chemin/nom.extension - pour copier/coller comme argument shortcode
##dirname## : chemin (sans slash final)
##basename## : nom et extension
##filename## : nom sans extension (sans le point)
##extension## : extension
##relpath## : chemin relatif au chemin passé comme principal argument
##size## : taille du fichier
##date## : date dernière modification
Motclé disponible pour le dossier en format liste (ul/li)
##foldername## : nom du dossier (sans l'arboresccence)
##folderpath## : chemin et nom du dossier (avec l'arboresccence)
- folder_list: chemin relatif du dossier sur le serveur
- mask: masque de sélection des fichiers
- recursive: niveaux d'exploration des sous-dossiers
Modèle de mise en forme
- template (item-template) = ##file##: modèle de mise en forme du résultat
- template-folder = [b]##foldername##[/b]: modèle de mise en forme pour les dossier en vue liste
Balises pour les blocs parents et enfants
- main-tag (block): balise principale. indispensable pour utiliser id, class et style
- item-tag = p: balise pour un fichier ou dossier
Format des éléments mot-clé
- date-format = %Y/%m/%d %H:%M: format de la date
- decimal = 2: nombre de décimales pour la taille du fichier
Styles CSS
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
- id: Identifiant
- Version 2.8
- modification pour sortie au format liste (ul/li)
un exemple simple
plugins/content/up/actions/treeview/icons/arrow-close.png
plugins/content/up/actions/treeview/icons/arrow-open.png
plugins/content/up/actions/treeview/icons/arrow2-close.png
plugins/content/up/actions/treeview/icons/arrow2-open.png
plugins/content/up/actions/treeview/icons/cake-close.png
plugins/content/up/actions/treeview/icons/cake-open.png
plugins/content/up/actions/treeview/icons/door-close.png
plugins/content/up/actions/treeview/icons/door-open.png
ext
plugins/content/up/actions/treeview/icons/file.png
plugins/content/up/actions/treeview/icons/folder-close.png
plugins/content/up/actions/treeview/icons/folder-open.png
plugins/content/up/actions/treeview/icons/folder-red-close.png
plugins/content/up/actions/treeview/icons/folder-red-open.png
plugins/content/up/actions/treeview/icons/index.html
plugins/content/up/actions/treeview/icons/sign-close.png
plugins/content/up/actions/treeview/icons/sign-open.png
trash
{up folder-list=plugins/content/up/actions/treeview/icons}Ce simple shortcode affiche tous les fichiers du dossier indiqué dans l'ordre alphabétique.
Les sous-dossiers n'y figurent pas
Filtrer le résultat
Le résultat
plugins/content/up/actions/treeview/icons/cake-close.png
plugins/content/up/actions/treeview/icons/cake-open.png
Le shortcode
{up folder-list=plugins/content/up/actions/treeview/icons/c*.png}Il suffit d'ajouter un masque de sélection à la fin du chemin / dossier.
Dans notre exemple, seules les images PNG commençant par un c sont affichées
plugins/content/up/actions/treeview/icons/arrow-open.png
plugins/content/up/actions/treeview/icons/arrow2-open.png
plugins/content/up/actions/treeview/icons/cake-open.png
plugins/content/up/actions/treeview/icons/door-open.png
plugins/content/up/actions/treeview/icons/folder-open.png
plugins/content/up/actions/treeview/icons/folder-red-open.png
plugins/content/up/actions/treeview/icons/sign-open.png
plugins/content/up/actions/treeview/icons/arrow-close.png
plugins/content/up/actions/treeview/icons/arrow2-close.png
plugins/content/up/actions/treeview/icons/cake-close.png
plugins/content/up/actions/treeview/icons/door-close.png
plugins/content/up/actions/treeview/icons/folder-close.png
plugins/content/up/actions/treeview/icons/folder-red-close.png
plugins/content/up/actions/treeview/icons/sign-close.png
{up folder-list=plugins/content/up/actions/treeview/icons/*-[open,close].png}Pour mon besoin "afficher la liste des icônes pour la démo de l'action treeview", il faut sélectionner uniquement les images utilisées pour les dossiers (celles avec un suffixe (-open ou -close) pour l'état du dossier).
Il est possible d'indiquer le masque dans l'option mask, comme ceci :
{up folder-list=plugins/content/up/actions/treeview/icons
| mask=*-[open,close].png}L'action form-list reprend la syntaxe de la fonction glob de PHP.
-
*- Associe zéro ou plus de caractères. -
?- Associe exactement un caractère (n'importe quel caractère). -
[...]- Associe un caractère d'un ensemble de caractères. Si le premier caractère est!, associe n'importe quels caractères pas dans cet ensemble. {mot1,mot2}- Autorise un des mots de la liste.
Attention, comme UP n'accepte pas les {} dans le shortcode, il faut saisir [mot1,mot2] et échapper les crochets comme ceci \[...\].
Pour éviter une mauvaise interprétation des slash et antislash, il est conseillé d'indiquer le masque avec l'option mask
Le résultat
plugins/content/up/actions/treeview/icons/arrow-open.png
plugins/content/up/actions/treeview/icons/arrow2-open.png
plugins/content/up/actions/treeview/icons/folder-open.png
plugins/content/up/actions/treeview/icons/folder-red-open.png
plugins/content/up/actions/treeview/icons/sign-open.png
plugins/content/up/actions/treeview/icons/arrow-close.png
plugins/content/up/actions/treeview/icons/arrow2-close.png
plugins/content/up/actions/treeview/icons/folder-close.png
plugins/content/up/actions/treeview/icons/folder-red-close.png
plugins/content/up/actions/treeview/icons/sign-close.png
Le shortcode
Pour ne pas afficher uniquement les icônes livrées avec UP en écartant celles pour la démo dont le nom commence par c ou d.
{up folder-list=plugins/content/up/actions/treeview/icons
| mask=\[!cd\]*-[open,close].png}Cet exemple montre comment rédiger le shortcode UP. L'antislash devant les caractères [] indique qu’on les conserve, sinon ils seraient convertis en {}
Et les sous-dossiers ?
Par défaut, seuls les fichiers du dossier indiqué sont retournés.
Il est possible d'indiquer le niveau d'exploration des sous-dossiers avec l'option recursive.
Exemple pour explorer jusqu'à 9 niveaux de sous-dossiers :
{up folder-list=plugins/content/up/actions/treeview/icons
| mask=\[!cfs\]*-[open,close].png
| recursive=9}
plugins/content/up/actions/treeview/icons/arrow-open.png
plugins/content/up/actions/treeview/icons/arrow2-open.png
plugins/content/up/actions/treeview/icons/door-open.png
plugins/content/up/actions/treeview/icons/arrow-close.png
plugins/content/up/actions/treeview/icons/arrow2-close.png
plugins/content/up/actions/treeview/icons/door-close.png
Présenter le résultat
Pour en revenir à mon besoin initial !
Je dois afficher l'image des icônes livrées avec l'action Treeview, avec son nom au-dessous.
arrow-open
arrow2-open
folder-open
folder-red-open
sign-open
arrow-close
arrow2-close
folder-close
folder-red-close
sign-close
Je vais utiliser ce shortcode :
{up folder-list=plugins/content/up/actions/treeview/icons
| mask=\[!cd\]*-[open,close].png
| template=[div][img src="##file##"][br]##filename##[/div]
| main-tag=div
| class=fg-row fg-auto-6 fg-auto-s3 fg-gap tc bd-bleu}l'option template est en bbcode le code HTML pour afficher les fichiers trouvés.
les mots-clés ##file## (le nom complet) et ##filename## (le nom seul) seront remplacés
l'option main-tag est indispensable pour mettre les attributs id, class ou style
enfin, l'option class reçoit les classes UP pour une présentation centrée sur 6 colonnes (4 sur mobile) avec un cadre bleu
Les mots-clés disponibles sont :
- ##file## : le nom complet du fichier (chemin/nom.ext)
- ##dirname## : uniquement le chemin (sans le slash final)
- ##basename## : le nom et l'extension du fichier (nom.ext)
- ##filename## : uniquement le nom du fichier (nom)
- ##extension## : l'extension seule (ext)
- ##relpath## : chemin relatif au chemin passé comme principal argument
- ##size## : la taille du fichier (1.2K ou .9M)
- ##date## : la date de dernière modification du fichier, présentée sous la forme indiquée dans l'option date-format
Motclé disponible pour le dossier en format liste (ul/li)
- ##foldername## : nom du dossier (sans l'arborescence)
- ##folderpath## : chemin et nom du dossier (avec l'arborescence)
Utiliser d'autres actions UP
SVP, ne pourrait-on pas avoir le résultat dans un tableau et si possible pouvoir le trier ?
Pas de souci, on va utiliser les actions csv2table et table-sort pour nous aider et avoir ce résultat
| fichier | ext | taille | date | chemin |
|---|---|---|---|---|
swiss-knife |
jpg | 21K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-lego-150px |
jpg | 5K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-lego-300px |
jpg | 12K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
favicon-256x256 |
png | 43K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
favicon-260x260 |
png | 5K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
favicon-360x360 |
png | 38K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
favicon |
png | 288B | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
swiss-knife |
png | 57K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-32x32px |
png | 639B | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-35x144 |
png | 5K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-70x300-clair |
png | 6K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-70x300 |
png | 9K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-blanc-70x300 |
png | 9K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-carre-blanc |
png | 15K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-carre |
png | 18K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
up-logo-rect |
png | 17K | 2023/09/26 12:20 | https://up.lomart.fr/images/template |
{up table-sort
| col-type=i-i-n-a-a}
{up csv2table
| model=blue
| header=fichier;ext;taille;date;chemin
| col=40-5-r10-25}
{up folder-list=images/template/*.[jpg,png]
| template=[div]##filename##;##extension##;##size##;##date##;##dirname##[/div]
| decimal=0}
{/up csv2table}
{/up table-sort}1/ la dernière action mise en oeuvre* qui va trier la table générée par csv2table
2/ col-type permet de définir le mode de tri des colonnes. Non sensible min/maj pour les 2 premières, numérique pour la troisième et alpha pour les dernières
4/ l'action csv2table permet de présenter des données au format CSV (fournies par folder-list) dans une table
5/ l'option model pour mettre de la couleur
6/ header nous permet de définir le titre des colonnes (indispensable pour table-sort)
7/ col pour définir la largeur et la justification des colonnes
9/ l'action principale folder-list va retourner toutes les images jpg et png
10/ le template va formater le résultat au format CSV. C'est le rôle des points-virgules.
* Petit rappel : les actions UP sont résolues à partir de la dernière de la page et les enfants avant les parents.
Treeview & folder-list
Il peut-être utile de fournir le contenu d'un dossier sous la forme d'une liste "dépliable". Ceci est possible avec la version 2.8 comme le montre cet exemple.
- images/icons
- 32
belgium.png (images/icons/32/belgium.png)
france.png (images/icons/32/france.png)
gb.png (images/icons/32/gb.png)
germany.png (images/icons/32/germany.png)
united-kingdom.png (images/icons/32/united-kingdom.png)
united-states.png (images/icons/32/united-states.png)
- flag
be.png (images/icons/flag/be.png)
de.png (images/icons/flag/de.png)
fr.png (images/icons/flag/fr.png)
gb.png (images/icons/flag/gb.png)
nl.png (images/icons/flag/nl.png)
us.png (images/icons/flag/us.png)
- 48
belgium.png (images/icons/48/belgium.png)
france.png (images/icons/48/france.png)
germany.png (images/icons/48/germany.png)
united-kingdom.png (images/icons/48/united-kingdom.png)
united-states.png (images/icons/48/united-states.png)
archive.png (images/icons/archive.png)
non.png (images/icons/non.png)
oui.png (images/icons/oui.png)
trash.png (images/icons/trash.png)
- 32
{up treeview
| icon-folder=folder-red
| css-head=#id img[max-height:60px !important]
}
{up folder-list=images/icons
| mask=*.[jpg,JPG,png,PNG,gif,GIF]
| main-tag=ul
| template=[img src="##file##"] ##basename## [small](##file##)[/small]
| recursive=9
}
{/up treeview}1 : l'action treeview qui va présenter la liste des dossiers
2 : l'option icon-folder pour avoir une icône en forme de dossier (voir l'action treeview)
3 : css-head permet de limiter la taille des images que l'on récupère avec folder-list
6 : l'argument principal de l'action folder-list est le chemin du dossier à explorer
7 : on limite les fichiers récupérés avec l'option mask
8 : main-tag=ul pour indiquer que l'on veut une liste en retour
9 : template permet d'avoir pour chaque fichier sa vignette, son nom et en plus petit le chemin complet pour un copier-coller éventuel
10 : recursive est la profondeur d'exploration pour les sous-dossiers
J'aurais pu utiliser l'option template-folder pour définir la ligne pour un dossier, mais la valeur par défaut me convient ([b]##foldername##[/b])
upactionslist (1) readmore (1) csv2def (1) flexauto (6) folder-list (8) div (2) table-sort (1) csv2table (1) treeview
- Détails