templates/default/components/organisms/story-grid/story-grid.html.twig line 1

Open in your IDE?
  1. {% set id = id|default(_uid|default(uniqid())) %}
  2. {% set storyObjects = story_objects|default([]) %}
  3. {% set topics = article_topics|default([]) %}
  4. {% set types = article_types|default([]) %}
  5. {% set filteredTopics = app.request.get('topics_' ~ id)|default(filteredTopics|default([])) %}
  6. {% set filteredTypes = app.request.get('types_' ~ id)|default(filteredTypes|default([])) %}
  7. {% set layout = layout|default('classic') %}
  8. {% set storyIds = stories|default([]) %}
  9. {% set limit = article_count|default(storyIds|length) %}
  11. {% if storyObjects is empty%}
  12. {% set storyObjects = getContentByTopicsAndTypes(filteredTopics, filteredTypes, limit, 1, storyIds) %}
  13. {% endif%}
  15. {% if topics is empty and types is empty and (showTopicFilter|default(false) or showTypeFilter|default(false))%}
  16. {% set allStoryObjects = getContentByTopicsAndTypes(topics, types, 50, 1, storyIds) %}
  17. {% set topics = getContentsFilterOptions(allStoryObjects, 'article_topics') %}
  18. {% set types = getContentsFilterOptions(allStoryObjects, 'article_types') %}
  19. {% endif %}
  21. {% set total = storyObjects.total %}
  22. {% set topics = topicFilterOptions|default(topics) %}
  23. {% set types = typeFilterOptions|default(types) %}
  25. {% set dynamicFilterOption = dynamicFilterOption|default("none") %}
  26. {% set background = background|default('gradient-grey-white-grey') %}
  28. <div class="story-grid story-grid--{{ background }}"
  29. data-story-grid-id="{{ id }}"
  30. data-story-grid-story-ids="{{ storyIds|json_encode }}"
  31. data-story-grid-dynamic-filter-option="{{ dynamicFilterOption }}"
  32. data-story-grid-topics="{{ topics|json_encode }}"
  33. data-story-grid-types="{{ types|json_encode }}"
  34. data-story-grid-limit="{{ limit }}"
  35. data-story-grid-layout="{{ layout }}"
  36. data-story-grid-ajax-url="{{ path('app_story_grid') }}"
  37. data-story-grid-ignored-stories="{{ ignoredStories|default }}"
  38. >
  39. {% if headline is defined %}
  40. {{ render_storyblok(headline, {
  41. class: 'headline--center',
  42. }) }}
  43. {% endif %}
  45. {% if showTopicFilter|default(false) or showTypeFilter|default(false) %}
  46. <div class="story-grid__filter-container">
  47. {% if showTopicFilter|default(false) %}
  48. <toggle
  49. trigger-text="{{ 'story_grid_topics'|trans }}"
  50. toggled-media-query="{% if app.request.get('topics_' ~ id)|length %}all{% else %}(min-width: 768px){% endif %}"
  51. >
  52. {% set topicTranslations = 'article_topics'|trans([], 'json')|json_decode %}
  53. <height-transition>
  54. <ul class="story-grid__filter-list story-grid__filter-list-topics">
  55. {% for topic in topics %}
  56. <li data-story-grid-topic="{{ topic }}"
  57. data-reserve-bold-space="{{ topicTranslations[topic]|default(topic) }}"
  58. class="story-grid__filter {% if topic in filteredTopics %}story-grid__filter--active{% endif %}"
  59. tabindex="0"
  60. >
  61. {{ topicTranslations[topic]|default(topic) }}
  62. </li>
  63. {% endfor %}
  64. <li data-story-grid-reset="topics"
  65. data-reserve-bold-space="{{ 'listing_filter_active_filter_reset'|trans }}"
  66. class="story-grid__filter story-grid__filter--reset {% if filteredTopics|length %}story-grid__filter--reset-active{% endif %}"
  67. tabindex="0"
  68. >
  69. {{ 'listing_filter_active_filter_reset'|trans }}
  70. </li>
  71. </ul>
  72. </height-transition>
  73. </toggle>
  74. {% endif %}
  76. {% if showTypeFilter|default(false) %}
  77. <toggle
  78. trigger-text="{{ 'story_grid_types'|trans }}"
  79. toggled-media-query="{% if app.request.get('types_' ~ id)|length %}all{% else %}(min-width: 768px){% endif %}"
  80. >
  81. {% set typeTranslations = 'article_types'|trans([], 'json')|json_decode %}
  82. <height-transition>
  83. <ul class="story-grid__filter-list story-grid__filter-list-types">
  84. {% for type in types %}
  85. <li data-story-grid-type="{{ type }}"
  86. data-reserve-bold-space="{{ typeTranslations[type]|default(type) }}"
  87. class="story-grid__filter {% if type in filteredTypes %}story-grid__filter--active{% endif %}"
  88. tabindex="0"
  89. >
  90. {{ typeTranslations[type]|default(type) }}
  91. </li>
  92. {% endfor %}
  93. <li data-story-grid-reset="types"
  94. data-reserve-bold-space="{{ 'listing_filter_active_filter_reset'|trans }}"
  95. class="story-grid__filter story-grid__filter--reset {% if filteredTypes|length %}story-grid__filter--reset-active{% endif %}"
  96. tabindex="0"
  97. >
  98. {{ 'listing_filter_active_filter_reset'|trans }}
  99. </li>
  100. </ul>
  101. </height-transition>
  102. </toggle>
  103. {% endif %}
  104. </div>
  105. <hr>
  106. {% endif %}
  108. <height-transition>
  109. <div class="story-grid__grid" id="{{ id }}">
  110. {% include 'components/organisms/story-grid/list.html.twig' %}
  111. </div>
  112. </height-transition>
  114. {% set showMore = total > limit %}
  116. {% if link is not empty %}
  117. <div class="story-grid__link">
  118. {{ render_storyblok(link, {
  119. class: 'text-link--primary button button--multitool button--width-auto button--transparent',
  120. }) }}
  121. </div>
  122. {% elseif showMore %}
  123. <div class="story-grid__link">
  124. {% include 'components/atoms/button/button.html.twig' with {
  125. class: 'button button--multitool button--width-auto button--transparent story-grid__button story-grid__button--active',
  126. content: 'pagination_more_text'|trans,
  127. attributes: {
  128. 'data-reserve-bold-space':'pagination_more_text'|trans,
  129. 'data-story-grid-more': 'true',
  130. 'data-story-grid-url': path('app_story_grid')
  131. }
  132. } %}
  134. <span data-story-grid-link-info="{{ 'story_grid_link_info'|trans }}" class="story-grid__link-info story-grid__link-info--active">
  135. {{ 'story_grid_link_info'|trans({'%loaded%': min(limit, total), '%total%': total}) }}
  136. </span>
  137. </div>
  138. {% endif %}
  139. </div>