Liderança na transição energética justa
7 min
Java method "com.liferay.journal.model.impl.JournalArticleImpl.getDocument()" threw an exception when invoked on com.liferay.journal.model.impl.JournalArticleImpl object "{\"mvccVersion\": 1, \"ctCollectionId\": 0, \"uuid\": \"70f8bf5d-19a0-c76f-fdb6-4242d409f18f\", \"id\": 13058513, \"resourcePrimKey\": 11520177, \"groupId\": 10675998, \"companyId\": 20099, \"userId\": 1540536, \"userName\": \"Viviane Davico\", \"createDate\": \"Fri Dec 15 18:05:24 GMT 2023\", \"modifiedDate\": \"Wed Feb 07 17:13:48 GMT 2024\", \"externalReferenceCode\": \"192a0b7c-e12c-8da4-3647-a3d1a72fe365\", \"folderId\": 10700483, \"classNameId\": 0, \"classPK\": 0, \"treePath\": \"/11264939/10700483/\", \"articleId\": \"11520175\", \"version\": 2.6, \"urlTitle\": \"nossas-atividades/nossa-jornada-comeca-na-bahia-vem-conferir-mochileiras\", \"DDMStructureId\": 10700214, \"DDMTemplateKey\": \"\", \"defaultLanguageId\": \"pt_BR\", \"layoutUuid\": \"\", \"displayDate\": \"Fri Dec 15 18:04:00 GMT 2023\", \"expirationDate\": null, \"reviewDate\": null, \"indexable\": true, \"smallImage\": false, \"smallImageId\": 0, \"smallImageSource\": 1, \"smallImageURL\": \"\", \"lastPublishDate\": null, \"status\": 0, \"statusByUserId\": 1433956, \"statusByUserName\": \"Publicador PetroSoft\", \"statusDate\": \"Wed Feb 07 17:13:48 GMT 2024\"}"; see cause exception in the Java stack trace. ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign xmlArticle = journalArticle.g... [in template "20099#20135#11569884" in function "getDataForCard" at line 81, column 9] ----
1<#-- Conteúdo Web -> Templates: Funções gerais -->
2<#include "${templatesPath}/1975398" />
3
4
5<#-- Liferay Services -->
6<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
7<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
8<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
9<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
10<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
11
12<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
13<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
14<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies)/>
15
16<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
17<#assign contentNumber = randomNumber(4586) />
18<#assign rootCss = "card-news-list-container_" + randomNumber(4586) />
19
20<#attempt>
21 <#assign ourEnergyStyles = [] />
22 <#list ourEnergyVocabulary.getCategories() as ourEnergyCategory >
23 <#assign shadowColorCategory = "" />
24 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra")??)>
25 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra") />
26 <#assign shadowColorCategory = categoryShadowColorByService.value />
27 </#if>
28
29 <#assign backgroundColorCategory = "" />
30 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo")??)>
31 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo") />
32 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
33 </#if>
34
35 <#assign textColorCategory = "" />
36 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto")??)>
37 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto") />
38 <#assign textColorCategory = categoryTextColorByService.value />
39 </#if>
40
41 <#assign textColorHighContrastCategory = "" />
42 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
43 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste") />
44 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
45 </#if>
46
47 <#assign ourEnergyStyles += [{"titleLocale": ourEnergyCategory.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
48 </#list>
49
50 <#recover>
51 <#assign ourEnergyStyles = [] />
52
53</#attempt>
54
55<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
56<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
57 <#attempt>
58 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
59
60 <#list categories as category>
61 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
62 <#return category.getTitle(locale)>
63 </#if>
64 </#list>
65
66 <#return "">
67
68 <#recover>
69 <#return "" />
70
71 </#attempt>
72</#function>
73
74
75<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
76<#function getDataForCard entry >
77
78 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
79 <#assign ddmStructure = journalArticle.getDDMStructure() />
80 <#assign fieldList = getFieldListByStructure(ddmStructure) />
81 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
82
83 <#-- Tentando pegar Imagem -->
84 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
85 <#assign media = "" />
86 <#list mediasGroup as mediaGroup >
87 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
88
89 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
90
91 <#assign urlAdaptativeMedia = ""/>
92 <#if media.url?? && media.url?has_content && fileDataRequest?? && fileDataRequest.adaptedImages?? >
93 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
94 <#list dataAdaptativeMedia as data>
95 <#if data.resolutionName == "Preview-1000x0">
96 <#assign urlAdaptativeMedia = data.contentUrl/>
97 </#if>
98 </#list>
99 </#if>
100
101 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": urlAdaptativeMedia} />
102
103
104 <#-- Se não tiver imagem, tentar pegar vídeo -->
105 <#if !media.imageSrc?? || !media.imageSrc?has_content>
106 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
107 <#if youtubeID?? && youtubeID?has_content>
108 <#assign media = {"videoYotubeID": youtubeID} />
109 <#else>
110 <#-- Tentar pegar vídeo Interno -->
111 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
112 <#if internalVideo?? && internalVideo?has_content>
113 <#assign media = {"internalVideo": internalVideo} />
114 </#if>
115 </#if>
116 </#if>
117 </#list>
118
119 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
120
121 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
122
123 <#assign ourEnergyCategory = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
124
125 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
126
127 <#if themeDisplay.getPortalURL()?contains("webserver")>
128 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
129 <#else>
130 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
131 </#if>
132
133 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "ourEnergyCategory": ourEnergyCategory, "typeOfNews": typeOfNews, "urlNews": urlNews} />
134
135 <#return cardData>
136
137
138
139 <#-- cardData -> image: url, alt
140 title
141 timeRead
142 ourEnergyCategory
143 typeOfNews
144 urlNews
145 -->
146</#function>
147
148
149<#-- Macro para renderizar os arrows-->
150<#macro renderArrows>
151 <div class="card-news-list-arrows-breakpoint breakpoint">
152 <div class="card-news-list-arrows col-11-12 md-col-7-8 sm-col-1-4">
153 <div class="card-news-arrow-left arrow-disable">
154 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
155 <path d="M1 17C1 8.16344 8.16344 1 17 1C25.8366 1 33 8.16344 33 17C33 25.8366 25.8366 33 17 33C8.16344 33 1 25.8366 1 17Z" stroke="#959595"/>
156 <path d="M22.5 17H11.5M11.5 17L16 12.5M11.5 17L16 21.5" stroke="#525252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
157 </svg>
158 </div>
159 <div class="card-news-arrow-right">
160 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
161 <path d="M1 17C1 8.16344 8.16344 1 17 1C25.8366 1 33 8.16344 33 17C33 25.8366 25.8366 33 17 33C8.16344 33 1 25.8366 1 17Z" stroke="#008542"/>
162 <path d="M11.5 17H22.5M22.5 17L18 12.5M22.5 17L18 21.5" stroke="#008542" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
163 </svg>
164
165 </div>
166 </div>
167 </div>
168
169 <style>
170
171 .${rootCss} .card-news-list-arrows-breakpoint {
172 position: relative;
173 z-index: 1;
174 }
175
176 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows {
177 display: flex;
178 align-items: flex-start;
179 justify-self: flex-end;
180 gap: var(--space-xxs, 8px);
181 }
182
183 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left,
184 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right {
185 cursor: pointer;
186 }
187
188 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(1),
189 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(1) {
190 fill: rgb(0, 133, 66);
191 }
192
193 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(1),
194 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(1) {
195 fill: white;
196 }
197
198 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(2),
199 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(2) {
200 stroke: #fff;
201 }
202
203 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(2),
204 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(2) {
205 stroke: #010101;
206 }
207
208 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable,
209 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable {
210 opacity: 0.4;
211 cursor: auto;
212 }
213
214 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left path,
215 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right path {
216 stroke: rgb(0, 133, 66);
217 transition: all 300ms ease-in-out;
218 }
219
220 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left path,
221 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right path {
222 stroke: rgba(228, 247, 232, 1);
223 }
224
225 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(1),
226 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(1) {
227 stroke: rgb(149, 149, 149);
228 }
229
230 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(1),
231 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(1) {
232 stroke: rgba(215, 215, 215, 1);
233 }
234
235 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(2),
236 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(2) {
237 stroke: rgb(82, 82, 82);
238 }
239
240 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(2),
241 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(2) {
242 stroke: rgba(149, 149, 149, 1);
243 }
244
245 @media screen and (min-width: 1440px) {
246 .${rootCss} .card-news-list-arrows-breakpoint {
247 width: 100%;
248 }
249 }
250
251 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) {
252
253 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows {
254 justify-self: flex-start;
255 margin-top: var(--space-lg);
256 }
257 }
258
259 </style>
260
261</#macro>
262
263
264<#-- Macro para renderizar um Card -->
265<#macro renderCard cardData>
266 <#-- cardData -> image: url, alt, fileEntryId
267 title
268 timeRead
269 ourEnergyCategory
270 typeOfNews
271 urlNews
272 -->
273
274 <div class="card-news-container">
275 <a class="card-link" href="${cardData.urlNews}" style="display: none;" > Notícia: ${cardData.title} </a>
276 <div class="card-news-thumb">
277 <#assign noImage = "" />
278 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
279 <#assign imageSrc = cardData.media.imageSrc />
280 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
281 <#assign imageSrc = cardData.media.urlAdaptativeMedia />
282 </#if>
283 <img class="card-news-image" src="${imageSrc}" alt="${cardData.media.imageAlt}"/>
284 <#else>
285 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
286 <img class="card-news-image" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
287 <#else>
288 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
289 <video class="card-news-image">
290 <source src="${cardData.media.internalVideo.url}">
291 Your browser does not support the video tag.
292 </video>
293 <#else>
294 <#assign noImage = "no-image" />
295 </#if>
296 </#if>
297 <svg class="thumb-play-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
298 <path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white" fill-opacity="0.8"/>
299 <path d="M22.2563 15.5744L13.2625 10.0744C13.1868 10.0277 13.1 10.0021 13.0111 10.0001C12.9221 9.99816 12.8343 10.02 12.7566 10.0633C12.6789 10.1066 12.6141 10.1698 12.569 10.2465C12.5239 10.3232 12.5001 10.4105 12.5 10.4994V21.4994C12.5001 21.5884 12.5239 21.6757 12.569 21.7524C12.6141 21.8291 12.6789 21.8923 12.7566 21.9356C12.8343 21.9789 12.9221 22.0007 13.0111 21.9988C13.1 21.9968 13.1868 21.9712 13.2625 21.9244L22.2563 16.4244C22.3301 16.3808 22.3913 16.3186 22.4338 16.2441C22.4763 16.1696 22.4987 16.0852 22.4987 15.9994C22.4987 15.9137 22.4763 15.8293 22.4338 15.7548C22.3913 15.6803 22.3301 15.6181 22.2563 15.5744Z" fill="#008542"/>
300 </svg>
301 </#if>
302 </div>
303
304 <div class="card-news-category-container ${noImage}">
305 <div data-category="${cardData.ourEnergyCategory}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergyCategory} </div>
306 </div>
307
308 <div class="card-news-text-content ${noImage}">
309 <div class="card-news-title h4"> ${cardData.title} </div>
310
311 <div class="card-news-info">
312 <div class="card-news-type">
313 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
314 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
315 </svg>
316
317 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
318 </div>
319 <#if cardData.timeRead?? && cardData.timeRead?has_content>
320 <div class="card-news-time-read">
321 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
322 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z" fill="#959595"/>
323 </svg>
324
325 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
326 </div>
327 </#if>
328 </div>
329 </div>
330 </div>
331</#macro>
332
333<style>
334 .${rootCss} .card-news-container {
335 width: 300px;
336 height: 370px;
337 display: flex;
338 flex-direction: column;
339 flex-shrink: 0;
340 align-items: flex-start;
341 border-radius: var(--border-radius-lg);
342 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
343 background: var(--background-surface-level-01, #FFF);
344 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
345 overflow: hidden;
346 scroll-snap-align: start;
347 cursor: pointer;
348 transition: border 300ms ease-in-out;
349 text-decoration: none;
350 position: relative;
351 }
352
353 body.high-contrast-active .${rootCss} .card-news-container {
354 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
355 background: var(--background-surface-level-01, #010101);
356 }
357
358 .${rootCss} .card-news-container:hover {
359 border: var(--border-width-hairline) solid rgb(0, 133, 66);
360 }
361
362 body.high-contrast-active .${rootCss} .card-news-container:hover {
363 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
364 }
365
366 .${rootCss} .card-news-container .card-news-link {
367 position: absolute;
368 top: 0;
369 width: 100%;
370 height: 100%;
371 z-index: 1;
372 }
373
374 .${rootCss} .card-news-container .card-news-thumb {
375 position: relative;
376 pointer-events: none;
377 }
378
379 .${rootCss} .card-news-container .card-news-thumb .card-news-image {
380 width: 298px;
381 height: 168px;
382 object-fit: cover;
383 pointer-events: none;
384 }
385
386 .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon {
387 position: absolute;
388 left: 50%;
389 top: 50%;
390 transform: translate(-50%, -50%);
391 pointer-events: none;
392 }
393
394 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(1) {
395 fill: black;
396 }
397
398 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(2) {
399 fill: white;
400 }
401
402 .${rootCss} .card-news-container .card-news-category-container {
403 position: relative;
404 }
405
406 .${rootCss} .card-news-container .card-news-category-container .card-news-category {
407 display: flex;
408 justify-content: center;
409 align-items: center;
410 padding: var(--space-micro) var(--space-xs);
411 position: absolute;
412 z-index: 2;
413 left: var(--space-md);
414 top: -13px;
415 border-radius: var(--border-radius-pill);
416 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), var(--default-sup-green-water, #006B65);
417 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
418 line-height: var(--line-height-lg, 144%);
419 color: var(--default-sup-green-water, #006B65);
420 white-space: nowrap;
421 pointer-events: none;
422 }
423
424 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category {
425 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, #373737) 0%, var(--background-surface-opacity-light-level-07, #373737) 100%), var(--default-sup-green-water, #99E0DD);
426 color: var(--default-sup-green-water, #99E0DD);
427 }
428
429 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category {
430 position: relative;
431 top: 0;
432 left: 0;
433 margin-left: var(--space-md);
434 margin-top: var(--space-md);
435 }
436
437 .${rootCss} .card-news-container .card-news-text-content {
438 display: flex;
439 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
440 flex-direction: column;
441 justify-content: space-between;
442 align-items: flex-start;
443 flex: 1 0 0;
444 align-self: stretch;
445 pointer-events: none;
446 }
447
448 .${rootCss} .card-news-container .card-news-text-content.no-image {
449 padding-top: var(--space-sm);
450 }
451
452 .${rootCss} .card-news-container .card-news-text-content .card-news-title {
453 display: -webkit-box;
454 -webkit-box-orient: vertical;
455 -webkit-line-clamp: 4;
456 align-self: stretch;
457 overflow: hidden;
458 color: var(--text-primary-default, #373737);
459 text-overflow: ellipsis;
460 margin: 0;
461 pointer-events: none;
462 }
463
464 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title {
465 color: var(--text-primary-default, #FFF);
466 }
467
468 .${rootCss} .card-news-container .card-news-text-content .card-news-info {
469 display: flex;
470 align-items: center;
471 align-content: center;
472 gap: var(--space-sm, 16px);
473 align-self: stretch;
474 flex-wrap: wrap;
475 pointer-events: none;
476 }
477
478 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type,
479 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read {
480 display: flex;
481 align-items: center;
482 gap: var(--space-xxs, 8px);
483 }
484
485 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path {
486 stroke: #D7D7D7;
487 }
488
489 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
490 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
491 color: var(--text-tertiary-default, #959595);
492 line-height: var(--line-height-lg, 144%);
493 }
494
495 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
496 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
497 color: var(--text-tertiary-default, #EEE);
498 }
499
500 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read {
501 transform: translateY(-0.5px);
502 }
503
504 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read path {
505 fill: #D7D7D7;
506 }
507</style>
508
509
510
511
512<#-- Renderizar Lista de cards -->
513<#if entries?has_content>
514 <div class="${rootCss}">
515 <@renderArrows />
516
517 <div class="card-news-list-breakpoint breakpoint">
518 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4">
519 <#list entries as entry>
520 <#assign cardData = getDataForCard(entry) />
521 <@renderCard cardData/>
522 </#list>
523 </div>
524 </div>
525 </div>
526</#if>
527
528
529<style>
530
531 .portlet {
532 margin: 0;
533 }
534
535 .${rootCss} {
536 width: 100%;
537 position: relative;
538 font-family: var(--font-family-base, "Petrobras Sans");
539 display: flex;
540 flex-direction: column;
541 gap: var(--space-lg);
542 }
543
544
545 .${rootCss} .card-news-list {
546 gap: var(--space-lg);
547 overflow: auto;
548 position: relative;
549 z-index: 1;
550 scroll-snap-type: x mandatory;
551 scrollbar-width: none;
552 display: none;
553 }
554
555 .${rootCss} .card-news-list.active {
556 display: flex;
557 }
558
559 .${rootCss} .card-news-list::-webkit-scrollbar {
560 display: none;
561 }
562
563 @media screen and (min-width: 1440px) {
564 .${rootCss} .card-news-list-breakpoint {
565 width: 100%;
566 }
567 }
568</style>
569
570<#list ourEnergyStyles as ourEnergyStyle>
571 <style>
572 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
573 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), #${ourEnergyStyle.backgroundColor} !important;
574 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important;
575 color: #${ourEnergyStyle.textColor} !important;
576 }
577
578 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
579 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 0%, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 100%), #${ourEnergyStyle.backgroundColor} !important;
580 color: #${ourEnergyStyle.textColorHighContrast} !important;
581 }
582
583 </style>
584</#list>
585
586<script>
587
588 function disableEnableArrow(arrow, scrollBar, maxDistance, direction)
589 {
590 if(direction === "left") {
591 if (scrollBar.scrollLeft > 0) {
592 arrow.classList.contains("arrow-disable") && arrow.classList.remove("arrow-disable");
593 }
594 else {
595 !arrow.classList.contains("arrow-disable") && arrow.classList.add("arrow-disable");
596 }
597 }
598 else if(direction === "right") {
599 if (Math.ceil(scrollBar.scrollLeft + scrollBar.clientWidth) < maxDistance) {
600 arrow.classList.contains("arrow-disable") && arrow.classList.remove("arrow-disable");
601 }
602 else {
603 !arrow.classList.contains("arrow-disable") && arrow.classList.add("arrow-disable");
604 }
605 }
606 }
607
608 function scrollCarousel()
609 {
610 const root = document.querySelector(".${rootCss}");
611 const scrollBar = root.querySelector(".${rootCss} .card-news-list");
612 const gap = 32;// var(--space-lg);
613 const stepLength = scrollBar.querySelector(".card-news-container").offsetWidth + gap;
614 const arrowLeftBtn = root.querySelector(".card-news-arrow-left")
615 const arrowRightBtn = root.querySelector(".card-news-arrow-right")
616
617 let maxDistance = scrollBar.scrollWidth;
618
619 arrowLeftBtn.addEventListener('click', () => {
620 if (scrollBar.scrollLeft > 0) {
621 scrollBar.scroll({
622 left: scrollBar.scrollLeft - stepLength,
623 behavior: "smooth",
624 });
625 }
626 });
627
628 arrowRightBtn.addEventListener('click', () => {
629 if (scrollBar.scrollLeft < maxDistance) {
630 scrollBar.scroll({
631 left: scrollBar.scrollLeft + stepLength,
632 behavior: "smooth",
633 });
634 }
635 });
636
637 scrollBar.addEventListener("scroll", ()=>{
638 disableEnableArrow(arrowLeftBtn, scrollBar, maxDistance, "left");
639 disableEnableArrow(arrowRightBtn, scrollBar, maxDistance, "right");
640 });
641
642 disableEnableArrow(arrowLeftBtn, scrollBar, maxDistance, "left");
643 disableEnableArrow(arrowRightBtn, scrollBar, maxDistance, "right");
644 }
645
646 document.addEventListener('DOMContentLoaded', scrollCarousel);
647
648function setLinks${contentNumber}() {
649
650 const allCategoryCards = document.querySelectorAll(".${rootCss} .card-news-container");
651 allCategoryCards.forEach((card) => {
652 card.addEventListener('click', (event) => {
653 const element = event.target;
654 element.querySelector('a').click();
655 });
656 })
657
658 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
659
660}
661
662setLinks${contentNumber}()
663
664
665
666</script>
The following has evaluated to null or missing: ==> getDataForCard(card).ourEnergyCategory [in template "20099#20135#10884565" at line 609, column 71] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign filterCardsNews = cards?filte... [in template "20099#20135#10884565" in macro "renderCards" at line 609, column 21] - Reached through: @renderCards allAssets [in template "20099#20135#10884565" at line 653, column 9] ----
1<#-- Conteúdo Web -> Templates: Funções gerais -->
2<#include "${templatesPath}/1975398" />
3
4
5<#-- Liferay Services -->
6<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
7<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
8<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
9<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
10<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
11<#assign AssetEntryQuery = objectUtil('com.liferay.asset.kernel.service.persistence.AssetEntryQuery')>
12<#assign PortalUtil = staticUtil["com.liferay.portal.kernel.util.PortalUtil"]>
13<#assign AssetEntryQueryService = objectUtil("com.liferay.asset.kernel.service.AssetEntryLocalServiceUtil").getService()>
14
15<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
16<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
17<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies)/>
18<#assign numberOfCards = 4/>
19
20
21<#attempt>
22 <#assign ourEnergyCategories = [] />
23 <#list ourEnergyVocabulary.getCategories() as ourEnergyCategory >
24 <#assign categorySortOrder = 1 />
25 <#assign categorySortOrderByService = ""/>
26 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Ordem")??)>
27 <#assign categorySortOrderByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Ordem") />
28 <#if categorySortOrderByService.value?matches("^[0-9]+$")>
29 <#assign categorySortOrder = categorySortOrderByService.value?number />
30 </#if>
31 </#if>
32
33 <#assign shadowColorCategory = "" />
34 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra")??)>
35 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra") />
36 <#assign shadowColorCategory = categoryShadowColorByService.value />
37 </#if>
38
39 <#assign backgroundColorCategory = "" />
40 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo")??)>
41 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo") />
42 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
43 </#if>
44
45 <#assign textColorCategory = "" />
46 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto")??)>
47 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto") />
48 <#assign textColorCategory = categoryTextColorByService.value />
49 </#if>
50
51 <#assign textColorHighContrastCategory = "" />
52 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
53 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste") />
54 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
55 </#if>
56
57 <#assign ourEnergyCategories += [{"sortOrder": categorySortOrder, "title": ourEnergyCategory.getName(), "titleLocale": ourEnergyCategory.getTitle(locale), "shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
58 </#list>
59
60 <#assign allCategoriesText = ""/>
61
62 <#if locale?lower_case == "pt_br">
63 <#assign allCategoriesText = "Todos"/>
64 <#else>
65 <#assign allCategoriesText = "All"/>
66 </#if>
67
68 <#assign allOurEnergyCategories = [{"sortOrder": 0, "title": "Todos", "titleLocale": allCategoriesText, "shadowColor": "", "backgroundColor": "FFF", "textColor": "008542", "textColorHighContrast": "E4F7E8"}] + ourEnergyCategories />
69 <#assign allOurEnergyCategories = allOurEnergyCategories?sort_by("sortOrder") />
70
71 <#recover>
72 <#assign ourEnergyCategories = [] />
73 <#assign allOurEnergyCategories = [] />
74
75</#attempt>
76
77<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
78<#assign contentNumber = randomNumber(4586) />
79<#assign rootCss = "card-news-list-category-container_" + randomNumber(4586) />
80
81<#assign groupId = themeDisplay.getScopeGroupId()>
82<#assign companyId = themeDisplay.getCompanyId()>
83<#assign realUserId = themeDisplay.getDefaultUserId() />
84<#assign className = "com.liferay.journal.model.JournalArticle">
85<#assign classNameId = PortalUtil.getClassNameId(className)>
86
87${AssetEntryQuery.setClassNameIds([classNameId]) }
88${AssetEntryQuery.setEnd(numberOfCards)}
89${AssetEntryQuery.setOrderByCol1("createDate")}
90${AssetEntryQuery.setOrderByType1("DESC")}
91
92<#assign allAssets = []/>
93<#list ourEnergyVocabulary.getCategories() as ourEnergyCategory>
94 ${AssetEntryQuery.setAllCategoryIds([ourEnergyCategory.getCategoryId()])}
95 <#assign ents = AssetEntryQueryService.getEntries(AssetEntryQuery) />
96 <#assign allAssets = allAssets + ents />
97</#list>
98
99<#-- Na lista de Web Contents é inserido um atributo data de moficacao para cada Web Content,
100seguidamente é ordenado em ordem decrescente pela data
101depois descarta-se a data -->
102<#assign allAssets = allAssets
103 ?map(asset -> {"content": asset, "date": asset.getCreateDate()})
104 ?sort_by("date")?reverse
105 ?map(assetInfo -> assetInfo.content) />
106
107<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
108<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
109 <#attempt>
110 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
111
112 <#list categories as category>
113 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
114 <#return category.getName()>
115 </#if>
116 </#list>
117
118 <#return "">
119
120 <#recover>
121 <#return "" />
122
123 </#attempt>
124</#function>
125
126<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
127<#function getDataForCard entry >
128 <#attempt>
129 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
130 <#assign ddmStructure = journalArticle.getDDMStructure() />
131 <#assign fieldList = getFieldListByStructure(ddmStructure) />
132 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
133 <#assign ddmStructure = journalArticle.getDDMStructure() />
134
135 <#-- Tentando pegar Imagem -->
136 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
137 <#assign media = "" />
138 <#list mediasGroup as mediaGroup >
139 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
140
141 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
142
143 <#assign urlAdaptativeMedia = ""/>
144 <#if media.url?? && media.url?has_content && fileDataRequest?? && fileDataRequest.adaptedImages?? >
145 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
146 <#list dataAdaptativeMedia as data>
147 <#if data.resolutionName == "Preview-1000x0">
148 <#assign urlAdaptativeMedia = data.contentUrl/>
149 </#if>
150 </#list>
151 </#if>
152 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": urlAdaptativeMedia} />
153
154 <#-- Se não tiver imagem, tentar pegar vídeo -->
155 <#if !media.imageSrc?? || !media.imageSrc?has_content>
156 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
157 <#if youtubeID?? && youtubeID?has_content>
158 <#assign media = {"videoYotubeID": youtubeID} />
159 <#else>
160 <#-- Tentar pegar vídeo Interno -->
161 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
162 <#if internalVideo?? && internalVideo?has_content>
163 <#assign media = {"internalVideo": internalVideo} />
164 </#if>
165 </#if>
166 </#if>
167 </#list>
168
169 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
170
171 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
172
173 <#assign ourEnergyCategory = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
174
175 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
176
177 <#if themeDisplay.getPortalURL()?contains("webserver")>
178 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
179 <#else>
180 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
181 </#if>
182
183 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "ourEnergyCategory": ourEnergyCategory, "typeOfNews": typeOfNews, "urlNews": urlNews} />
184
185 <#return cardData>
186
187 <#recover>
188 <#return {} />
189 </#attempt>
190
191 <#-- cardData -> image: url, alt
192 title
193 timeRead
194 ourEnergyCategory
195 typeOfNews
196 urlNews
197 -->
198</#function>
199
200
201<#-- Macro para renderizar um Card -->
202<#macro renderCard cardData>
203 <#-- cardData -> image: url, alt
204 title
205 timeRead
206 ourEnergyCategory
207 typeOfNews
208 urlNews
209 -->
210
211 <div class="card-news-container">
212 <a class="card-link" href="${cardData.urlNews}" style="display: none;"> Noticia: ${cardData.title} </a>
213
214 <div class="card-news-thumb">
215 <#assign noImage = "" />
216 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
217 <#assign imageSrc = cardData.media.imageSrc />
218 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
219 <#assign imageSrc = cardData.media.urlAdaptativeMedia />
220 </#if>
221 <img class="card-news-image" src="${imageSrc}" alt="${cardData.media.imageAlt}"/>
222 <#else>
223 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
224 <img class="card-news-image" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
225 <#else>
226 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
227 <video class="card-news-image">
228 <source src="${cardData.media.internalVideo.url}">
229 Your browser does not support the video tag.
230 </video>
231 <#else>
232 <#assign noImage = "no-image" />
233 </#if>
234 </#if>
235 <svg class="thumb-play-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
236 <path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white" fill-opacity="0.8"/>
237 <path d="M22.2563 15.5744L13.2625 10.0744C13.1868 10.0277 13.1 10.0021 13.0111 10.0001C12.9221 9.99816 12.8343 10.02 12.7566 10.0633C12.6789 10.1066 12.6141 10.1698 12.569 10.2465C12.5239 10.3232 12.5001 10.4105 12.5 10.4994V21.4994C12.5001 21.5884 12.5239 21.6757 12.569 21.7524C12.6141 21.8291 12.6789 21.8923 12.7566 21.9356C12.8343 21.9789 12.9221 22.0007 13.0111 21.9988C13.1 21.9968 13.1868 21.9712 13.2625 21.9244L22.2563 16.4244C22.3301 16.3808 22.3913 16.3186 22.4338 16.2441C22.4763 16.1696 22.4987 16.0852 22.4987 15.9994C22.4987 15.9137 22.4763 15.8293 22.4338 15.7548C22.3913 15.6803 22.3301 15.6181 22.2563 15.5744Z" fill="#008542"/>
238 </svg>
239 </#if>
240 </div>
241
242 <div class="card-news-content ${noImage}">
243 <div class="card-news-text-content">
244 <div data-category="${cardData.ourEnergyCategory}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergyCategory} </div>
245 <div class="card-news-title h4"> ${cardData.title} </div>
246 </div>
247
248 <div class="card-news-tags">
249 <div class="card-news-type">
250 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
251 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
252 </svg>
253
254 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
255 </div>
256 <#if cardData.timeRead?? && cardData.timeRead?has_content>
257 <div class="card-news-time-read">
258 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
259 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z" fill="#959595"/>
260 </svg>
261
262 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
263 </div>
264 </#if>
265 </div>
266 </div>
267 </div>
268</#macro>
269
270<style>
271 .${rootCss} .card-news-container {
272 display: flex;
273 width: 100%;
274 min-height: 212px;
275 height: 212px;
276 align-items: center;
277 align-self: stretch;
278 border-radius: var(--border-radius-lg);
279 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
280 background: var(--background-surface-level-01, #FFF);
281 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
282 overflow: hidden;
283 cursor: pointer;
284 transition: border 300ms ease-in-out;
285 position: relative;
286 }
287
288 body.high-contrast-active .${rootCss} .card-news-container {
289 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
290 background: var(--background-surface-level-01, #010101);
291 }
292
293 .${rootCss} .card-news-container:hover {
294 border: var(--border-width-hairline) solid rgb(0, 133, 66);
295 }
296
297 body.high-contrast-active .${rootCss} .card-news-container:hover {
298 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
299 }
300
301 .${rootCss} .card-news-container .card-news-link {
302 position: absolute;
303 top: 0;
304 width: 100%;
305 height: 100%;
306 z-index: 1;
307 }
308
309 .${rootCss} .card-news-container .card-news-thumb {
310 position: relative;
311 width: 100%;
312 height: 100%;
313 max-width: 378px;
314 min-height: 212px;
315 flex: 1 0 0;
316 align-self: stretch;
317 object-fit: cover;
318 pointer-events: none;
319 }
320
321 .${rootCss} .card-news-container .card-news-thumb .card-news-image {
322 width: 100%;
323 height: 100%;
324 max-width: 378px;
325 min-height: 212px;
326 flex: 1 0 0;
327 align-self: stretch;
328 object-fit: cover;
329 }
330
331 .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon {
332 position: absolute;
333 left: 50%;
334 top: 50%;
335 transform: translate(-50%, -50%);
336 }
337
338 .${rootCss} .card-news-container .card-news-content {
339 display: flex;
340 padding: var(--space-md, 24px);
341 flex-direction: column;
342 align-items: flex-start;
343 gap: var(--space-lg, 32px);
344 flex: 1 0 0;
345 pointer-events: none;
346 }
347
348 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(1) {
349 fill: black;
350 }
351
352 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(2) {
353 fill: white;
354 }
355
356 .${rootCss} .card-news-container .card-news-content .card-news-text-content {
357 display: flex;
358 flex-direction: column;
359 align-items: flex-start;
360 gap: var(--space-sm, 16px);
361 align-self: stretch;
362 pointer-events: none;
363 }
364
365 .${rootCss} .card-news-container .card-news-content .card-news-category {
366 display: flex;
367 justify-content: center;
368 align-items: center;
369 padding: var(--space-micro) var(--space-xs);
370 border-radius: var(--border-radius-pill);
371 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), var(--default-sup-green-water, #006B65);
372 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
373 line-height: var(--line-height-lg, 144%);
374 color: var(--default-sup-green-water, #006B65);
375 pointer-events: none;
376 }
377
378 .${rootCss} .card-news-container .card-news-content .card-news-title {
379 display: -webkit-box;
380 -webkit-box-orient: vertical;
381 -webkit-line-clamp: 4;
382 align-self: stretch;
383 overflow: hidden;
384 color: var(--text-primary-default, #373737);
385 text-overflow: ellipsis;
386 margin: 0;
387 pointer-events: none;
388 }
389
390 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-title {
391 color: var(--text-primary-default, #FFF);
392 }
393
394 .${rootCss} .card-news-container .card-news-content .card-news-tags {
395 display: flex;
396 align-items: center;
397 align-content: center;
398 gap: var(--space-sm, 16px);
399 align-self: stretch;
400 flex-wrap: wrap;
401 }
402
403 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type,
404 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read {
405 display: flex;
406 align-items: center;
407 gap: var(--space-xxs, 8px);
408 }
409
410 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type path {
411 stroke: #D7D7D7;
412 }
413
414 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type .card-news-type-text,
415 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-time-read-text {
416 color: var(--text-tertiary-default, #959595);
417 line-height: var(--line-height-lg, 144%);
418 }
419
420 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type .card-news-type-text,
421 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-time-read-text {
422 color: var(--text-tertiary-default, #EEE);
423 }
424
425 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-icon-time-read {
426 transform: translateY(-0.5px);
427 }
428
429 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-icon-time-read path {
430 fill: #D7D7D7;
431 }
432
433 @media screen and (max-width: 1024px) {
434 .${rootCss} .card-news-container {
435 height: 370px;
436 min-width: 256px;
437 max-width: 680px;
438 flex-direction: column;
439 align-items: flex-start;
440 }
441
442 .${rootCss} .card-news-container .card-news-thumb {
443 max-width: 100%;
444 }
445
446 .${rootCss} .card-news-container .card-news-image {
447 height: 168px;
448 min-height: 168px;
449 max-width: 100% !important;
450 width: 100%;
451 }
452
453 .${rootCss} .card-news-container picture:has(.card-news-image) {
454 width: 100%;
455 }
456
457 .${rootCss} .card-news-container .card-news-content {
458 position: relative;
459 padding: var(--space-lg, 32px) var(--space-md, 24px);
460 }
461
462 .${rootCss} .card-news-container .card-news-content.no-image {
463 padding-top: var(--space-sm);
464 }
465
466 .${rootCss} .card-news-container .card-news-content .card-news-text-content {
467 gap: var(--space-sm, 16px);
468 flex: 1 0 0;
469 }
470
471 .${rootCss} .card-news-container .card-news-content .card-news-category {
472 position: absolute;
473 left: 24px;
474 top: -13px;
475 }
476
477 .${rootCss} .card-news-container .card-news-content.no-image .card-news-category {
478 position: relative;
479 top: 0;
480 left: 0;
481 }
482 }
483</style>
484
485<#macro renderCategories>
486 <div class="categories-container">
487 <div class="categories-text paragraph-md-regular">
488 <#if locale?lower_case == "pt_br">
489 Categorias:
490 <#else>
491 Categories:
492 </#if>
493 </div>
494
495 <div class="categories-list">
496 <#list allOurEnergyCategories as category>
497 <div class="category-container">
498 <div data-category="${category.title}" class="our-energy-category paragraph-micro-regular <#if category?is_first>category-active</#if>">
499 ${category.titleLocale}
500 </div>
501 </div>
502 </#list>
503 </div>
504 </div>
505
506 <style>
507 .${rootCss} .categories-container {
508 display: flex;
509 align-items: center;
510 align-content: center;
511 gap: var(--space-sm, 16px);
512 align-self: stretch;
513 flex-wrap: wrap;
514 }
515
516 .${rootCss} .categories-container .categories-text {
517 color: var(--text-secondary-default, #525252);
518 }
519
520 body.high-contrast-active .${rootCss} .categories-container .categories-text {
521 color: #F8F8F8;
522 }
523
524 .${rootCss} .categories-container .categories-list {
525 display: flex;
526 min-width: 256px;
527 max-width: 680px;
528 align-items: center;
529 align-content: center;
530 gap: var(--space-sm, 16px);
531 flex-wrap: wrap;
532 }
533
534
535 .${rootCss} .categories-container .categories-list .our-energy-category {
536 display: flex;
537 padding: var(--space-micro, 2px) var(--space-xs, 12px);
538 justify-content: center;
539 align-items: center;
540 border-radius: var(--border-radius-pill);
541 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), var(--background-surface-level-01, #FFF);
542 line-height: var(--line-height-lg);
543 cursor: pointer;
544 color: var(--text-primary-accent, #008542);
545 }
546
547 .${rootCss} .categories-container .categories-list .category-container {
548 padding: var(--size-nano);
549 border-radius: var(--border-radius-pill);
550 border: var(--border-width-hairline) solid transparent;
551 }
552
553 .${rootCss} .categories-container .categories-list .category-container:has(.our-energy-category.category-active) {
554 border: var(--border-width-hairline) solid var(--border-color-accent, #008542);
555 }
556
557 body.high-contrast-active .${rootCss} .categories-container .categories-list .category-container:has(.our-energy-category.category-active) {
558 border: var(--border-width-hairline) solid rgba(228, 247, 232, 1);
559 }
560
561 @media screen and (max-width: 1024px) {
562 .${rootCss} .categories-container {
563 flex-wrap: nowrap;
564 width: 100%;
565 }
566
567 .${rootCss} .categories-container .categories-list {
568 flex-wrap: nowrap;
569 width: fit-content;
570 overflow: auto;
571 scrollbar-width: none;
572 scroll-snap-type: x mandatory;
573 padding-right: var(--space-lg);
574 }
575
576 .${rootCss} .categories-container .categories-list::-webkit-scrollbar {
577 display: none;
578 }
579
580 .${rootCss} .categories-container .categories-list .category-container {
581 scroll-snap-align: start;
582 }
583
584 .${rootCss} .categories-container .categories-list .category-container .our-energy-category {
585 white-space: nowrap;
586 scroll-snap-align: start;
587 }
588 }
589
590 </style>
591</#macro>
592
593<#macro renderCards cards>
594
595 <div class="card-news-list">
596 <#list allOurEnergyCategories as categoryOurEnergy>
597 <div class="${categoryOurEnergy.title} <#if categoryOurEnergy?is_first>category-active</#if>">
598 <#if categoryOurEnergy.title == "Todos">
599 <#assign filterCardsNews = cards />
600 <#if filterCardsNews?size gt numberOfCards>
601 <#assign filterCardsNews = filterCardsNews[0..numberOfCards-1] />
602 </#if>
603 <#list filterCardsNews as cardNews>
604 <#assign cardData = getDataForCard(cardNews) />
605 <@renderCard cardData/>
606 </#list>
607
608 <#else>
609 <#assign filterCardsNews = cards?filter(card -> (getDataForCard(card).ourEnergyCategory == categoryOurEnergy.title)) />
610
611 <#if filterCardsNews?size gt numberOfCards>
612 <#assign filterCardsNews = filterCardsNews[0..numberOfCards-1] />
613 </#if>
614
615 <#list filterCardsNews as cardNews>
616 <#assign cardData = getDataForCard(cardNews) />
617 <@renderCard cardData/>
618 </#list>
619 </#if>
620 </div>
621 </#list>
622 </div>
623
624 <style>
625 .${rootCss} .card-news-list {
626 display: flex;
627 }
628
629 .${rootCss} .card-news-list > div {
630 display: none;
631 flex-direction: column;
632 align-items: flex-start;
633 gap: var(--space-sm, 16px);
634 align-self: stretch;
635 }
636
637 .${rootCss} .card-news-list > div.category-active {
638 display: flex;
639 flex-direction: column;
640 align-items: flex-start;
641 gap: var(--space-sm, 16px);
642 align-self: stretch;
643 }
644 </style>
645
646
647</#macro>
648
649<#-- Renderizar Lista de cards -->
650<#if allAssets?has_content>
651 <div class="${rootCss}">
652 <@renderCategories />
653 <@renderCards allAssets />
654 </div>
655</#if>
656
657
658<style>
659
660 .portlet {
661 margin: 0;
662 }
663
664 .${rootCss} {
665 width: 100%;
666 font-family: var(--font-family-base, "Petrobras Sans");
667 display: flex;
668 flex-direction: column;
669 gap: var(--space-lg);
670 }
671
672</style>
673
674<#list allOurEnergyCategories as ourEnergyCategory>
675 <style>
676 .${rootCss} [data-category="${ourEnergyCategory.title}"] {
677 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), #${ourEnergyCategory.backgroundColor} !important;
678 box-shadow: 0px 2px 6px 0px #${ourEnergyCategory.shadowColor} !important;
679 color: #${ourEnergyCategory.textColor} !important;
680 }
681
682 body.high-contrast-active .${rootCss} [data-category="${ourEnergyCategory.title}"] {
683 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 0%, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 100%), #${ourEnergyCategory.backgroundColor} !important;
684 color: #${ourEnergyCategory.textColorHighContrast} !important;
685 }
686
687 </style>
688</#list>
689
690<script>
691
692 document.addEventListener('DOMContentLoaded', ()=>{
693 const root = document.querySelector(".${rootCss}");
694 const listCategoriesItens = root.querySelectorAll(".categories-list .category-container .our-energy-category");
695 const listOfCardsByCategory = [...root.querySelector(".card-news-list").children];
696
697 listCategoriesItens.forEach((category, index)=>{
698 category.addEventListener("click", ()=>{
699
700 const categoryActive = root.querySelector(".categories-list .category-active");
701 const listOfCardsActive = root.querySelector(".card-news-list .category-active");
702
703 categoryActive.classList.remove("category-active");
704 listOfCardsActive.classList.remove("category-active");
705
706 category.classList.add("category-active");
707 listOfCardsByCategory[index].classList.add("category-active");
708 });
709 });
710 });
711
712
713function setLinks${contentNumber}() {
714
715 const allCategoryCards = document.querySelectorAll(".${rootCss} .card-news-container");
716 allCategoryCards.forEach((card) => {
717 card.addEventListener('click', (event) => {
718 const element = event.target;
719 console.log(element);
720 element.querySelector('a').click();
721 });
722 })
723
724 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
725
726}
727
728setLinks${contentNumber}()
729
730
731</script>
Faça uma busca:
Sugestões de busca
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: