theme/templates/blocks/block_list/block_list.episodes.html.twig line 1

Open in your IDE?
  1. {# BLOCK LISTA #}
  2. {% if blockscontent %}
  3. {% import 'blocks\\macros.html.twig' as macros %}
  4. <section class="{{ blockSequence|default }} block-list episodes{% if settings.light_mode|default == 1 %} light-mode{% endif %} {{ settings.extra_class|default(null) }}" style="{{ macros.getStyles(settings) }}" {{ macros.getBlockDataAttributes(_context) }}>
  5.     <div class="{% if settings.fullwidth|default(0) != 1 %}container{% else %}w-100{% endif %}">
  6.     {% if settings.carousel|default == '1' or settings.carousel_1175|default == '1' or settings.carousel_600|default == '1' or settings.carousel_480|default == '1' %}
  7.         {% import 'blocks\\block_list\\block_list.default.settings.twig' as slick_settings %}
  8.         <div class="slick-carousel programs-list__carousel" data-slick='{{slick_settings.getSlick_Settings(settings)|replace({"\n":""})}}' style="--block-list-gap:{{ settings.items_gap|default('var(--margin)') }};">
  9.     {% else %}
  10.     {% set temporadas = studio.getVariable('temporadas')|default([]) %}
  11.     {{ studio.setVariable('temporadas', []) }}
  12.     {% set temporadas = temporadas|filter(v => v is not null) %}
  13.     {% set temporadas = temporadas|reduce((carry, item) => item in carry ? carry : carry|merge([item]), []) %}
  14.     {% set temporadas = temporadas|sort %}
  16.         <div class="program__episodes">
  17.             <div class="row justify-content-between align-items-center">
  18.                 <div class="col-12 col-lg-auto ">
  19.                     <h2 class="program__episodes--title mb-2 mb-lg-0">{{fields.title|default}}</h2>
  20.                 </div>
  21.                 <div class="col-12 col-lg-auto">
  22.                     {% if temporadas is not empty %}
  23.                     <div hidden class="select-wrapper w-100">
  24.                         <select name="temporadas" id="cb_temporadas" class="program-custom-select w-100">
  25.                             {% for temporada in temporadas %}
  26.                                 <option value="{{ temporada }}" {% if loop.first %}selected{% endif %}>{{ temporada }}</option>
  27.                             {% endfor %}
  28.                         </select>
  29.                         <i class="fa-solid fa-chevron-down"></i>
  30.                     </div>
  31.                     {% endif %}
  32.                 </div>
  33.             </div>
  34.         </div>
  36. <div class="spinner-container">
  37.   <i class="fas fa-circle-notch spinner"></i>
  38. </div>
  39.         <div hidden id="grid-videos-programas" class="row grid" style="--block-list-gap:{{ settings.items_gap|default('var(--margin)') }}; --block-list-cols:{{settings.column|default('3')}}">
  40.     {% endif %}
  42.         {{ blockscontent|raw }}
  44.         </div>
  45.     </div>
  46.     {% if fields.paginate %}
  47.         <div class="container">
  48.             {% set datapage = paginator.getPaginationData %}
  49.             {% if isajax is defined %}
  50.                 {% if datapage.pageCount > 1 %}
  51.                     <nav>
  52.                         <ul class="pagination">
  53.                             {% if datapage.previous is defined %}
  54.                                 <li class="page-item ajax-paginator" data-page-id="{{ pageid }}" page-id="{{ datapage.previous }}">
  55.                                     <span class="page-link" rel="prev">&laquo;&nbsp;{{ 'label_previous'|trans([], 'KnpPaginatorBundle') }}</span>
  56.                                 </li>
  57.                             {% else %}
  58.                                 <li class="page-item disabled">
  59.                                     <span class="page-link">&laquo;&nbsp;{{ 'label_previous'|trans([], 'KnpPaginatorBundle') }}</span>
  60.                                 </li>
  61.                             {% endif %}
  62.                             {% for i in 1..datapage.pageCount %}
  63.                                 <li class="page-item {% if i == datapage.current %}active{% else %}ajax-paginator" data-page-id="{{ pageid }}" page-id="{{ i }}{% endif %}">
  64.                                     <span class="page-link">{{ i }}</span>
  65.                                 </li>
  66.                             {% endfor %}
  67.                             {% if datapage.next is defined %}
  68.                                 <li class="page-item ajax-paginator" data-page-id="{{ pageid }}" page-id="{{ datapage.next }}">
  69.                                     <span class="page-link" rel="next">{{ 'label_next'|trans([], 'KnpPaginatorBundle') }}&nbsp;&raquo;</span>
  70.                                 </li>
  71.                             {% else %}
  72.                                 <li class="page-item disabled">
  73.                                     <span class="page-link">{{ 'label_next'|trans([], 'KnpPaginatorBundle') }}&nbsp;&raquo;</span>
  74.                                 </li>
  75.                             {% endif %}
  76.                         </ul>
  77.                     </nav>
  78.                 {% endif %}
  79.             {% else %}
  80.                  {{ knp_pagination_render(paginator,'paginator/navigation.pagination.html.twig') }}
  81.             {% endif %}
  82.         </div>
  83.     {% endif %}
  84. </section>
  85. {% endif %}
  86. {# @END BLOCK LISTA #}
  88. {% include 'blocks/block_share_modal/block_share_modal.default.html.twig' %}
  90. <script>
  91.     document.addEventListener('DOMContentLoaded', function() {
  92.         const cb_temporadas = document.getElementById('cb_temporadas');
  93.         const grid = document.getElementById('grid-videos-programas');
  94.         const spinnerContainer = document.querySelector('.spinner-container');
  96.         if(cb_temporadas) {
  97.             // 1️⃣ Pega todas as options
  98.             const options = Array.from(cb_temporadas.options);
  100.             // 2️⃣ Ordena ignorando acentos e maiúsculas/minúsculas
  101.             options.sort((a, b) => {
  102.                 const textA = a.text.trim();
  103.                 const textB = b.text.trim();
  104.                 return textA.localeCompare(textB, 'pt-PT', { sensitivity: 'base' });
  105.             });
  107.             // 3️⃣ Remove todas as opções antigas e reinsere ordenadas
  108.             cb_temporadas.innerHTML = '';
  110.             // 4️⃣ Reinsere as opções ordenadas
  111.             options.forEach(opt => cb_temporadas.add(opt));
  113.             // 5️⃣ Seleciona a primeira opção (padrão) após ordenar
  114.             cb_temporadas.selectedIndex = 0; // Seleciona a primeira opção após ordenar
  116.             // 6️⃣ remove o atributo hidden pai do select
  117.             cb_temporadas.parentElement.removeAttribute('hidden');
  118.         }
  120.         // Remove o spinner e mostra o grid
  121.         spinnerContainer.style.display = 'none';
  122.         grid.removeAttribute('hidden');
  123.     });
  125.     //
  126.     function mostrarTemporada(valor) {
  127.         let temporadas = document.querySelectorAll(".episodes_card");
  129.         temporadas.forEach(function (t) {
  130.         if (t.getAttribute("data-temporada") === valor) {
  131.             t.style.display = "block";
  132.         } else {
  133.             t.style.display = "none";
  134.         }
  135.         });
  136.     }
  138.     document.addEventListener("DOMContentLoaded", function () {
  139.         let select = document.getElementById("cb_temporadas");
  140.         mostrarTemporada(select.value);
  142.     });
  144.     document.getElementById("cb_temporadas").addEventListener("change", function() {
  145.         let temporadaSelecionada = this.value;
  146.         mostrarTemporada(temporadaSelecionada);
  147.     });
  148. </script>