frendeitpt

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).

🆙 treeview : Affiche une liste sous forme d'un arbre (treeview)

Cliquer pour lire la documentation

syntaxe {up treeview} liste UL/LI {/up treeview}
version UP-2.5 author LOMART license GNU/GPLv3 credit script TreeViewJS de samarsault tags Groupe pour bouton editeur
  • treeview: aucun argument
  • line = 0: ligne devant les items. 1 (ligne par defaut) ou attributs pour border
  • icon-folder = arrow: image pour les dossiers (noeuds)
  • icon-file: image pour éléments feuilles
  • custom-icon: liste des icônes personnalisées pour création CSS inline
  • expand-all = 0: 1 pour ouvrir tous les noeuds
  • expand = 0: 1 pour ouvrir les noeuds de niveau 1
  • btn-open-selector: sélecteur du lien 'Tout déplier'
  • btn-close-selector: sélecteur du lien 'Tout déplier'
  • delay = 0: durée ouverture noeuds
  • 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

    Résultat

    • un
      • un-1
        • un-1-a
          • un-1-a-1
            La suite du texte pour un item de la liste
          • un-1-a-2
            • un-1-a-2-a
              • un-1-a-2-a-1
      • un-2
      • un-3
    • deux
      • deux-1
        • deux-1-a
        • deux-1-b
      • deux-2

    Saisie avec TinyMCE

    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é.

    Résultat

    • un
      • un-1
        • un-1-a
          • un-1-a-1
            La suite du texte pour un item de la liste
          • un-1-a-2
            • un-1-a-2-a
              • un-1-a-2-a-1
      • un-2
      • un-3
    • deux
      • deux-1
        • deux-1-a
        • deux-1-b
      • deux-2

    Le shortcode ouvrant

    {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-close

    arrow-open

    arrow2-close

    arrow2-open

    folder-close

    folder-open

    folder-red-close

    folder-red-open

    sign-close

    sign-open

    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
    Elles ne seront pas supprimées lors des mises à jour de UP.

    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

     

    • un
      • un-1
        • un-1-a
          • un-1-a-1
          • un-1-a-2
            • un-1-a-2-a
              • un-1-a-2-a-1
      • un-2
      • un-3
    • deux
      • deux-1
        • deux-1-a
        • deux-1-b
      • deux-2
    {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

    html

    pdf

    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.