Liderança na transição energética justa
7 min
Título
Mais lidos
Um erro ocorreu enquanto processava o modelo.
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>
Mais recentes
Categorias:
Todos
Sustentabilidade
Transição Energética
Inovação
Nossas Atividades
Nossas Atividades
Diretor destaca investimentos e saúde financeira da companhia em entrevista
Nossas Atividades
Tupi: conheça 8 curiosidades sobre o campo mais produtivo do pré-sal
Nossas Atividades
Conheça os compromissos ambientais da Petrobras para reduzir a pegada de carbono
Nossas Atividades
Futura cientista: 6 dicas para estimular mulheres na ciência
Sustentabilidade
Desvendando os mistérios da temporada de baleias: 10 curiosidades fascinantes
Sustentabilidade
Recifes de corais e zooxantelas: um amor aquático que precisa ser protegido
Sustentabilidade
O que são os ODS da ONU e o que temos a ver com isso
Sustentabilidade
Conheça Fred, Jorge e a ciência na recuperação das florestas
Transição Energética
Um Brasil de Energia - caminhos para uma transição energética justa.
Transição Energética
De IA a robótica: como usamos novas tecnologias para gerar a energia do futuro
Transição Energética
Conheça 5 iniciativas para liderar a transição energética justa
Transição Energética
Transição energética justa: entenda os caminhos que movem a Petrobras!
Inovação
O que é Realidade Aumentada, a tecnologia que une mundos para melhorar sua vida
Inovação
Uma mulher que não desiste dos seus sonhos
Inovação
Desvende o que é inteligência artificial e seu uso na Petrobras
Inovação
Como minidrones serão aliados em atividades submarinas
Nossas Atividades
Diretor destaca investimentos e saúde financeira da companhia em entrevista
Nossas Atividades
Tupi: conheça 8 curiosidades sobre o campo mais produtivo do pré-sal
Nossas Atividades
Conheça os compromissos ambientais da Petrobras para reduzir a pegada de carbono
Nossas Atividades
Futura cientista: 6 dicas para estimular mulheres na ciência
ASSINE A NEWSLETTER DA PETROBRAS NO LINKEDIN
Acompanhe como estamos nos preparando para o futuro de baixo carbono, conectados a um mundo em transformação.
Mochileiras - viaje
X
X
X
X
Mochileiras - viaje
X
X
X
X
Veja Mais
Inovação
O que Street Fighter IV, Photoshop, o Angry Birds e a Petrobras tem em comum?
Artigo
3 min
Inovação
Internet das coisas em favor da segurança
Artigo
5 min
Inovação
Natureza como Inspiração
Artigo
7 min
Inovação
Conheça nosso sistema imersivo de pesquisa de campo
Artigo
4 min
Transição Energética
Liderança na transição energética justa
Artigo
7 min
Inovação
Robô-bombeiro: uma invenção futurista para garantir nossa segurança hoje
Artigo
3 min
Inovação
Uma receita premiada: o que as tecnologias pioneiras do campo de Búzios têm em comum com a gastronomia?
Artigo
7 min
Inovação
As mil e uma utilidades do scanner 3D – e como essa tecnologia está cada vez mais acessível
Artigo
6 min
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: