You are here

gridstack-ui-admin.html.twig in GridStack 8.2

Default theme implementation for the GridStack template for admin.

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

modules/gridstack_ui/templates/gridstack-ui-admin.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for the GridStack template for admin.
  5. *
  6. * Available variables:
  7. * - items: The array of items containing gridstack contents and captions.
  8. * - settings: A cherry-picked settings that mostly defines the box HTML or
  9. * layout, and none of JS settings/options which are defined at data-config.
  10. * - attributes: The array of attributes to hold classes, id and config data
  11. * containing JSON object aka JS settings the GridStack expects. We don't
  12. * store these JS settings in the normal <head>, but inline within
  13. * data-config attribute instead.
  14. *
  15. * Debug:
  16. * @see https://www.drupal.org/node/1906780
  17. * @see https://www.drupal.org/node/1903374
  18. * Use Kint: {{ kint(variable) }}
  19. * Dump all available variables and their contents: {{ dump() }}
  20. * Dump only the available variable keys: {{ dump(_context|keys) }}
  21. */
  22. #}
  23. {%
  24. set preview_classes = [
  25. 'gridstack-preview',
  26. settings.display ? 'gridstack-preview--' ~ settings.display,
  27. settings.breakpoint ? 'gridstack-preview--' ~ settings.breakpoint,
  28. settings.is_main_preview ? 'gridstack-preview--main' : 'gridstack-preview--sub',
  29. settings.breakpoint_width is empty and not settings.is_main_preview ? 'form-disabled',
  30. ]
  31. %}
  32. {%
  33. set content_classes = [
  34. 'gridstack gridstack--ui grid-stack is-gs-layout',
  35. settings.noMargin ? 'is-gs-nomargin',
  36. ]
  37. %}
  38. {%
  39. set wrapper_classes = [
  40. 'gridstack-wrapper',
  41. ]
  42. %}
  43. {% set main_buttons %}
  44. {% if settings.is_main_preview %}
  45. <div class="form--gridstack__actions form-actions form-wrapper clearfix">
  46. {% for key, button in main_button_texts %}
  47. {% if key == 'save' %}
  48. <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>
  49. {% else %}
  50. <button class="button btn btn--gridstack btn--main btn--{{ key }}" data-message="{{ key }}" data-breakpoint="{{ settings.breakpoint }}">{{ button }}</button>
  51. {% endif %}
  52. {% endfor %}
  53. </div>
  54. {% endif %}
  55. {% endset %}
  56. {% spaceless %}
  57. <div{{ preview_attributes.addClass(preview_classes) }}>
  58. <div {{ wrapper_attributes.addClass(wrapper_classes) }}>
  59. <div{{ content_attributes.addClass(content_classes) }}>
  60. {# Empty content populated dynamically by Backbone. #}
  61. </div>
  62. </div>
  63. {% if not settings.no_buttons and settings.is_main_preview %}
  64. {{ main_buttons }}
  65. {% endif %}
  66. </div>
  67. {% endspaceless %}