1<#assign 

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

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

4/> 

5 

6<#attempt> 

7	<#assign newsTopicVocabularyId = 64872 /> 

8<#recover> 

9	<#assign newsTopicVocabularyId = 0 /> 

10</#attempt> 

11 

12<#function getDisplayPageUrl asset> 

13    <#local 

14        assetRenderer = asset.getAssetRenderer() 

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

16    /> 

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

18</#function> 

19 

20<#function getCategoryFilterEndpoint asset> 

21	  <#attempt> 

22   <!-- <#local 

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

24        newsTopicCategoryId = newsTopicCategory.getCategoryId() 

25    /> --> 

26			<#local 

27    newsTopicCategory = asset.getCategories()?filter(category -> category.getVocabularyId() == newsTopicVocabularyId)?first!null 

28    newsTopicCategoryId = newsTopicCategory?has_content ? newsTopicCategory.getCategoryId() : null 

29    /> 

30		<#recover> 

31			<#assign newsTopicCategoryId = 0 /> 

32		</#attempt> 

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

34</#function> 

35 

36<#function getDDMFormFieldsValue DDMFormFieldsReferencesMap DDMFormFieldValuesMap fieldReference> 

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

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

39</#function> 

40 

41<#function getCustomDisplayPageDataAttr customDisplayPageJson categoryFilterEndpoint> 

42    <#local 

43        groupId = customDisplayPageJson.getLong("groupId") 

44        uuid = customDisplayPageJson.getString("id") 

45        privateLayout = customDisplayPageJson.getBoolean("privateLayout") 

46    /> 

47    <#local customDisplayPageDataAttr> 

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

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

50    </#local> 

51    <#return customDisplayPageDataAttr/> 

52</#function> 

53 

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

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

56        <div class="container"> 

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

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

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

60                </h2> 

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

62                    <img 

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

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

65                        alt="button-prev" 

66												loading="lazy" 

67                    /> 

68                    <img 

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

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

71                        alt="button-next" 

72												loading="lazy" 

73                    /> 

74                </div> 

75            </div> 

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

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

78                    <#if entries?has_content> 

79                        <#list entries as curEntry> 

80                            <#assign 

81                                assetRenderer = curEntry.getAssetRenderer() 

82                                article = assetRenderer.getArticle() 

83 

84                                categoryFilterEndpoint = getCategoryFilterEndpoint(curEntry) 

85 

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

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

88 

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

90                                customDisplayPageJson = jsonFactoryUtil.createJSONObject(customDisplayPageJsonString) 

91 

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

93                                customDisplayPageDataAttr = hasCustomDisplayPage?then( 

94                                    getCustomDisplayPageDataAttr(customDisplayPageJson, categoryFilterEndpoint), "") 

95 

96                                displayPageUrl = getDisplayPageUrl(curEntry) + categoryFilterEndpoint 

97                            /> 

98                            <div class="swiper-slide"> 

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

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

101                                    <div> 

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

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

104                                            <#list categories as category> 

105                                                <#if category.vocabularyId == newsTopicVocabularyId> 

106                                                    ${category.name} 

107                                                    <#break> 

108                                                </#if> 

109                                            </#list> 

110                                        </p> 

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

112                                            ${curEntry.getTitle(locale)} 

113                                        </p> 

114                                    </div> 

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

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

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

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

119 

120                                        ${date_localized} 

121                                    </p> 

122                                    <img 

123                                        class="onda position-absolute" 

124                                        src="${images_path}onda_verde" 

125																				loading="lazy" 

126                                    /> 

127                                </div> 

128                            </a> 

129                            </div> 

130                        </#list> 

131                    </#if> 

132                </div> 

133            </div> 

134            <a  

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

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

137                target="_blank" 

138            > 

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

140            </a> 

141        </div> 

142    </div> 

143</section> 

144 

145<style> 

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

147    position: absolute; 

148    bottom: 1.875rem; 

149    right: -0.125rem; 

150} 

151 

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

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

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

155    height: 14.6875rem; 

156    margin-bottom: 2rem; 

157} 

158 

159.vale-widget-noticias-relacionadas p { 

160    display: -webkit-box;  

161    line-clamp: 4; 

162    overflow: hidden; 

163    -webkit-line-clamp: 4; 

164    -webkit-box-orient: vertical; 

165} 

166 

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

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

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

170        height: 11.875rem; 

171    } 

172 

173    .vale-widget-noticias-relacionadas p { 

174        line-clamp: 3; 

175        -webkit-line-clamp: 3; 

176    } 

177} 

178 

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

180    overflow: visible; 

181} 

182 

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

184    overflow: visible; 

185} 

186 

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

188    width: auto; 

189} 

190 

191</style> 

192 

193<script> 

194(function(){ 

195 

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

197    slidesPerView: 1, 

198    spaceBetween: 32, 

199    navigation: { 

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

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

202      disabledClass: "disabled", 

203      navigationDisabledClass: "disabled", 

204    }, 

205    pagination: { 

206      clickable: true, 

207    }, 

208    slideClass: "swiper-slide", 

209    breakpoints: { 

210        768: { 

211            slidesPerView: 2, 

212        }, 

213        1024: { 

214            slidesPerView: 3, 

215        }, 

216    }, 

217}); 

218 

219  // Tagueamento 

220 

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

222 

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

224 

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

226 

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

228      Analytics.track("Link", { 

229          section: section, 

230          rotulo: title + " : " + href, 

231      }); 

232    }; 

233 

234    links.forEach(link => { 

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

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

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

238    }) 

239 

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

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

242    displayPageUrls.forEach(displayPageUrl => { 

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

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

245        Liferay.Service( 

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

247            JSON.parse(customDisplayPage), 

248            layout => { 

249                const friendlyURL = layout["friendlyURL"]; 

250                if (friendlyURL) { 

251                    displayPageUrl.href = friendlyURL + categoryEndpoint; 

252                } 

253            } 

254        ); 

255    }) 

256})() 

257 

258</script>