Как оценить данные вложенного объекта, чтобы применить класс CSS - PullRequest
Новая
       21

Как оценить данные вложенного объекта, чтобы применить класс CSS

0 голосов
/ 14 мая 2019

Используя данные ниже (ссылки) ниже, логика Twig проверяет имена уровней 'link', чтобы сравнить аргумент, передаваемый макросу.Это применяет «активный» класс к соответствующему элементу списка.К сожалению, я не знаю, как также проверить 'sublinks', поскольку значение 'sublink' может совпадать с аргументом, передаваемым макросу.Мне нужно иметь возможность также проверять «подлинки» и применять «активные», если это «подссылка» (а не «ссылка»), которая == currentPage. 

{% set
links = {
    'home': ['home', 'Home'],

    'hotel-reviews': ['hotel-reviews', 'Hotel Reviews'],    

    'pages': {
        name: 'Pages',
        sublinks: {
            'about':         ['samples/about', 'About Us'],
            'register':      ['samples/register', 'Register'],
            'error':         ['error', 'Error Page'],
            '404':           ['404', '404 Page'],
        },
    },
    'portfolio': {
        name: 'Portfolio',
        sublinks: {
            'portfolio': ['portfolio/portfolio', 'Portfolio'],
            'project': ['portfolio/project', 'Project'],
        },
    },
    'blog': {
        name: 'Blog',
        sublinks: {
            'blog': ['blog/blog', 'Blog'],
            'post': ['blog/post', 'Blog Post'],
        },
    },

    'ui-elements': ['ui-elements', 'UI Elements'],



}   

%}

{% set currentPage = this.page.id  %} 


{% macro render_menu(links, currentPage) %}

{% import _self as subnav %}

{% for code, link in links %}

    <li class="{{ (code == currentPage)  ? 'active' }}  {{ link.sublinks ? 
'dropdown' }}">

        <a
            href="{{ link.sublinks ? '#' : (link.page ?: link[0])|page }}"
            {% if link.sublinks %}data-toggle="dropdown"{% endif %}
            class="{{ link.sublinks ? 'dropdown-toggle' }}"
        >
            {{ link.name ?: link[1] }}
            {% if link.sublinks %}<span class="caret"></span>{% endif %}
        </a>
        {% if link.sublinks %}
            <span class="dropdown-arrow"></span>
            <ul class="dropdown-menu">
                {{ subnav.render_menu(link.sublinks) }}
            </ul>
        {% endif %}



    </li>
{% endfor %}
{% endmacro %}

{% import _self as nav %}


<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top" 
 role="navigation">
    <div class="container">



    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-main-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand" href="{{ 'home'|page }}">Taiga Travel</a>
    </div>
    <div class="collapse navbar-collapse navbar-main-collapse">
        <ul class="nav navbar-nav navbar-right">
            {{ nav.render_menu(links, currentPage) }} 


            <li>
                <button

                    class="btn btn-sm navbar-btn btn-primary navbar-right 
hidden-sm hidden-xs">
                    Sign in
                </button>
            </li>

        </ul>
    </div>
</div>

1 Ответ

0 голосов
/ 15 мая 2019

После долгих царапин я подумал, что попробую перебрать подлинки, проверяя «currentPage», и, похоже, это сработало: 

{% set
    links = {
        'home': ['home', 'Home'],

        'hotel-reviews': ['hotel-reviews', 'Hotel Reviews'],    

        'pages': {
            name: 'Pages',
            sublinks: {
                'about':         ['samples/about', 'About Us'],
                'register':      ['samples/register', 'Register'],
                'error':         ['error', 'Error Page'],
                '404':           ['404', '404 Page'],
            },
        },
        'portfolio': {
            name: 'Portfolio',
            sublinks: {
                'portfolio': ['portfolio/portfolio', 'Portfolio'],
                'project': ['portfolio/project', 'Project'],
            },
        },
        'blog': {
            name: 'Blog',
            sublinks: {
                'blog': ['blog/blog', 'Blog'],
                'post': ['blog/post', 'Blog Post'],
            },
        },

        'ui-elements': ['ui-elements', 'UI Elements'],
    }   

%}

{% set currentPage = this.page.id  %} 

{% macro render_menu(links, currentPage) %}

    {% import _self as subnav %}

    {% for code, link in links %}

        <li class="

            {% if link.sublinks %}

                {% for sub, sublink in link.sublinks %}

                    {{ (sub == currentPage)  ? 'active' }}  {{ link.sublinks ? 'dropdown' }} 

                {% endfor %}

            {% else %}

                {{ (code == currentPage)  ? 'active' }}  {{ link.sublinks ? 'dropdown' }}

            {% endif %}"
        >

            <a
                href="{{ link.sublinks ? '#' : (link.page ?: link[0])|page }}"
                {% if link.sublinks %}data-toggle="dropdown"{% endif %}
                class="{{ link.sublinks ? 'dropdown-toggle' }}"
            >
                {{ link.name ?: link[1] }}
                {% if link.sublinks %}<span class="caret"></span>{% endif %}
            </a>
            {% if link.sublinks %}
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
                    {{ subnav.render_menu(link.sublinks, currentPage) }}

                </ul>
            {% endif %}

        </li>

    {% endfor %}

{% endmacro %}

{% import _self as nav %}


<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="fa fa-bars"></span>
            </button>
            <a class="navbar-brand" href="{{ 'home'|page }}">Taiga Travel</a>
        </div>
        <div class="collapse navbar-collapse navbar-main-collapse">
            <ul class="nav navbar-nav navbar-right">
                {{ nav.render_menu(links, currentPage) }} 

                <li>
                    <button

                        class="btn btn-sm navbar-btn btn-primary navbar-right hidden-sm hidden-xs">
                        Sign in
                    </button>
                </li>

            </ul>
        </div>
    </div>
</nav>
...