Menüs als aufklappbaren Baum darstellen?

[xwolfde]

Im FAU-Einrichtungen-Theme haben wir noch eine uralte (wohlweislich undokumentierte) Funktion eines Shortcodes

[organigram menu="hauptseite"]

Siehe z.B. https://www.fau.de/fau/leitung-und-gremien/geschaeftsverteilungsplan-der-verwaltung/ http://zentral.tindu.rrze.uni-erlangen.de/shortcodes/shortcode-organigram/

Kann man diese Funktion ins Element-Plugin verschieben und in dem Zuge dann auch prüfen ob die Barrierefreiheit (ARIA-Attribite) und Druckbarkeit der Aufklappelemente korrekt ist?

[xwolfde]

Weitere Details:

Im Theme sind folgende Codes vorhanden:

1. Shortcode-Definition: https://github.com/RRZE-Webteam/FAU-Einrichtungen/blob/master/functions/shortcodes.php

add_shortcode('organigram', array($this, 'fau_organigram'));
...
function fau_organigram($atts, $content = null) {
        extract(shortcode_atts(
            array(
                "menu" => 'menu'
            ), $atts));

        return wp_nav_menu(array('menu' => $menu, 'container' => false, 'menu_id' => 'organigram', 'menu_class' => 'organigram', 'echo' => 0));
    }

2. Das JavaScript zum Einfügen eines +/- Toggles: https://github.com/RRZE-Webteam/FAU-Einrichtungen/blob/master/src/js/main/main.js

 // Add toggle icons to organigram
    $('.organigram .has-sub').each(function () {
        $(this).prepend('<span class="toggle-icon"></span>');
        $(this).children('ul').hide();
    });

    $('.organigram .has-sub .toggle-icon').bind('click', function (event) {
        event.preventDefault();

        $(this).closest('.has-sub').toggleClass('active');
        $(this).closest('.has-sub').children('ul').slideToggle();
    });

3. Das CSS (SASS): https://github.com/RRZE-Webteam/FAU-Einrichtungen/blob/master/src/sass/structure/content/_organigramm.scss

.organigram {
    @include no-list;
    margin: var(--width-gutter-half) 0;

    ul, li {
        @include no-list;
    }

    ul {
        margin-bottom: var(--width-gutter-half);
        border-left: 2px solid var(--color-primary-ci-hell);
        margin-left: var(--width-gutter-half);
    }

    li {
        background: none;
        @include px2rem($font-size-large);
        margin-bottom: var(--width-gutter-half);
        margin-top: 5px;

        li {
            @include px2rem($font-size-base);
            padding-left: var(--width-gutter-half);
            margin-bottom: 0;

            li {
                @include px2rem($font-size-small);
            }
        }
    }

    a {
        @include defaultlinkstyle();
    }

    .toggle-icon {
        @extend .fa;
        @extend .fa-plus-square;
        color: var(--color-Text);
        margin-right: 5px;
        cursor: pointer;
    }

    .active > .toggle-icon {
        @extend .fa-minus-square;
    }

}

Bitte dies in das Elements Plugin übernehmen, so daß es aus dem Theme herausgenommen werden kann. Dabei bitte den Shortcode-Befehl organigramm nur noch für abwärtscompataibiltät unterstützen und stattdessen einen Shortcode-Befehl wie z.B. [fau-menutree menu="$MENUSLUG"] einführen.

ggf. dann auch menu_class' => 'organigram' in menu_class' => 'rrze-elements-menutree'. ändern.

Die obige optische Darstellung (CSS) ist auch veraltet. Hier wäre eine richtige Menutree-Darstellung günstiger. Ein entsprechendes Beispiel findet sich hier im Codepen: https://codepen.io/xwolfde/pen/BaEJyad