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=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)
@version: UP-2.5 @license: GNU/GPLv3 @author: Lomart @tags: layout-dynamic
  • 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)
Voir les nouveautésreplier

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)
{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])

 

Pour info, cette page utilise 23 action(s) :
upactionslist (1) readmore (1) csv2def (1) flexauto (6) folder-list (8) div (2) table-sort (1) csv2table (1) treeview
Détails