TreeView: osnove

Nazaj: predstavitveni pregled

Navigacijsko drevo iz vgrajenih razširitvenih elementov brskalnika: zgrajeno rekurzivno in v celoti uporabno brez JavaScripta.

Stanje: [Live]. Vir: lib/plugins/wkfluentui/helper/widgets.php, metoda tree() (vrstica 44).

tree() izriše rekurzivno navigacijsko drevo iz gnezdenih <details>/<summary> elementov – povsem uporabno brez JavaScripta. Ciljna publika: vsak vtičnik, ki potrebuje hierarhično navigacijo strani/predmetov (npr. drevo predmetov v stranski vrstici), brez gradnje lastne logike tipkovnice/razširjanja-strnjevanja.

Pomembno razmejevanje: tree() je navigacijsko drevo – vsako vozlišče s href je povezava na drugo stran, ne odjemalsko izbirljivo podatkovno drevo z lastnim stanjem (za to glej Selection / Checkboxes).

• DokuWiki z omogočenim vtičnikom wkfluentui.
• helper_plugin_wkfluentui_widgets naložen prek plugin_load('helper', 'wkfluentui_widgets').

Nativna semantika namesto obnove ARIA: <details>/<summary> brezplačno ponuja razširjanje/strnjevanje, upravljanje s tipkovnico (Enter/preslednica) in implicitno semantiko za bralnik zaslona – obnova role="tree" ni potrebna, dokler ni aktivna nobena izbira (glej Accessibility za razliko, ko se doda selection).

Rekurzija: vozlišče z children se samo znova izriše prek tree() – ista metoda gradi hierarhije poljubne globine.

/** @var helper_plugin_wkfluentui_widgets $widgets */
$widgets = plugin_load('helper', 'wkfluentui_widgets');
 
echo $widgets->tree([
    ['label' => 'Povezave', 'href' => wl($ID, ['ns' => 'connections'])],
    [
        'label' => 'Tabele',
        'children' => [
            ['label' => 'naloge', 'href' => wl($ID, ['t' => 'naloge']), 'active' => true],
            ['label' => 'uporabniki', 'href' => wl($ID, ['t' => 'uporabniki'])],
        ],
    ],
]);

Napačno: ustvariti vozlišče brez href IN brez children, v pričakovanju, da se bo pojavilo kot klikljivo mesto za zapolnitev. Brez obojega se vozlišče izriše kot golo, neinteraktivno besedilo – to je pravilna, dokumentirana degradacija, ne napaka.

public function tree(array $nodes): string

Povzetek: izriše rekurzivno, brez JavaScripta delujoče navigacijsko drevo iz gnezdenih definicij vozlišč.

Vrnjena vrednost: string – <ul class="wk-tree">…</ul>. Prazen niz pri praznem $nodes.

<ul class="wk-tree"> → na vozlišče <li>, pri children gnezdeno kot <details><summary>Label</summary><ul>…</ul></details>.

echo $widgets->tree([
    [
        'label' => 'de',
        'children' => [
            ['label' => 'wiki', 'href' => wl($ID, ['ns' => 'de:wiki']), 'active' => true],
            ['label' => 'blog', 'href' => wl($ID, ['ns' => 'de:blog'])],
        ],
    ],
    ['label' => 'en', 'href' => wl($ID, ['ns' => 'en'])],
]);

• active označi le trenutni ogled strani; pravo izbiro (radio/checkbox na vozlišče, form-POST) zagotavlja način selection – Selection / Checkboxes.
• Leno nalaganje prek lazy/lazyUrl (od 2026-07-17, glej razdelek 7) pokrije zelo velika drevesa, saj se globlje ravni naložijo šele po potrebi – brez te možnosti morajo biti vsi children ob klicu še vedno v celoti prisotni.
• lazy + open ⇒ true na istem vozlišču: nalaganje se ne zgodi (nativni dogodek toggle, ki ga scripts/treeview.js uporablja za nalaganje, se ne sproži za stanje, ki je odprto že ob nalaganju strani) – nadomestek bi ostal trajno prazen. Te kombinacije ne potrebuje noben primer uporabe; tree() zato za nadomestna vozlišča open namenoma nikoli ne izriše.
• Premikanje vozlišč: Drag & Drop (vidne povezave ▲/▼ plus izbirna plast vlečenja).

• Celoten pregled: Accessibility (konsolidirano, tu ni podvojeno).
• Povsem uporabno brez JavaScripta – brez odvisnosti od postopnega izboljšanja za osnovno funkcijo.
• Združljivost brskalnikov: odvisno od nativne podpore za <details> (vsi trenutni brskalniki; starejši brskalniki brez podpore prikažejo vsebino trajno razširjeno namesto zložljive – degradirano, ne neuporabno).

Simptom: skupinsko vozlišče se ne odpre samodejno, čeprav ima podrejeno vozlišče active ⇒ true.

Vzrok: active mora biti nastavljen na samem skupinskem vozlišču, da se njegov <details> izriše odprt – označitev podrejenega vozlišča ne odpre samodejno nadrejene skupine.

Rešitev: dodatno nastaviti active ⇒ true na nadrejenem vozlišču, če naj bo skupina začetno odprta.

• predstavitveni pregled – vsaka kategorija
• FluentUI: javni API pomočnika – popolna pogodba metod
• SQLite Data Studio – prvi porabnik (drevo predmetov v stranski vrstici)