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() != "Sistema de Qualificació Professional" && category.getName() != "Formacio Professional Especifica" && !(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 <#assign entriesSize=entries?size />
98 <div class="wrapper medium">
99 <h3 class="title-form-enlace" id="title-form-enlace"></h3>
100 <ul id="entries-list">
101 <#list entries as curEntry>
102 <#assign assetRenderer=curEntry.getAssetRenderer() />
103 <#assign assetObject=assetRenderer.getAssetObject() />
104 <#assign categories=curEntry.getCategories()![] />
105 <#assign entryCategoryNames=[] />
106 <#list categories as category>
107 <#assign entryCategoryNames=entryCategoryNames + [category.getName()] />
108 </#list>
109 <#assign conditionalStyle="display:block;" />
110 <#if (curEntry?counter>= 5)>
111 <#assign conditionalStyle="display:none;" />
112 </#if>
113 <li class="my-4 entry" style="display:none" data-categories="${entryCategoryNames?join(',')}">
114 <#if assetObject.getArticleId()??>
115 <@liferay_journal["journal-article"]
116 articleId=assetObject.getArticleId()
117 ddmTemplateKey="161002"
118 groupId=assetObject.getGroupId() />
119 </#if>
120 </li>
121 </#list>
122 </ul>
123 <div class="centered small-padding-bottom loadMoreBtn" style="display:none;">
124 <a href="javascript:void(0);" class="button lm-button-white" style="width: 100%">${masEnlaces}</a>
125 </div>
126 </div>
127</#if>
128<script>
129document.addEventListener('DOMContentLoaded', function() {
130 let maxEntriesToShow = 5;
131 let currentCategory = '';
132 const entries = document.querySelectorAll('.entry');
133 const loadMoreButton = document.querySelector('.loadMoreBtn');
134 const titleElement = document.querySelector('.title-form-enlace');
135 const categorySelect = document.getElementById('categorySelect');
136
137 // Función para filtrar y mostrar las entradas según la categoría seleccionada
138 function filterEntriesByCategory() {
139 const selectedCategory = categorySelect.value.toLowerCase();
140 currentCategory = selectedCategory;
141 let matchingEntries = [];
142
143 // Ocultar todas las entradas inicialmente
144 entries.forEach(entry => entry.style.display = 'none');
145
146 // Filtrar las entradas que coinciden con la categoría seleccionada
147 entries.forEach(entry => {
148 const entryCategories = entry.getAttribute('data-categories').split(',');
149 if (entryCategories.some(category => category.toLowerCase() === selectedCategory)) {
150 matchingEntries.push(entry);
151 }
152 });
153
154 // Mostrar solo las primeras 5 entradas de la categoría seleccionada
155 matchingEntries.slice(0, maxEntriesToShow).forEach(entry => entry.style.display = 'block');
156
157 // Actualizar el título con el conteo de entradas visibles
158 titleElement.innerText = '${enlaces} (' + Math.min(maxEntriesToShow, matchingEntries.length) + ' ${de} ' + matchingEntries.length + ')';
159
160 // Mostrar u ocultar el título
161 titleElement.style.display = matchingEntries.length > 0 ? 'block' : 'none';
162
163 // Mostrar u ocultar el botón "Ver más"
164 loadMoreButton.style.display = matchingEntries.length > maxEntriesToShow ? 'block' : 'none';
165 }
166
167 // Evento para cargar más entradas al hacer clic en "Ver más"
168 loadMoreButton.addEventListener('click', function() {
169 const matchingEntries = Array.from(entries).filter(entry => {
170 const entryCategories = entry.getAttribute('data-categories').split(',');
171 return entryCategories.some(category => category.toLowerCase() === currentCategory);
172 });
173
174 // Mostrar las siguientes 5 entradas de la categoría seleccionada
175 const newEntriesToShow = maxEntriesToShow + 5;
176 matchingEntries.slice(maxEntriesToShow, newEntriesToShow).forEach(entry => entry.style.display = 'block');
177
178 // Actualizar el conteo
179 maxEntriesToShow = newEntriesToShow;
180 titleElement.innerText = '${enlaces} (' + Math.min(maxEntriesToShow, matchingEntries.length) + ' ${de} ' + matchingEntries.length + ')';
181
182 // Ocultar el botón si ya se han mostrado todas las entradas
183 if (maxEntriesToShow >= matchingEntries.length) {
184 loadMoreButton.style.display = 'none';
185 }
186 });
187
188 // Inicializar el filtro cuando cambia la selección del select
189 categorySelect.addEventListener('change', function() {
190 maxEntriesToShow = 5;
191 filterEntriesByCategory();
192 });
193
194 // Inicializar el filtro al cargar la página
195 filterEntriesByCategory();
196});
197</script>
