templates/includes/blocks/heading_dynamic.html.twig line 1

  1. {% set propertyName = propertyName|default('blocks') %}
  2. {% set uid = random() %}
  3. {% if block.heading|default('') %}
  4.     {% if image is defined and image != "" %}
  5.         {% set submedia = sulu_resolve_media(image, app.request.locale) %}
  6.     {% endif %}
  7.     <img src="{{ (submedia is defined) ? submedia.thumbnails["pageImage"] : '' }}" class="pageImage" alt="{{ submedia.title }}" title="{{ submedia.description|default(submedia.title) }}">
  8.     <div class="container">
  9.         <div class="page-headline-wrapper mt-4 mt-lg-5">
  10.             <h1 id="heading-{{ uid }}" class="page-headline {% if block.suffix %}has-suffixes{% endif %}">
  12.                 {% autoescape false %}
  13.                 {{ block.heading|pipe|nl2br|hyphenate }}
  14.                 {% if block.suffix %}
  15.                     {% set suffixes = block.suffix|split(',') %}
  16.                     <span class="suffixes">
  17.                         {% for suffix in suffixes %}
  18.                             <span class="suffix-{{ loop.index0 }} {{ (loop.index0 == 0) ? "active" : "inactive initial" }}">{{ suffix|pipe|nl2br|hyphenate }}</span>
  19.                         {% endfor %}
  20.                     </span>
  21.                 {% endif %}
  22.                 {% endautoescape %}
  23.             </h1>
  24.             {% if block.subline|default('') %}
  25.                 <h3 class="page-headline-muted">
  26.                     {% autoescape false %}
  27.                     {{ block.subline|pipe|nl2br|hyphenate }}
  28.                     {% endautoescape %}
  29.                 </h3>
  30.             {% endif %}
  31.         </div>
  32.     </div>
  33. {% endif %}
  34. <script>
  35.     {% if block.suffix %}
  36.     function setIntervalImmediately(func, interval) {
  37.         func();
  38.         return setInterval(func, interval);
  39.     }
  40.     let headingCount = {{ suffixes|length }};
  41.     let headingIndex = 0;
  42.     let changeSuffix = setIntervalImmediately( _ => {
  43.         document.querySelectorAll('#heading-{{ uid }} .suffixes span').forEach(function(el) {
  44.             el.classList.remove('active');
  45.             el.classList.add('inactive');
  46.         });
  47.         let currentEl = document.querySelectorAll('#heading-{{ uid }} .suffixes span')[headingIndex];
  48.         currentEl.classList.remove('inactive', 'initial');
  49.         currentEl.classList.add('active');
  50.         headingIndex++;
  51.         if (headingIndex >= headingCount) {
  52.             headingIndex = 0;
  53.         }
  54.     }, 2000);
  55.     {% endif %}
  56. </script>