display_builder-1.0.x-dev/components/display_builder/display_builder.twig

{% set builder_id = builder_id|default('db-display-builder-' ~ random()) %}
{% set attributes = attributes.setAttribute('id', builder_id).addClass('db-display-builder') %}

{% set contextual_id = builder_id ~ '-contextual' %}

<section{{ attributes }}>
  {% set first_drawer_content %}
    <div class="db-resize-handle"></div>
    <span class="db-drawer__content">
      {% for island in view_sidebar %}
        <span class="db-drawer__content_island" id="{{ island['#attributes']['id'] }}">
          {{ island }}
        </span>
      {% endfor %}
    </span>
  {% endset %}

  {{ include('display_builder:drawer', {
    id: 'db-first-drawer',
    placement: 'start',
    content: first_drawer_content,
    contained: true,
    footer_close: false,
  }, with_context: false) }}

  {% set second_drawer_content %}
    <div class="db-resize-handle"></div>
    <span class="db-drawer__content">
      {{ contextual_islands }}
    </span>
  {% endset %}

  {{ include('display_builder:drawer', {
    id: 'db-second-drawer',
    label: 'Settings'|t,
    placement: 'end',
    content: second_drawer_content,
    contained: true,
    footer_close: false,
  }, with_context: false) }}

  {% set start %}
    <sl-button-group label="{{ 'Sidebar buttons'|t }}">
      {{ view_sidebar_buttons }}
    </sl-button-group>
  {% endset %}

  {{ include('display_builder:toolbar', {
      sticky: true,
      start: start,
      middle: view_main_tabs,
      end: buttons,
    }, with_context: false) }}

  <div class="db-display-builder__main">
    <span id="message-{{ builder_id }}"></span>
    {{ view_main }}
  </div>

  {% if menu_islands %}
    <div class="db-display-builder__menu">
      {{ menu_islands }}
    </div>
  {% endif %}

  <div id="preview-{{ builder_id }}" class="db-background db-preview" role="tooltip"></div>

</section>