1<#assign DlAppServiceUtil = staticUtil["com.liferay.document.library.kernel.service.DLAppServiceUtil"]/> 

2<#assign JSONFactoryUtil = staticUtil["com.liferay.portal.kernel.json.JSONFactoryUtil"]/> 

3<#assign DLFileEntryLocalServiceUtil = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"]/> 

4<#assign DlAppServiceUtil = staticUtil["com.liferay.document.library.kernel.service.DLAppServiceUtil"] /> 

5<#assign portletId = themeDisplay.getPortletDisplay().getId() /> 

6<#assign cont=0> 

7<#assign veureMesText = languageUtil.get(locale, "publisher.veuremes")> 

8<#assign veureMenysText = languageUtil.get(locale, "publisher.veuremenys")> 

9 

10<div class="destacatsSup container radius-container py-4 ${themeDisplay.portletDisplay.id}"> 

11	<div class="row"> 

12        <#list entries as curEntry> 

13            <#assign display=""> 

14            <#assign fila1=""> 

15            <#assign fila2=""> 

16            <#assign assetRenderer=curEntry.getAssetRenderer()/> 

17            <#assign journalArticle=assetRenderer.getAssetObject()/> 

18            <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale))> 

19            <#assign rootElement = document.getRootElement()>  

20            <#assign title=saxReaderUtil.createXPath("dynamic-element[@field-reference='title']/dynamic-content").selectSingleNode(rootElement).getStringValue()> 

21            <#assign url=saxReaderUtil.createXPath("dynamic-element[@field-reference='url']/dynamic-content").selectSingleNode(rootElement).getStringValue()> 

22            <#assign description=saxReaderUtil.createXPath("dynamic-element[@field-reference='description']/dynamic-content").selectSingleNode(rootElement).getStringValue()> 

23            <#assign highlightedType=saxReaderUtil.createXPath("dynamic-element[@field-reference='highlightedType']/dynamic-content").selectSingleNode(rootElement).getStringValue()> 

24            <#if url=""> 

25                <#assign url="/noticies/-/contingut/${groupId}/${journalArticle.getUrlTitle(locale)}"> 

26            </#if> 

27            <#assign imgSrc=""> 

28            <#assign imageFieldSet=saxReaderUtil.createXPath("dynamic-element[@field-reference='imageFieldSet']").selectSingleNode(rootElement)> 

29 

30            <#assign imageFieldSetNode = rootElement.selectSingleNode("dynamic-element[@field-reference='imageFieldSet']")> 

31            <#if imageFieldSetNode??> 

32            	<#assign imageNode = imageFieldSetNode.selectSingleNode("dynamic-element[@field-reference='image']")> 

33            	<#assign urlExternaNode = imageFieldSetNode.selectSingleNode("dynamic-element[@field-reference='urlExterna']")> 

34            	 

35            	<#if imageNode?? && validator.isNotNull(imageNode.getStringValue())> 

36            		<#assign imatgeJson=JSONFactoryUtil.createJSONObject(imageNode.getStringValue())> 

37            	</#if> 

38            	<#if urlExternaNode?? && validator.isNotNull(urlExternaNode.getStringValue())> 

39            		<#assign imgSrc=urlExternaNode.getStringValue()> 

40            	</#if> 

41            </#if> 

42            	 

43            <#if cont gte 8> 

44                <#assign display="d-none"> 

45            </#if> 

46            <#if cont gte 8 && cont lt 12> 

47                <#assign fila1="fila1"> 

48            </#if> 

49            <#if cont gte 12> 

50                <#assign fila2="fila2"> 

51            </#if> 

52            <div class="col-xl-3 col-md-6 col-12 mb-4 ${display} ${fila1} ${fila2}" > 

53                <div class="d-flex flex-column"> 

54                    <div class="imatge mb-2"> 

55                        <#if imgSrc!=""> 

56                            <img class="w-100 h-100" loading="lazy" src="${imgSrc}" alt="Portada ${title}"> 

57                        </#if> 

58                        <#if imatgeJson.has("uuid") && imatgeJson.has("groupId")> 

59                            <#assign imagenDlFile = DLFileEntryLocalServiceUtil.getDLFileEntryByUuidAndGroupId(imatgeJson.getString("uuid")?string,imatgeJson.getLong("groupId")?number)>                     

