1<#assign 

2    images_path = "/documents/d/guest/" 

3    namespace = "com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_" + stringUtil.randomId() 

4    newsTopicVocabularyId = restClient.get("/headless-admin-taxonomy/v1.0/sites/" + groupId + "/taxonomy-vocabularies?filter=name eq 'News topics' or name eq 'Temas de notícias'&fields=id&restricFields=actions,availableLanguages&page=1&pageSize=1").items[0].id 

5/> 

6 

7<#function getDisplayPageUrl asset> 

8    <#local 

9        assetRenderer = asset.getAssetRenderer() 

10        baseViewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, assetRenderer, asset, !stringUtil.equals(assetLinkBehavior, "showFullContent"))?split("?")?first?split("/-/")?first 

11    /> 

12    <#return baseViewURL?replace(themeDisplay.getURLPortal(), "")/> 

13</#function> 

14 

15<#function getCategoryFilterEndpoint asset> 

16    <#local 

17        newsTopicCategory = asset.getCategories()?filter(category -> category.getVocabularyId() == newsTopicVocabularyId)?first 

18        newsTopicCategoryId = newsTopicCategory.getCategoryId() 

19    /> 

20    <#return  "/-/categories/" + newsTopicCategoryId /> 

21</#function> 

22 

23<#function getDDMFormFieldsValue DDMFormFieldsReferencesMap DDMFormFieldValuesMap fieldReference> 

24    <#local field = DDMFormFieldsReferencesMap[fieldReference].name /> 

25    <#return DDMFormFieldValuesMap[field][0].getValue().getString(locale)!"" /> 

26</#function> 

27 

28<#function getCustomDisplayPageDataAttr customDisplayPageJson categoryFilterEndpoint> 

29    <#local 

30        groupId = customDisplayPageJson.getLong("groupId") 

31        uuid = customDisplayPageJson.getString("id") 

32        privateLayout = customDisplayPageJson.getBoolean("privateLayout") 

33    /> 

34    <#local customDisplayPageDataAttr> 

35        data-vale-custom-display-page='{"groupId":${groupId},"uuid":"${uuid}","privateLayout":${privateLayout?c}}' 

36        data-vale-category-endpoint=${categoryFilterEndpoint} 

37    </#local> 

38    <#return customDisplayPageDataAttr/> 

39</#function> 

40 

41<section class="vale-widget-noticias-relacionadas bg-verde-vale" id="vale-widget-noticias-relacionadas-${namespace}"> 

42    <div class="fragment-container overflow-hidden"> 

43        <div class="container"> 

44            <div class="titulo d-flex justify-content-between mt-7 mb-5"> 

45                <h2 class="text-amarelo-vale"> 

46			            <@liferay.language key="related-news" /> 

47                </h2> 

48                <div class="d-none d-md-flex align-self-center justify-content-end"> 

49                    <img 

50                        class="${namespace} carrossel-card-branco-categoria-button-prev btn btn-primary border-amarelo-vale bg-amarelo-vale mr-3 p-1 rounded-circle" 

51                        src="${images_path}seta-2-esq_bra" 

52                        alt="button-prev" 

53												loading="lazy" 

54                    /> 

55                    <img 

56                        class="${namespace} carrossel-card-branco-categoria-button-next btn btn-primary border-amarelo-vale bg-amarelo-vale p-1 rounded-circle" 

57                        src="${images_path}seta-2-dir_bra" 

58                        alt="button-next" 

59												loading="lazy" 

60                    /> 

61                </div> 

62            </div> 

63            <div class="swiper ${namespace} carrossel-card-branco-categoria"> 

64                <div class="swiper-wrapper mb-sm-6"> 

65                    <#if entries?has_content> 

66                        <#list entries as curEntry> 

67                            <#assign 

68                                assetRenderer = curEntry.getAssetRenderer() 

69                                article = assetRenderer.getArticle() 

70 

71                                categoryFilterEndpoint = getCategoryFilterEndpoint(curEntry) 

72 

73                                DDMFormFieldValuesMap = assetRenderer.getDDMFormValuesReader().getDDMFormValues().getDDMFormFieldValuesMap() 

74                                DDMFormFieldsReferencesMap = assetRenderer.article.DDMStructure.DDMForm.getDDMFormFieldsReferencesMap(true) 

75 

76                                customDisplayPageJsonString = getDDMFormFieldsValue(DDMFormFieldsReferencesMap, DDMFormFieldValuesMap, "customDisplayPage") 

77                                customDisplayPageJson = jsonFactoryUtil.createJSONObject(customDisplayPageJsonString) 

78 

79                                hasCustomDisplayPage = customDisplayPageJson.getString("groupId")?has_content 

80                                customDisplayPageDataAttr = hasCustomDisplayPage?then( 

81                                    getCustomDisplayPageDataAttr(customDisplayPageJson, categoryFilterEndpoint), "") 

82 

83                                displayPageUrl = getDisplayPageUrl(curEntry) + categoryFilterEndpoint 

84                            /> 

85                            <div class="swiper-slide"> 

86                            <a href="${displayPageUrl}" class="text-decoration-none" ${customDisplayPageDataAttr}> 

87                                <div class="box d-flex flex-column justify-content-between p-3"> 

88                                    <div> 

89                                        <p class="text-amarelo-vale mb-2"> 

