JavaScript Offcanvas "Zurück-Button" 3-stufig

[tel6]

Hallo,

ich habe gerade ein Knoten im Hirn, den ich seit zwei Tagen einfach nicht entwirren kann.
Ich habe mir ein mobiles Offcanvas Menu erstellt, mit folgender Struktur:

Stufe 1:

Kategorien​

Stufe 2:

Kategorie 1​

Kategorie 2​

Kategorie 3​

Stufe 3:

Unterkategorie 1​

Unterkategorie 2​

Unterkategorie 3​

​

Dabei wird bei Klick auf Kategorien, die Stufe 1 nach links geschoben, sodass sich Stufe 2 öffnet (per CSS wird der Selektor "is-open" zur bestehenden Klasse "offcanvas-list" hinzugefügt. Dasselbe für Stufe 3.

Das funktioniert auch alles wunderbar. Nun benötigt man natürlich noch einen "Zurück-Button", und hier komme ich einfach nicht weiter.

Im Moment sammel ich per document.querySelectorAll alle "offcanvas-list" und entferne bei Klick auf den "Zurück-Button" "is-open".
Für Stufe 2 zurück auf Stufe 1 funktioniert das auch tadellos. Problem ist allerdings, dass ich dadurch natürlich auch von Stufe 3 direkt zu Stufe 1 springe anstatt nur auf Stufe 2.

Ich habe schon alle möglichen if Konstellationen durchgespielt, aber ich komme einfach auf keine Lösung.

Hat zufällig jemand eine Idee?

Spoiler: Code

<div class="navigation-offcanvas-container js-navigation-offcanvas">
        <div class="navigation-offcanvas-overlay-content">

            <!-- FIRST LEVEL -->
            <ul class="list-unstyled navigation-offcanvas-list">

                <li class="navigation-offcanvas-list-item" data-first-trigger="id1" data-offcanvas-menu-level="level1">

                    <div class="navigation-offcanvas-link nav-item">
                        <span class="navigation-offcanvas-link-icon js-navigation-offcanvas-loading-icon">Kategorien</span>
                        <span class="icon icon-arrow-medium-right icon-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="icons-solid-arrow-medium-right" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path></defs><use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use></svg>
        </span>                    </div>
                </li>
            </ul>

            <!-- SECOND LEVEL -->
            <ul class="navigation-offcanvas-entry list-unstyled navigation-offcanvas-list is-open" data-first-offcanvas="id1" data-offcanvas-back="level1">
                                                
                                                        

                    <li class="navigation-offcanvas-list-item" data-second-trigger="77b959cf66de4c1590c7f9b7da3982f3" data-offcanvas-menu-level="level2">

                        <div class="navigation-offcanvas-link nav-item">
                            <span class="navigation-offcanvas-link-icon js-navigation-offcanvas-loading-icon">Food</span>
                            <span class="icon icon-arrow-medium-right icon-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="icons-solid-arrow-medium-right" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path></defs><use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use></svg>
        </span>                        </div>
                    </li>
                                                        

                    <li class="navigation-offcanvas-list-item" data-second-trigger="a515ae260223466f8e37471d279e6406" data-offcanvas-menu-level="level2">

                        <div class="navigation-offcanvas-link nav-item">
                            <span class="navigation-offcanvas-link-icon js-navigation-offcanvas-loading-icon">Clothing</span>
                            <span class="icon icon-arrow-medium-right icon-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="icons-solid-arrow-medium-right" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path></defs><use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use></svg>
        </span>                        </div>
                    </li>
                                                        

                    <li class="navigation-offcanvas-list-item" data-second-trigger="251448b91bc742de85643f5fccd89051" data-offcanvas-menu-level="level2">

                        <div class="navigation-offcanvas-link nav-item">
                            <span class="navigation-offcanvas-link-icon js-navigation-offcanvas-loading-icon">Free time &amp; electronics</span>
                            <span class="icon icon-arrow-medium-right icon-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="icons-solid-arrow-medium-right" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path></defs><use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use></svg>
        </span>                        </div>
                    </li>
                            </ul>

            <!-- THIRD LEVEL -->
                                        <ul class="navigation-offcanvas-entry list-unstyled navigation-offcanvas-list" data-second-offcanvas="77b959cf66de4c1590c7f9b7da3982f3" data-offcanvas-back="level2">


                                
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Food/Bakery-products/" itemprop="url" title="Bakery products">
            <span itemprop="name">Bakery products</span>
        </a>
    </li>
            
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Food/Fish/" itemprop="url" title="Fish">
            <span itemprop="name">Fish</span>
        </a>
    </li>
            
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Food/Sweets/" itemprop="url" title="Sweets">
            <span itemprop="name">Sweets</span>
        </a>
    </li>
        

    
    </ul>
            <ul class="navigation-offcanvas-entry list-unstyled navigation-offcanvas-list" data-second-offcanvas="a515ae260223466f8e37471d279e6406" data-offcanvas-back="level2">


                                
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Clothing/Women/" itemprop="url" title="Women">
            <span itemprop="name">Women</span>
        </a>
    </li>
            
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Clothing/Men/" itemprop="url" title="Men">
            <span itemprop="name">Men</span>
        </a>
    </li>
        

    
    </ul>
            <ul class="navigation-offcanvas-entry list-unstyled navigation-offcanvas-list" data-second-offcanvas="251448b91bc742de85643f5fccd89051" data-offcanvas-back="level2">


                                
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Free-time-electronics/Test/" itemprop="url" title="Test">
            <span itemprop="name">Test</span>
        </a>
    </li>
            
    <li class="navigation-offcanvas-list-item">
        <a class="navigation-offcanvas-link nav-item" href="http://localhost:9998/Free-time-electronics/Test2/" itemprop="url" title="Test2">
            <span itemprop="name">Test2</span>
        </a>
    </li>
        

    
    </ul>
            
        </div>


    </div>

 

[floq0r]

Wieder mal kein Code dabei...
Ich würde aus logischer Sicht das höchste aktuell offene Menülevel identifizieren und von dort bei click auf "zurück" die class entfernen.

 

[tel6]

@floq0r

Ich habe oben mal Code hinzugefügt. Ist aber wahrscheinlich ncith so einfach zu durchschauen, deshalb hatte ich ihn ursprünglich weggelassen.

Wie würde ich das höchste aktuell offene Menülevel am besten identifizieren? Da fehlt mir gerade der Ansatz.
Danke schon mal.

 

[floq0r]

Pro ul.navigation-offcanvas-entry noch ein data-offcanvas-menu-level setzen (für die <li> children ist es schon da, für den parent noch nicht), dort alle durchloopen, das höchste Level feststellen und dort dann die open class entfernen.

 

[tel6]

@floq0r
Dazu hatte ich schon das data-offcanvas-back="level1" und data-offcanvas-back="level2" gesetzt. Ich habe dann alle data-offcanvas-back eingesammelt und drüber geloopt. Ich habe dann auch schon das Attribut (also "level1" bzw. "level2") ausgelesen.

Trotzdem komme ich auf keine Idee, wie ich das höchste Level bei Klick feststelle und nur dort die "is-open" Klasse entferne. Stehe irgendwie auf dem Schlauch.

 

[floq0r]

quick pseudocode mit JQuery:

var highestLevel = 0;
$('ul.navigation-offcanvas-entry.is-open').each(function(){
    highestLevel = Math.max(highestLevel, parseInt($(this).attr('data-offcanvas_menu_level')));
});
$('ul.navigation-offcanvas-entry.is-open[data-offcanvas_menu_level="' + highestLevel + '"]').removeClass('is-open');

 

[tel6]

@floq0r

Ich habe das mal kurz in JS geschrieben, soweit ich es verstanden habe:

        const offCanvasOpenList = document.querySelectorAll('.navigation-offcanvas-list.is-open');

        Iterator.iterate(offCanvasOpenList, el => {
            console.log(el)
            let offcanvasBackLevel = DomAccess.getDataAttribute(el, 'data-offcanvas-back');

            let highest = Math.max(offcanvasBackLevel)
            console.log(highest)
        });

Iterator ist die forEach loop
data-offcanvas-back habe ich nur eine Zahl "1" und "2" gesetzt.
console.log(highest) bekomme ich nun auf Stufe 2 die "1" und auf Stufe 3 die "2" zurück.

Und nun müsste ich es noch vom höchsten Level entfernen?! Ich komme nicht drauf. Sorry

 

[floq0r]

Da hast du wohl inzwischen sogar dein Auto auf dem Schlauch geparkt
Schau dir mal deine Implementierung der Math.max() Funktion an, was soll denn da rauskommen?

 

[tel6]

Hm, ja, ich verstehe es nicht. Muss ich wohl vorerst aufgeben.