frendeitpt

folder-list ~ affiche le contenu d'un dossier sur le serveur

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

🆙 folder_list : retourne la liste mise en forme du contenu d'un dossier sur le serveur

Cliquer pour lire la documentation

syntaxe {up folder_list=path}
##file## : chemin/nom.extension
##fullpath## : chemin (sans slash final)
##relpath## : chemin relatif (sans slash final)
##basename## : nom et extension
##filename## : nom sans extension (sans le point)
##extension## : extension
##size## : taille du fichier
##date## : date dernière modification
version UP-2.5 license GNU/GPLv3 author Lomart credit script xxx de xxx tags layout-dynamic
  • folder_list: chemin du dossier
  • mask: masque de sélection des fichiers
  • template (item-template) = <p>##file##</p>: modèle de mise en forme du résultat
  • recursive = 0: niveaux d'exploration des sous-dossiers
  • date-format = Y/m/d H:i: format de la date
  • decimal = 2: nombre de décimales pour la taille du fichier
  • main-tag: balise principale. indispensable pour utiliser id, class et style
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): style ajouté dans le HEAD de la page

    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/css.png

    plugins/content/up/actions/treeview/icons/door-close.png

    plugins/content/up/actions/treeview/icons/door-open.png

    plugins/content/up/actions/treeview/icons/file.png

    plugins/content/up/actions/treeview/icons/file2.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/html.png

    plugins/content/up/actions/treeview/icons/icon-modele.png

    plugins/content/up/actions/treeview/icons/ini.png

    plugins/content/up/actions/treeview/icons/js.png

    plugins/content/up/actions/treeview/icons/pdf.png

    plugins/content/up/actions/treeview/icons/php.png

    plugins/content/up/actions/treeview/icons/scss.png

    plugins/content/up/actions/treeview/icons/sign-close.png

    plugins/content/up/actions/treeview/icons/sign-open.png

    {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

    plugins/content/up/actions/treeview/icons/css.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-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

    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/sign-close.png

    plugins/content/up/actions/treeview/icons/sign-open.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-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/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/sign-close.png

    plugins/content/up/actions/treeview/icons/sign-open.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-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/door-close.png

    plugins/content/up/actions/treeview/icons/door-open.png

    plugins/content/up/actions/treeview/icons/old/arrow-close.png

    plugins/content/up/actions/treeview/icons/old/arrow-open.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-close

    arrow-open

    arrow2-close

    arrow2-open

    folder-close

    folder-open

    folder-red-close

    folder-red-open

    sign-close

    sign-open

    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 (chemin)
    • ##basename## : le nom et l'extension du fichier (nom.ext)
    • ##filename## :uniquement le nom du fichier (nom)
    • ##extension## : l'extension seule (ext)
    • ##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

    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
    favicon-256x256
    png 43K 2021/06/05 22:21 images/template
    favicon-260x260
    png 5K 2021/06/05 22:21 images/template
    favicon-360x360
    png 38K 2021/06/05 22:21 images/template
    favicon
    png 288B 2021/06/05 22:21 images/template
    swiss-knife
    jpg 21K 2021/06/05 22:21 images/template
    swiss-knife
    png 57K 2021/06/05 22:21 images/template
    up-32x32px
    png 639B 2021/06/05 22:21 images/template
    up-lego-150px
    jpg 5K 2021/06/05 22:21 images/template
    up-lego-300px
    jpg 12K 2021/06/05 22:21 images/template
    up-logo-35x144
    png 5K 2021/06/05 22:21 images/template
    up-logo-70x300
    png 9K 2021/06/05 22:21 images/template
    up-logo-blanc-70x300
    png 9K 2021/06/05 22:21 images/template
    up-logo-carre
    png 18K 2021/06/05 22:21 images/template
    up-logo-rect
    png 17K 2021/06/05 22:21 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.