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.result-info-formacio {
17 column-gap: 20px;
18 display: flex;
19 flex: 100%;
20}
21
22.load-more-btn {
23 background-color: #CC5D27;
24 color: #fff;
25 padding: 10px 20px;
26 border-radius: 5px;
27 text-decoration: none;
28 display: inline-block;
29 margin-top: 20px;
30}
31</style>
32
33<#if entries?has_content>
34<#assign idioma = themeDisplay.getLocale().language />
35<#assign enlaces = "Enllaços" />
36<#assign masEnlaces = "Veure més enllaços" />
37<#assign de = "de" />
38<#if idioma == "es">
39 <#assign enlaces = "Enlaces" />
40 <#assign masEnlaces = "Ver más enlaces" />
41<#elseif idioma == "en">
42 <#assign enlaces = "Links" />
43 <#assign masEnlaces = "See more links" />
44 <#assign de = "of" />
45</#if>
46 <#assign entriesSize=entries?size>
47 <div class="wrapper medium">
48 <!-- Mostrar el título con el conteo de las entradas -->
49 <h3 class="title-form-enlace">${enlaces} (0 de ${entriesSize})</h3>
50 <ul id="entries-list">
51 <#list entries as curEntry>
52 <#assign assetRenderer=curEntry.getAssetRenderer() />
53 <#assign assetObject=assetRenderer.getAssetObject() />
54 <#assign conditionalStyle="display:block;" />
55 <#if (curEntry?counter>= 5)>
56 <#assign conditionalStyle="display:none;" />
57 </#if>
58 <li class="my-4 entry" style="${conditionalStyle}">
59 <!-- Render the article only if the article ID is present -->
60 <#if assetObject.getArticleId()??>
61 <@liferay_journal["journal-article"]
62 articleId=assetObject.getArticleId()
63 ddmTemplateKey="161002"
64 groupId=assetObject.getGroupId() />
65 </#if>
66 </li>
67 </#list>
68 </ul>
69 <div class="centered small-padding-bottom loadMoreBtn">
70 <a href="javascript:void(0);" class="button lm-button-white" style="width: 100%">${masEnlaces}</a>
71 </div>
72 </div>
73</#if>
74<script>
75document.addEventListener('DOMContentLoaded', function() {
76 let maxEntriesToShow = 5;
77 const entries = document.querySelectorAll('.entry');
78 const loadMoreButton = document.querySelector('.loadMoreBtn');
79 const titleElement = document.querySelector('.title-form-enlace');
80 // Mostrar las primeras 5 entradas
81 entries.forEach(function(entry, index) {
82 if (index < maxEntriesToShow) {
83 entry.style.display = 'block';
84 }
85 });
86 // Actualizar el título inicialmente con el total de entradas
87 titleElement.innerText = '${enlaces} (' + Math.min(maxEntriesToShow, entries.length) + ' ${de} ' + entries.length + ')';
88 // Manejar el clic en el botón "Cargar más"
89 if (loadMoreButton) {
90 loadMoreButton.addEventListener('click', function() {
91 let newEntriesToShow = maxEntriesToShow + 5;
92 let displayedCount = 0;
93 entries.forEach(function(entry, index) {
94 if (index < newEntriesToShow) {
95 entry.style.display = 'block';
96 displayedCount++;
97 }
98 });
99 // Actualizar el contador del título
100 maxEntriesToShow = Math.min(newEntriesToShow, entries.length);
101 titleElement.innerText = '${enlaces} (' + Math.min(maxEntriesToShow, entries.length) + ' ${de} ' + entries.length + ')';
102 // Ocultar el botón si ya se han mostrado todas las entradas
103 if (displayedCount >= entries.length) {
104 loadMoreButton.style.display = 'none';
105 }
106 });
107 } else {
108 console.error('No se encontró el botón "Cargar más"');
109 }
110});
111</script>