90                                            <#assign categories = curEntry.getCategories() /> 

91                                            <#list categories as category> 

92                                                <#if category.vocabularyId == newsTopicVocabularyId> 

93                                                    ${category.name} 

94                                                    <#break> 

95                                                </#if> 

96                                            </#list> 

97                                        </p> 

98                                        <p class="text-verde-aqua"> 

99                                            ${curEntry.getTitle(locale)} 

100                                        </p> 

101                                    </div> 

102                                    <p class="text-cinza-escuro m-0"> 

103                                        <#assign dataField = DDMFormFieldsReferencesMap['data'].name /> 

104                                        <#assign data = DDMFormFieldValuesMap[dataField][0].getValue().getString(locale) /> 

105                                        <#assign date_localized = dateUtil.formatDate("yyyy-MM-dd", data, locale)/> 

106 

107                                        ${date_localized} 

108                                    </p> 

109                                    <img 

110                                        class="onda position-absolute" 

111                                        src="${images_path}onda_verde" 

112																				loading="lazy" 

113                                    /> 

114                                </div> 

115                            </a> 

116                            </div> 

117                        </#list> 

118                    </#if> 

119                </div> 

120            </div> 

121            <a  

122                class="bg-amarelo-vale border-amarelo-vale btn btn-nm btn-primary mb-6"  

123                href="${(locale == 'pt_BR')?then('/todas-as-noticias','/all-then-news')}"  

124                target="_blank" 

125            > 

126                <@liferay.language key="access-all-news" /> 

127            </a> 

128        </div> 

129    </div> 

130</section> 

131 

132<style> 

133.vale-widget-noticias-relacionadas .onda { 

134    position: absolute; 

135    bottom: 1.875rem; 

136    right: -0.125rem; 

137} 

138 

139.vale-widget-noticias-relacionadas .box { 

140    background-color: var(--branco); 

141    border-left: 10px solid var(--amarelo-vale); 

142    height: 14.6875rem; 

143    margin-bottom: 2rem; 

144} 

145 

146.vale-widget-noticias-relacionadas p { 

147    display: -webkit-box;  

148    line-clamp: 4; 

149    overflow: hidden; 

150    -webkit-line-clamp: 4; 

151    -webkit-box-orient: vertical; 

152} 

153 

154@media screen and (min-width: 768px) { 

155    .vale-widget-noticias-relacionadas .box { 

156        border-left: 20px solid var(--amarelo-vale); 

157        height: 11.875rem; 

158    } 

159 

160    .vale-widget-noticias-relacionadas p { 

161        line-clamp: 3; 

162        -webkit-line-clamp: 3; 

163    } 

164} 

165 

166.vale-widget-noticias-relacionadas .container { 

167    overflow: visible; 

168} 

169 

170.vale-widget-noticias-relacionadas .swiper { 

171    overflow: visible; 

172} 

173 

174.vale-widget-noticias-relacionadas .swiper-slide { 

175    width: auto; 

176} 

177 

178</style> 

179 

180<script> 

181(function(){ 

182 

183var swiper = new Swiper(".${namespace}.carrossel-card-branco-categoria", { 

184    slidesPerView: 1, 

185    spaceBetween: 32, 

186    navigation: { 

187      nextEl: ".${namespace}.carrossel-card-branco-categoria-button-next", 

188      prevEl: ".${namespace}.carrossel-card-branco-categoria-button-prev", 

189      disabledClass: "disabled", 

190      navigationDisabledClass: "disabled", 

191    }, 

192    pagination: { 

193      clickable: true, 

194    }, 

195    slideClass: "swiper-slide", 

196    breakpoints: { 

197        768: { 

198            slidesPerView: 2, 

199        }, 

200        1024: { 

201            slidesPerView: 3, 

202        }, 

203    }, 

204}); 

205 

206  // Tagueamento 

207 

208    const namespace = document.querySelector("#vale-widget-noticias-relacionadas-${namespace}"); 

209 

210    const section = namespace.querySelector("h2").innerText; 

211 

212    const links =  namespace.querySelectorAll("a"); 

213 

214    const handleEventLinkClick = (title, href) => { 

215      Analytics.track("Link", { 

216          section: section, 

217          rotulo: title + " : " + href, 

218      }); 

219    }; 

220 

221    links.forEach(link => { 

222      const text = link.querySelector('p.text-verde-vale'); 

223      const title = text ? text.innerText : ''; 

224      link.addEventListener("click", () => handleEventLinkClick(title, link.href)) 

225    }) 

226 

227    // Configurar URL de página de exibição dinâmica 

228    const displayPageUrls = namespace.querySelectorAll('a[data-vale-custom-display-page]'); 

229    displayPageUrls.forEach(displayPageUrl => { 

230        const customDisplayPage = displayPageUrl.dataset["valeCustomDisplayPage"]; 

231        const categoryEndpoint = displayPageUrl.dataset["valeCategoryEndpoint"]; 

232        Liferay.Service( 

233            '/layout/get-layout-by-uuid-and-group-id', 

234            JSON.parse(customDisplayPage), 

235            layout => { 

236                const friendlyURL = layout["friendlyURL"]; 

237                if (friendlyURL) { 

238                    displayPageUrl.href = friendlyURL + categoryEndpoint; 

239                } 

240            } 

241        ); 

242    }) 

243})() 

244 

245</script>