Как написать шаблон Bootstrap Collapse для Twig?

Question

[Пётр Грибанов]

В проекте часто используется компонент типа Bootstrap Collapse. Он немножко отличается но суть та же.

Суть в том что есть блок с шапкой, футером и телом. Шапка и футер неизменные и меняется только тело. То есть очень хорошо накладывается схема лайаутов, но использовать ее нельзя потому что блок находится на странице со своим лайаутом и блоков на странице таких несколько.

нугуглил шаблон из друпала, но мне не понятно как они передают тело блока в шаблон. Там же куча логики и html кода.

Думал написать макрос для такого случая, но опять не понятно как в таком случае передавать тело блока в макрос. Как вариант использовать макрос в макросе для рендора тела, но это даже звучит бредово.

{% macro block_a(object) %}
{{ object.title }}
{% endmacro %}

{% macro block_b(object) %}
{{ object.desc }}
{% endmacro %}

{% macro collapse(body) %}
{{ body }}
{% endmacro %}

{% import _self as block %}

{{ block.collapse(block.block_a(object1)) }}
{{ block.collapse(block.block_b(object2)) }}

Answer 1

[Сергей Новиков]

А пойти простым путем не вариант? Написать простой шаблон:

{# Код до body #}
{{ body|raw }}
{# Код после body #}

И после вставить куда надо:
{% include "collapse.twig" with body only %}

Comments

[Пётр Грибанов]

а body то как формировать?

[Сергей Новиков]

Пётр Грибанов: простой HTML, что будет в переменной то выведется (для этого и стоит |raw, чтобы не экранировался HTML).

[Пётр Грибанов]

Сергей Новиков: и дураку понятно что там HTML
я спрашиваю как запихнуть шаблон в переменную

если просто пытаться запихнуть шаблон в переменную то получится это

{% set body = '<nav class="list-group mod-aside-list-40">' %}
{% for item in list %}
    {% set body = body ~ '<a href="' ~ path('path_to_item', {item: item.id}) ~ '" class="list-group-item" data-filter="2">' ~ item.title ~ '</a>' %}
{% endfor %}
{% set body = body ~ '</nav>' %}

{% include 'collapse.twig' with body only %}

[Сергей Новиков]

Пётр Грибанов: Либо так, либо делаете body объектом:

{% include 'collapse.twig' with {"body": {"path": "...", "title": "..."}} %}

а всю разметку выносите в шаблон.

[Пётр Грибанов]

Сергей Новиков: если я буду передавать объект то я не смогу сделать универсальный шаблон для collapse.
Мне придется писать collapse шаблон для конкретного набора данных, а для другого набора данных шаблон будет другим.

{% include 'collapse_list_news.twig' with {body: list_news} %}
{% include 'collapse_list_links.twig' with {body: [link1, link2]} %}
{% include 'collapse_help.twig' with {body: 'help text'} %}

я хочу сделать универсальную обертку для collapse

[Сергей Новиков]

Пётр Грибанов: Вам ничего не мешает сделать его универсальным, в зависимости от переданных данных создавать шаблон. Просто не объявляете некоторое св-во и у вас не генерируется определенная часть (и наоборот).

{% include 'collapse.twig' with {body: {link: '...', title: '...', list: [...]}} %}
{% include 'collapse.twig' with {body: {link: '...', title: '...'}} %}

{% if body.list is defined %}
...
{% endif %}

[Пётр Грибанов]

Сергей Новиков: тогда получается так

{% include 'collapse.twig' with {type: 'list_news', title: 'Новости', data: {list: list_news}} %}
{% include 'collapse.twig' with {type: 'list_links', title: 'Мы в соцсетях', data: [link1, link2]} %}
{% include 'collapse.twig' with {type: 'help', title: 'Подсказка', data: 'help text'} %}

{# collapse.twig #}
<div class="card">
    <div class="card-header">{{ title }}</div>
    <div class="collapse>
        {% if type == 'list_news' %}
            {% for news in data %}
                <a href="{{ path('path_to_news', {news: news.id}) }}">
                    <img src="{{ news.cover }}" alt="{{ news.title }}">
                    {{ news.date | date('j F')
                    {{ news.text }}
                </a>
            {% endfor %}
        {% elseif type == 'list_links' %}
            {% for link in data %}
                <a href="{{ link.path }}">{{ link.text }}</a>
            {% endfor %}
        {% elseif type == 'help' %}
            {{ data }}
        {% endif %}
    </div>
</div>

то есть внутри шаблона мы выбираем вариант представления в зависимости от типа. вариант представления для каждого типа можно вынести в отдельный шаблон

{# collapse.twig #}
<div class="card">
    <div class="card-header">{{ title }}</div>
    <div class="collapse>
        {% include 'collapse/' ~ type ~ '.twig' with {data: data} %}
    </div>
</div>

и в результате мы получаем шаблон в шаблоне. ни чем не лучше чем тоже самое через макросы. даже хуже потому что нужно плодить файлы.
А самая главная проблема заключается в том что шаблон представление данных должен определятся в шаблоне вызова шаблона collapse

Answer 2

[Пётр Грибанов]

Что получается у меня на макросах.

{# collapse.html.twig #}

{% macro tablist(cards, id) %}
    <div class="card-collapse" id="{{ id }}" role="tablist" aria-multiselectable="true">
        {% for card in cards %}
            {{ card }}
        {% endfor %}
    </div>
{% endmacro %}

{% macro card(title, extended, parent, target, body) %}
    <div class="card{% if extended %} extended{% endif %}">
        <div class="card-header card-header-collapsed">
            <a
                class="collapsed"
                data-toggle="collapse"
                data-parent="#{{ parent }}"
                href="#{{ target }}"
                aria-expanded="{% if extended %}true{% else %}false{% endif %}"
                aria-controls="collapseTree"
            >
                {{ title }}
                <span class=" pull-xs-right">
                    <i class="zmdi zmdi-chevron-down zmdi-hc-fw check"></i>
                    <i class="zmdi zmdi-chevron-up zmdi-hc-fw uncheck"></i>
                </span>
            </a>
        </div>
        <div class="collapse{% if extended %} in fade{% endif %} hasAccordion" id="{{ target }}"  role="tabpanel">
            {{ body }}
        </div>
    </div>
{% endmacro %}

{# game.html.twig #}

{% macro form(form) %}
    <div class="card-block">
        {{ form_row(form) }}
    </div>
    <div class="card-block clearfix">
        <button type="submit" class="btn btn-link card-link pull-xs-right">Применить</button>
    </div>
{% endmacro %}

{% macro login() %}
    <div class="card-block bg-warning">
        Для того чтобы сохранять свои результаты в игре, войдите в систему или зарегистрируйтесь!
    </div>
    <div class="card-footer">
        <button class="btn btn-link m-y-0 p-a-0 card-link" data-toggle="modal" data-target="#drawer-log-in">Войти</button>
        <button class="btn btn-link m-y-0 p-a-0 card-link" data-toggle="modal" data-target="#drawer-log-in">Регистрация</button>
    </div>
{% endmacro %}

{# вывод блока collapse #}
{% import _self as body %}
{% import '::collapse.html.twig' as collapse %}
{{ collapse.tablist([
    collapse.card(
        'Группа',
        form.groups.vars.value is not empty,
        'accordion',
        'collapseJanr',
        body.form(form.groups)
    ),
    collapse.card(
        'Фильтр по названию',
        form.query.vars.value is not empty,
        'accordion',
        'filterByName',
        body.form(form.query)
    ),
    collapse.card(
        'Тип игры',
        form.content_types.vars.value is not empty,
        'accordion',
        'collapseTwo',
        body.form(form.content_types)
    ),
    collapse.card(
        'Возраст',
        form.age_ratings.vars.value is not empty,
        'accordion',
        'collapseOne',
        body.form(form.age_ratings)
    ),
    collapse.card(
        'Совет',
        true,
        'accordion',
        'collapseHelp',
        body.login()
    ),
], 'accordion') }}