gridstack-admin.html.twig in GridStack 8

Default theme implementation for the GridStack template.

Available variables:

items: The array of items containing gridstack contents and captions.
settings: A cherry-picked settings that mostly defines the box HTML or layout, and none of JS settings/options which are defined at data-config.
attributes: The array of attributes to hold classes, id and config data containing JSON object aka JS settings the GridStack expects. We don't store these JS settings in the normal <head>, but inline within data-config attribute instead.

Debug: Use Kint: {{ kint(variable) }} Dump all available variables and their contents: {{ dump() }} Dump only the available variable keys: {{ dump(_context|keys) }}

File

templates/gridstack-admin.html.twig

View source

{#
/**
 * @file
 * Default theme implementation for the GridStack template.
 *
 * Available variables:
 * - items: The array of items containing gridstack contents and captions.
 * - settings: A cherry-picked settings that mostly defines the box HTML or
 *     layout, and none of JS settings/options which are defined at data-config.
 * - attributes: The array of attributes to hold classes, id and config data
 *     containing JSON object aka JS settings the GridStack expects. We don't
 *     store these JS settings in the normal <head>, but inline within
 *     data-config attribute instead.
 *
 * 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) }}
 */
#}
{%
  set preview_classes = [
    'gridstack-preview',
    settings.display ? 'gridstack-preview--' ~ settings.display,
    settings.breakpoint ? 'gridstack-preview--' ~ settings.breakpoint,
    settings.is_main_preview ? 'gridstack-preview--main' : 'gridstack-preview--sub',
    settings.breakpoint_width is empty and not settings.is_main_preview  ? 'form-disabled',
  ]
%}
{%
  set content_classes = [
    'gridstack ungridstack gridstack--ui gridstack--js',
    settings.nester ? 'gridstack--nester',
    settings.class_by_id ? settings.class_by_id|clean_class,
    settings.noMargin ? 'gridstack--nomargin',
    settings.skin ? 'gridstack--skin--' ~ settings.skin|clean_class,
    settings.optionset ? 'gridstack--optionset--' ~ settings.optionset|clean_class,
    settings.width ? 'grid-stack-' ~ settings.width,
  ]
%}
{%
  set wrapper_classes = [
    'gridstack-wrapper',
  ]
%}
{% set main_buttons %}
  {% if settings.is_main_preview %}
    <div class="gridstack-actions form-actions form-wrapper clearfix">
      {% for key, button in main_button_texts %}
        {% if key == 'save' %}
          <button class="button btn btn--gridstack btn--main btn--primary btn--{{ key }}" data-message="{{ key }}" data-storage="{{ settings.storage }}" data-icon="{{ settings.icon_breakpoint }}" data-breakpoint="{{ settings.breakpoint }}">{{ button }}</button>
        {% else %}
          <button class="button btn btn--gridstack btn--main btn--{{ key }}" data-message="{{ key }}" data-breakpoint="{{ settings.breakpoint }}">{{ button }}</button>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
{% endset %}

{% spaceless %}
<div{{ preview_attributes.addClass(preview_classes) }}>
  <div {{ wrapper_attributes.addClass(wrapper_classes) }}>
    <div{{ content_attributes.addClass(content_classes) }}>
      {# Empty content populated dynamically by Backbone. #}
    </div>
  </div>
  {% if not settings.no_buttons and settings.is_main_preview %}
    {{ main_buttons }}
  {% endif %}
</div>
{% endspaceless %}

You are here

gridstack-admin.html.twig in GridStack 8

See also

File

API Navigation