gridstack-dummy.html.twig in GridStack 8

Default theme implementation for the GridStack dummy template.

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: 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.

See also

https://www.drupal.org/node/1906780

https://www.drupal.org/node/1903374

1 theme call to gridstack-dummy.html.twig

GridStackForm::form in modules/gridstack_ui/src/Form/GridStackForm.php

Gets the actual form array to be built.

File

templates/gridstack-dummy.html.twig

{#
/**
 * @file
 * Default theme implementation for the GridStack dummy template.
 *
 * 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.
 */
#}
{%
  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 ungridstack gridstack--ui gridstack--dummy gridstack--nested gridstack--js',
  ]
%}
{%
  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 %}
    <button {{ button_add_attributes.addClass(add_classes)
      .setAttribute('data-index', index)
      .setAttribute('data-storage', settings.storage)
      .setAttribute('data-message', 'nested') }}>+</button>

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

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

  <div{{ nested_attributes.addClass(nested_classes)
    .setAttribute('data-config', settings.config)
    .setAttribute('data-gid', index)
    .setAttribute('data-index', index)
    .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">
      {{ 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 %}