treeview ~ affiche une liste sous forme d'un arbre

Inspiré par le script TreeViewJS de samarsault, cette action transforme une liste à puces en une vue arborescente (treeview).

un exemple simple

Il est difficile de faire plus simple : on entoure une liste à puces avec les shortcodes ouvrant et fermant

Les options

Pour mettre en application toutes les options disponibles, voici la même liste avec un shortcode plus étoffé.

{up treeview
 | expand-all
 | delay=1500
 | icon-folder=folder-red
 | icon-file=file
 | line=red 2px solid
 | class=bg-jauneClair t-brun p1
 | style=border:2px {up color=brun} solid
 | css-head=#id li:not(.tv-close)[color:#333]
}

expand-all

permet de déplier totalement le treeview lors du premier affichage.

expand

permet de déplier le premier niveau des dossiers lors du premier affichage.

delay

la durée en millisecondes pour ouvrir ou fermer une branche

icon-folder

pour remplacer le chevron (>) de l'exemple ci-dessus, il suffit d'indiquer le début du nom d'un jeu d'icônes du dossier icons de l'action

exemple : pour utiliser un dossier ouvert ou fermé pour représenter l'état du noeud, il suffit d'indiquer icon-folder=folder-red pour utiliser ces images

folder-red-close.png  folder-red-open.png

Les icônes livrées avec l'action sont

arrow-open

arrow2-open

folder-open

folder-red-open

sign-open

arrow-close

arrow2-close

folder-close

folder-red-close

sign-close

Pour utiliser vos propres icônes, créez 2 images de 32x32 pixels qui se terminent respectivement par -open et -close pour indiquer l'état.
Elles doivent être dans le dossier plugins/content/up/actions/treeview/icons
Elles ne seront pas supprimées lors des mises à jour de UP.

icon-file

icône devant les autres éléments que les dossiers (noeuds).

Il suffit d'indiquer le nom d'un fichier du dossier icons de l'action. Exemple : file pour

Vous pouvez ajouter vos icônes de 32x32pixels dans le dossier plugins/content/up/actions/treeview/icons/ext
Elles ne seront pas supprimées lors des mises à jour de UP.

Voici toutes les icônes disponibles dans le dossier icons de l'action

css

html

index

ini

js

pdf

php

scss

custom-icon

liste des classes pour spécifier une icône personnalisée. Voir exemple ci-dessous

line

Ajoute une ligne verticale devant tous les enfants d'un dossier ouvert.

Vous pouvez mentionner l'option line seule pour utiliser la ligne standard ou mettre l'attribut habituel pour l'attribut border

btn-open-selector, btn-close-selector

Il est possible de créer 2 boutons pour déplier et replier totalement un treeview. Il suffit d'indiquer le sélecteur CSS pour les identifier.

id, class, style et css-head

Ces options conservent leur rôle habituel.
Dans notre exemple, tous les éléments sont bruns sauf ceux qui n'ont pas de descendant.
Notez aussi l'utilisation de l'action color qui permet d'avoir la même couleur pour la bordure que celle du texte qui utilise la classe t-brun.

Options avancées

L'exemple ci-dessous montre comment utiliser les options btn-open-selector, btn-close-selector et custom-icon

{up div=p1 bd-gris bd2 bd-gris}
{up html=button | class=badge bg-darkRed float-right | id=tv1-close}fermer tous les dossiers{/up html}{up html=button | class=badge bg-green float-right | id=tv1-open}Ouvrir tous les dossiers{/up html} 
{up treeview
 | line | icon-folder=sign | icon-file=file 
 | custom-icon=cake,door,pdf,html 
 | btn-open-selector=#tv1-open
 | btn-close-selector=#tv1-close}
    - [cake]un
        - [bg-tan]un-1
            - un-1-a
                - [b t-red]un-1-a-1
                - un-1-a-2
                    - [html]un-1-a-2-a
                        - [html]un-1-a-2-a-1
        - un-2
        - un-3
    - [door]deux
        - [cake]deux-1
            - [b t-blue]deux-1-a
            - [pdf]deux-1-b
        - deux-2
{/up treeview}
{/up div}

Pour obtenir ce résultat, nous utilisons 3 actions UP :

• div pour regrouper visuellement le treeview et les boutons.
• html pour créer les boutons. Il est possible de le faire directement en HTML, mais j'aime bien voir directement le code pour comprendre le contexte quand je repasserais dans quelques mois. Notez les 2 shortcodes sur la même ligne et le float:right
• treeview avec nos nouvelles options
• et bien sûr, notre liste à puces

Pour les boutons :

Il suffit de mettre l'identifiant des boutons comme argument des options btn-open-selector, btn-close-selector. Ne pas oublier le # pour une ID. J'ai utilisé une ID, mais tous sélecteur unique peut convenir.

Pour les icônes et styles personnalisés

Vous noterez la présence de noms de classes entre crochets au début de certaines lignes. ex: - [cake] un

Toutes les classes sont autorisées (ex: bg-tan, b, t-red, etc). Elles sont affectées à la balise LI de la ligne. C'est ce qui explique que le fond ajouté par la classe bg-tan sur la deuxième ligne couvre toute l'étendue de celle-ci (sa descendance)

Les classes qui affichent des icônes peuvent être créées à la volée en indiquant leur nom dans l'option custom-icon

Le nom de la classe doit être le nom d'une image du dossier plugins/content/up/actions/treeview/icons

Cette image peut être simple (nomclass.png) ou exister en version ouverte (nomclass-open.png) et fermée (nomclass-close.png). Voici les images utilisées pour la démo.

cake-close

cake-open

door-close

door-open

Si vous utilisez régulièrement et fréquemment les mêmes icônes, il peut être judicieux de surcharger le fichier treeview.css dans le dossier custom de l'action pour ajouter les règles.

Ci-dessous, un exemple de règles CSS pour une icône simple et double 

.uptv li.door.tv-close{background-image:url(../icons/door-close.png) !important;}
.uptv li.door.tv-open{background-image:url(../icons/door-open.png) !important;}
.uptv li.html{background-image:url(../icons/html.png) !important;}

Le chemin des images est relatif à un fichier dans le sous-dossier custom de l'action.