gridstack-8.x-2.5/modules/gridstack_ui/templates/gridstack-ui-dummy.html.twig

{#
/**
 * @file
 * Default theme implementation for the GridStack dummy template for admin.
 *
 * Available variables:
 * - delta: The current index.
 * - dummies: The flag that indicates the template is built up for JS cloning.
 *     If false, then it is the actual dummy content.
 * - image_style: The individual image style for the dummy.
 * - nested_grids: The nested grids if available.
 * - settings: A cherry-picked settings that mostly defines the box HTML or
 *     layout, and none of JS settings which are defined at data-config.
 *
 * Debug:
 * @see https://www.drupal.org/node/1906780
 * @see https://www.drupal.org/node/1903374
 * Use Kint: {{ kint(variable) }}
 * Dump all available variables and their contents: {{ dump() }}
 * Dump only the available variable keys: {{ dump(_context|keys) }}
 *
 * @todo: Clean up traces of old HTML approach prior to Backbone.
 * @todo: Remove, no longer in use for Backbone.
 */
#}
{%
  set add_classes = [
    'button btn btn--dummy btn--gridstack btn--content btn--nested',
    settings.nester ? 'visually-hidden',
  ]
%}
{%
  set remove_classes = [
    'button btn btn--dummy btn--gridstack btn--content btn--remove',
  ]
%}
{%
  set nested_classes = [
    'gridstack gridstack--ui gridstack--dummy gridstack--nested is-gs-layout',
  ]
%}
{%
  set box_classes = [
    'gridstack__box box box--dummy grid-stack-item',
  ]
%}

{% set content_buttons %}
  <div class="btn-group btn-group--dummy btn-group--nested">
    {% if not settings.is_framework %}
      {{ image_style }}
    {% endif %}

    {# .setAttribute('data-gs-index', index) #}
    <button {{ button_add_attributes.addClass(add_classes)
      .setAttribute('data-storage', settings.storage)
      .setAttribute('data-message', 'nested') }}>+</button>

    {# .setAttribute('data-gs-index', index) #}
    <button {{ button_remove_attributes.addClass(remove_classes)
      .setAttribute('data-storage', settings.storage)
      .setAttribute('data-message', 'remove') }}>&times;</button>
  </div>

  <span class="box__handle">::</span>

  {# .setAttribute('data-gs-gid', index) #}
  {# .setAttribute('data-gs-index', index) #}
  <div{{ nested_attributes.addClass(nested_classes)
    .setAttribute('data-config', settings.config)
    .setAttribute('data-preview-grids', nested_grids)
    .setAttribute('data-breakpoint', settings.breakpoint)
    .setAttribute('data-storage', settings.storage)
    }}></div>
{% endset %}

{% set box_dummy %}
  <div{{ box_attributes.addClass(box_classes) }}>
    <div class="box__content box__content--dummy grid-stack-item-content">
      {{ content_buttons }}
    </div>
  </div>
{% endset %}

{% if dummies %}
  <div id="gridstack-box-template">{{ box_dummy }}</div>
  {{ content }}
{% else %}
  {% if item %}
    {{ item }}
    {{ content }}
  {% else %}
    {{ content_buttons }}
  {% endif %}
{% endif %}