60                            <@adaptive_media_image["img"]  class="w-100 h-100" fileVersion=DlAppServiceUtil.getFileEntry(imagenDlFile.fileEntryId?number).getFileVersion()/> 

61                        </#if> 

62                    </div> 

63                    <a class="font-weight-bold font-18 mb-1" href="${url}">${title}</a> 

64                    <p class="line-clamp-3 mb-0"> 

65                        ${description} 

66                    </p> 

67                </div> 

68            </div> 

69            <#assign cont++> 

70		</#list> 

71	</div> 

72    <div class="mt-3 d-flex justify-content-end"> 

73        <button type="button" class="botonMesDestacats w-auto"><@liferay.language key="publisher.veuremes" /></button> 

74    </div>	 

75</div> 

76<script> 

77/* SPA FIX: DOMContentLoaded no dispara al navegar per Senna; usar readyState + Liferay.on('endNavigate') + guard per no duplicar handlers */ 

78(function () { 

79    function initVeureMes() { 

80 

81        const container = document.querySelector( 

82            '.destacatsSup.${themeDisplay.portletDisplay.id}' 

83        ); 

84 

85        if (!container) { 

86            return; 

87        } 

88 

89        const button = container.querySelector('.botonMesDestacats'); 

90 

91        if (!button) { 

92            return; 

93        } 

94 

95        if (button.dataset.veuremesBound === '1') { 

96            return; 

97        } 

98        button.dataset.veuremesBound = '1'; 

99 

100        let general = 0; 

101 

102        const fila1 = container.querySelectorAll('.fila1'); 

103        const fila2 = container.querySelectorAll('.fila2'); 

104 

105        const veureMes = 

106            "${veureMesText?js_string}"; 

107        const veureMenys = 

108            "${veureMenysText?js_string}"; 

109 

110        button.addEventListener('click', function () { 

111 

112            if (general === 0) { 

113 

114                fila1.forEach(function (element) { 

115                    element.classList.remove('d-none'); 

116                }); 

117 

118                general++; 

119 

120            } else if (general === 1) { 

121 

122                fila2.forEach(function (element) { 

123                    element.classList.remove('d-none'); 

124                }); 

125 

126                general++; 

127 

128                button.textContent = veureMenys; 

129 

130            } else { 

131 

132                fila1.forEach(function (element) { 

133                    element.classList.add('d-none'); 

134                }); 

135 

136                fila2.forEach(function (element) { 

137                    element.classList.add('d-none'); 

138                }); 

139 

140                general = 0; 

141 

142                button.textContent = veureMes; 

143            } 

144 

145        }); 

146    } 

147 

148    if (document.readyState === 'loading') { 

149        document.addEventListener('DOMContentLoaded', initVeureMes); 

150    } else { 

151        initVeureMes(); 

152    } 

153    if (window.Liferay && typeof Liferay.on === 'function') { 

154        Liferay.on('endNavigate', initVeureMes); 

155    } 

156})(); 

157</script> 

158<style> 

159		#portlet_${portletId} .portlet-content {padding-top: 10px; border-radius:8px;} 

160	 

161    .botonMesDestacats{ 

162        display: block; 

163        font-family: "Lato", sans-serif; 

164        border: 1px solid #811424; 

165        background: #fff; 

166        color: #811424; 

167        padding: 10px; 

168        font-size: 18px; 

169        margin-bottom: 15px; 

170    } 

171    .botonMesDestacats:focus{ 

172        background: #fff; 

173        color: #811424; 

174    } 

175    .botonMesDestacats:hover{ 

176        background: #811424; 

177        color: #fff; 

178        text-decoration: none; 

179    } 

180    @media (min-width: 575.99px) { 

181        .destacatsSup .imatge{height:155px;} 

182    } 

183    .destacatsSup .font-18{font-size:18px;} 

184	.destacatsSup	.line-clamp-3{ 

185		display: -webkit-box; 

186    -webkit-line-clamp: 3; 

187    -webkit-box-orient: vertical; 

188    overflow: hidden; 

189		} 

190	.btn-temporal{ 

191		background: #811424 !important; 

192    color: #fff !important; 

193    text-decoration: none !important; 

194		display: block !important; 

195    font-family: 'Lato',sans-serif !important; 

196    border: 1px solid #811424 !important; 

197    padding: 10px; 

198    font-size: 18px; 

199	}</style>