Mais recentes
Um erro ocorreu enquanto processava o modelo.
The following has evaluated to null or missing: ==> getDataForCard(card).ourEnergyCategory [in template "20099#20135#10884565" at line 636, 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 636, column 21] - Reached through: @renderCards allAssets [in template "20099#20135#10884565" at line 680, column 9] ----
1<#-- Conteúdo Web -> Templates: Funções gerais -->
2<#include "${templatesPath}/1975398" />
3
4<#-- Conteúdo Web -> Templates: Busca pelas imagens do tipo de noticia -->
5<#include "${templatesPath}/18598756" />
6
7<#assign POST_TYPES_CATEGORIES = getPostTypeImages()!default([]) />
8
9<#-- Liferay Services -->
10<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
11<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
12<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
13<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
14<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
15<#assign AssetEntryQuery = objectUtil('com.liferay.asset.kernel.service.persistence.AssetEntryQuery')>
16<#assign PortalUtil = staticUtil["com.liferay.portal.kernel.util.PortalUtil"]>
17<#assign AssetEntryQueryService = objectUtil("com.liferay.asset.kernel.service.AssetEntryLocalServiceUtil").getService()>
18
19<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
20<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
21<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies)/>
22<#assign numberOfCards = 5/>
23
24<#-- Nome das midias adaptativas de imagem para desktop e mobile -->
25<#assign adaptativeMediaDesktopResolutionName = "Preview-1000x0" />
26<#assign adaptativeMediaMobileResolutionName = "Thumbnail-300x300" />
27
28<#attempt>
29 <#assign ourEnergyCategories = [] />
30 <#list ourEnergyVocabulary.getCategories() as ourEnergyCategory >
31 <#assign categorySortOrder = 1 />
32 <#assign categorySortOrderByService = ""/>
33 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Ordem")??)>
34 <#assign categorySortOrderByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Ordem") />
35 <#if categorySortOrderByService.value?matches("^[0-9]+$")>
36 <#assign categorySortOrder = categorySortOrderByService.value?number />
37 </#if>
38 </#if>
39
40 <#assign shadowColorCategory = "" />
41 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra")??)>
42 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra") />
43 <#assign shadowColorCategory = categoryShadowColorByService.value />
44 </#if>
45
46 <#assign backgroundColorCategory = "" />
47 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo")??)>
48 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo") />
49 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
50 </#if>
51
52 <#assign textColorCategory = "" />
53 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto")??)>
54 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto") />
55 <#assign textColorCategory = categoryTextColorByService.value />
56 </#if>
57
58 <#assign textColorHighContrastCategory = "" />
59 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
60 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste") />
61 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
62 </#if>
63
64 <#assign ourEnergyCategories += [{"sortOrder": categorySortOrder, "title": ourEnergyCategory.getName(), "titleLocale": ourEnergyCategory.getTitle(locale), "shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
65 </#list>
66
67 <#assign allCategoriesText = ""/>
68
69 <#if locale?lower_case == "pt_br">
70 <#assign allCategoriesText = "Todos"/>
71 <#else>
72 <#assign allCategoriesText = "All"/>
73 </#if>
74
75 <#assign allOurEnergyCategories = [{"sortOrder": 0, "title": "Todos", "titleLocale": allCategoriesText, "shadowColor": "", "backgroundColor": "FFF", "textColor": "008542", "textColorHighContrast": "E4F7E8"}] + ourEnergyCategories />
76 <#assign allOurEnergyCategories = allOurEnergyCategories?sort_by("sortOrder") />
77
78 <#recover>
79 <#assign ourEnergyCategories = [] />
80 <#assign allOurEnergyCategories = [] />
81
82</#attempt>
83
84<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
85<#assign contentNumber = randomNumber(4586) />
86<#assign rootCss = "card-news-list-category-container_" + randomNumber(4586) />
87
88<#assign groupId = themeDisplay.getScopeGroupId()>
89<#assign companyId = themeDisplay.getCompanyId()>
90<#assign realUserId = themeDisplay.getDefaultUserId() />
91<#assign className = "com.liferay.journal.model.JournalArticle">
92<#assign classNameId = PortalUtil.getClassNameId(className)>
93
94${AssetEntryQuery.setClassNameIds([classNameId]) }
95${AssetEntryQuery.setEnd(numberOfCards)}
96${AssetEntryQuery.setOrderByCol1("createDate")}
97${AssetEntryQuery.setOrderByType1("DESC")}
98
99<#assign allAssets = []/>
100<#list ourEnergyVocabulary.getCategories() as ourEnergyCategory>
101 ${AssetEntryQuery.setAllCategoryIds([ourEnergyCategory.getCategoryId()])}
102 <#assign ents = AssetEntryQueryService.getEntries(AssetEntryQuery) />
103 <#assign allAssets = allAssets + ents />
104</#list>
105
106<#-- Na lista de Web Contents é inserido um atributo data de moficacao para cada Web Content,
107seguidamente é ordenado em ordem decrescente pela data
108depois descarta-se a data -->
109<#assign allAssets = allAssets
110 ?map(asset -> {"content": asset, "date": asset.getCreateDate()})
111 ?sort_by("date")?reverse
112 ?map(assetInfo -> assetInfo.content) />
113
114<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
115<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
116 <#attempt>
117 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
118
119 <#list categories as category>
120 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
121 <#return category.getName()>
122 </#if>
123 </#list>
124
125 <#return "">
126
127 <#recover>
128 <#return "" />
129
130 </#attempt>
131</#function>
132
133<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
134<#function getDataForCard entry >
135 <#attempt>
136 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
137 <#assign ddmStructure = journalArticle.getDDMStructure() />
138 <#assign fieldList = getFieldListByStructure(ddmStructure) />
139 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
140 <#assign ddmStructure = journalArticle.getDDMStructure() />
141
142 <#-- Tentando pegar Imagem -->
143 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
144 <#assign media = "" />
145 <#list mediasGroup as mediaGroup >
146 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
147
148 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
149
150 <#assign urlAdaptativeMediaDesktop = ""/>
151 <#assign urlAdaptativeMediaMobile = ""/>
152 <#if media.url?? && media.url?has_content && fileDataRequest?? && fileDataRequest.adaptedImages?? >
153 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
154 <#list dataAdaptativeMedia as data>
155 <#if data.resolutionName == adaptativeMediaDesktopResolutionName>
156 <#assign urlAdaptativeMediaDesktop = data.contentUrl/>
157 </#if>
158 <#if data.resolutionName == adaptativeMediaMobileResolutionName>
159 <#assign urlAdaptativeMediaMobile = data.contentUrl/>
160 </#if>
161 </#list>
162 </#if>
163 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": {"mobile": urlAdaptativeMediaMobile, "desktop": urlAdaptativeMediaDesktop}} />
164
165 <#-- Se não tiver imagem, tentar pegar vídeo -->
166 <#if !media.imageSrc?? || !media.imageSrc?has_content>
167 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
168 <#if youtubeID?? && youtubeID?has_content>
169 <#assign media = {"videoYotubeID": youtubeID} />
170 <#else>
171 <#-- Tentar pegar vídeo Interno -->
172 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
173 <#if internalVideo?? && internalVideo?has_content>
174 <#assign media = {"internalVideo": internalVideo} />
175 </#if>
176 </#if>
177 </#if>
178 </#list>
179
180 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
181
182 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
183
184 <#assign ourEnergyCategory = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
185
186 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
187
188 <#if themeDisplay.getPortalURL()?contains("webserver")>
189 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
190 <#else>
191 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
192 </#if>
193
194 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "ourEnergyCategory": ourEnergyCategory, "typeOfNews": typeOfNews, "urlNews": urlNews} />
195
196 <#return cardData>
197
198 <#recover>
199 <#return {} />
200 </#attempt>
201
202 <#-- cardData -> image: url, alt
203 title
204 timeRead
205 ourEnergyCategory
206 typeOfNews
207 urlNews
208 -->
209</#function>
210
211
212<#-- Macro para renderizar um Card -->
213<#macro renderCard cardData>
214 <#-- cardData -> image: url, alt
215 title
216 timeRead
217 ourEnergyCategory
218 typeOfNews
219 urlNews
220 -->
221
222 <div class="card-news-container">
223 <a class="card-link" href="${cardData.urlNews}" style="display: none;"> Noticia: ${cardData.title} </a>
224
225 <div class="card-news-thumb">
226 <#assign noImage = "" />
227 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
228 <#assign imageSrcDesktop = cardData.media.imageSrc />
229 <#assign imageSrcMobile = cardData.media.imageSrc />
230 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
231 <#assign imageSrcDesktop = cardData.media.urlAdaptativeMedia.desktop />
232 <#assign imageSrcMobile = cardData.media.urlAdaptativeMedia.mobile />
233 </#if>
234 <picture >
235 <source media="(max-width:767px)" srcset="${imageSrcMobile}">
236 <img class="card-news-image" loading="lazy" src="${imageSrcDesktop}" alt="${cardData.media.imageAlt}"/>
237 </picture>
238 <#else>
239 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
240 <picture>
241 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/mqdefault.jpg">
242 <img class="card-news-image" loading="lazy" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
243 </picture>
244 <#else>
245 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
246 <video class="card-news-image" loading="lazy">
247 <source src="${cardData.media.internalVideo.url}">
248 Your browser does not support the video tag.
249 </video>
250 <#else>
251 <#assign noImage = "no-image" />
252 </#if>
253 </#if>
254 <svg class="thumb-play-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
255 <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"/>
256 <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"/>
257 </svg>
258 </#if>
259 </div>
260
261 <div class="card-news-content ${noImage}">
262 <div class="card-news-text-content">
263 <div data-category="${cardData.ourEnergyCategory}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergyCategory} </div>
264 <div class="card-news-title h4"> ${cardData.title} </div>
265 </div>
266
267 <div class="card-news-tags">
268 <div class="card-news-type">
269 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default(""))?? >
270 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default("")) />
271 <img src="${postTypeIconUrl}" loading="lazy" alt="post type icon" />
272 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
273 <#else/>
274 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
275 <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"/>
276 </svg>
277 <div class="card-news-type-text paragraph-micro-regular">Artigo</div>
278 </#if>
279 </div>
280
281 <#if cardData.timeRead?? && cardData.timeRead?has_content>
282 <div class="card-news-time-read">
283 <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">
284 <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"/>
285 </svg>
286
287 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
288 </div>
289 </#if>
290 </div>
291 </div>
292 </div>
293</#macro>
294
295<style>
296 .${rootCss} .card-news-container {
297 display: flex;
298 width: 100%;
299 min-height: 212px;
300 height: 212px;
301 align-items: center;
302 align-self: stretch;
303 border-radius: var(--border-radius-lg);
304 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
305 background: var(--background-surface-level-01, #FFF);
306 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
307 overflow: hidden;
308 cursor: pointer;
309 transition: border 300ms ease-in-out;
310 position: relative;
311 }
312
313 body.high-contrast-active .${rootCss} .card-news-container {
314 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
315 background: var(--background-surface-level-01, #010101);
316 }
317
318 .${rootCss} .card-news-container:hover {
319 border: var(--border-width-hairline) solid rgb(0, 133, 66);
320 }
321
322 body.high-contrast-active .${rootCss} .card-news-container:hover {
323 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
324 }
325
326 .${rootCss} .card-news-container .card-news-link {
327 position: absolute;
328 top: 0;
329 width: 100%;
330 height: 100%;
331 z-index: 1;
332 }
333
334 .${rootCss} .card-news-container .card-news-thumb {
335 position: relative;
336 width: 100%;
337 height: 100%;
338 max-width: 378px;
339 min-height: 212px;
340 flex: 1 0 0;
341 align-self: stretch;
342 object-fit: cover;
343 pointer-events: none;
344 }
345
346 .${rootCss} .card-news-container .card-news-thumb .card-news-image {
347 width: 100%;
348 height: 100%;
349 max-width: 378px;
350 min-height: 212px;
351 flex: 1 0 0;
352 align-self: stretch;
353 object-fit: cover;
354 }
355
356 .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon {
357 position: absolute;
358 left: 50%;
359 top: 50%;
360 transform: translate(-50%, -50%);
361 }
362
363 .${rootCss} .card-news-container .card-news-content {
364 display: flex;
365 padding: var(--space-md, 24px);
366 flex-direction: column;
367 align-items: flex-start;
368 gap: var(--space-lg, 32px);
369 flex: 1 0 0;
370 pointer-events: none;
371 }
372
373 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(1) {
374 fill: black;
375 }
376
377 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(2) {
378 fill: white;
379 }
380
381 .${rootCss} .card-news-container .card-news-content .card-news-text-content {
382 display: flex;
383 flex-direction: column;
384 align-items: flex-start;
385 gap: var(--space-sm, 16px);
386 align-self: stretch;
387 pointer-events: none;
388 }
389
390 .${rootCss} .card-news-container .card-news-content .card-news-category {
391 display: flex;
392 justify-content: center;
393 align-items: center;
394 padding: var(--space-micro) var(--space-xs);
395 border-radius: var(--border-radius-pill);
396 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);
397 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
398 line-height: var(--line-height-lg, 144%);
399 color: var(--default-sup-green-water, #006B65);
400 pointer-events: none;
401 }
402
403 .${rootCss} .card-news-container .card-news-content .card-news-title {
404 display: -webkit-box;
405 -webkit-box-orient: vertical;
406 -webkit-line-clamp: 4;
407 align-self: stretch;
408 overflow: hidden;
409 color: var(--text-primary-default, #373737);
410 text-overflow: ellipsis;
411 margin: 0;
412 pointer-events: none;
413 }
414
415 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-title {
416 color: var(--text-primary-default, #FFF);
417 }
418
419 .${rootCss} .card-news-container .card-news-content .card-news-tags {
420 display: flex;
421 align-items: center;
422 align-content: center;
423 gap: var(--space-sm, 16px);
424 align-self: stretch;
425 flex-wrap: wrap;
426 }
427
428 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type,
429 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read {
430 display: flex;
431 align-items: center;
432 gap: var(--space-xxs, 8px);
433 }
434
435 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type path {
436 stroke: #D7D7D7;
437 }
438
439 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type .card-news-type-text,
440 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-time-read-text {
441 color: var(--text-tertiary-default, #959595);
442 line-height: var(--line-height-lg, 144%);
443 }
444
445 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type .card-news-type-text,
446 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-time-read-text {
447 color: var(--text-tertiary-default, #EEE);
448 }
449
450 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-icon-time-read {
451 transform: translateY(-0.5px);
452 }
453
454 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-icon-time-read path {
455 fill: #D7D7D7;
456 }
457
458 @media screen and (max-width: 1024px) {
459 .${rootCss} .card-news-container {
460 height: 370px;
461 min-width: 256px;
462 max-width: 680px;
463 flex-direction: column;
464 align-items: flex-start;
465 }
466
467 .${rootCss} .card-news-container .card-news-thumb {
468 max-width: 100%;
469 min-height: 168px !important;
470 }
471
472 .${rootCss} .card-news-container .card-news-image {
473 height: 168px;
474 min-height: 168px !important;
475 max-width: 100% !important;
476 width: 100%;
477 transform: none !important;
478 }
479
480 .${rootCss} .card-news-container picture:has(.card-news-image) {
481 width: 100%;
482 }
483
484 .${rootCss} .card-news-container .card-news-content {
485 position: relative;
486 padding: var(--space-lg, 32px) var(--space-md, 24px);
487 }
488
489 .${rootCss} .card-news-container .card-news-content.no-image {
490 padding-top: var(--space-sm);
491 }
492
493 .${rootCss} .card-news-container .card-news-content .card-news-text-content {
494 gap: var(--space-sm, 16px);
495 flex: 1 0 0;
496 }
497
498 .${rootCss} .card-news-container .card-news-content .card-news-category {
499 position: absolute;
500 left: 24px;
501 top: -13px;
502 }
503
504 .${rootCss} .card-news-container .card-news-content.no-image .card-news-category {
505 position: relative;
506 top: 0;
507 left: 0;
508 }
509 }
510</style>
511
512<#macro renderCategories>
513 <div class="categories-container">
514 <div class="categories-text paragraph-md-regular">
515 <#if locale?lower_case == "pt_br">
516 Categorias:
517 <#else>
518 Categories:
519 </#if>
520 </div>
521
522 <div class="categories-list">
523 <#list allOurEnergyCategories as category>
524 <div class="category-container">
525 <div data-category="${category.title}" class="our-energy-category paragraph-micro-regular <#if category?is_first>category-active</#if>">
526 ${category.titleLocale}
527 </div>
528 </div>
529 </#list>
530 </div>
531 </div>
532
533 <style>
534 .${rootCss} .categories-container {
535 display: flex;
536 align-items: center;
537 align-content: center;
538 gap: var(--space-sm, 16px);
539 align-self: stretch;
540 flex-wrap: wrap;
541 }
542
543 .${rootCss} .categories-container .categories-text {
544 color: var(--text-secondary-default, #525252);
545 }
546
547 body.high-contrast-active .${rootCss} .categories-container .categories-text {
548 color: #F8F8F8;
549 }
550
551 .${rootCss} .categories-container .categories-list {
552 display: flex;
553 min-width: 256px;
554 max-width: 680px;
555 align-items: center;
556 align-content: center;
557 gap: var(--space-sm, 16px);
558 flex-wrap: wrap;
559 }
560
561
562 .${rootCss} .categories-container .categories-list .our-energy-category {
563 display: flex;
564 padding: var(--space-micro, 2px) var(--space-xs, 12px);
565 justify-content: center;
566 align-items: center;
567 border-radius: var(--border-radius-pill);
568 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);
569 line-height: var(--line-height-lg);
570 cursor: pointer;
571 color: var(--text-primary-accent, #008542);
572 }
573
574 .${rootCss} .categories-container .categories-list .category-container {
575 padding: var(--size-nano);
576 border-radius: var(--border-radius-pill);
577 border: var(--border-width-hairline) solid transparent;
578 }
579
580 .${rootCss} .categories-container .categories-list .category-container:has(.our-energy-category.category-active) {
581 border: var(--border-width-hairline) solid var(--border-color-accent, #008542);
582 }
583
584 body.high-contrast-active .${rootCss} .categories-container .categories-list .category-container:has(.our-energy-category.category-active) {
585 border: var(--border-width-hairline) solid rgba(228, 247, 232, 1);
586 }
587
588 @media screen and (max-width: 1024px) {
589 .${rootCss} .categories-container {
590 flex-wrap: nowrap;
591 width: 100%;
592 }
593
594 .${rootCss} .categories-container .categories-list {
595 flex-wrap: nowrap;
596 width: fit-content;
597 overflow: auto;
598 scrollbar-width: none;
599 scroll-snap-type: x mandatory;
600 padding-right: var(--space-lg);
601 }
602
603 .${rootCss} .categories-container .categories-list::-webkit-scrollbar {
604 display: none;
605 }
606
607 .${rootCss} .categories-container .categories-list .category-container {
608 scroll-snap-align: start;
609 }
610
611 .${rootCss} .categories-container .categories-list .category-container .our-energy-category {
612 white-space: nowrap;
613 scroll-snap-align: start;
614 }
615 }
616
617 </style>
618</#macro>
619
620<#macro renderCards cards>
621
622 <div class="card-news-list">
623 <#list allOurEnergyCategories as categoryOurEnergy>
624 <div class="${categoryOurEnergy.title} <#if categoryOurEnergy?is_first>category-active</#if>">
625 <#if categoryOurEnergy.title == "Todos">
626 <#assign filterCardsNews = cards />
627 <#if filterCardsNews?size gt numberOfCards>
628 <#assign filterCardsNews = filterCardsNews[0..numberOfCards-1] />
629 </#if>
630 <#list filterCardsNews as cardNews>
631 <#assign cardData = getDataForCard(cardNews) />
632 <@renderCard cardData/>
633 </#list>
634
635 <#else>
636 <#assign filterCardsNews = cards?filter(card -> (getDataForCard(card).ourEnergyCategory == categoryOurEnergy.title)) />
637
638 <#if filterCardsNews?size gt numberOfCards>
639 <#assign filterCardsNews = filterCardsNews[0..numberOfCards-1] />
640 </#if>
641
642 <#list filterCardsNews as cardNews>
643 <#assign cardData = getDataForCard(cardNews) />
644 <@renderCard cardData/>
645 </#list>
646 </#if>
647 </div>
648 </#list>
649 </div>
650
651 <style>
652 .${rootCss} .card-news-list {
653 display: flex;
654 }
655
656 .${rootCss} .card-news-list > div {
657 display: none;
658 flex-direction: column;
659 align-items: flex-start;
660 gap: var(--space-sm, 16px);
661 align-self: stretch;
662 }
663
664 .${rootCss} .card-news-list > div.category-active {
665 display: flex;
666 flex-direction: column;
667 align-items: flex-start;
668 gap: var(--space-sm, 16px);
669 align-self: stretch;
670 }
671 </style>
672
673
674</#macro>
675
676<#-- Renderizar Lista de cards -->
677<#if allAssets?has_content>
678 <div class="${rootCss}">
679 <@renderCategories />
680 <@renderCards allAssets />
681 </div>
682</#if>
683
684
685<style>
686
687 .portlet {
688 margin: 0;
689 }
690
691 .${rootCss} {
692 width: 100%;
693 font-family: var(--font-family-base, "Petrobras Sans");
694 display: flex;
695 flex-direction: column;
696 gap: var(--space-lg);
697 }
698
699</style>
700
701<#list allOurEnergyCategories as ourEnergyCategory>
702 <style>
703 .${rootCss} [data-category="${ourEnergyCategory.title}"] {
704 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;
705 box-shadow: 0px 2px 6px 0px #${ourEnergyCategory.shadowColor} !important;
706 color: #${ourEnergyCategory.textColor} !important;
707 }
708
709 body.high-contrast-active .${rootCss} [data-category="${ourEnergyCategory.title}"] {
710 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;
711 color: #${ourEnergyCategory.textColorHighContrast} !important;
712 }
713
714 </style>
715</#list>
716
717<script>
718
719 document.addEventListener('DOMContentLoaded', ()=>{
720 const root = document.querySelector(".${rootCss}");
721 const listCategoriesItens = root.querySelectorAll(".categories-list .category-container .our-energy-category");
722 const listOfCardsByCategory = [...root.querySelector(".card-news-list").children];
723
724 listCategoriesItens.forEach((category, index)=>{
725 category.addEventListener("click", ()=>{
726
727 const categoryActive = root.querySelector(".categories-list .category-active");
728 const listOfCardsActive = root.querySelector(".card-news-list .category-active");
729
730 categoryActive.classList.remove("category-active");
731 listOfCardsActive.classList.remove("category-active");
732
733 category.classList.add("category-active");
734 listOfCardsByCategory[index].classList.add("category-active");
735 });
736 });
737 });
738
739
740function setLinks${contentNumber}() {
741
742 const allCategoryCards = document.querySelectorAll(".${rootCss} .card-news-container");
743 allCategoryCards.forEach((card) => {
744 card.addEventListener('click', (event) => {
745 const element = event.target;
746 console.log(element);
747 element.querySelector('a').click();
748 });
749 })
750
751 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
752
753}
754
755setLinks${contentNumber}()
756
757
758</script>
Últimas Notícias
Acompanhe como estamos nos preparando para o futuro de baixo carbono, conectados a um mundo em transformação.
Mais lidos
Sustentabilidade
5 autores negros que você precisa conhecer
Artigo
5 min
Sustentabilidade
Como cuidamos das florestas que nos abrigam
Artigo
6 min
Nossas Atividades
Nossa jornada começa na Bahia, vem conferir! | Mochileiras
Artigo
3 min
Sustentabilidade
O (en)canto que vem do oceano
Artigo
5 min
Inovação
10 filmes sobre tecnologia e inovação
Artigo
3 min
Transição Energética
Conheça a primeira gasolina carbono neutro do país
Artigo
6 min
Nossas Atividades
De onde vem a gasolina?
Artigo
3 min
Nossas Atividades
Pré-sal: 15 anos de uma conquista que fez história
Artigo
4 min
Podcast Nossa Energia - Transição Energética, Inovação e muito mais!
X
X
X
X
Mochileiras - viaje
X
X
X
X
Veja Mais
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: