Transição energética justa e transição energética: entenda a diferença
10 min
Página inicial Nossa Energia Nossa Energia
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
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
ASSINE NOSSA NEWSLETTER NO LINKEDIN
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 
Podcast Nossa Energia
Veja Mais
Transição Energética
Transição energética justa e transição energética: entenda a diferença
Infográfico
10 min
Sustentabilidade
Time Petrobras em Paris: veja recordes e medalhas nas Olimpíadas 2024
Infográfico
10 min
Transição Energética
Programa de captura de carbono (CCUS) da Petrobras é o maior do mundo em volume
Artigo
3 min
Nossas Atividades
Derivados de Petróleo e petroquímicos: veja os produtos
Artigo
6 min
Inovação
25 anos de “Matrix” e os desafios da tecnologia
Artigo
5 min
Sustentabilidade
6 curiosidades sobre a Amazônia que você precisa conhecer
Artigo
5 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: