templates/_snippets/marquee_cards.html.twig line 1

Open in your IDE?
  1. {# Valeurs de base #}
  2. {% set effectiveSectionSettings = showSectionSettings|default(true) ? sectionSettings|default({}) : {} %}
  3. {% set content = effectiveSectionSettings|merge(marqueeCards) %}
  4. {% set datas = {} %}
  6. {% if content is defined and content is not none and content is not empty %}
  8. {# Propriétés de la section #}
  9. {% set datas = datas|merge({'section': section(content)}) %}
  11. {# Propriétés du titre #}
  12. {% set datas = datas|merge({'title': title(content)}) %}
  14. {% set marqueeCardsId = datas.section.id|default('marquee-cards-' ~ random()) %}
  16. {# --- Affichage des éléments --- #}
  18. <section id="{{ marqueeCardsId }}" class="marquee-cards-section">
  19. {% if showSectionSettings|default(true) and attribute(content, 'titleTextSection')|default('') is not empty %}
  20. {{ ('<'~attribute(content, 'typeTitleSection')|default('h2')~' class="marquee-cards-title">')|raw }}
  21. {% if attribute(content, 'pictogramTitleSection')|default('') is not empty %}
  22. <span class="icon">{{ getLucidIcon(attribute(content, 'pictogramTitleSection')) }}</span>
  23. {% endif %}
  24. {{ attribute(content, 'titleTextSection')|raw }}
  25. {{ ('</'~attribute(content, 'typeTitleSection')|default('h2')~'>')|raw }}
  26. {% elseif datas.title.text is defined and datas.title.text is not empty %}
  27. {{ ('<'~datas.title.level|default('h2')~' class="marquee-cards-title">')|raw }}
  28. {{ datas.title.text|raw }}
  29. {{ ('</'~datas.title.level|default('h2')~'>')|raw }}
  30. {% endif %}
  32. {% if content.marqueesLines is defined and content.marqueesLines is not empty %}
  33. {% for line in content.marqueesLines %}
  34. {% if line.marqueesCards is defined and line.marqueesCards is not empty %}
  36. <div class="marquee-cards" data-direction="{{ line.marqueeDirection|default('leftToRight') }}" data-speed="{{ line.marqueeSpeed|default(1) }}" style="margin-bottom: {{ line.marqueeLinesMarginBottom|default(22) }}{{ line.marqueeLinesMarginBottomUnit|default('px') }};">
  37. <div class="marquee">
  38. {% for card in line.marqueesCards %}
  39. {% if card.title is defined and card.title is not empty %}
  40. <span>
  41. <div class="card">
  42. <div class="card-inner">
  43. <div class="card-content-wrapper">
  44. {% if card.svg is defined %}
  45. <div class="card-icon" style="background-color: {{ card.svgColor|default('') }};">
  46. {{ getLucidIcon(card.svg|default('award')) }}
  47. </div>
  48. {% endif %}
  50. <div class="card-text-content">
  51. {% if card.title is defined and card.title is not empty %}
  52. <div class="card-title">{{ card.title|raw }}</div>
  53. {% endif %}
  55. {% if card.content is defined and card.content is not empty %}
  56. <div class="card-content">{{ card.content|raw }}</div>
  57. {% endif %}
  58. </div>
  59. </div>
  61. {% if card.mention is defined and card.mention is not empty %}
  62. <div class="card-mention">*{{ card.mention|raw }}</div>
  63. {% endif %}
  64. </div>
  65. </div>
  66. </span>
  67. {% endif %}
  68. {% endfor %}
  70. </div>
  71. </div>
  72. {% endif %}
  73. {% endfor %}
  74. {% endif %}
  75. </section>
  77. {# Le JavaScript du marquee cards est maintenant géré par snippets/marquee-cards.js #}
  79. {% endif %}
  81. {# Mise à jour du CSS lié à la section #}
  82. <style>
  83. {% include '_snippets/components/_section.html.twig' %}
  84. {% include '_snippets/components/_title.html.twig' %}
  86. /* ========================================
  87. MARQUEE CARDS STYLES
  88. ======================================== */
  91. section#{{marqueeCardsId}}
  92. {
  93. --marquee-cards-margin-right: {{content.marqueesLines[0].marqueeCardsMarginRight|default(20)}}
  94. {{content.marqueesLines[0].marqueeCardsMarginRightUnit|default('px')}}
  95. ;
  96. }
  97. </style>