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> 

77document.addEventListener('DOMContentLoaded', function () { 

78 

79    let general = 0; 

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    const fila1 = container.querySelectorAll('.fila1'); 

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

97 

98    const veureMes = 

99        "${veureMesText?js_string}"; 

100    const veureMenys = 

101        "${veureMenysText?js_string}"; 

102 

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

104 

105        if (general === 0) { 

106 

107            fila1.forEach(function (element) { 

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

109            }); 

110 

111            general++; 

112 

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

114 

115            fila2.forEach(function (element) { 

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

117            }); 

118 

119            general++; 

120 

121            button.textContent = veureMenys; 

122 

123        } else { 

124 

125            fila1.forEach(function (element) { 

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

127            }); 

128 

129            fila2.forEach(function (element) { 

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

131            }); 

132 

133            general = 0; 

134 

135            button.textContent = veureMes; 

136        } 

137 

138    }); 

139 

140}); 

141</script> 

142<style> 

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

144	 

145    .botonMesDestacats{ 

146        display: block; 

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

148        border: 1px solid #811424; 

149        background: #fff; 

150        color: #811424; 

151        padding: 10px; 

152        font-size: 18px; 

153        margin-bottom: 15px; 

154    } 

155    .botonMesDestacats:focus{ 

156        background: #fff; 

157        color: #811424; 

158    } 

159    .botonMesDestacats:hover{ 

160        background: #811424; 

161        color: #fff; 

162        text-decoration: none; 

163    } 

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

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

166    } 

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

168	.destacatsSup	.line-clamp-3{ 

169		display: -webkit-box; 

170    -webkit-line-clamp: 3; 

171    -webkit-box-orient: vertical; 

172    overflow: hidden; 

173		} 

174	.btn-temporal{ 

175		background: #811424 !important; 

176    color: #fff !important; 

177    text-decoration: none !important; 

178		display: block !important; 

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

180    border: 1px solid #811424 !important; 

181    padding: 10px; 

182    font-size: 18px; 

183	}</style>