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 | template=##file## (##size)}
##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)
@version: UP-2.5 @license: GNU/GPLv3 @author: Lomart @tags: layout-dynamic
  • folder_list: chemin du dossier
  • mask: masque de sélection des fichiers
  • 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
  • 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
  • item-tag = p: balise pour un élément
  • 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

    old

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