1<style>
2.results-list-formacio {
3 background: #fff;
4 border: 1px solid #CC5D27;
5 border-radius: 10px 30px 10px 10px;
6 display: flex;
7 flex-wrap: wrap;
8 padding: 20px;
9 padding-right: 40px;
10 position: relative;
11 row-gap: 20px;
12 transition: all 0.3s;
13 -webkit-transition: all 0.3s;
14}
15
16.select-label {
17 font-size: 1.5em;
18 /* Tamaño similar al de un h3 */
19 font-weight: bold;
20 /* Negrita */
21 margin-bottom: 10px;
22 /* Espacio debajo del label */
23 display: block;
24 /* Asegura que el label esté en su propia línea */
25}
26
27.result-info-formacio {
28 column-gap: 20px;
29 display: flex;
30 flex: 100%;
31}
32
33.load-more-btn {
34 background-color: #CC5D27;
35 color: #fff;
36 padding: 10px 20px;
37 border-radius: 5px;
38 text-decoration: none;
39 display: inline-block;
40 margin-top: 20px;
41}
42</style>
43<#if entries?has_content>
44 <#assign categoryList=[] />
45 <!-- Recorremos todas las entradas para obtener sus categorías -->
46 <#list entries as entry>
47 <#assign categories=entry.getCategories()![] />
48 <#if categories?has_content>
49 <#list categories as category>
50 <!-- Si la categoría no está en la lista, la agregamos -->
51 <#if category.getName() != "Enlaces" && category.getName() != "Beques" && category.getName() != "Altres idiomes" && category.getName() != "Accés a la universitat" && category.getName() != "Català" && category.getName() != "Castellà" && category.getName() != "Anglès" && !(categoryList?seq_contains(category.getName()))>
52 <#assign categoryList=categoryList + [category.getName()] />
53 </#if>
54 </#list>
55 </#if>
56 </#list>
57 <#assign idioma = themeDisplay.getLocale().language />
58 <#assign entriesSize=entries?size />
59 <#assign selectLabel = "Escull una opció: " />
60 <#assign select = "Seleccionar" />
61 <#assign nonAvailableCategories = "No hi ha categories disponibles" />
62 <#assign enlaces = "Enllaços" />
63 <#assign masEnlaces = "Veure més enllaços" />
64 <#assign de = "de" />
65 <#if idioma == "es">
66 <#assign selectLabel = "Escoge una opción: " />
67 <#assign nonAvailableCategories = "No hay categorías disponibles" />
68 <#assign enlaces = "Enlaces" />
69 <#assign masEnlaces = "Ver más enlaces" />
70 <#elseif idioma == "en">
71 <#assign selectLabel = "Choose an option: " />
72 <#assign nonAvailableCategories = "No categories available" />
73 <#assign select = "Select" />
74 <#assign enlaces = "Links" />
75 <#assign masEnlaces = "See more links" />
76 <#assign de = "of" />
77 </#if>
78 <!-- Mostrar el select con las categorías obtenidas -->
79 <div class="wrapper medium mb-2">
80 <div class="results-list-formacio d-flex justify-content-center align-items-center">
81 <label for="categorySelect" class="select-label mr-2 pt-2">${selectLabel}</label>
82 <select id="categorySelect">
83 <option value="">${select}</option>
84 <#if categoryList?has_content>
85 <#list categoryList as categoryName>
86 <option value="${categoryName}">
87 ${categoryName}
88 </option>
89 </#list>
90 <#else>
91 <option value="">${nonAvailableCategories}</option>
92 </#if>
93 </select>
94 </div>
95 </div>
96 <!-- Mostrar las entradas -->
97 <div class="wrapper medium">
98 <h3 class="title-form-enlace" id="title-form-enlace"></h3>
99 <ul id="entries-list">
100 <#list entries as curEntry>
101 <#assign assetRenderer=curEntry.getAssetRenderer() />
102 <#assign assetObject=assetRenderer.getAssetObject() />
103 <#assign categories=curEntry.getCategories()![] />
104 <#assign entryCategoryNames=[] />
105 <#list categories as category>
106 <#assign entryCategoryNames=entryCategoryNames + [category.getName()] />
107 </#list>
108 <#assign conditionalStyle="display:block;" />
109 <#if (curEntry?counter>= 5)>
110 <#assign conditionalStyle="display:none;" />
111 </#if>
112 <li class="my-4 entry" style="display:none" data-categories="${entryCategoryNames?join(',')}">
113 <#if assetObject.getArticleId()??>
114 <@liferay_journal["journal-article"]
115 articleId=assetObject.getArticleId()
116 ddmTemplateKey="161002"
117 groupId=assetObject.getGroupId() />
118 </#if>
119 </li>
120 </#list>
121 </ul>
122 <div class="centered small-padding-bottom loadMoreBtn" style="display:none;">
123 <a href="javascript:void(0);" class="button lm-button-white" style="width: 100%">${masEnlaces}</a>
124 </div>
125 </div>
126</#if>
127<script>
128document.addEventListener('DOMContentLoaded', function() {
129 let maxEntriesToShow = 5;
130 let currentCategory = '';
131 const entries = document.querySelectorAll('.entry');
132 const loadMoreButton = document.querySelector('.loadMoreBtn');
133 const titleElement = document.querySelector('.title-form-enlace');
134 const categorySelect = document.getElementById('categorySelect');
135
136 // Función para filtrar y mostrar las entradas según la categoría seleccionada
137 function filterEntriesByCategory() {
138 const selectedCategory = categorySelect.value.toLowerCase();
139 currentCategory = selectedCategory;
140 let matchingEntries = [];
141
142 // Ocultar todas las entradas inicialmente
143 entries.forEach(entry => entry.style.display = 'none');
144
145 // Filtrar las entradas que coinciden con la categoría seleccionada
146 entries.forEach(entry => {
147 const entryCategories = entry.getAttribute('data-categories').split(',');
148 if (entryCategories.some(category => category.toLowerCase() === selectedCategory)) {
149 matchingEntries.push(entry);
150 }
151 });
152
153 // Mostrar solo las primeras 5 entradas de la categoría seleccionada
154 matchingEntries.slice(0, maxEntriesToShow).forEach(entry => entry.style.display = 'block');
155
156 // Actualizar el título con el conteo de entradas visibles
157 titleElement.innerText = '${enlaces} (' + Math.min(maxEntriesToShow, matchingEntries.length) + ' ${de} ' + matchingEntries.length + ')';
158
159 // Mostrar u ocultar el título
160 titleElement.style.display = matchingEntries.length > 0 ? 'block' : 'none';
161
162 // Mostrar u ocultar el botón "Ver más"
163 loadMoreButton.style.display = matchingEntries.length > maxEntriesToShow ? 'block' : 'none';
164 }
165
166 // Evento para cargar más entradas al hacer clic en "Ver más"
167 loadMoreButton.addEventListener('click', function() {
168 const matchingEntries = Array.from(entries).filter(entry => {
169 const entryCategories = entry.getAttribute('data-categories').split(',');
170 return entryCategories.some(category => category.toLowerCase() === currentCategory);
171 });
172
173 // Mostrar las siguientes 5 entradas de la categoría seleccionada
174 const newEntriesToShow = maxEntriesToShow + 5;
175 matchingEntries.slice(maxEntriesToShow, newEntriesToShow).forEach(entry => entry.style.display = 'block');
176
177 // Actualizar el conteo
178 maxEntriesToShow = newEntriesToShow;
179 titleElement.innerText = '${enlaces} (' + Math.min(maxEntriesToShow, matchingEntries.length) + ' ${de} ' + matchingEntries.length + ')';
180
181 // Ocultar el botón si ya se han mostrado todas las entradas
182 if (maxEntriesToShow >= matchingEntries.length) {
183 loadMoreButton.style.display = 'none';
184 }
185 });
186
187 // Inicializar el filtro cuando cambia la selección del select
188 categorySelect.addEventListener('change', function() {
189 maxEntriesToShow = 5;
190 filterEntriesByCategory();
191 });
192
193 // Inicializar el filtro al cargar la página
194 filterEntriesByCategory();
195});
196</script>
