Página inicial Nossa Energia Nossa Energia
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Um erro ocorreu enquanto processava o modelo.
The following has evaluated to null or missing:
==> assetVocabularyService.fetchGroupVocabulary(groupId, vocabularyName) [in template "20099#20135#10700480" at line 1505, column 31]
----
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 tagsVocabulary = assetVocabul... [in template "20099#20135#10700480" in function "getCategoriesNamesAndIds" at line 1505, column 5]
---- 1<#-- Conteúdo Web -> Templates: Site de Crise - Include de templates--> 2<#-- include "${templatesPath}/1975602" --> 3 4<#-- Conteúdo Web -> Templates: Site de Crise - Funções gerais--> 5<#include "${templatesPath}/1975398" /> 6 7<#-- Conteúdo Web -> Templates: Busca pelas imagens do tipo de noticia --> 8<#include "${templatesPath}/18598756" /> 9 10<#assign POST_TYPES_CATEGORIES = getPostTypeImages()!default([]) /> 11 12<#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Extrair dados de Notícias --> 13<#--include "${templatesPath}/7762031" --> 14 15<#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Título --> 16<#-- include "${templatesPath}/7761976" --> 17 18<#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Redes sociais e data de publicação --> 19<#--include "${templatesPath}/7762069" --> 20 21<#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Áudios do conteúdo da notícia --> 22<#-- include "${templatesPath}/7761972" --> 23<#function getNodesByLabel fieldList parentNode label> 24 <#assign result = []/> 25 <#attempt> 26 <#assign groupId = getIdFromFieldName(fieldList, label) /> 27 <#assign xSeletorCaminho = saxReaderUtil.createXPath("dynamic-element[@name='${groupId}' ]") /> 28 <#assign result = xSeletorCaminho.selectNodes(parentNode) /> 29 <#return result /> 30 <#recover> 31 <#return result /> 32 </#attempt> 33</#function> 34 35<#function findVocabulary vocabularyName vocabularies> 36 <#assign vocabularyNameLowerCase = vocabularyName?lower_case> 37 <#list vocabularies as vocabulary> 38 <#if vocabulary.name?lower_case == vocabularyNameLowerCase> 39 <#return vocabulary> 40 </#if> 41 </#list> 42 <#return {}> 43</#function> 44 45<#-- ############# Conteúdo Web -> Templates: Site de Crise - Include de templates #################################### --> 46<#function getSiteUrl> 47 <#assign portalUtil = staticUtil["com.liferay.portal.kernel.util.PortalUtil"]> 48 <#if layout?? && layout?has_content> 49 <#return portalUtil.getLayoutFriendlyURL(layout, themeDisplay)?replace(layout.getFriendlyURL(), "")> 50 </#if> 51 <#return portalUtil.getLayoutFriendlyURL(layout, themeDisplay)> 52</#function> 53 54<#function getSiteName> 55 <#return layout.getGroup().getDescriptiveName(locale)> 56</#function> 57 58<#function mountUrlToPage targetPage> 59 <#assign baseUrl = getSiteUrl()> 60 <#assign trimmedUrl = baseUrl?replace("/w/", "/")> 61 <#assign trimmedUrl = trimmedUrl?substring(0, trimmedUrl?last_index_of("/"))> 62 <#return trimmedUrl + "/" + targetPage> 63</#function> 64<#-- ################################################################################################################## --> 65 66 67<#assign 68 journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") 69 assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService") 70 assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") 71 vocabularies = assetVocabularyService.getGroupVocabularies(groupId) 72 tagsLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetTagLocalService") 73 tagVocabulary = findVocabulary("Tag", vocabularies) 74 flagVocabulary = findVocabulary("Flag", vocabularies) 75 tagCategoryTitles = extractVocabularyTitles(tagVocabulary) 76 flagCategoryTitles = extractVocabularyTitles(flagVocabulary) 77 assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService") 78 fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] 79 layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") 80 PortalUtil = staticUtil["com.liferay.portal.kernel.util.PortalUtil"] 81 AssetEntryQueryService = objectUtil("com.liferay.asset.kernel.service.AssetEntryLocalServiceUtil").getService() 82 AssetEntryQuery = objectUtil('com.liferay.asset.kernel.service.persistence.AssetEntryQuery') 83/> 84 85<#-- Nome das midias adaptativas de imagem para desktop e mobile --> 86<#assign adaptativeMediaDesktopResolutionName = "Preview-1000x0" /> 87<#assign adaptativeMediaMobileResolutionName = "Thumbnail-300x300" /> 88 89<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies)/> 90<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/> 91 92<#assign newsJournalArticle = ""> 93<#assign assetEntry = getAssetEntryFromRequest(assetEntryLocalService)> 94<#if assetEntry?? && assetEntry?has_content> 95 <#assign newsJournalArticle = journalArticleLocalService.fetchLatestArticle(assetEntry.classPK)/> 96</#if> 97 98<#function getSingleNode name root> 99 <#attempt> 100 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']/dynamic-content[@language-id='${locale}']") /> 101 <#return xPathSelector.selectSingleNode( root ) /> 102 <#recover> 103 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") /> 104 <#return xPathSelector.selectSingleNode( root ) /> 105 </#attempt> 106</#function> 107 108<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article --> 109<#function getFirstCategoryOfVocabulary journalArticle vocabulary > 110 <#attempt> 111 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 112 <#list categories as category> 113 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 114 <#return category.getName()> 115 </#if> 116 </#list> 117 <#return ""> 118 119 <#recover> 120 <#return "" /> 121 </#attempt> 122</#function> 123 124<#function getFirstCategoryObjectOfVocabulary journalArticle vocabulary > 125 <#attempt> 126 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 127 <#list categories as category> 128 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 129 <#return category> 130 </#if> 131 </#list> 132 <#return ""> 133 134 <#recover> 135 <#return "" /> 136 </#attempt> 137</#function> 138 139<#-- Função para obter todas os ids das categorias associonadas a um Vocabulário o qual está associado a um Jornal Article --> 140<#function getAllCategoryIdOfVocabulary journalArticle vocabulary > 141 <#attempt> 142 <#assign categoriesIds = [] /> 143 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 144 <#list categories as category> 145 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 146 <#assign categoriesIds = categoriesIds + [category.getCategoryId()] /> 147 </#if> 148 </#list> 149 <#return categoriesIds> 150 151 <#recover> 152 <#return [] /> 153 </#attempt> 154</#function> 155 156<#if newsJournalArticle?? && newsJournalArticle?has_content> 157 158 <div class="breadcrumb-breakpoint breakpoint"> 159 <div class="breadcrumb-col col-2-11 md-col-1-8 sm-col-1-4"> 160 <#assign homeURL = "/" /> 161 162 <#if currentURL?contains('webserver')> 163 <#assign homeURL = "/web/nossa-energia" /> 164 </#if> 165 166 <a href="${homeURL}" class="breadcrumb-page text previous-page paragraph-micro-regular" tabindex="0"> 167 <span class="breadcrumb-text-truncate" original-text="Home">Home</span> 168 <div class="icon"></div> 169 </a> 170 171 <#assign currentUrl = getSiteUrl()> 172 173 <#assign lastIndex = currentUrl?last_index_of("/")> 174 <#assign urlWithoutLastSegment = currentUrl?substring(0, lastIndex+1)> 175 <#assign urlWithoutW = urlWithoutLastSegment?replace("/w/", "/")> 176 177 <#assign breadcrumbOurEnergyCategory = getFirstCategoryObjectOfVocabulary(assetEntry, ourEnergyVocabulary) /> 178 <#assign categoryURL = urlWithoutW/> 179 <a href="${categoryURL}" class="breadcrumb-page text previous-page paragraph-micro-regular" tabindex="0"> 180 <span class="breadcrumb-text-truncate" original-text="${breadcrumbOurEnergyCategory.getTitle(locale)}">${breadcrumbOurEnergyCategory.getTitle(locale)}</span> 181 <div class="icon"></div> 182 </a> 183 184 <span original-text="${newsJournalArticle.getTitle(locale)}" class="breadcrumb-page text active-page active paragraph-micro-bold">${newsJournalArticle.getTitle(locale)}</span> 185 </div> 186 </div> 187 188 <#-- add to head --> 189 <@liferay_util["html-top"]> 190 <script type="application/ld+json"> 191 { 192 "@context": "https://schema.org", 193 "@type": "BreadcrumbList", 194 "itemListElement": [ 195 { 196 "@type": "ListItem", 197 "position": 1, 198 "name": "Home", 199 "item": "${themeDisplay.getPortalURL() + homeURL}" 200 }, 201 { 202 "@type": "ListItem", 203 "position": 2, 204 "name": "${breadcrumbOurEnergyCategory.getTitle(locale)}", 205 "item": "${themeDisplay.getPortalURL() + categoryURL}" 206 }, 207 { 208 "@type": "ListItem", 209 "position": 3, 210 "name": "${newsJournalArticle.getTitle(locale)}", 211 "item": "${themeDisplay.getPortalURL() + portalUtil.getLayoutFriendlyURL(layout, themeDisplay)}" 212 } 213 ] 214 } 215 </script> 216 </@> 217 218 <div class="ptb-news__read-news"> 219 <div class="ptb-news__read-news-post "> 220 <div class="ptb-news__read-content"> 221 222 <#assign 223 ddmStructure = newsJournalArticle.getDDMStructure() 224 fieldList = getFieldListByStructure(ddmStructure) 225 xmlArticle = newsJournalArticle.getDocument().getRootElement() 226 > 227 228 <#assign 229 <#-- Título principal da notícia --> 230 mainHeadlineOfTheNews = newsJournalArticle.getTitle(locale, true) 231 <#-- Título de destaque da notícia --> 232 featuredNewsHeadline = extractFeaturedNewsHeadline(fieldList, xmlArticle) 233 <#-- Sumário da notícia --> 234 newsSummary = extractNewsSummary(fieldList, xmlArticle) 235 <#-- Data de publicação da notícia --> 236 lastPublishDate = extractPublishDate(newsJournalArticle) 237 <#-- Data de criação da notícia --> 238 createDate = newsJournalArticle.getCreateDate() 239 > 240 241 <#-- Flag da notícia ----------------------------------------------------------------------------------> 242 <#assign flag = getFirstCategoryTitle(newsJournalArticle, flagCategoryTitles, assetCategoryLocalService)> 243 244 <#-- Url amigável da notícia para visualização em DisplayPage -----------------------------------------> 245 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + newsJournalArticle.getUrlTitle()> 246 247 <#-- Conteúdo da notícia ------------------------------------------------------------------------------> 248 <#assign newsContent = getFieldValue(fieldList, xmlArticle, "Corpo da notícia")> 249 250 <#-- Início Vídeo do youtube no corpo da notícia --> 251 <#-- structuredContentId refente ao webcontent da display page --> 252 <#assign structuredContentId = newsJournalArticle.getResourcePrimKey()/> 253 254 <#assign ytVideoId = ""/> 255 <#assign ytVideoIdentificador = ""/> 256 <#assign ytVideoTitle = ""/> 257 <#assign ytVideoDescription = ""/> 258 <#assign ytVideoUploadDate = ""/> 259 <#assign ytVideoDuration = ""/> 260 261 <#assign videoSchemaMarkupList = []/> 262 263 <#-- Obtém os dados do webcontent via rest api --> 264 <#assign newsStructuredContent = restClient.get("/headless-delivery/v1.0/structured-contents/${structuredContentId}")/> 265 <#if newsStructuredContent?has_content && newsStructuredContent.contentFields??> 266 <#if newsStructuredContent.contentFields?size gt 0> 267 <#list newsStructuredContent.contentFields as field> 268 <#if field.label == "Gestão de vídeos do youtube"> 269 <#if field.nestedContentFields?size gt 0> 270 <#list field.nestedContentFields as ytVideoField> 271 <#if ytVideoField.label == "ID do vídeo do Youtube"> 272 <#assign ytVideoId = ytVideoField.contentFieldValue.data/> 273 </#if> 274 <#if ytVideoField.label == "Identificador do vídeo no corpo da notícia"> 275 <#assign ytVideoIdentificador = ytVideoField.contentFieldValue.data/> 276 </#if> 277 <#assign ytIframe = ' 278 <div class="yt-video-container" onclick="loadVideo(this, \'${ytVideoId}\')"> 279 <img class="yt-thumb-img" alt="Thumbnail do vídeo do youtube" src="https://img.youtube.com/vi/${ytVideoId}/hqdefault.jpg"/> 280 <div class="thumb-play-button"> 281 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 282 <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"/> 283 <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"/> 284 </svg> 285 </div> 286 </div> 287 '/> 288 <#assign newsContent = newsContent?replace("<p>#[${ytVideoIdentificador}]</p>", ytIframe) /> 289 290 <#if ytVideoField.label == "Título do vídeo"> 291 <#assign ytVideoTitle = ytVideoField.contentFieldValue.data/> 292 </#if> 293 <#if ytVideoField.label == "Descrição do vídeo"> 294 <#assign ytVideoDescription = ytVideoField.contentFieldValue.data/> 295 </#if> 296 <#if ytVideoField.label == "Data de publicação/upload do vídeo"> 297 <#assign ytVideoUploadDate = ytVideoField.contentFieldValue.data/> 298 </#if> 299 <#if ytVideoField.label == "Duração"> 300 <#assign ytVideoDuration = ytVideoField.contentFieldValue.data/> 301 </#if> 302 </#list> 303 <#assign videoSchemaMarkupList += [{ 304 "id": ytVideoId, 305 "name": ytVideoTitle, 306 "description": ytVideoDescription, 307 "uploadDate": (ytVideoUploadDate!)?has_content?then(ytVideoUploadDate?datetime("yyyy-MM-dd HH:mm")?string("yyyy-MM-dd'T'HH:mm:ssXXX"), ""), 308 "thumbnailUrl": "https://img.youtube.com/vi/${ytVideoId}/hqdefault.jpg", 309 "contentUrl": "https://www.youtube.com/watch?v=${ytVideoId}", 310 "embedUrl": "https://www.youtube.com/embed/${ytVideoId}", 311 "duration": ytVideoDuration 312 }] /> 313 </#if> 314 </#if> 315 </#list> 316 </#if> 317 </#if> 318 319 <script> 320 function loadVideo(container, ytVideoId) { 321 const iframe = document.createElement("iframe"); 322 iframe.src = "https://www.youtube.com/embed/" + ytVideoId + "?rel=0&modestbranding=1&showinfo=0&autoplay=1"; 323 iframe.frameBorder = "0"; 324 iframe.allow = "autoplay; encrypted-media"; 325 iframe.style = "position:absolute; top:0; left:0; width:100%; height:100%;"; 326 327 container.innerHTML = ""; // Remove imagem e botão 328 container.appendChild(iframe); // Insere o iframe 329 } 330 </script> 331 <style> 332 .yt-video-container { 333 position: relative; 334 padding-top: 56.25%; 335 overflow: hidden; 336 cursor: pointer; 337 border-radius: var(--border-radius-lg, 16px); 338 margin: var(--space-md, 24px) 0; 339 } 340 341 .yt-video-container img { 342 position: absolute; 343 top: 0px; 344 left: 0px; 345 object-fit: cover; 346 max-width: none !important; 347 max-height: none !important; 348 } 349 350 .yt-video-container .thumb-play-button { 351 position: absolute; 352 top: 50%; 353 left: 50%; 354 transform: translate(-50%, -50%); 355 border-radius: 50%; 356 } 357 </style> 358 <#-- Fim Vídeo do youtube no corpo da notícia --> 359 360 <#assign WEB_STORIES_FIELD_SET_FIELD_REF = "Fieldset91054335" /> 361 <#assign WEB_STORIES_IDENTIFICATION_FIELD_LABEL = "Identificador do Carousel" /> 362 <#assign WEB_STORIES_TITLE_FIELD_LABEL = "Título do carrossel" /> 363 364 <#assign webStoriesCarouselsIds = [] /> 365 <#assign webStoriesCarouselsTitles = [] /> 366 <#assign webStoriesCarouselsIdsFieldSetList = getNodes(WEB_STORIES_FIELD_SET_FIELD_REF, xmlArticle) /> 367 368 <#list webStoriesCarouselsIdsFieldSetList as webStoriesFieldSet> 369 <#assign webStoriesCarouselsIds = webStoriesCarouselsIds + [ getFieldValue(fieldList, webStoriesFieldSet, WEB_STORIES_IDENTIFICATION_FIELD_LABEL) ] /> 370 <#assign webStoriesCarouselsTitles = webStoriesCarouselsTitles + [ getFieldValue(fieldList, webStoriesFieldSet, WEB_STORIES_TITLE_FIELD_LABEL) ] /> 371 </#list> 372 373 <#assign wsCarouselContent = ' 374 <div id="[CAROUSEL_ID]" class="ws-carousel"> 375 <div class="ws-carousel-header"> 376 <h1 class="h2"> 377 [CAROUSEL_TITLE] 378 </h1> 379 <div class="nav-buttons"> 380 <svg class="nav-arrow left-arrow inactive" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 381 <path d="M1 16C1 7.16344 8.16344 0 17 0C25.8366 0 33 7.16344 33 16C33 24.8366 25.8366 32 17 32C8.16344 32 1 24.8366 1 16Z" stroke="#bababa"/> 382 <path d="M11.5 16H22.5M22.5 16L18 11.5M22.5 16L18 20.5" stroke="#bababa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 383 </svg> 384 <svg class="nav-arrow right-arrow active" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 385 <path d="M1 16C1 7.16344 8.16344 0 17 0C25.8366 0 33 7.16344 33 16C33 24.8366 25.8366 32 17 32C8.16344 32 1 24.8366 1 16Z" stroke="#008542"/> 386 <path d="M11.5 16H22.5M22.5 16L18 11.5M22.5 16L18 20.5" stroke="#008542" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 387 </svg> 388 </div> 389 </div> 390 <div class="ws-carousel-body"> 391 <div class="ws-container"> 392 </div> 393 </div> 394 </div>' /> 395 396 <#list webStoriesCarouselsIds as item > 397 <#assign carouselDiv = wsCarouselContent?replace("[CAROUSEL_ID]", item)?replace("[CAROUSEL_TITLE]", webStoriesCarouselsTitles[item?index]) /> 398 <#assign newsContent = newsContent?replace("<p>#[${item}]</p>", carouselDiv) /> 399 </#list> 400 401 402 <#assign WEB_STORIES_FIELD_SET_FIELD_REF = "Fieldset91054335" /> 403 <#assign WEB_STORIES_IDENTIFICATION_FIELD_LABEL = "Identificador do Carousel" /> 404 <#assign WEB_STORIES_TITLE_FIELD_LABEL = "Título do carrossel" /> 405 406 <#assign webStoriesCarouselsIds = [] /> 407 <#assign webStoriesCarouselsTitles = [] /> 408 <#assign webStoriesCarouselsIdsFieldSetList = getNodes(WEB_STORIES_FIELD_SET_FIELD_REF, xmlArticle) /> 409 410 <#list webStoriesCarouselsIdsFieldSetList as webStoriesFieldSet> 411 <#assign webStoriesCarouselsIds = webStoriesCarouselsIds + [ getFieldValue(fieldList, webStoriesFieldSet, WEB_STORIES_IDENTIFICATION_FIELD_LABEL) ] /> 412 <#assign webStoriesCarouselsTitles = webStoriesCarouselsTitles + [ getFieldValue(fieldList, webStoriesFieldSet, WEB_STORIES_TITLE_FIELD_LABEL) ] /> 413 </#list> 414 415 <#assign wsCarouselContent = ' 416 <div id="[CAROUSEL_ID]" class="ws-carousel"> 417 <div class="ws-carousel-header"> 418 <h1 class="h2"> 419 [CAROUSEL_TITLE] 420 </h1> 421 <div class="nav-buttons"> 422 <svg class="nav-arrow left-arrow inactive" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 423 <path d="M1 16C1 7.16344 8.16344 0 17 0C25.8366 0 33 7.16344 33 16C33 24.8366 25.8366 32 17 32C8.16344 32 1 24.8366 1 16Z" stroke="#bababa"/> 424 <path d="M11.5 16H22.5M22.5 16L18 11.5M22.5 16L18 20.5" stroke="#bababa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 425 </svg> 426 <svg class="nav-arrow right-arrow active" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 427 <path d="M1 16C1 7.16344 8.16344 0 17 0C25.8366 0 33 7.16344 33 16C33 24.8366 25.8366 32 17 32C8.16344 32 1 24.8366 1 16Z" stroke="#008542"/> 428 <path d="M11.5 16H22.5M22.5 16L18 11.5M22.5 16L18 20.5" stroke="#008542" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 429 </svg> 430 </div> 431 </div> 432 <div class="ws-carousel-body"> 433 <div class="ws-container"> 434 </div> 435 </div> 436 </div>' /> 437 438 <#list webStoriesCarouselsIds as item > 439 <#assign carouselDiv = wsCarouselContent?replace("[CAROUSEL_ID]", item)?replace("[CAROUSEL_TITLE]", webStoriesCarouselsTitles[item?index]) /> 440 <#assign newsContent = newsContent?replace("<p>#[${item}]</p>", carouselDiv) /> 441 </#list> 442 443 444 <#-- Seção do áudio para o conteúdo da notícia --------------------------------------------------------> 445 <#assign audios = [] 446 audioIdentifierFieldSetList = getNodes("Fieldset65862311", xmlArticle) 447 > 448 <#list audioIdentifierFieldSetList as audioIdentifierFieldSet> 449 <#assign 450 <#-- Grupo com as informações de url e legenda do áudio --> 451 audioInfoFieldSet = getGroupNode("Fieldset24035689",audioIdentifierFieldSet)> 452 <#assign 453 externalAudioUrl = getFieldValue(fieldList, audioInfoFieldSet, "URL externa do áudio") 454 internalAudioUrl = getFileFromXML("DocumentLibrary24170668", audioInfoFieldSet, fileEntryService) 455 audioLegend = getFieldValue(fieldList, audioInfoFieldSet, "Legenda do áudio")> 456 457 <#if externalAudioUrl?has_content || internalAudioUrl.url?has_content > 458 <#assign audios += [{ 459 "id": getFieldValue(fieldList, audioIdentifierFieldSet, "Identificador de Áudio"), 460 "externalUrl" : externalAudioUrl, 461 "internalUrl" : internalAudioUrl, 462 "legend" : audioLegend 463 }]> 464 </#if> 465 </#list> 466 467 468 <#-- Seção de vídeo para o conteúdo da notícia --------------------------------------------------------> 469 <#assign videos = [] 470 videoIdentifierFieldSetList = getNodes("Fieldset24460782", xmlArticle) 471 > 472 <#list videoIdentifierFieldSetList as videoIdentifierFieldSet> 473 <#assign 474 <#-- Grupo com as informações de url e legenda do áudio --> 475 videoInfoFieldSet = getGroupNode("Fieldset51040010",videoIdentifierFieldSet) 476 477 videos += [{ 478 "id": getFieldValue(fieldList,videoIdentifierFieldSet, "Identificador de Vídeo"), 479 "youtubeID" : getFieldValue(fieldList, videoInfoFieldSet, "ID do vídeo do YouTube"), 480 "internalUrl" : getFileFromXML("DocumentLibrary15265409", videoInfoFieldSet, fileEntryService), 481 "legend" : getFieldValue(fieldList, videoInfoFieldSet, "Legenda do vídeo") 482 }] 483 > 484 </#list> 485 486 487 <#-- Seção de links para o conteúdo da notícia --------------------------------------------------------> 488 <#assign 489 links = [] 490 linksFieldSetList = getNodes("Fieldset37770113", xmlArticle) 491 > 492 <#list linksFieldSetList as linksFieldSet> 493 <#assign linkFieldSetList = getNodes("Fieldset10524367", linksFieldSet)> 494 495 <#list linkFieldSetList as linkFieldSet> 496 <#assign 497 linkId = getFieldValue(fieldList, linkFieldSet, "Identificador do link") 498 499 <#-- Grupo com as informações de url e legenda do áudio --> 500 linkInfoFieldSeet = getGroupNode("Fieldset86037074", linkFieldSet) 501 502 iconType = getFieldValue(fieldList, linkInfoFieldSeet, "Ícone do link") 503 links += [{ 504 "id": linkId, 505 "externalLink" : getFieldValue(fieldList, linkInfoFieldSeet, "Link externo"), 506 "pageLink" : getPageLayoutLinkFromXML("LinkToLayout77941175", linkInfoFieldSeet, layoutLocalService), 507 "file" : getFileFromXML("DocumentLibrary34820760", linkInfoFieldSeet, fileEntryService), 508 "title" : getFieldValue(fieldList, linkInfoFieldSeet, "Título do link"), 509 "iconType" : iconType 510 }] 511 > 512 </#list> 513 </#list> 514 515 516 517 <#assign galleryItems = []/> 518 519 <#assign mediaGroupList = getNodes(getIdFromFieldName(fieldList, "Galeria de multimídia"), xmlArticle) /> 520 521 <#list mediaGroupList as mediaGroup > 522 <#assign nodes = getNodes(getIdFromFieldName(fieldList, "Imagem da Galeria") , mediaGroup) /> 523 <#list nodes as node> 524 <#assign image = getMediaInfo(fieldList, node, "Imagem", fileEntryService) /> 525 <#if image?? && image?has_content && image.url?has_content> 526 <#assign galleryItems += [{"image": image}] /> 527 </#if> 528 </#list> 529 </#list> 530 531 <#-- Seção de Quotes para o conteúdo da notícia --------------------------------------------------------> 532 <#-- Seção de Quotes para o conteúdo da notícia --------------------------------------------------------> 533 <#assign quotes = [] /> 534 <#assign quotesRootFieldSetList = getNodes(getIdFromFieldName(fieldList, "Quotes da notícia"), xmlArticle) /> 535 <#list quotesRootFieldSetList as quotesFieldSetList> 536 <#assign quoteFieldSetList = getNodes(getIdFromFieldName(fieldList, "Quote"), quotesFieldSetList) /> 537 <#list quoteFieldSetList as quoteFieldSet> 538 <#assign imageJsonString = getSingleNodeString("Image94530628", quoteFieldSet) /> 539 <#assign imageJson = {"url": "", "alt": "", "fileEntryId" : "", "title" : ""} /> 540 <#attempt> 541 <#if imageJsonString ?? && imageJsonString?has_content> 542 <#assign imageJson = jsonFactoryUtil.createJSONObject(imageJsonString) /> 543 </#if> 544 545 <#if !imageJson.url?? || !imageJson.url?has_content> 546 <#assign imageJson = {"url": "", "alt": "", "fileEntryId" : "", "title" : ""} /> 547 </#if> 548 <#recover> 549 </#attempt> 550 551 <#if !imageJson.url?? || !imageJson.url?has_content> 552 <#assign imageJson = {"url": "", "alt": "", "fileEntryId" : "", "title" : ""} /> 553 </#if> 554 555 <#assign quotes += [{ 556 "id": getFieldValue(fieldList, quoteFieldSet, "Identificador do Quote"), 557 "content" : getFieldValue(fieldList, quoteFieldSet, "Texto do Quote"), 558 "author" : getFieldValue(fieldList, quoteFieldSet, "Nome do autor"), 559 "image" : {"url": imageJson.url, "alt": imageJson.alt, "fileEntryId" : imageJson.fileEntryId, "title" : imageJson.title} 560 }] /> 561 </#list> 562 </#list> 563 564 <#assign newsInfo = { 565 "mainHeadlineOfTheNews": mainHeadlineOfTheNews, 566 "featuredNewsHeadline" : featuredNewsHeadline, 567 "displayDate" : formatDate(createDate), 568 "createDate": createDate, 569 "newsSummary" : newsSummary, 570 "newsMedia": extractNewsMedia(fieldList, xmlArticle, fileEntryService), 571 "lastPublishDate": lastPublishDate, 572 "flag": flag, 573 "url": newsJournalArticleFriendlyUrl, 574 "newsContent": newsContent, 575 "audios": audios, 576 "videos": videos, 577 "galleryItems": galleryItems, 578 "links": links, 579 "quotes": quotes 580 }/> 581 582 <#-- Renderizar o título principal da notícia --> 583 <#-- Conteúdo-> Conteúdo Web -> Templates: Site de Crise - Notícia - Título --> 584 <@renderHeadLine newsInfo/> 585 586 <#-- Renderizar o resumo da notícia --> 587 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Resumo --> 588 <@renderReview newsInfo/> 589 590 <#-- Renderizar a data de publicação/edição da notícia e redes sociais --> 591 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Redes sociais e data de publicação --> 592 <@renderPublishAndSocialMediasInfos newsJournalArticle newsInfo/> 593 594 <#-- Renderizar as tags da notícia --> 595 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Render Tags --> 596 <#assign categoriesAsssetEntryResponse = restClient.get("/headless-delivery/v1.0/structured-contents/${assetEntry.getClassPK()}?nestedFields=embeddedTaxonomyCategory&fields=taxonomyCategoryBriefs") /> 597 598 <#if categoriesAsssetEntryResponse?? && categoriesAsssetEntryResponse?has_content && categoriesAsssetEntryResponse.taxonomyCategoryBriefs??> 599 <#assign tagCategoryList = getCategoriesNamesAndIds("Tags", categoriesAsssetEntryResponse.taxonomyCategoryBriefs) /> 600 <#assign removeStartParameterWhenTagIsClicked = true /> 601 <#assign includeRequestParams = false /> 602 <#assign NEWS_PAGE_NAME= "categorias"/> 603 </#if> 604 605 606 <#-- Renderizar a imagem de destaque da notícia --> 607 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Imagem de destaque --> 608 <#assign typeOfNews = getFirstCategoryOfVocabulary(assetEntry, typeOfNewsVocabulary) /> 609 610 <#if !typeOfNews?? || !typeOfNews?has_content || typeOfNews != "Infográfico" > 611 <@renderNewsFeaturedMedia newsInfo /> 612 </#if> 613 614 <#-- Renderizar o conteúdo da notícia --> 615 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Conteúdo da notícia --> 616 <@renderNewsContent newsInfo/> 617 618 <#-- Renderizar o conteúdo da notícia--> 619 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Conteúdo da notícia --> 620 621 <#-- Renderizar o conteúdo da notícia--> 622 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Conteúdo da notícia --> 623 624 <#-- Renderiza botoes de compartilhamento na versao mobile --> 625 <div class="render-share-news-container publish_and_social_medias_infos_desk mobile"> 626 <@renderShareAndCopyNews/> 627 </div> 628 629 <#-- Renderizar links da notícia --> 630 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Links do conteúdo da notícia --> 631 <@renderLinks newsInfo /> 632 633 <@renderCite /> 634 635 <#-- Renderizar áudios da notícia --> 636 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Áudios do conteúdo da notícia --> 637 638 <#-- Renderizar galeria de imagens notícia --> 639 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Render galeria --> 640 <@renderGallery newsInfo /> 641 642 <#-- Renderizar quotes da notícia --> 643 <@renderQuotes newsInfo /> 644 </div> 645 </div> 646 </div> 647<#else > 648 <div class="ptb-news__read-news paragraph-sm-regular"> 649 <p> <#if locale == "pt_BR"> Nenhuma notícia <#else> There are no news </#if></p> 650 </div> 651 652 <style> 653 .ptb-news__read-news p { 654 color: #515867; 655 } 656 657 body.high-contrast-active .ptb-news__read-news p { 658 color: var(--color-neutral-100); 659 } 660 </style> 661</#if> 662 663<style> 664 .breadcrumb-breakpoint { 665 padding-top: var(--space-xxl); 666 padding-bottom: var(--space-xl); 667 } 668 669 body.high-contrast-active .breadcrumb-breakpoint { 670 background: var(--background-surface-level-01, #010101); 671 } 672 673 .breadcrumb-breakpoint .breadcrumb-col { 674 display: flex; 675 width: max-content; 676 gap: var(--space-xxs); 677 height: fit-content; 678 overflow-x: hidden; 679 } 680 681 .breadcrumb-breakpoint #liferay-breadcrumb { 682 display: none; 683 } 684 685 .breadcrumb-breakpoint .breadcrumb-page { 686 display: flex; 687 gap: var(--space-micro); 688 height: var(--size-md); 689 size: var(--size-md); 690 border: 1px solid rgba(0, 0, 0, 0); 691 box-sizing: border-box; 692 border-radius: var(--border-radius-sm); 693 } 694 695 .breadcrumb-breakpoint a.breadcrumb-page.text span, 696 .breadcrumb-breakpoint span.breadcrumb-page.text { 697 white-space: nowrap; 698 } 699 700 .breadcrumb-breakpoint .breadcrumb-page a:focus { 701 outline: none; 702 } 703 704 .breadcrumb-breakpoint .breadcrumb-page.active-page { 705 color: var(--color-text-primary-default); 706 background-color: var(--color-background-default-level-02); 707 border-radius: var(--border-radius-sm); 708 } 709 710 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.active-page { 711 background: var(--background-surface-level-02, #373737); 712 color: var(--text-primary-default, #FFF); 713 } 714 715 .breadcrumb-breakpoint .breadcrumb-page.previous-page { 716 transition: 300ms ease-in-out; 717 } 718 719 .breadcrumb-breakpoint .breadcrumb-page.previous-page.text { 720 text-decoration: var(--text-decoration-none); 721 color: var(--color-text-primary-default); 722 text-transform: capitalize; 723 padding-left: var(--space-xxs); 724 padding-right: var(--space-xxs); 725 } 726 727 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.previous-page.text { 728 color: var(--text-primary-default, #FFF); 729 } 730 731 .breadcrumb-breakpoint .breadcrumb-page.active-page.text { 732 color: var(--color-text-primary-default); 733 text-decoration: var(--text-decoration-none); 734 background-color: var(--color-background-default-level-02); 735 text-transform: capitalize; 736 padding-left: var(--space-xxs); 737 padding-right: var(--space-xxs); 738 } 739 740 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.previous-page.text { 741 color: var(--text-primary-default, #FFF); 742 } 743 744 .breadcrumb-breakpoint .breadcrumb-page.previous-page:not(.three-dots):hover { 745 background-color: var(--color-background-default-level-01); 746 border-color: var(--border-color-dark); 747 border-radius: var(--border-radius-sm); 748 border: 1px solid; 749 transition: all 300ms ease-in-out; 750 } 751 752 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.previous-page:not(.three-dots):hover { 753 background-color: transparent; 754 } 755 756 .breadcrumb-breakpoint .breadcrumb-page:focus-visible { 757 margin: var(--space-micro); 758 border-radius: var(--space-micro); 759 outline: none; 760 border: 1px solid var(--color-primary-medium); 761 box-sizing: border-box; 762 transition: 300ms ease-in-out; 763 } 764 765 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page:focus-visible { 766 border: 1px solid rgba(228, 247, 232, 1); 767 } 768 769 .breadcrumb-breakpoint .breadcrumb-page .icon { 770 width: var(--size-xxs); 771 height: var(--size-xxs); 772 border-color: var(--border-color-darkest); 773 background-image: url('data:image/svg+xml,%3Csvg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 2.25L8.25 6L4.5 9.75" stroke="%23525252" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); 774 background-size: cover; 775 margin-top: auto; 776 margin-bottom: auto; 777 } 778 779 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page .icon { 780 background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 2.25L8.25 6L4.5 9.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>'); 781 } 782 783 .ptb-news__read-news { 784 overflow: hidden; 785 } 786 787 body.high-contrast-active .ptb-news__read-news { 788 background: var(--background-surface-level-01, #010101); 789 } 790</style> 791 792 793<#-- ############# Site de Crise - Notícia - Redes sociais e data de publicação ####################################### --> 794<#-- 795Add elements from the sidebar to define your template. Type "${" to use the 796autocomplete feature. 797--> 798 799<#function normalizeRichText richText> 800 <#return richText 801 ?replace('&[a-z]+;', ' ', 'r') <#-- Remove entidades HTML --> 802 ?replace('<[^>]+>', '', 'r') <#-- Remove tags HTML --> 803 ?replace('[\n\r]+', ' ', 'r') <#-- Normaliza quebras de linha --> 804 ?replace('[“”‘’]', '"', 'r') <#-- Escapa espas curvas --> 805 ?replace('\\\\', '\\\\', 'r') <#-- Escapa barras invertidas --> 806 ?trim <#-- Remove espaços no ínicio/fim --> 807 ?json_string <#-- Escapa o rstante da string para um JSON válido --> 808 > 809</#function> 810 811<#macro addSchemaMarkup newsInfo> 812 <#assign image = ""/> 813 <#assign datePublished = newsInfo.createDate?string('yyyy-MM-ddHH:mm:ss-03:00')/> 814 <#assign datePublishedISOFormat = datePublished?substring(0, 10) + "T" + datePublished?substring(10)/> 815 <#assign dateModified = newsInfo.lastPublishDate?string('yyyy-MM-ddHH:mm:ss-03:00')/> 816 <#assign dateModifiedISOFormat = dateModified?substring(0, 10) + "T" + dateModified?substring(10)/> 817 818 <#if newsInfo.newsMedia.imageSrc?? && newsInfo.newsMedia.imageSrc?has_content> 819 <#assign image = "${themeDisplay.getPortalURL()}/o/adaptive-media/image/${newsInfo.newsMedia.fileEntryId}/Thumbnail-300x300/image"/> 820 <#else> 821 <#if newsInfo.newsMedia.videoYotubeID?? && newsInfo.newsMedia.videoYotubeID?has_content> 822 <#assign image = "https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg"/> 823 </#if> 824 </#if> 825 826 <#-- Busca informações do cadastro Organization do institucional do ambiente de produção--> 827 <#-- 35467409 é o id da estrutura de webcontent "Dados Estruturados - Organização" --> 828 <#assign organizationName = "" /> 829 <#assign logoImgSrc = "" /> 830 831 <#assign structuredContents = restClient.get("/headless-delivery/v1.0/content-structures/35467409/structured-contents")/> 832 <#if structuredContents?has_content && structuredContents.items?has_content> 833 <#assign structuredContentData = structuredContents.items[0]/> 834 <#if structuredContentData?has_content && structuredContentData.contentFields?has_content> 835 <#list structuredContentData.contentFields as item> 836 <#if item.label == "Nome legal da organização"> 837 <#assign organizationName = item.contentFieldValue.data!""> 838 </#if> 839 <#if item.label == "Logotipo" && item.contentFieldValue?has_content && item.contentFieldValue.image??> 840 <#assign logoImgSrc = themeDisplay.getURLPortal() + item.contentFieldValue.image.contentUrl!""> 841 </#if> 842 </#list> 843 </#if> 844 </#if> 845 846 <#-- add to head --> 847 <@liferay_util["html-top"]> 848 <script type="application/ld+json"> 849 { 850 "@context": "https://schema.org", 851 "@type": "BlogPosting", 852 "headline": "${normalizeRichText(newsInfo.mainHeadlineOfTheNews)}", 853 "alternativeHeadline": "${normalizeRichText(newsInfo.featuredNewsHeadline)}", 854 "image": "${image}", 855 "author": { 856 "@type": "Person", 857 "name": "Petrobras", 858 "url": "${themeDisplay.getPortalURL()}/autor" 859 }, 860 "publisher": { 861 "@type": "Organization", 862 "name": "${organizationName}", 863 "logo": { 864 "@type": "ImageObject", 865 "url": "${logoImgSrc}" 866 } 867 }, 868 "datePublished": "${datePublishedISOFormat}", 869 "dateModified": "${dateModifiedISOFormat}", 870 "mainEntityOfPage": "${newsInfo.url}", 871 "description": "${normalizeRichText(newsInfo.newsSummary)}", 872 "keywords": [<#list tagCategoryList as tag>"${tag[0]}"<#sep>, </#list>], 873 "articleBody": "${normalizeRichText(newsInfo.newsContent)}" 874 } 875 </script> 876 877 <#list videoSchemaMarkupList as videoInfo> 878 <#if videoInfo.id?has_content> 879 <script type="application/ld+json"> 880 { 881 "@context": "https://schema.org", 882 "@type": "VideoObject", 883 "name": "${normalizeRichText(videoInfo.name)}", 884 "description": "${normalizeRichText(videoInfo.description)}", 885 "uploadDate": "${videoInfo.uploadDate}", 886 "thumbnailUrl": "${videoInfo.thumbnailUrl}", 887 "contentUrl": "${videoInfo.contentUrl}", 888 "embedUrl": "${videoInfo.embedUrl}", 889 "duration": "${videoInfo.duration}", 890 "publisher": { 891 "@type": "Organization", 892 "name": "Petrobras", 893 "logo": { 894 "@type": "ImageObject", 895 "url": "${logoImgSrc}" 896 } 897 } 898 } 899 </script> 900 </#if> 901 </#list> 902 </@> 903</#macro> 904 905<@addSchemaMarkup newsInfo/> 906 907<#macro renderHeadLine newsInfo> 908 909 <div class="main-headline-container breakpoint"> 910 <div class="main-headline-container-col col-2-11 md-col-1-8 sm-col-1-4"> 911 <h1 class="main-headline display-sm">${newsInfo.featuredNewsHeadline}</h1> 912 <div class="bar"></div> 913 </div> 914 </div> 915 916 <style> 917 .ptb-news__read-news .main-headline-container .main-headline-container-col { 918 display: flex; 919 flex-direction: column; 920 gap: var(--space-sm); 921 padding-bottom: var(--space-lg); 922 } 923 924 .ptb-news__read-news .main-headline-container .main-headline-container-col * { 925 margin: 0; 926 padding: 0; 927 } 928 929 .ptb-news__read-news .main-headline-container .main-headline { 930 font-family: var(--font-family-base); 931 color: var(--color-neutral-800); 932 } 933 934 body.high-contrast-active .ptb-news__read-news .main-headline-container .main-headline { 935 color: var(--text-primary-default, var(--color-neutral-100)); 936 } 937 938 .ptb-news__read-news .main-headline-container .bar { 939 width: 32px; 940 height: var(--size-micro); 941 background: var(--color-secondary-medium); 942 } 943 944 body.high-contrast-active .ptb-news__read-news .main-headline-container .bar{ 945 background: var(--text-secondary-accent, #FFEEB3); 946 } 947 948 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 949 .ptb-news__read-news .main-headline-container .main-headline-container-col { 950 gap: var(--space-xs, 12px); 951 } 952 } 953 </style> 954</#macro> 955<#-- ################################################################################################################## --> 956 957<#-- ############# Site de Crise - Notícia - Redes sociais e data de publicação ####################################### --> 958<#macro renderReview newsInfo> 959 <#assign summaryCssRoot = "summary-container" /> 960 961 <div class="${summaryCssRoot}-breakpoint breakpoint"> 962 <div class="${summaryCssRoot} col-2-11 md-col-1-8 sm-col-1-4"> 963 <p class="summary paragraph-lg-regular"> 964 ${newsInfo.newsSummary} 965 </p> 966 </div> 967 968 </div> 969 970 <style> 971 .${summaryCssRoot} .summary { 972 padding-bottom: var(--space-lg); 973 } 974 975 .${summaryCssRoot} .summary, 976 .${summaryCssRoot} .summary * { 977 color: var(--color-neutral-800, #373737); 978 font-family: var(--font-family-base); 979 font-style: var(--font-style-italic); 980 margin: var(--space-none); 981 } 982 983 body.high-contrast-active .summary, 984 body.high-contrast-active .summary * { 985 color: var(--text-secondary-default, #F8F8F8); 986 } 987 </style> 988</#macro> 989<#-- ################################################################################################################## --> 990 991<#-- ############# Site de Crise - Notícia - Redes sociais e data de publicação ####################################### --> 992<#macro renderPublishAndSocialMediasInfos journalArticle newsInfo> 993 994 <div class="publish_and_social_medias_infos_desk-breakpoint breakpoint"> 995 <div class="publish_and_social_medias_infos_desk col-2-11 md-col-1-8 sm-col-1-4"> 996 <div class="publish_and_update_date"> 997 <#assign lastPublishDate = journalArticle.getModifiedDate()> 998 <#assign createDate = journalArticle.getCreateDate()> 999 <#if journalArticle.getLastPublishDate()??> 1000 <#assign lastPublishDate = journalArticle.getLastPublishDate()> 1001 </#if> 1002 1003 <#if locale == "pt_BR"> 1004 <p class="updated">Atualizado em ${formatDate(lastPublishDate)}</p> 1005 <p class="published">Postado em ${formatDate(createDate)}</p> 1006 <#else > 1007 <p class="updated">Updated on ${formatDate(lastPublishDate)}</p> 1008 <p class="published">Posted on ${formatDate(createDate)}</p> 1009 </#if> 1010 </div> 1011 <div class="render-share-news-container desktop"> 1012 <@renderShareAndCopyNews/> 1013 </div> 1014 </div> 1015 </div> 1016 1017 <style> 1018 .ptb-news__read-news .hidden { 1019 display: none; 1020 } 1021 /*Data de publicação e redes sociais */ 1022 1023 /* Desktop */ 1024 .ptb-news__read-news .publish_and_social_medias_infos_desk { 1025 position: relative; 1026 display: grid; 1027 grid-template-columns: auto 1fr auto; 1028 } 1029 1030 .ptb-news__read-news .render-share-news-container.mobile { 1031 display: none; 1032 } 1033 1034 .ptb-news__read-news .publish_and_social_medias_infos_desk * { 1035 padding: var(--space-none, 0); 1036 margin: var(--space-none, 0); 1037 font-family: var(--font-family-base); 1038 font-style: var(--font-style-normal, normal); 1039 font-weight: var(--font-weight-regular, 400); 1040 font-size: var(--font-size-xxs, 16px); 1041 line-height: var(--line-height-xl, 160%); 1042 color: var(--color-neutral-800, #373737); 1043 } 1044 1045 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk * { 1046 color: var(--text-secondary-default, #F8F8F8); 1047 } 1048 1049 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk a svg path, 1050 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .mobile-share svg path { 1051 stroke: var(--color-neutral-500, #D7D7D7); 1052 fill: rgba(255, 255, 255, 0.32); 1053 } 1054 1055 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk a svg circle, 1056 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .mobile-share svg circle { 1057 fill: rgba(255, 255, 255, 0.32); 1058 } 1059 1060 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date { 1061 display: flex; 1062 align-items: center; 1063 gap: var(--space-sm, 16px); 1064 } 1065 1066 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .updated { 1067 font-weight: var(--font-weight-bold, 700); 1068 font-size: var(--font-size-xxxs, 14px); 1069 } 1070 1071 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .updated { 1072 color: var(--text-primary-default, var(--color-neutral-100)); 1073 } 1074 1075 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .published { 1076 font-weight: var(--font-weight-normal, 400); 1077 font-size: var(--font-size-xxxs, 14px); 1078 } 1079 1080 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container { 1081 display: flex; 1082 width: 100%; 1083 justify-content: flex-end; 1084 align-items: center; 1085 gap: var(--space-sm, 16px); 1086 } 1087 1088 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .social-media-share { 1089 position: relative; 1090 } 1091 1092 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .social-media-share span { 1093 position: absolute; 1094 width: 100%; 1095 height: 100%; 1096 opacity: 0; 1097 overflow: hidden; 1098 pointer-events: none; 1099 } 1100 1101 .ptb-news__read-news .social-media-share { 1102 width: 36px; 1103 height: 36px; 1104 border-radius: 50%; 1105 display: flex; 1106 align-items: center; 1107 justify-content: center; 1108 background-color: transparent; 1109 transition: background-color 0.3s ease; 1110 } 1111 1112 /* Hover dos ícones de redes sociais no modo alto contraste */ 1113 body.high-contrast-active .ptb-news__read-news .social-media-share:hover { 1114 background-color: #000000 !important; 1115 } 1116 1117 /* Corrige stroke e fill dos ícones ao passar o mouse (hover) */ 1118 body.high-contrast-active .ptb-news__read-news .social-media-share:hover svg path, 1119 body.high-contrast-active .ptb-news__read-news .social-media-share:hover svg circle, 1120 body.high-contrast-active .ptb-news__read-news .social-media-share:hover svg rect, 1121 body.high-contrast-active .ptb-news__read-news .social-media-share:hover svg g 1122 { 1123 stroke: #000000 !important; 1124 fill: #ffffff !important; 1125 } 1126 1127 /* Ícone branco */ 1128 .ptb-news__read-news .social-media-share:hover svg * { 1129 fill: #008542 !important; 1130 stroke: #ffffff !important; 1131 } 1132 1133 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .mobile-share { 1134 display: none; 1135 } 1136 1137 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container { 1138 background: var(--color-neutral-100); 1139 border: var(--border-width-hairline, 1px) solid #CCCCCC; 1140 border-radius: 32px; 1141 display: flex; 1142 align-items: center; 1143 gap: var(--space-sm, 16px); 1144 padding: 6px var(--space-xxs, 8px); 1145 height: 36px; 1146 margin: 0; 1147 cursor: pointer; 1148 } 1149 1150 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container { 1151 background: rgba(255, 255, 255, 0.32); 1152 border: var(--border-width-hairline, 1px) solid rgba(255, 255, 255, 0.32); 1153 } 1154 1155 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container svg { 1156 width: 18px; 1157 } 1158 1159 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk svg path { 1160 stroke: var(--color-neutral-500, #D7D7D7); 1161 } 1162 1163 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text { 1164 font-family: var(--font-family-base); 1165 font-style: normal; 1166 margin: 0; 1167 height: 100%; 1168 display: flex; 1169 align-items: center; 1170 color: var(--color-primary-medium, #008542); 1171 font-size: var(--font-size-micro, 12px); 1172 font-weight: var(--font-weight-bold, 700); 1173 line-height: var(--line-height-lg, 144%); 1174 pointer-events: none; 1175 } 1176 1177 /* Hover padrão */ 1178 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container:hover { 1179 background-color: #008542; 1180 border-color: #008542; 1181 } 1182 1183 /* Texto branco no hover */ 1184 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container:hover .text { 1185 color: #ffffff; 1186 } 1187 1188 /* Ícone branco (SVG path) no hover */ 1189 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container:hover svg path { 1190 stroke: #ffffff !important; 1191 } 1192 1193 /* Hover no modo high-contrast */ 1194 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container:hover { 1195 background-color: #ffffff; 1196 border-color: #ffffff; 1197 } 1198 1199 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container:hover .text { 1200 color: #000000; 1201 } 1202 1203 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container:hover svg path { 1204 stroke: #000000 !important; 1205 } 1206 1207 1208 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text .copy-text-title-news { 1209 position: absolute; 1210 width: 100%; 1211 height: 100%; 1212 opacity: 0; 1213 overflow: hidden; 1214 } 1215 1216 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text { 1217 color: var(--text-primary-accent, #E4F7E8); 1218 } 1219 1220 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message { 1221 display: none; 1222 position: absolute; 1223 bottom: -43px; 1224 right: -15px; 1225 padding: var(--space-xxxs, 4px) 15px; 1226 margin: var(--space-micro, 2px) 10px; 1227 width: 110px; 1228 font-family: var(--font-family-base); 1229 font-size: var(--font-size-micro, 12px); 1230 1231 color: #008542; 1232 background: var(--color-neutral-100); 1233 border-radius: var(--border-radius-md, 8px); 1234 1235 filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.16)); 1236 1237 cursor: pointer; 1238 } 1239 1240 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message { 1241 background: rgba(255, 255, 255, 0.32); 1242 color: var(--text-primary-accent, #E4F7E8); 1243 } 1244 1245 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message-active { 1246 display: block; 1247 } 1248 1249 /* Mobile */ 1250 1251 .ptb-news__read-news .publish_and_social_medias_infos_mobile { 1252 display: flex; 1253 flex-direction: column; 1254 gap: 19px; 1255 } 1256 1257 .ptb-news__read-news .publish_and_social_medias_infos_mobile { 1258 display: none; 1259 } 1260 1261 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text { 1262 display: flex; 1263 justify-content: space-between; 1264 align-items: center; 1265 margin-bottom: var(--space-lg, 32px); 1266 } 1267 1268 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date * { 1269 padding: 0; 1270 margin: 0; 1271 font-family: var(--font-family-base); 1272 font-style: var(--font-style-normal, normal); 1273 font-size: var(--font-size-micro, 12px); 1274 line-height: 136%; 1275 color: var(--color-neutral-800, #373737); 1276 } 1277 1278 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date * { 1279 color: var(--text-primary-accent, #E4F7E8); 1280 } 1281 1282 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date { 1283 display: flex; 1284 flex-direction: column; 1285 gap: 0; 1286 } 1287 1288 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date .updated { 1289 font-weight: var(--font-weight-bold, 700); 1290 } 1291 1292 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date .published { 1293 font-weight: var(--font-weight-regular, 400); 1294 } 1295 1296 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container { 1297 background: var(--color-neutral-100); 1298 border: var(--border-width-hairline, 1px) solid #CCCCCC; 1299 border-radius: 32px; 1300 display: flex; 1301 align-items: center; 1302 gap: var(--space-sm, 16px); 1303 padding: 6px var(--space-xxs, 8px); 1304 width: 112px; 1305 height: 36px; 1306 } 1307 1308 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container { 1309 background: rgba(255, 255, 255, 0.32); 1310 color: var(--text-primary-accent, #E4F7E8); 1311 } 1312 1313 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container p.text { 1314 margin: 0; 1315 } 1316 1317 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container .text { 1318 font-family: var(--font-family-base); 1319 font-style: var(--font-style-normal, normal); 1320 font-weight: var(--font-weight-regular, 400); 1321 font-size: 13px; 1322 line-height: 14px; 1323 color: #008542; 1324 } 1325 1326 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container .text { 1327 background: rgba(255, 255, 255, 0.32); 1328 color: var(--text-primary-accent, #E4F7E8); 1329 } 1330 1331 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 1332 1333 .ptb-news__read-news .publish_and_social_medias_infos_desk .render-share-news-container.desktop { 1334 display: none; 1335 } 1336 1337 .ptb-news__read-news .render-share-news-container.mobile { 1338 display: block; 1339 margin: var(--space-xl) var(--space-lg) 0 var(--space-lg); 1340 } 1341 1342 .ptb-news__read-news .publish_and_social_medias_infos_desk * { 1343 font-size: var(--font-size-micro, 12px); 1344 } 1345 1346 .ptb-news__read-news .publish_and_social_medias_infos_desk { 1347 display: grid; 1348 grid-template-columns: 100%; 1349 grid-template-rows: 1fr 100%; 1350 } 1351 1352 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date { 1353 grid-column-start: 1; 1354 grid-column-end: 1; 1355 grid-row-start: 1; 1356 grid-row-end: 1; 1357 gap: var(--space-xxs, 8px); 1358 } 1359 1360 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date * { 1361 padding: 0; 1362 margin: 0; 1363 font-family: var(--font-family-base); 1364 font-style: var(--font-style-normal); 1365 color: var(--color-neutral-800, #373737); 1366 font-weight: var(--font-weight-bold); 1367 font-size: var(--font-size-xxxs, 14px); 1368 line-height: var(--line-height-md, 132%); 1369 } 1370 1371 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date * { 1372 color: var(--text-primary-accent, #E4F7E8); 1373 } 1374 1375 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .published { 1376 font-weight: var(--font-weight-regular, 400); 1377 } 1378 1379 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container { 1380 grid-column-start: 1; 1381 grid-column-end: 2; 1382 grid-row-start: 2; 1383 grid-row-end: 2; 1384 justify-content: center; 1385 gap: var(--space-xs, 12px); 1386 height: 36px; 1387 } 1388 1389 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container { 1390 grid-column-start: 1; 1391 grid-column-end: 2; 1392 grid-row-start: 2; 1393 grid-row-end: 2; 1394 max-width: 112px; 1395 place-self: end; 1396 } 1397 1398 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text { 1399 display: none; 1400 } 1401 1402 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message { 1403 bottom: 0; 1404 right: -9px; 1405 } 1406 1407 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .mobile-share { 1408 display: initial; 1409 } 1410 } 1411 1412 @media screen and (min-width: ${MIN_TABLET_WIDTH}px) and (max-width: ${MAX_TABLET_WIDTH}px) { 1413 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container { 1414 padding-right: 0; 1415 } 1416 } 1417 1418 1419 </style> 1420 1421 <script> 1422 AUI().ready(function () { 1423 1424 function copyOnClick(text) { 1425 1426 const strWithoutHtmlTags = text.replace(/(<([^>]+)>)/gi, ""); 1427 const strWithoutMarcationBrackets = strWithoutHtmlTags.replace(/ *#\[[^\]]*]/g, ""); 1428 const strWithoutNextPrevious = strWithoutMarcationBrackets.replace(/Previous Next/g, ""); 1429 const strWithoutBlankEnters = strWithoutNextPrevious.replace(/^\s*$(?:\r\n?|\n)/gm, ""); 1430 const strWithoutBlankLines = strWithoutBlankEnters.replace(/ /g, ''); 1431 const tempInput = document.createElement("textarea"); 1432 tempInput.value = strWithoutBlankLines; 1433 1434 document.body.appendChild(tempInput); 1435 tempInput.select(); 1436 document.execCommand("copy"); 1437 1438 if (tempInput.value.length > 0) { 1439 copyMessages.forEach(copyMessage => copyMessage.classList.add('copy-message-active')); 1440 1441 timerToMessage() 1442 } 1443 1444 document.body.removeChild(tempInput); 1445 } 1446 1447 const copyTextContainers = document.querySelectorAll(".publish_and_social_medias_infos_desk .copy-text-container"); 1448 copyTextContainers.forEach(copyTextContainer => { 1449 copyTextContainer.addEventListener("click", (event) => { 1450 event.preventDefault(); 1451 const titleText = document.querySelector(".main-headline-container .main-headline").innerHTML; 1452 const publishSocialMediaText = document.querySelector(".publish_and_social_medias_infos_desk .publish_and_update_date").innerHTML; 1453 const tagsText = document.querySelector(".tags").innerHTML; 1454 const newsContentText = document.querySelector(".news-content").innerHTML; 1455 const text = titleText + publishSocialMediaText + tagsText + newsContentText; 1456 copyOnClick(text) 1457 }); 1458 }); 1459 1460 const mobileShare = async () => { 1461 try { 1462 const shareData = { 1463 title: '${newsInfo.mainHeadlineOfTheNews}', 1464 text: '', 1465 url: '${newsInfo.url}' 1466 }; 1467 await navigator.share(shareData); 1468 } catch (err) { 1469 1470 } 1471 }; 1472 1473 const mobileShareButtons = document.querySelectorAll(".publish_and_social_medias_infos_desk .mobile-share"); 1474 mobileShareButtons.forEach(mobileShareButton => { 1475 mobileShareButton.addEventListener("click", (event) => { 1476 event.preventDefault(); 1477 mobileShare(); 1478 }); 1479 }); 1480 1481 const copyMessages = document.querySelectorAll('.copy-message'); 1482 const timerToMessage = () => { 1483 setTimeout(() => { 1484 removeMessage(); 1485 }, 2500); 1486 1487 } 1488 1489 const removeMessage = () => { 1490 copyMessages.forEach(copyMessage => copyMessage.classList.remove('copy-message-active')); 1491 } 1492 1493 }); 1494 </script> 1495 1496</#macro> 1497 1498<#-- ################################################################################################################## --> 1499 1500<#-- ############# Site de Crise - Notícia - Render Tags ############################################################## --> 1501 1502<#function getCategoriesNamesAndIds vocabularyName categoriesList> 1503 <#assign tagCategoryList = [] /> 1504 1505 <#assign tagsVocabulary = assetVocabularyService.fetchGroupVocabulary(groupId, vocabularyName) /> 1506 <#list categoriesList as cat> 1507 <#if tagsVocabulary.getVocabularyId() == cat.embeddedTaxonomyCategory.taxonomyVocabularyId > 1508 <#assign tagCategoryList += [[cat.taxonomyCategoryName, cat.taxonomyCategoryId]] /> 1509 </#if> 1510 </#list> 1511 <#return tagCategoryList> 1512</#function> 1513 1514<#assign 1515flagVocabulary = findVocabulary("Flag", vocabularies) 1516assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") 1517/> 1518 1519<#macro renderNewsTags categoryList targetPageWhenClickTag removeStartParameterWhenTagIsClicked updateTagParamsWhenClicked> 1520 <#assign tagPrefix = "tags-" + randomNumber(groupId?number)> 1521 <div class="${tagPrefix}-breakpoint breakpoint"> 1522 <div class="${tagPrefix} col-2-11 md-col-1-8 sm-col-1-4"> 1523 1524 <div class="tags"> 1525 <#list categoryList as cat> 1526 <#assign tagLink = mountUrlToPage("") /> 1527 <#assign urlWithoutTrailingSlash = tagLink?substring(0, tagLink?length - 1)> 1528 <#assign lastSlashIndex = urlWithoutTrailingSlash?last_index_of("/")> 1529 <#assign newUrl = urlWithoutTrailingSlash?substring(0, lastSlashIndex + 1)> 1530 <#assign tagLink = newUrl + "categorias?category=" + cat[1] /> 1531 <a href="${tagLink}" 1532 class="category" cetegoryid="${cat[1]}"># ${cat[0]}</a> 1533 </#list> 1534 </div> 1535 </div> 1536 </div> 1537 1538 <style> 1539 .${tagPrefix} { 1540 display: flex; 1541 flex-direction: column; 1542 padding: 0; 1543 gap: var(--space-sm); 1544 } 1545 1546 .${tagPrefix} * { 1547 margin: 0; 1548 padding: 0; 1549 } 1550 1551 .${tagPrefix} .tags { 1552 display: flex; 1553 flex-wrap: wrap; 1554 gap: var(--space-xxs, 8px); 1555 padding: var(--space-lg) 0 0; 1556 } 1557 1558 .${tagPrefix} .tags .category { 1559 padding: var(--space-xxxs) var(--space-xxs); 1560 background: var(--color-neutral-100); 1561 border: var(--border-width-hairline, 1px) solid var(--color-neutral-500); 1562 border-radius: var(--border-radius-xl); 1563 1564 font-family: var(--font-family-base); 1565 font-style: var(--font-style-normal); 1566 font-weight: var(--font-weight-regular); 1567 font-size: var(--font-size-xxxs); 1568 line-height: var(--line-height-xl); 1569 color: var(--color-neutral-800, #373737); 1570 cursor: pointer; 1571 } 1572 1573 body.high-contrast-active .${tagPrefix} .tags .category { 1574 background: rgba(255, 255, 255, 0.32); 1575 border: 1px solid rgba(255, 255, 255, 0.32); 1576 color: var(--text-secondary-default, #F8F8F8); 1577 } 1578 1579 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 1580 .${tagPrefix} .tags { 1581 display: flex; 1582 flex-wrap: wrap; 1583 gap: 8px; 1584 padding: var(--space-sm) 0 var(--space-lg); 1585 } 1586 1587 .${tagPrefix} { 1588 margin-top: var(--space-sm); 1589 } 1590 } 1591 </style> 1592 1593 <script> 1594 AUI().ready(function () { 1595 1596 const urlParams = new URLSearchParams(window.location.search); 1597 const categories = urlParams.getAll("category").sort(); 1598 1599 const root = document.querySelector(".${tagPrefix}"); 1600 const tags = root.querySelectorAll(".category"); 1601 tags.forEach((tag, index) => { 1602 1603 const categoryId = tag.getAttribute("cetegoryid"); 1604 if (categories.indexOf(categoryId) != -1) { 1605 tag.classList.add("active"); 1606 } 1607 1608 <#if updateTagParamsWhenClicked> 1609 tag.addEventListener("click", (e) => { 1610 e.preventDefault(); 1611 const clickedTag = e.target; 1612 const urlParams = new URLSearchParams(window.location.search); 1613 urlParams.delete("tag"); 1614 urlParams.delete("category"); 1615 1616 const categoryId = clickedTag.getAttribute("cetegoryid"); 1617 urlParams.append("category", categoryId); 1618 1619 <#if removeStartParameterWhenTagIsClicked> 1620 urlParams.delete("start"); 1621 </#if> 1622 1623 const href = "${themeDisplay.getPortalURL() + mountUrlToPage(targetPageWhenClickTag)}?" + urlParams.toString(); 1624 window.location.href = href; 1625 }); 1626 </#if> 1627 }); 1628 }); 1629 </script> 1630 1631</#macro> 1632 1633<#-- ################################################################################################################## --> 1634 1635<#-- ############# Site de Crise - Notícia - Imagem de destaque ####################################################### --> 1636<#macro renderNewsFeaturedMedia newsInfo> 1637 <#if (newsInfo.newsMedia.imageSrc?? && newsInfo.newsMedia.imageSrc?has_content) || (newsInfo.newsMedia.videoYotubeID?? && newsInfo.newsMedia.videoYotubeID?has_content) || (newsInfo.newsMedia.internalVideo?? && newsInfo.newsMedia.internalVideo.url?has_content)> 1638 <div class="news-featured-media"> 1639 1640 <div class="media-breakpoint breakpoint"> 1641 <div class="media-col col-2-11 md-col-1-8 sm-col-1-4"> 1642 <#if newsInfo.newsMedia.imageSrc?? && newsInfo.newsMedia.imageSrc?has_content> 1643 <#-- Midias adaptativas de imagem para desktop e mobile --> 1644 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${newsInfo.newsMedia.fileEntryId}") /> 1645 <#assign urlAdaptativeMediaMobile = newsInfo.newsMedia.imageSrc/> 1646 <#assign urlAdaptativeMediaDesktop = newsInfo.newsMedia.imageSrc/> 1647 1648 <#if fileDataRequest?? && fileDataRequest.adaptedImages?? > 1649 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 1650 <#list dataAdaptativeMedia as data> 1651 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 1652 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 1653 </#if> 1654 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 1655 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 1656 </#if> 1657 </#list> 1658 </#if> 1659 1660 <picture> 1661 <source media="(max-width:767px)" srcset="${urlAdaptativeMediaMobile}"> 1662 <img src="${urlAdaptativeMediaDesktop}" loading="lazy" alt="${newsInfo.newsMedia.imageAlt}"/> 1663 </picture> 1664 <@liferay_util["html-top"]> 1665 <meta name="title" content="${newsInfo.mainHeadlineOfTheNews}"> 1666 <meta name="description" content="${newsInfo.newsSummary}"> 1667 1668 <meta property="og:url" content="${currentURL}"> 1669 <meta property="og:type" content="website"> 1670 <meta property="og:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1671 <meta property="og:description" content="${newsInfo.newsSummary}" /> 1672 <meta property="og:image" content="${themeDisplay.getPortalURL()}/o/adaptive-media/image/${newsInfo.newsMedia.fileEntryId}/Thumbnail-300x300/image"> 1673 <meta property="og:image:alt" content="${newsInfo.newsMedia.imageAlt}"> 1674 1675 <meta name="twitter:card" content="summary_large_image"> 1676 <meta name="twitter:url" content="${currentURL}" /> 1677 <meta name="twitter:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1678 <meta name="twitter:description" content="${newsInfo.newsSummary}" /> 1679 <meta name="twitter:image" content= "${themeDisplay.getPortalURL()}/o/adaptive-media/image/${newsInfo.newsMedia.fileEntryId}/Thumbnail-300x300/image" > 1680 <meta name="twitter:image:alt" content="${newsInfo.newsMedia.imageAlt}"> 1681 </@> 1682 <#else> 1683 <#if newsInfo.newsMedia.videoYotubeID?? && newsInfo.newsMedia.videoYotubeID?has_content> 1684 <iframe loading="lazy" data-video-id="${newsInfo.newsMedia.videoYotubeID}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 1685 <@liferay_util["html-top"]> 1686 <meta name="title" content="${newsInfo.mainHeadlineOfTheNews}"> 1687 <meta name="description" content="${newsInfo.newsSummary}"> 1688 1689 <meta property="og:url" content="${currentURL}"> 1690 <meta property="og:type" content="website"> 1691 <meta property="og:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1692 <meta property="og:description" content="${newsInfo.newsSummary}" /> 1693 <meta property="og:image" content="https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg"> 1694 <meta property="og:image:alt" content="Youtube Video Thumbnail"> 1695 1696 <meta name="twitter:card" content="summary_large_image"> 1697 <meta name="twitter:url" content="${currentURL}" /> 1698 <meta name="twitter:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1699 <meta name="twitter:description" content="${newsInfo.newsSummary}" /> 1700 <meta name="twitter:image" content= "https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg" > 1701 <meta name="twitter:image:alt" content="Youtube Video Thumbnail"> 1702 </@> 1703 <#else> 1704 <video loading="lazy"> 1705 <source src="${newsInfo.newsMedia.internalVideo.url}"> 1706 Your browser does not support the video tag. 1707 </video> 1708 </#if> 1709 1710 <div class="banner-video-icons"> 1711 <#if newsInfo.newsMedia.videoYotubeID?? && newsInfo.newsMedia.videoYotubeID?has_content> 1712 <picture> 1713 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/mqdefault.jpg"> 1714 <img class="banner-video-thumb-iframe" loading="lazy" src="https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg" alt="YouTube Thumbnail"/> 1715 </picture> 1716 </#if> 1717 <svg class="banner-video-icon-play" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 1718 <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"/> 1719 <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"/> 1720 </svg> 1721 </div> 1722 </#if> 1723 </div> 1724 </div> 1725 1726 <div class="credit-legend breakpoint"> 1727 1728 <div class="credit-legend-container col-2-11 md-col-1-8 sm-col-1-4"> 1729 <#if newsInfo.newsMedia.legend != ""> 1730 <div class="legend paragraph-micro-regular"> 1731 <p>${newsInfo.newsMedia.legend}</p> 1732 </div> 1733 </#if> 1734 <#if newsInfo.newsMedia.credits != ""> 1735 <p class="credits paragraph-micro-regular"> 1736 ${newsInfo.newsMedia.credits} 1737 </p> 1738 </#if> 1739 1740 </div> 1741 </div> 1742 </div> 1743 </#if> 1744 <style> 1745 .ptb-news__read-news .news-featured-media { 1746 padding: var(--space-xl) 0 var(--space-xl) 0; 1747 } 1748 1749 .ptb-news__read-news .news-featured-media .media-col { 1750 position: relative; 1751 } 1752 1753 .ptb-news__read-news .news-featured-media img, 1754 .ptb-news__read-news .news-featured-media video, 1755 .ptb-news__read-news .news-featured-media iframe { 1756 width: 100%; 1757 max-height: 567px; 1758 aspect-ratio: 16/9; 1759 object-fit: cover; 1760 border-radius: var(--border-radius-lg, 16px); 1761 } 1762 1763 .ptb-news__read-news .news-featured-media .banner-video-icons { 1764 width: 100%; 1765 height: 100%; 1766 position: absolute; 1767 top: 50%; 1768 left: 50%; 1769 transform: translate(-50%,-50%); 1770 cursor: pointer; 1771 } 1772 1773 .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-thumb-iframe { 1774 position: absolute; 1775 width: 100%; 1776 height: 100%; 1777 object-fit: cover; 1778 } 1779 1780 .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-icon-play { 1781 position: absolute; 1782 top: 50%; 1783 left: 50%; 1784 transform: translate(-50%,-50%); 1785 } 1786 1787 body.high-contrast-active .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-icon-play path:nth-child(1) { 1788 fill: black; 1789 } 1790 1791 body.high-contrast-active .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-icon-play path:nth-child(2) { 1792 fill: white; 1793 } 1794 1795 .ptb-news__read-news .news-featured-media *:not(.breakpoint) { 1796 margin: 0; 1797 } 1798 .ptb-news__read-news .news-featured-media * { 1799 padding: 0; 1800 font-family: var(--font-family-base); 1801 line-height: var(--line-height-xl); 1802 } 1803 1804 .ptb-news__read-news .news-featured-media .credits { 1805 text-align: right; 1806 color: var(--collor-neutral-dark-to-bright-200, #525252); 1807 margin-bottom: var(--space-xxxs, 4px); 1808 font-style: var(--font-style-italic, italic); 1809 margin-top: var(--space-xxs, 8px); 1810 margin-bottom: 0; 1811 } 1812 1813 body.high-contrast-active .ptb-news__read-news .news-featured-media .credits { 1814 color: var(--text-secondary-default, #F8F8F8); 1815 } 1816 1817 .ptb-news__read-news .news-featured-media .legend { 1818 margin-top: var(--space-xxs, 8px); 1819 display: flex; 1820 justify-content: space-between; 1821 } 1822 1823 .ptb-news__read-news .news-featured-media .legend, 1824 .ptb-news__read-news .news-featured-media .legend * { 1825 font-style: var(--font-style-italic, italic); 1826 color: var(--collor-neutral-dark-to-bright-200, #525252); 1827 } 1828 1829 .ptb-news__read-news .credit-legend .credit-legend-container { 1830 display: flex; 1831 justify-content: space-between; 1832 flex-wrap: wrap; 1833 gap: 8px; 1834 } 1835 1836 body.high-contrast-active .ptb-news__read-news .news-featured-media .legend, 1837 body.high-contrast-active .ptb-news__read-news .news-featured-media .legend * { 1838 color: var(--text-secondary-default, #F8F8F8); 1839 } 1840 1841 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 1842 .ptb-news__read-news .news-featured-media .credits { 1843 text-align: left; 1844 } 1845 } 1846 </style> 1847 1848 <script> 1849 /* Manipulation video*/ 1850 let videoIsPlaying = false; 1851 1852 const modalForClick = document.querySelector(".ptb-news__read-news .news-featured-media .banner-video-icons"); 1853 const video = document.querySelector(".ptb-news__read-news .news-featured-media .media-col > :first-child"); 1854 1855 const playIcon = modalForClick && modalForClick.querySelector(".banner-video-icon-play"); 1856 modalForClick && modalForClick.addEventListener("click", ()=>{ 1857 if(video.tagName === "VIDEO") { 1858 if(videoIsPlaying) { 1859 video.pause(); 1860 playIcon.style.display = ""; 1861 videoIsPlaying = false; 1862 } 1863 else { 1864 video.play(); 1865 playIcon.style.display = "none"; 1866 videoIsPlaying = true; 1867 } 1868 } 1869 else if(video.tagName === "IFRAME") { 1870 const thumbYoutube = modalForClick.querySelector(".banner-video-thumb-iframe"); 1871 if(videoIsPlaying) { 1872 video.contentWindow.postMessage('{"event":"command","func":"pauseVideo"}', '*'); 1873 playIcon.style.display = ""; 1874 videoIsPlaying = false; 1875 } 1876 else { 1877 if (!video.getAttribute('src')) { 1878 const videoId = video.getAttribute('data-video-id'); 1879 const youtubeIframeUrl = 'https://www.youtube-nocookie.com/embed/' + videoId + '?si=PDNu4EIwtCuSHC1S&controls=0&enablejsapi=1&rel=0'; 1880 video.setAttribute('src', youtubeIframeUrl); 1881 video.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'); 1882 1883 video.onload = () => video.contentWindow.postMessage('{"event":"command","func":"playVideo"}', '*'); 1884 } 1885 thumbYoutube && (thumbYoutube.style.display = "none"); 1886 video.contentWindow.postMessage('{"event":"command","func":"playVideo"}', '*'); 1887 playIcon.style.display = "none"; 1888 videoIsPlaying = true; 1889 } 1890 } 1891 }); 1892 </script> 1893<#--/#if --> 1894</#macro> 1895<#-- ################################################################################################################## --> 1896 1897<#-- ############# Site de Crise - Notícia - Conteúdo da notícia ###################################################### --> 1898 1899<#macro renderNewsContent newsInfo> 1900 1901 <#assign targetStr = "<div class='paragraph_separator'><span class='dot'></span><span class='dot'></span><span class='dot'></span><span class='dot'></span></div>"> 1902 <#assign content = newsInfo.newsContent?replace("<p></p>", targetStr, 'r')> 1903 <#assign content = content?replace("<p> </p>", targetStr, 'r')> 1904 <#assign content = content?replace("<p></p>", targetStr, 'r')> 1905 <#assign content = content?replace("<p> </p>", targetStr, 'r')> 1906 1907 1908 <div class="news-content breakpoint"> 1909 <div class="col-1-12 md-col-1-8 sm-col-1-4"> 1910 ${content} 1911 </div> 1912 <div class="audio-template audio-pause audio-unmuted" style="display:none"> 1913 <div class="audio-button-play"> 1914 <svg class="audio-play-icon" width="100%" height="100%" viewBox="0 0 91 90" fill="#008542" xmlns="http://www.w3.org/2000/svg"><circle cx="45.2903" cy="45" r="44.5" stroke="#008542"></circle> <path d="M58.9759 43.2545C60.3409 44.0179 60.3409 45.9821 58.9759 46.7455L38.7505 58.0578C37.4173 58.8034 35.7742 57.8397 35.7742 56.3122L35.7742 33.6878C35.7742 32.1603 37.4173 31.1966 38.7505 31.9422L58.9759 43.2545Z" fill="white"></path> 1915 </svg> 1916 1917 <svg class="audio-pause-icon" width="100%" height="100%" viewBox="0 0 91 90" fill="#008542" xmlns="http://www.w3.org/2000/svg"><circle cx="45.2903" cy="45" r="44.5" stroke="#008542"></circle> <path d="M42.3736 30.4167H33.6236V59.5834H42.3736V30.4167Z" fill="white"></path> <path d="M48.2069 59.5834H56.9569V30.4167H48.2069V59.5834Z" fill="white"></path> 1918 </svg> 1919 </div> 1920 <div class="audio-sondwave"> 1921 <svg class="audio-sondwave-desktop" width="100%" height="100%" viewBox="0 0 590 30" fill="none" xmlns="http://www.w3.org/2000/svg"> 1922 <g clip-path="url(#clip0_2625_8152)"> 1923 <line x1="0.75" y1="0.75" x2="0.749999" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1924 <line x1="5.91016" y1="7.75" x2="5.91016" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1925 <line x1="11.0723" y1="5.75" x2="11.0723" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1926 <line x1="16.2344" y1="11.75" x2="16.2344" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1927 <line x1="21.3945" y1="9.75" x2="21.3945" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1928 <line x1="26.5566" y1="9.75" x2="26.5566" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1929 <line x1="30.6855" y1="1.75" x2="30.6855" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1930 <line x1="35.8477" y1="12.75" x2="35.8477" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1931 <line x1="41.0078" y1="13.75" x2="41.0078" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1932 <line x1="46.1699" y1="10.75" x2="46.1699" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1933 <line x1="51.3301" y1="8.75" x2="51.3301" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1934 <line x1="56.4922" y1="0.75" x2="56.4922" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1935 <line x1="61.6523" y1="7.75" x2="61.6523" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1936 <line x1="66.8145" y1="5.75" x2="66.8145" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1937 <line x1="71.9766" y1="11.75" x2="71.9766" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1938 <line x1="77.1367" y1="9.75" x2="77.1367" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1939 <line x1="82.2988" y1="9.75" x2="82.2988" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1940 <line x1="86.4277" y1="1.75" x2="86.4277" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1941 <line x1="91.5879" y1="12.75" x2="91.5879" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1942 <line x1="96.75" y1="13.75" x2="96.75" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1943 <line x1="101.91" y1="10.75" x2="101.91" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1944 <line x1="107.072" y1="8.75" x2="107.072" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1945 <line x1="112.234" y1="0.75" x2="112.234" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1946 <line x1="117.395" y1="7.75" x2="117.395" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1947 <line x1="122.557" y1="5.75" x2="122.557" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1948 <line x1="127.717" y1="11.75" x2="127.717" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1949 <line x1="132.879" y1="9.75" x2="132.879" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1950 <line x1="138.041" y1="9.75" x2="138.041" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1951 <line x1="142.17" y1="1.75" x2="142.17" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1952 <line x1="147.33" y1="12.75" x2="147.33" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1953 <line x1="151.75" y1="0.75" x2="151.75" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1954 <line x1="156.91" y1="7.75" x2="156.91" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1955 <line x1="162.072" y1="5.75" x2="162.072" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1956 <line x1="167.234" y1="11.75" x2="167.234" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1957 <line x1="172.395" y1="9.75" x2="172.395" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1958 <line x1="177.557" y1="9.75" x2="177.557" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1959 <line x1="181.686" y1="1.75" x2="181.686" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1960 <line x1="186.848" y1="12.75" x2="186.848" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1961 <line x1="192.008" y1="13.75" x2="192.008" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1962 <line x1="197.17" y1="10.75" x2="197.17" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1963 <line x1="202.33" y1="8.75" x2="202.33" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1964 <line x1="207.492" y1="0.75" x2="207.492" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1965 <line x1="212.652" y1="7.75" x2="212.652" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1966 <line x1="217.814" y1="5.75" x2="217.814" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1967 <line x1="222.977" y1="11.75" x2="222.977" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1968 <line x1="228.137" y1="9.75" x2="228.137" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1969 <line x1="233.299" y1="9.75" x2="233.299" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1970 <line x1="237.428" y1="1.75" x2="237.428" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1971 <line x1="242.588" y1="12.75" x2="242.588" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1972 <line x1="247.75" y1="13.75" x2="247.75" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1973 <line x1="252.91" y1="10.75" x2="252.91" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1974 <line x1="258.072" y1="8.75" x2="258.072" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1975 <line x1="263.234" y1="0.75" x2="263.234" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1976 <line x1="268.395" y1="7.75" x2="268.395" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1977 <line x1="273.557" y1="5.75" x2="273.557" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1978 <line x1="278.717" y1="11.75" x2="278.717" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1979 <line x1="283.879" y1="9.75" x2="283.879" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1980 <line x1="289.041" y1="9.75" x2="289.041" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1981 <line x1="293.17" y1="1.75" x2="293.17" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1982 <line x1="298.33" y1="12.75" x2="298.33" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1983 <line x1="302.75" y1="10.75" x2="302.75" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1984 <line x1="307.912" y1="8.75" x2="307.912" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1985 <line x1="313.072" y1="0.75" x2="313.072" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1986 <line x1="318.234" y1="7.75" x2="318.234" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1987 <line x1="323.395" y1="5.75" x2="323.395" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1988 <line x1="328.557" y1="11.75" x2="328.557" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1989 <line x1="333.719" y1="9.75" x2="333.719" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1990 <line x1="338.879" y1="9.75" x2="338.879" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1991 <line x1="343.008" y1="1.75" x2="343.008" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1992 <line x1="348.17" y1="12.75" x2="348.17" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1993 <line x1="353.33" y1="13.75" x2="353.33" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1994 <line x1="358.492" y1="10.75" x2="358.492" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1995 <line x1="363.652" y1="8.75" x2="363.652" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1996 <line x1="368.814" y1="0.75" x2="368.814" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1997 <line x1="373.977" y1="7.75" x2="373.977" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1998 <line x1="379.137" y1="5.75" x2="379.137" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1999 <line x1="384.299" y1="11.75" x2="384.299" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2000 <line x1="389.459" y1="9.75" x2="389.459" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2001 <line x1="394.621" y1="9.75" x2="394.621" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2002 <line x1="398.75" y1="1.75" x2="398.75" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2003 <line x1="403.912" y1="12.75" x2="403.912" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2004 <line x1="408.33" y1="10.75" x2="408.33" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2005 <line x1="413.492" y1="8.75" x2="413.492" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2006 <line x1="418.654" y1="0.75" x2="418.654" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2007 <line x1="423.814" y1="7.75" x2="423.814" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2008 <line x1="428.977" y1="5.75" x2="428.977" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2009 <line x1="434.137" y1="11.75" x2="434.137" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2010 <line x1="439.299" y1="9.75" x2="439.299" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2011 <line x1="444.461" y1="9.75" x2="444.461" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2012 <line x1="448.59" y1="1.75" x2="448.59" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2013 <line x1="453.75" y1="12.75" x2="453.75" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2014 <line x1="458.912" y1="13.75" x2="458.912" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2015 <line x1="464.072" y1="10.75" x2="464.072" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2016 <line x1="469.234" y1="8.75" x2="469.234" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2017 <line x1="474.395" y1="0.75" x2="474.395" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2018 <line x1="479.557" y1="7.75" x2="479.557" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2019 <line x1="484.719" y1="5.75" x2="484.719" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2020 <line x1="489.879" y1="11.75" x2="489.879" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2021 <line x1="495.041" y1="9.75" x2="495.041" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2022 <line x1="500.201" y1="9.75" x2="500.201" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2023 <line x1="504.33" y1="1.75" x2="504.33" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2024 <line x1="509.492" y1="12.75" x2="509.492" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2025 <line x1="513.912" y1="10.75" x2="513.912" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2026 <line x1="519.072" y1="8.75" x2="519.072" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2027 <line x1="524.234" y1="0.75" x2="524.234" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2028 <line x1="529.395" y1="7.75" x2="529.395" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2029 <line x1="534.557" y1="5.75" x2="534.557" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2030 <line x1="539.719" y1="11.75" x2="539.719" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2031 <line x1="544.879" y1="9.75" x2="544.879" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2032 <line x1="550.041" y1="9.75" x2="550.041" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2033 <line x1="554.17" y1="1.75" x2="554.17" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2034 <line x1="559.332" y1="12.75" x2="559.332" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2035 <line x1="564.492" y1="13.75" x2="564.492" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2036 <line x1="569.654" y1="10.75" x2="569.654" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2037 <line x1="574.814" y1="8.75" x2="574.814" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2038 <line x1="579.977" y1="0.75" x2="579.977" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2039 <line x1="585.137" y1="7.75" x2="585.137" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2040 <line x1="590.299" y1="5.75" x2="590.299" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2041 </g> 2042 <defs> 2043 <clipPath id="clip0_2625_8152"> 2044 <rect width="590" height="30" fill="white"/> 2045 </clipPath> 2046 </defs> 2047 </svg> 2048 <svg class="audio-sondwave-mobile" width="100%" height="100%" viewBox="0 0 102 30" fill="none" xmlns="http://www.w3.org/2000/svg"> 2049 <g clip-path="url(#clip0_2625_8922)"> 2050 <line x1="0.75" y1="0.75" x2="0.749999" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2051 <line x1="5.91016" y1="7.75" x2="5.91016" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2052 <line x1="11.0723" y1="5.75" x2="11.0723" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2053 <line x1="16.2344" y1="11.75" x2="16.2344" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2054 <line x1="21.3945" y1="9.75" x2="21.3945" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2055 <line x1="26.5566" y1="9.75" x2="26.5566" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2056 <line x1="30.6855" y1="1.75" x2="30.6855" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2057 <line x1="35.8477" y1="12.75" x2="35.8477" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2058 <line x1="41.0078" y1="13.75" x2="41.0078" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2059 <line x1="46.1699" y1="10.75" x2="46.1699" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2060 <line x1="51.3301" y1="8.75" x2="51.3301" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2061 <line x1="56.4922" y1="0.75" x2="56.4922" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2062 <line x1="61.6523" y1="7.75" x2="61.6523" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2063 <line x1="66.8145" y1="5.75" x2="66.8145" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2064 <line x1="71.9766" y1="11.75" x2="71.9766" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2065 <line x1="77.1367" y1="9.75" x2="77.1367" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2066 <line x1="82.2988" y1="9.75" x2="82.2988" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2067 <line x1="86.4277" y1="1.75" x2="86.4277" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2068 <line x1="91.5879" y1="12.75" x2="91.5879" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2069 <line x1="96.75" y1="13.75" x2="96.75" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2070 <line x1="101.91" y1="10.75" x2="101.91" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 2071 </g> 2072 <defs> 2073 <clipPath id="clip0_2625_8922"> 2074 <rect width="102" height="30" fill="white"/> 2075 </clipPath> 2076 </defs> 2077 </svg> 2078 </div> 2079 <div class="audio-time paragraph-micro-bold"> </div> 2080 <div class="audio-button-mute"> 2081 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"> 2082 <path d="M27.3625 9.6375C28.1993 10.4723 28.8632 11.464 29.3161 12.5558C29.7691 13.6476 30.0023 14.818 30.0023 16C30.0023 17.182 29.7691 18.3524 29.3161 19.4442C28.8632 20.536 28.1993 21.5277 27.3625 22.3625M10 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V12C3 11.7348 3.10536 11.4804 3.29289 11.2929C3.48043 11.1054 3.73478 11 4 11H10M10 21L19 28V4L10 11M10 21V11M23.825 13.175C24.1969 13.5455 24.492 13.9857 24.6933 14.4705C24.8947 14.9553 24.9983 15.4751 24.9983 16C24.9983 16.5249 24.8947 17.0447 24.6933 17.5295C24.492 18.0143 24.1969 18.4545 23.825 18.825" stroke="#525252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 2083 </svg> 2084 </div> 2085 </div> 2086 </div> 2087 2088 <#if categoriesAsssetEntryResponse?? && categoriesAsssetEntryResponse?has_content && categoriesAsssetEntryResponse.taxonomyCategoryBriefs??> 2089 <@renderNewsTags tagCategoryList NEWS_PAGE_NAME removeStartParameterWhenTagIsClicked includeRequestParams /> 2090 </#if> 2091 <style> 2092 2093 .ptb-news__read-news .news-content p { 2094 margin-bottom: var(--space-md, 24px); 2095 } 2096 2097 .ptb-news__read-news .news-content strong { 2098 font-weight: var(--font-weight-bold); 2099 } 2100 2101 .ptb-news__read-news .news-content em { 2102 font-style: var(--font-style-italic); 2103 } 2104 2105 .ptb-news__read-news .news-content a:not(.stories-container *) { 2106 font-family: var(--font-family-base); 2107 font-style: var(--font-style-normal, normal); 2108 font-weight: var(--font-weight-bold, 700); 2109 font-size: var(--font-size-xs, 18px); 2110 line-height: var(--line-height-xl, 160%); 2111 2112 color: #008542; 2113 } 2114 2115 body.high-contrast-active .ptb-news__read-news .news-content a { 2116 color: #E4F7E8; 2117 } 2118 2119 .ptb-news__read-news .news-content ul { 2120 padding-left: 27px; 2121 margin-top: -16px; 2122 } 2123 2124 .ptb-news__read-news .news-content ul li::marker { 2125 content: "■" !important; 2126 color: var(--color-secondary-medium) !important; 2127 font-size: var(--size-xxs); 2128 } 2129 2130 .ptb-news__read-news .news-content ul li { 2131 color: var(--color-text-primary-default); 2132 padding: 8px 0; 2133 2134 /*paragraph-sm-regular*/ 2135 font-size: var(--font-size-xxs); 2136 line-height: var(--line-height-xl); 2137 font-weight: var(--font-weight-regular); 2138 font-style: var(--font-style-normal); 2139 text-decoration: var(--text-decoration-none); 2140 2141 margin-left: calc(-1* var(--space-sm)); 2142 padding-left: var(--space-sm); 2143 } 2144 2145 .ptb-news__read-news .news-content ul li * { 2146 color: var(--color-text-primary-default); 2147 padding: 8px 0; 2148 2149 /*paragraph-sm-regular*/ 2150 font-size: var(--font-size-xxs); 2151 line-height: var(--line-height-xl); 2152 font-weight: var(--font-weight-regular); 2153 font-style: var(--font-style-normal); 2154 text-decoration: var(--text-decoration-none); 2155 } 2156 2157 @media screen and (min-width: 1024px) { 2158 .ptb-news__read-news .news-content > * { 2159 grid-column-start: 3; 2160 grid-column-end: 11; 2161 } 2162 2163 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Infográfico" > 2164 .ptb-news__read-news .news-content > *:has(img) { 2165 grid-column-start: 2; 2166 grid-column-end: 12; 2167 } 2168 } 2169 2170 </#if> 2171 } 2172 2173 .ptb-news__read-news .news-content figure { 2174 margin-bottom: var(--space-sm, 16px); 2175 } 2176 2177 .ptb-news__read-news .news-content figure figcaption { 2178 display: flex; 2179 justify-content: space-between; 2180 align-items: flex-start; 2181 align-self: stretch; 2182 margin-top: var(--space-xxs, 8px); 2183 text-align: justify; 2184 } 2185 2186 .ptb-news__read-news .news-content figure figcaption, 2187 .ptb-news__read-news .news-content figure figcaption * { 2188 color: var(--color-neutral-700, #525252); 2189 font-family: var(--font-family-base); 2190 font-size: var(--font-size-xxxs, 14px); 2191 font-style: var(--font-style-italic, italic); 2192 font-weight: var(--font-weight-regular, 400); 2193 line-height: var(--line-height-xl, 160%); 2194 } 2195 2196 body.high-contrast-active .ptb-news__read-news .news-content figure figcaption, 2197 body.high-contrast-active .ptb-news__read-news .news-content figure figcaption * { 2198 color: var(--text-secondary-default, #F8F8F8); 2199 } 2200 2201 .ptb-news__read-news .news-content figure figcaption br { 2202 display: none; 2203 } 2204 2205 .ptb-news__read-news .news-content .embed-responsive { 2206 width: 100% !important; 2207 border-radius: var(--border-radius-md, 16px); 2208 margin-bottom: var(--space-md, 16px); 2209 aspect-ratio: 16/9; 2210 } 2211 2212 .ptb-news__read-news .news-content img.first-news-image { 2213 max-width: 1008px; 2214 max-height: 567px!important; 2215 height: 567px !important; 2216 object-fit: cover 2217 } 2218 2219 .ptb-news__read-news .news-content img { 2220 width: 100%; 2221 height: auto; 2222 max-width: 800px ; 2223 max-height: 450px; 2224 display: block !important; 2225 margin-left: auto !important; 2226 margin-right: auto !important; 2227 border-radius: var(--border-radius-md, 16px); 2228 } 2229 2230 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Artigo" > 2231 .ptb-news__read-news .news-content img { 2232 aspect-ratio: 16/9; 2233 } 2234 </#if> 2235 2236 .ptb-news__read-news .news-content .paragraph_separator { 2237 display: flex; 2238 width: 100%; 2239 height: fit-content; 2240 justify-content: center; 2241 gap: 6px; 2242 } 2243 2244 .ptb-news__read-news .news-content .paragraph_separator .dot { 2245 height: var(--size-micro, 4px); 2246 width: var(--size-micro, 4px); 2247 background-color: #959595; 2248 border-radius: 100%; 2249 display: inline-block; 2250 } 2251 2252 .ptb-news__read-news .news-content *:not(.stories-container *) { 2253 font-family: var(--font-family-base); 2254 font-style: var(--font-style-normal, normal); 2255 font-weight: var(--font-weight-regular, 400); 2256 font-size: var(--font-size-xs, 18px); 2257 line-height: var(--line-height-xl, 160%); 2258 color: var(--color-neutral-800, #373737); 2259 } 2260 2261 body.high-contrast-active .ptb-news__read-news .news-content * { 2262 color: var(--text-primary-default, var(--color-neutral-100)); 2263 } 2264 2265 .ptb-news__read-news .news-content h1, 2266 .ptb-news__read-news .news-content h1 *, 2267 .ptb-news__read-news .news-content h2, 2268 .ptb-news__read-news .news-content h2 *, 2269 .ptb-news__read-news .news-content h3, 2270 .ptb-news__read-news .news-content h3 *, 2271 .ptb-news__read-news .news-content h4, 2272 .ptb-news__read-news .news-content h4 *, 2273 .ptb-news__read-news .news-content h5, 2274 .ptb-news__read-news .news-content h5 *, 2275 .ptb-news__read-news .news-content h6, 2276 .ptb-news__read-news .news-content h6 * { 2277 color: var(--color-neutral-800, #373737) !important; 2278 } 2279 2280 body.high-contrast-active .ptb-news__read-news .news-content h1, 2281 body.high-contrast-active .ptb-news__read-news .news-content h1 *, 2282 body.high-contrast-active .ptb-news__read-news .news-content h2, 2283 body.high-contrast-active .ptb-news__read-news .news-content h2 *, 2284 body.high-contrast-active .ptb-news__read-news .news-content h3, 2285 body.high-contrast-active .ptb-news__read-news .news-content h3 *, 2286 body.high-contrast-active .ptb-news__read-news .news-content h4, 2287 body.high-contrast-active .ptb-news__read-news .news-content h4 *, 2288 body.high-contrast-active .ptb-news__read-news .news-content h5, 2289 body.high-contrast-active .ptb-news__read-news .news-content h5 *, 2290 body.high-contrast-active .ptb-news__read-news .news-content h6, 2291 body.high-contrast-active .ptb-news__read-news .news-content h6 * { 2292 color: var(--text-primary-default, var(--color-neutral-100)) !important; 2293 } 2294 2295 .ptb-news__read-news .news-content h1:last-child, 2296 .ptb-news__read-news .news-content h2:last-child, 2297 .ptb-news__read-news .news-content h3:last-child, 2298 .ptb-news__read-news .news-content h4:last-child, 2299 .ptb-news__read-news .news-content h5:last-child, 2300 .ptb-news__read-news .news-content h5:last-child, 2301 .ptb-news__read-news .news-content h6:last-child, 2302 .ptb-news__read-news .news-content p:last-child { 2303 padding-bottom: 0 !important; 2304 } 2305 2306 .ptb-news__read-news .news-content h1, 2307 .ptb-news__read-news .news-content h1 * { 2308 font-size: var(--font-size-xxl) !important; 2309 line-height: var(--line-height-sm) !important; 2310 font-weight: var(--font-weight-bold) !important; 2311 font-style: var(--font-style-normal) !important; 2312 text-decoration: var(--text-decoration-none) !important; 2313 } 2314 2315 .ptb-news__read-news .news-content h2, 2316 .ptb-news__read-news .news-content h2 * { 2317 2318 font-size: var(--font-size-xl) !important; 2319 line-height: var(--line-height-sm) !important; 2320 font-weight: var(--font-weight-bold) !important; 2321 font-style: var(--font-style-normal) !important; 2322 text-decoration: var(--text-decoration-none) !important; 2323 2324 } 2325 2326 .ptb-news__read-news .news-content h2 { 2327 margin-top: 48px !important; 2328 margin-bottom: var(--space-xl, 40px) !important; 2329 2330 } 2331 2332 .ptb-news__read-news .news-content h3, 2333 .ptb-news__read-news .news-content h3 * { 2334 font-size: var(--font-size-lg) !important; 2335 line-height: var(--line-height-sm) !important; 2336 font-weight: var(--font-weight-bold) !important; 2337 font-style: var(--font-style-normal) !important; 2338 text-decoration: var(--text-decoration-none) !important; 2339 } 2340 2341 .ptb-news__read-news .news-content h3 { 2342 margin-bottom: var(--space-sm, 16px) !important; 2343 margin-top: 48px !important; 2344 } 2345 2346 .ptb-news__read-news .news-content h4, 2347 .ptb-news__read-news .news-content h4 * { 2348 font-size: var(--font-size-md) !important; 2349 line-height: var(--line-height-md) !important; 2350 font-weight: var(--font-weight-bold) !important; 2351 font-style: var(--font-style-normal) !important; 2352 text-decoration: var(--text-decoration-none) !important; 2353 } 2354 2355 .ptb-news__read-news .news-content h4 { 2356 margin-top: 48px !important; 2357 margin-bottom: var(--space-sm, 16px) !important; 2358 } 2359 2360 .ptb-news__read-news .news-content h5, 2361 .ptb-news__read-news .news-content h5 * { 2362 font-size: var(--font-size-sm) !important; 2363 line-height: var(--line-height-md) !important; 2364 font-weight: var(--font-weight-bold) !important; 2365 font-style: var(--font-style-normal) !important; 2366 text-decoration: var(--text-decoration-none) !important; 2367 } 2368 2369 .ptb-news__read-news .news-content h5 { 2370 margin-top: 48px !important; 2371 margin-bottom: var(--space-sm, 16px) !important; 2372 } 2373 2374 .ptb-news__read-news .news-content table { 2375 border-collapse: collapse; 2376 border: none; 2377 width: 100% !important; 2378 margin: var(--space-md, 24px) 0; 2379 } 2380 2381 .ptb-news__read-news .news-content table * { 2382 font-size: var(--font-size-xxs, 16px); 2383 font-style: var(--font-style-normal, normal); 2384 font-weight: var(--font-weight-regular, 400); 2385 line-height: var(--line-height-xl, 160%); 2386 color: var(--color-neutral-800, #373737); 2387 border: 0; 2388 } 2389 2390 body.high-contrast-active .ptb-news__read-news .news-content table * { 2391 color: var(--text-primary-default, var(--color-neutral-100)); 2392 } 2393 2394 .ptb-news__read-news .news-content table tbody > :first-child, 2395 .ptb-news__read-news .news-content table tbody > :first-child * { 2396 font-weight: var(--font-weight-bold, 700); 2397 flex: 1 0 0; 2398 background: var(--background-Surface-level-02, #F8F8F8); 2399 } 2400 2401 body.high-contrast-active .ptb-news__read-news .news-content table tbody > :first-child, 2402 body.high-contrast-active .ptb-news__read-news .news-content table tbody > :first-child * { 2403 background: #373737; 2404 } 2405 2406 .ptb-news__read-news .news-content table tbody { 2407 display: flex; 2408 flex-direction: column; 2409 } 2410 2411 .ptb-news__read-news .news-content table tbody * { 2412 display: flex; 2413 height: 100%; 2414 align-items: center; 2415 flex: 1 0 0; 2416 } 2417 2418 .ptb-news__read-news .news-content table tbody tr * { 2419 padding: 23px var(--space-lg, 32px); 2420 } 2421 2422 2423 .ptb-news__read-news .news-content table tbody tr { 2424 border-radius: var(--border-radius-md); 2425 border: var(--border-width-hairline, 1px) solid #EEEEEE; 2426 } 2427 2428 body.high-contrast-active .ptb-news__read-news .news-content table tbody tr { 2429 border: var(--border-width-hairline, 1px) solid #525252; 2430 } 2431 2432 .ptb-news__read-news .news-content table tbody tr:not(:last-child) { 2433 border-bottom-left-radius: 0; 2434 border-bottom-right-radius: 0; 2435 } 2436 2437 .ptb-news__read-news .news-content table tbody tr:not(:first-child) { 2438 border-top-left-radius: 0; 2439 border-top-right-radius: 0; 2440 border-top: none; 2441 } 2442 2443 .ptb-news__read-news .news-content table tbody tr td:not(:last-child) { 2444 border-right: var(--border-width-hairline, 1px) solid #EEEEEE; 2445 } 2446 2447 body.high-contrast-active .ptb-news__read-news .news-content table tbody tr td:not(:last-child) { 2448 border-right: var(--border-width-hairline, 1px) solid #525252; 2449 } 2450 2451 .ptb-news__read-news .news-content table tbody tr:first-child td { 2452 border-top: var(--border-width-hairline, 1px) solid #EEEEEE; 2453 border-bottom: var(--border-width-hairline, 1px) solid #EEEEEE; 2454 } 2455 2456 body.high-contrast-active .ptb-news__read-news .news-content table tbody tr:first-child td { 2457 border-top: var(--border-width-hairline, 1px) solid #525252; 2458 border-bottom: var(--border-width-hairline, 1px) solid #525252; 2459 } 2460 2461 .ptb-news__read-news .news-content table tbody tr td:first-child { 2462 padding-left: 0; 2463 } 2464 2465 .ptb-news__read-news .news-content table tbody tr td:last-child{ 2466 padding-right: 0; 2467 } 2468 2469 .ptb-news__read-news .news-content audio { 2470 display: none; 2471 } 2472 2473 .ptb-news__read-news .news-content .audio-template { 2474 display: flex; 2475 padding: var(--space-sm, 16px); 2476 align-items: center; 2477 gap: var(--space-md, 24px); 2478 align-self: stretch; 2479 border-radius: var(--border-radius-lg, 16px); 2480 border: var(--border-width-hairline, 1px) solid var(--border-color-mid); 2481 background: var(--background-card-default, #FFF); 2482 max-height: var(--size-giant, 72px); 2483 margin: 48px 0; 2484 } 2485 2486 body.high-contrast-active .ptb-news__read-news .news-content .audio-template { 2487 background: var(--background-card-default, #010101); 2488 border: var(--border-width-hairline, 1px) solid #525252; 2489 } 2490 2491 .ptb-news__read-news .news-content .audio-template .audio-button-play { 2492 display: flex; 2493 width: var(--size-xl, 40px); 2494 height: var(--size-xl, 40px); 2495 justify-content: center; 2496 align-items: center; 2497 flex-grow: 0; 2498 flex-shrink: 0; 2499 cursor: pointer; 2500 } 2501 2502 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-play-icon, 2503 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-pause-icon { 2504 fill: #FFFFFF; 2505 } 2506 2507 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-play-icon path, 2508 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-pause-icon path { 2509 fill: #010101; 2510 } 2511 2512 .ptb-news__read-news .news-content .audio-template.audio-pause .audio-button-play .audio-play-icon { 2513 display: block; 2514 } 2515 2516 .ptb-news__read-news .news-content .audio-template.audio-pause .audio-button-play .audio-pause-icon { 2517 display: none; 2518 } 2519 2520 .ptb-news__read-news .news-content .audio-template.audio-play .audio-button-play .audio-play-icon { 2521 display: none; 2522 } 2523 2524 .ptb-news__read-news .news-content .audio-template.audio-play .audio-button-play .audio-pause-icon { 2525 display: block; 2526 } 2527 2528 .ptb-news__read-news .news-content .audio-template .audio-sondwave { 2529 display: flex; 2530 flex-direction: column; 2531 align-items: flex-start; 2532 gap: var(--space-xxs, 8px); 2533 flex: 1 0 0; 2534 height: 100%; 2535 flex-grow: 1; 2536 flex-shrink: 1; 2537 } 2538 2539 .ptb-news__read-news .news-content .audio-template .audio-sondwave line { 2540 stroke: #008542; 2541 } 2542 2543 .ptb-news__read-news .news-content .audio-template .audio-sondwave line.line-active { 2544 stroke: #90EE90; 2545 } 2546 2547 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-sondwave line { 2548 stroke: #E4F7E8; 2549 } 2550 2551 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-sondwave line.line-active { 2552 stroke: #666666; 2553 } 2554 2555 .ptb-news__read-news .news-content .audio-template .audio-sondwave .audio-sondwave-mobile { 2556 display: none; 2557 } 2558 2559 .ptb-news__read-news .news-content .audio-template .audio-time { 2560 display: flex; 2561 flex-direction: column; 2562 align-items: flex-start; 2563 gap: var(--space-xxs, 8px); 2564 flex: 1 0 0; 2565 color: var(--text-primary-accent, #008542); 2566 text-align: center; 2567 font-family: var(--font-family-base); 2568 line-height: 124% !important; 2569 flex-grow: 0; 2570 flex-shrink: 0; 2571 } 2572 2573 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-time { 2574 color: var(--text-primary-accent, #E4F7E8); 2575 } 2576 2577 .ptb-news__read-news .news-content .audio-template .audio-button-mute { 2578 width: var(--size-lg, 32px); 2579 height: var(--size-lg, 32px); 2580 flex-grow: 0; 2581 flex-shrink: 0; 2582 cursor: pointer; 2583 } 2584 2585 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-mute svg path { 2586 stroke: white; 2587 fill: none; 2588 } 2589 2590 .ptb-news__read-news .news-content .audio-template.audio-muted .audio-button-mute { 2591 opacity: 0.6; 2592 } 2593 2594 @media screen and (max-width: 1280px) { 2595 .ptb-news__read-news .news-content img.first-news-image { 2596 height: auto!important; 2597 object-fit: cover 2598 } 2599 2600 .ptb-news__read-news .news-content img { 2601 width: 100%; 2602 height: auto; 2603 max-width: 100% ; 2604 max-height: auto; 2605 object-fit: cover; 2606 } 2607 } 2608 2609 @media screen and (max-width: 1023px) and (min-width: ${MAX_MOBILE_WIDTH}px) { 2610 .ptb-news__read-news .news-content > * { 2611 grid-column-start: 1; 2612 grid-column-end: 9; 2613 } 2614 } 2615 2616 2617 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 2618 2619 .ptb-news__read-news .news-content * { 2620 font-size: var(--font-size-xxs, 16px); 2621 } 2622 2623 2624 .ptb-news__read-news .news-content > * { 2625 grid-column-start: 1; 2626 grid-column-end: 5; 2627 } 2628 2629 2630 .ptb-news__read-news .news-content h1, 2631 .ptb-news__read-news .news-content h1 * { 2632 font-size: var(--font-size-xl) !important; 2633 line-height: var(--line-height-sm) !important; 2634 font-weight: var(--font-weight-bold) !important; 2635 font-style: var(--font-style-normal) !important; 2636 text-decoration: var(--text-decoration-none) !important; 2637 2638 } 2639 2640 .ptb-news__read-news .news-content h2, 2641 .ptb-news__read-news .news-content h2 * { 2642 font-size: var(--font-size-lg) !important; 2643 line-height: var(--line-height-sm) !important; 2644 font-weight: var(--font-weight-bold) !important; 2645 font-style: var(--font-style-normal) !important; 2646 text-decoration: var(--text-decoration-none) !important; 2647 } 2648 2649 .ptb-news__read-news .news-content h2 { 2650 margin-bottom: var(--space-md, 24px) !important; 2651 } 2652 2653 .ptb-news__read-news .news-content h3, 2654 .ptb-news__read-news .news-content h3 * { 2655 font-size: var(--font-size-md) !important; 2656 line-height: var(--line-height-sm) !important; 2657 font-weight: var(--font-weight-bold) !important; 2658 font-style: var(--font-style-normal) !important; 2659 text-decoration: var(--text-decoration-none) !important; 2660 } 2661 2662 .ptb-news__read-news .news-content h3 { 2663 margin-top: var(--space-xxs, 8px) !important; 2664 } 2665 2666 .ptb-news__read-news .news-content h4, 2667 .ptb-news__read-news .news-content h4 * { 2668 font-size: var(--font-size-sm) !important; 2669 line-height: var(--line-height-md) !important; 2670 font-weight: var(--font-weight-bold) !important; 2671 font-style: var(--font-style-normal) !important; 2672 text-decoration: var(--text-decoration-none) !important; 2673 } 2674 2675 .ptb-news__read-news .news-content h5, 2676 .ptb-news__read-news .news-content h5 * { 2677 font-size: var(--font-size-xs) !important; 2678 line-height: var(--line-height-md) !important; 2679 font-weight: var(--font-weight-bold) !important; 2680 font-style: var(--font-style-normal) !important; 2681 text-decoration: var(--text-decoration-none) !important; 2682 } 2683 2684 .ptb-news__read-news .news-content figure figcaption { 2685 flex-direction: column; 2686 gap: var(--space-xxs, 8px); 2687 } 2688 2689 .ptb-news__read-news .news-content figure figcaption, 2690 .ptb-news__read-news .news-content figure figcaption * { 2691 font-size: var(--font-size-micro, 12px); 2692 } 2693 2694 .ptb-news__read-news .news-content table { 2695 margin-top: var(--space-xxs, 8px); 2696 margin-bottom: var(--space-lg, 32px); 2697 } 2698 2699 .ptb-news__read-news .news-content table * { 2700 font-size: var(--font-size-micro, 12px); 2701 line-height: 19.2%; 2702 } 2703 2704 .ptb-news__read-news .news-content table tbody * { 2705 height: 43px; 2706 padding: var(--space-xs, 12px); 2707 } 2708 2709 .ptb-news__read-news .news-content .audio-template { 2710 margin-top: var(--space-xxs, 8px); 2711 margin-bottom: var(--space-lg, 32px); 2712 } 2713 } 2714 2715 @media screen and (max-width: 500px) { 2716 .ptb-news__read-news .news-content .audio-template .audio-sondwave .audio-sondwave-desktop { 2717 display: none; 2718 } 2719 2720 .ptb-news__read-news .news-content .audio-template .audio-sondwave .audio-sondwave-mobile { 2721 display: block; 2722 } 2723 } 2724 </style> 2725 2726 <style> 2727.ws-carousel p { 2728 margin: var(--space-none, 0) !important; 2729} 2730 2731.ws-carousel { 2732 display: flex; 2733 flex-direction: column; 2734 gap: var(--space-lg, 32px); 2735 margin: var(--space-big, 72px) auto; 2736} 2737 2738.ws-carousel .ws-carousel-header { 2739 display: flex; 2740 justify-content: space-between; 2741} 2742 2743.ws-carousel .ws-carousel-header .h2, 2744.ws-carousel .ws-carousel-header h2 { 2745 color: var(--color-neutral-800, #373737) !important; 2746 font-family: var(--font-family-base), "Petrobras Sans" !important; 2747 line-height: 100% !important; 2748 margin: var(--space-none, 0) ! important; 2749} 2750 2751.ws-carousel .ws-carousel-header .nav-buttons { 2752 display: flex; 2753 justify-content: space-between; 2754 gap: var(--space-xxs, 8px); 2755} 2756 2757.ws-carousel .ws-carousel-header .nav-buttons .nav-arrow.left-arrow { 2758 transform: scaleX(-1); 2759} 2760 2761.ws-carousel .ws-carousel-header .nav-buttons .nav-arrow { 2762 cursor: pointer; 2763} 2764 2765.ws-carousel .ws-carousel-header .nav-buttons .nav-arrow.inactive { 2766 cursor: not-allowed; 2767} 2768 2769 2770.ws-carousel .ws-carousel-header .nav-buttons .nav-arrow path { 2771 transition: stroke 0.3s ease; 2772} 2773 2774.ws-carousel .ws-carousel-header .nav-buttons .nav-arrow.inactive path { 2775 stroke: #bababa; 2776} 2777 2778.ws-carousel .ws-carousel-header .nav-buttons .nav-arrow.active path { 2779 stroke: #008542; 2780} 2781 2782 2783.ws-carousel .ws-carousel-body { 2784 overflow-x: scroll; 2785 -ms-overflow-style: none; 2786 -scrollbar-width: none; 2787} 2788 2789.ws-carousel .ws-carousel-body::-webkit-scrollbar { 2790 display: none; 2791} 2792 2793.ws-carousel .ws-carousel-body .ws-container { 2794 display: flex; 2795 gap: var(--space-lg, 32px); 2796} 2797 2798.ws-carousel .ws-carousel-body .ws-container .ws-item { 2799 min-width: 300px; 2800 max-width: 300px; 2801 min-height: 400px; 2802 max-height: 400px; 2803 position: relative; 2804 overflow: hidden; 2805 border-radius: var(--border-radius-lg); 2806 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 2807} 2808 2809.ws-carousel .ws-carousel-body .ws-container .ws-item:hover { 2810 cursor: pointer; 2811} 2812 2813.ws-carousel .ws-carousel-body .ws-container .ws-item .ws-image { 2814 position: absolute; 2815 top: 50%; 2816 left: 50%; 2817 transform: translate(-50%, -50%); 2818 height: 100%; 2819} 2820 2821.ws-carousel .ws-carousel-body .ws-container .ws-item .ws-overlay { 2822 position: absolute; 2823 background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); 2824 width: 100%; 2825 height: 100%; 2826} 2827 2828.ws-carousel .ws-carousel-body .ws-container .ws-item .ws-label { 2829 position: absolute; 2830 margin: var(--space-md, 24px) 0 0 var(--space-md, 24px); 2831 border-radius: var(--border-radius-pill, 100%); 2832 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); 2833 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 2834 padding: var(--space-micro, 2px) var(--space-xs, 12px); 2835 2836 color: var(--Default-sup-green-water, #006B65); 2837 font-family: var(--font-family-base), "Petrobras Sans"; 2838 font-size: var(--font-size-xxxs, 12px); 2839 font-style: normal; 2840 font-weight: var(--font-weight-regular, 400); 2841 line-height: var(--line-height-sm, 120%); 2842 color: #006B65; 2843} 2844 2845.ws-carousel .ws-carousel-body .ws-container .ws-item .ws-content { 2846 position: relative; 2847 z-index: 1; 2848 height: 100%; 2849 2850 display: flex; 2851 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 2852 flex-direction: column; 2853 justify-content: flex-end; 2854 align-items: flex-start; 2855 gap: var(--space-md, 24px); 2856} 2857 2858.ws-carousel .ws-carousel-body .ws-container .ws-item .ws-content .h5 { 2859 overflow: hidden; 2860 color: #FFF !important; 2861 text-overflow: ellipsis; 2862 margin: 0 !important; 2863 font-family: var(--font-family-base), "Petrobras Sans" !important; 2864} 2865 2866@media (max-width: 768px) { 2867 2868 .ws-carousel .ws-carousel-header .nav-buttons { 2869 gap: var(--space-micro, 12px); 2870 } 2871 2872 .ws-carousel .ws-carousel-header .nav-buttons .nav-arrow { 2873 width: 44px; 2874 height: 44px; 2875 } 2876 2877 .ws-carousel .ws-carousel-header { 2878 flex-direction: column; 2879 align-items: flex-start; 2880 gap: var(--space-lg, 32px); 2881 } 2882 2883 .ws-carousel .ws-carousel-header .h2 { 2884 font-size: var(--font-size-lg, 24px) !important; 2885 } 2886 2887 .ws-carousel .ws-carousel-body .ws-container { 2888 gap: var(--space-lg, 32px); 2889 } 2890 2891 .ws-carousel .ws-carousel-body .ws-container .ws-item { 2892 min-width: 225px; 2893 max-width: 225px; 2894 background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat; 2895 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 2896 } 2897} 2898 </style> 2899 2900<#-- Exibição de um único story com naveação direto no conteúdo --> 2901<style> 2902 .stories-container * { 2903 margin: 0; 2904 padding: 0; 2905 box-sizing: border-box; 2906 } 2907 2908 .stories-container { 2909 position: relative; 2910 /* 2911 Largura das duas setas com position absolute: 64px 2912 Largura das somas margens das setas: 48px 2913 2914 */ 2915 width: calc(100vw - 64px - 48px); 2916 max-width: 400px; 2917 height: auto; 2918 aspect-ratio: 59/105; 2919 border-radius: 8px; 2920 } 2921 2922 .header-container { 2923 position: absolute; 2924 top: 0; 2925 left: 0; 2926 right: 0; 2927 z-index: 3; 2928 padding: 16px 16px 0 16px; 2929 display: flex; 2930 flex-direction: column; 2931 gap: 24px; 2932 } 2933 2934 .story-header { 2935 display: flex; 2936 flex-direction: column; 2937 gap: 8px; 2938 } 2939 2940 .progress-bars { 2941 display: flex; 2942 gap: 5px; 2943 width: 100%; 2944 } 2945 2946 .progress-bar { 2947 height: 3px; 2948 background-color: rgba(255, 255, 255, 0.3); 2949 flex-grow: 1; 2950 border-radius: 3px; 2951 overflow: hidden; 2952 } 2953 2954 .story-progress { 2955 height: 100%; 2956 background-color: white; 2957 width: 0%; 2958 transition: width 0.2s linear; 2959 } 2960 2961 .story-progress.completed { 2962 width: 100% !important; 2963 } 2964 2965 .story-progress.active { 2966 animation: progress 8s linear forwards; 2967 } 2968 2969 @keyframes progress { 2970 from { 2971 width: 0%; 2972 } 2973 2974 to { 2975 width: 100%; 2976 } 2977 } 2978 2979 .story-slide { 2980 position: absolute; 2981 width: 100%; 2982 height: 100%; 2983 display: none; 2984 flex-direction: column; 2985 justify-content: center; 2986 align-items: center; 2987 color: white; 2988 overflow: hidden; 2989 border-radius: 8px; 2990 } 2991 2992 .story-slide::before { 2993 position: absolute; 2994 z-index: 2; 2995 content: ''; 2996 width: 100%; 2997 height: 100%; 2998 background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); 2999 } 3000 3001 .story-slide.active { 3002 display: flex; 3003 } 3004 3005 .story-image { 3006 width: 100%; 3007 height: 100% !important; 3008 object-fit: cover; 3009 position: absolute; 3010 top: 0; 3011 left: 0; 3012 z-index: 1; 3013 aspect-ratio: auto !important; 3014 } 3015 3016 .story-content { 3017 position: relative; 3018 z-index: 2; 3019 color: white; 3020 width: 100%; 3021 display: flex; 3022 flex-direction: column; 3023 justify-content: flex-end; 3024 height: 100%; 3025 padding: 16px 24px 64px 24px; 3026 } 3027 3028 .story-content .content-wrapper { 3029 display: flex; 3030 flex-direction: column; 3031 align-items: flex-start; 3032 gap: 24px; 3033 align-self: stretch; 3034 padding: 0 16px; 3035 } 3036 3037 .story-content .content-wrapper.no-padding { 3038 padding: 0; 3039 } 3040 3041 .story-title { 3042 display: flex; 3043 padding: 8px; 3044 flex-direction: column; 3045 align-items: flex-start; 3046 align-self: stretch; 3047 backdrop-filter: blur(3px); 3048 } 3049 3050 .story-title.button { 3051 display: none; 3052 } 3053 3054 .story-title.dark-theme, 3055 .story-description.dark-theme { 3056 background: rgba(13, 19, 16, 0.80); 3057 color: #FFF; 3058 } 3059 3060 .story-description.dark-theme p { 3061 color: #FFF !important; 3062 } 3063 3064 .story-title.light-theme, 3065 .story-description.light-theme { 3066 background: rgba(255, 255, 255, 0.90); 3067 color: #373737; 3068 } 3069 3070 .story-title.green-theme, 3071 .story-description.green-theme { 3072 background: rgba(0, 133, 66, 0.80); 3073 color: #FFF; 3074 } 3075 3076 .story-title .title-text { 3077 align-self: stretch; 3078 font-size: 24px; 3079 font-style: normal; 3080 font-weight: 700; 3081 line-height: 100%; 3082 } 3083 3084 .story-title .mischievous { 3085 color: #FDC82F; 3086 font-size: 24px; 3087 font-style: normal; 3088 font-weight: 700; 3089 line-height: 100%; 3090 width: 24px; 3091 } 3092 3093 .description-and-link { 3094 width: 100%; 3095 display: flex; 3096 flex-direction: column; 3097 gap: 8px; 3098 } 3099 3100 .story-description { 3101 padding: 8px; 3102 width: 100%; 3103 } 3104 3105 .story-description p { 3106 font-size: 16px; 3107 font-weight: 400; 3108 line-height: 120%; 3109 margin-bottom: 0; 3110 } 3111 3112 .story-description.button { 3113 padding: 0; 3114 display: flex; 3115 justify-content: center; 3116 } 3117 3118 .story-description.button p a { 3119 text-decoration: underline; 3120 font-weight: bold; 3121 } 3122 3123 .story-description.button p a { 3124 background: #FFF; 3125 width: fit-content; 3126 height: 48px; 3127 display: flex; 3128 justify-content: center; 3129 align-items: center; 3130 gap: 16px; 3131 text-decoration: none; 3132 color: #008542; 3133 border-radius: 100px; 3134 padding: 0 24px; 3135 box-shadow: 0px 4px 16px 0px #00000029; 3136 font-family: 'Petrobras Sans'; 3137 font-weight: 700; 3138 font-size: 16px; 3139 line-height: 144%; 3140 letter-spacing: 0%; 3141 } 3142 3143 .story-description.button p a::after { 3144 content: ''; 3145 display: inline-block; 3146 flex-shrink: 0; 3147 width: 20px; 3148 height: 20px; 3149 vertical-align: middle; 3150 background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjQ2OTUgMTIuMzU5MkMxMC4zMDk4IDEyLjUxODkgMTAuMzA5OCAxMi43Nzc5IDEwLjQ2OTUgMTIuOTM3N0MxMC42MjkzIDEzLjA5NzUgMTAuODg4MyAxMy4wOTc1IDExLjA0ODEgMTIuOTM3N0wxMC40Njk1IDEyLjM1OTJaTTEzLjQwNzIgMTBMMTMuNjk2NSAxMC4yODkzQzEzLjg1NjMgMTAuMTI5NSAxMy44NTYzIDkuODcwNDkgMTMuNjk2NSA5LjcxMDczTDEzLjQwNzIgMTBaTTExLjA0ODEgNy4wNjIyOUMxMC44ODgzIDYuOTAyNTMgMTAuNjI5MyA2LjkwMjUzIDEwLjQ2OTUgNy4wNjIyOUMxMC4zMDk4IDcuMjIyMDUgMTAuMzA5OCA3LjQ4MTA3IDEwLjQ2OTUgNy42NDA4M0wxMS4wNDgxIDcuMDYyMjlaTTcuMTU3MjMgOS41OTA5MUM2LjkzMTI5IDkuNTkwOTEgNi43NDgxNCA5Ljc3NDA3IDYuNzQ4MTQgMTBDNi43NDgxNCAxMC4yMjU5IDYuOTMxMjkgMTAuNDA5MSA3LjE1NzIzIDEwLjQwOTFWOS41OTA5MVpNMTcuMzczMSAxMEMxNy4zNzMxIDEzLjkxNjIgMTQuMTk4NCAxNy4wOTA5IDEwLjI4MjIgMTcuMDkwOVYxNy45MDkxQzE0LjY1MDMgMTcuOTA5MSAxOC4xOTEzIDE0LjM2ODEgMTguMTkxMyAxMEgxNy4zNzMxWk0xMC4yODIyIDE3LjA5MDlDNi4zNjYwMyAxNy4wOTA5IDMuMTkxMzIgMTMuOTE2MiAzLjE5MTMyIDEwSDIuMzczMTRDMi4zNzMxNCAxNC4zNjgxIDUuOTE0MTYgMTcuOTA5MSAxMC4yODIyIDE3LjkwOTFWMTcuMDkwOVpNMy4xOTEzMiAxMEMzLjE5MTMyIDYuMDgzOCA2LjM2NjAzIDIuOTA5MDkgMTAuMjgyMiAyLjkwOTA5VjIuMDkwOTFDNS45MTQxNiAyLjA5MDkxIDIuMzczMTQgNS42MzE5MyAyLjM3MzE0IDEwSDMuMTkxMzJaTTEwLjI4MjIgMi45MDkwOUMxNC4xOTg0IDIuOTA5MDkgMTcuMzczMSA2LjA4MzggMTcuMzczMSAxMEgxOC4xOTEzQzE4LjE5MTMgNS42MzE5MyAxNC42NTAzIDIuMDkwOTEgMTAuMjgyMiAyLjA5MDkxVjIuOTA5MDlaTTExLjA0ODEgMTIuOTM3N0wxMy42OTY1IDEwLjI4OTNMMTMuMTE4IDkuNzEwNzNMMTAuNDY5NSAxMi4zNTkyTDExLjA0ODEgMTIuOTM3N1pNMTMuNjk2NSA5LjcxMDczTDExLjA0ODEgNy4wNjIyOUwxMC40Njk1IDcuNjQwODNMMTMuMTE4IDEwLjI4OTNMMTMuNjk2NSA5LjcxMDczWk03LjE1NzIzIDEwLjQwOTFIMTMuNDA3MlY5LjU5MDkxSDcuMTU3MjNWMTAuNDA5MVoiIGZpbGw9IiMwMDg1NDIiLz4KPC9zdmc+Cg=="); 3151 background-size: contain; 3152 background-repeat: no-repeat; 3153 background-position: center; 3154 } 3155 3156 .story-description a { 3157 position: relative; 3158 z-index: 3; 3159 color: #FFF; 3160 text-decoration: underline; 3161 } 3162 3163 .nav-area-container { 3164 position: absolute; 3165 top: 0; 3166 left: 0; 3167 right: 0; 3168 bottom: 0; 3169 display: flex; 3170 justify-content: space-between; 3171 align-items: center; 3172 z-index: 1; 3173 /* pointer-events: none; */ 3174 } 3175 3176 .nav-area { 3177 height: 100%; 3178 width: 50%; 3179 display: flex; 3180 align-items: center; 3181 } 3182 3183 .nav-area .arrow, 3184 .nav-area .restart-icon { 3185 position: absolute; 3186 } 3187 3188 .nav-area .arrow:hover, 3189 .nav-area.next .restart-icon { 3190 cursor: pointer; 3191 } 3192 3193 .nav-area.prev .arrow { 3194 left: calc(-32px - 24px); 3195 } 3196 3197 .nav-area.next .arrow, 3198 .nav-area.next .restart-icon { 3199 right: calc(-32px - 24px); 3200 } 3201 3202 .nav-area .arrow.disabled { 3203 opacity: 0.4; 3204 } 3205 3206 .nav-area .arrow.disabled:hover { 3207 cursor: not-allowed; 3208 } 3209 3210 .nav-area .hidden { 3211 display: none; 3212 } 3213 3214 .action-buttons { 3215 display: flex; 3216 gap: 24px; 3217 justify-content: flex-end; 3218 } 3219 3220 .action-btn { 3221 background: transparent; 3222 border-radius: 50%; 3223 border: none; 3224 display: flex; 3225 align-items: center; 3226 justify-content: center; 3227 cursor: pointer; 3228 font-size: 14px; 3229 } 3230 3231 .action-btn.pause::before { 3232 content: ''; 3233 display: inline-block; 3234 width: 15px; 3235 height: 18px; 3236 vertical-align: middle; 3237 background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxNiAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjY4NTU1IDE4LjI3NzNINS4zNTE0N1YwLjI3NzM0NEgwLjI2ODU1NVYxOC4yNzczWk0xMC40MzQ0IDAuMjc3MzQ0VjE4LjI3NzNIMTUuNTE3M1YwLjI3NzM0NEgxMC40MzQ0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); 3238 background-size: contain; 3239 background-repeat: no-repeat; 3240 background-position: center; 3241 } 3242 3243 .action-btn.play::before { 3244 content: ''; 3245 display: inline-block; 3246 width: 18px; 3247 height: 18px; 3248 vertical-align: middle; 3249 background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyMiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjUxMjUgMTIuMTQ5OUwyLjUyNSAxLjE0OTg4QzIuMzczNTggMS4wNTY0NyAyLjE5OTk4IDEuMDA1MTYgMi4wMjIxMSAxLjAwMTIyQzEuODQ0MjQgMC45OTcyODcgMS42Njg1NCAxLjA0MDg4IDEuNTEzMTQgMS4xMjc1QzEuMzU3NzQgMS4yMTQxMSAxLjIyODI2IDEuMzQwNjIgMS4xMzgwNSAxLjQ5Mzk3QzEuMDQ3ODUgMS42NDczMiAxLjAwMDIgMS44MjE5NiAxIDEuOTk5ODhWMjMuOTk5OUMxLjAwMDIgMjQuMTc3OCAxLjA0Nzg1IDI0LjM1MjQgMS4xMzgwNSAyNC41MDU4QzEuMjI4MjYgMjQuNjU5MSAxLjM1Nzc0IDI0Ljc4NTYgMS41MTMxNCAyNC44NzIzQzEuNjY4NTQgMjQuOTU4OSAxLjg0NDI0IDI1LjAwMjUgMi4wMjIxMSAyNC45OTg1QzIuMTk5OTggMjQuOTk0NiAyLjM3MzU4IDI0Ljk0MzMgMi41MjUgMjQuODQ5OUwyMC41MTI1IDEzLjg0OTlDMjAuNjYwMiAxMy43NjI1IDIwLjc4MjYgMTMuNjM4MiAyMC44Njc2IDEzLjQ4OTJDMjAuOTUyNiAxMy4zNDAxIDIwLjk5NzQgMTMuMTcxNSAyMC45OTc0IDEyLjk5OTlDMjAuOTk3NCAxMi44MjgzIDIwLjk1MjYgMTIuNjU5NiAyMC44Njc2IDEyLjUxMDZDMjAuNzgyNiAxMi4zNjE1IDIwLjY2MDIgMTIuMjM3MiAyMC41MTI1IDEyLjE0OTlWMTIuMTQ5OVoiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); 3250 background-size: contain; 3251 background-repeat: no-repeat; 3252 background-position: center; 3253 } 3254 3255 .action-btn.share::before { 3256 content: ''; 3257 display: inline-block; 3258 width: 18px; 3259 height: 18px; 3260 vertical-align: middle; 3261 background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA3MDMgMTAuNjYxMkwxNi43NzcgMS4wNjU3MkwxOC4xOTcgMi40NDc2Mkw4LjMzNzAzIDEyLjA1MjlMNi45MDcwMyAxMC42NjEyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi43MzQxIDIuNDg4NzdMMTMuMTA3OCAxNS45NTU0QzEzLjA3NDYgMTYuMDc5MyAxMy4wMDM2IDE2LjE5MDQgMTIuOTA0MSAxNi4yNzQyQzEyLjgwNDYgMTYuMzU3OSAxMi42ODEzIDE2LjQxMDMgMTIuNTUwNiAxNi40MjQ0QzEyLjQxOTkgMTYuNDM4NiAxMi4yODc4IDE2LjQxMzggMTIuMTcxOSAxNi4zNTMzQzEyLjA1NjMgMTYuMjkzMSAxMS45NjIyIDE2LjIwMDIgMTEuOTAxOCAxNi4wODdMMTEuOTAxMiAxNi4wODU5TDguODMwNjkgMTAuMjQyMUwyLjc4MTI5IDcuMzAzNjZMMi43Nzg5MiA3LjMwMjUxQzIuNjYwNDcgNy4yNDUzNyAyLjU2Mjc0IDcuMTU0NDUgMi40OTg3NiA3LjA0MTg3QzIuNDM0NzkgNi45MjkyOCAyLjQwNzYxIDYuODAwMzkgMi40MjA4NSA2LjY3MjM4QzIuNDM0MDkgNi41NDQzOCAyLjQ4NzEyIDYuNDIzMzQgMi41NzI4OCA2LjMyNTQzQzIuNjU4NjMgNi4yMjc1MSAyLjc3MzAyIDYuMTU3MzcgMi45MDA3OSA2LjEyNDM2TDE2LjczNDEgMi40ODg3N1pNMTguOTYyMyAxLjUwODUyQzE5LjA3NzIgMS4xMTQ0MyAxOC45MTE2IDAuNzY0OTExIDE4LjcwNzUgMC41NjYzNjFDMTguNTAzNCAwLjM2NzczNyAxOC4yMzc0IDAuMjc3MzQ0IDE3Ljk4NyAwLjI3NzM0NEgxNy44NjFMMi40MTMyNyA0LjMzNzI0TDIuNDExMTEgNC4zMzc3OUMxLjkxMDcxIDQuNDY3NTMgMS40NjI3NSA0Ljc0MjQ3IDEuMTI2ODIgNS4xMjYwNUMwLjc5MDQxIDUuNTEwMTcgMC41ODIzNTMgNS45ODUgMC41MzA0MDUgNi40ODcxN0MwLjQ3ODQ1NiA2Ljk4OTM1IDAuNTg1MDg2IDcuNDk1MDEgMC44MzYwNzEgNy45MzY2OEMxLjA4NjggOC4zNzc5MiAxLjQ2OTY5IDguNzM0MzUgMS45MzM3NCA4Ljk1ODUzTDEuOTM1MTQgOC45NTkyTDcuNDIzMzcgMTEuNjI1MUwxMC4yMTEyIDE2LjkzMDhMMTAuMjEyOCAxNi45MzM5QzEwLjQ0OTUgMTcuMzgwMiAxMC44MTk3IDE3Ljc0NiAxMS4yNzQ2IDE3Ljk4MzJDMTEuNzI5NSAxOC4yMjAzIDEyLjI0NzYgMTguMzE3NiAxMi43NjA0IDE4LjI2MjJDMTMuMjczMyAxOC4yMDY3IDEzLjc1NjggMTguMDAxMSAxNC4xNDcxIDE3LjY3MjZDMTQuNTM3MyAxNy4zNDQxIDE0LjgxNTkgMTYuOTA4MiAxNC45NDYyIDE2LjQyMjRMMTguOTYyMyAxLjUwODUyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); 3262 background-size: contain; 3263 background-repeat: no-repeat; 3264 background-position: center; 3265 } 3266 3267 @media (max-width: 768px) { 3268 .ws-carousel { 3269 margin: var(--space-lg, 32px) 0; 3270 } 3271 3272 .stories-container { 3273 /* 3274 Largura das duas setas com position absolute: 64px 3275 Largura das somas margens das setas mobile: 16px 3276 Soma das margens laterais: 48px 3277 */ 3278 width: calc(100vw - 64px - 16px - 48px); 3279 } 3280 3281 .header-container { 3282 padding: 6px; 3283 } 3284 3285 .story-progress { 3286 height: 2px; 3287 } 3288 3289 .header-container, 3290 .action-buttons { 3291 gap: 12px; 3292 } 3293 3294 .action-btn.play::before, 3295 .action-btn.pause::before, 3296 .action-btn.share::before { 3297 width: 10px; 3298 height: 10px; 3299 } 3300 3301 .nav-area.prev .arrow { 3302 left: calc(-32px - 8px); 3303 } 3304 3305 .nav-area.next .arrow, 3306 .nav-area.next .restart-icon { 3307 right: calc(-32px - 8px); 3308 } 3309 3310 .story-content { 3311 padding: 16px 16px 32px 16px; 3312 } 3313 3314 .story-content .content-wrapper { 3315 padding: 0; 3316 } 3317 3318 .story-title .title-text { 3319 font-size: 16px; 3320 } 3321 3322 .story-description p, 3323 .story-description p a { 3324 font-size: 14px !important; 3325 } 3326 } 3327</style> 3328 3329 <script> 3330 3331/* Alteração tamanho primeira imagem */ 3332document.addEventListener("DOMContentLoaded", function () { 3333 const firstImg = document.querySelector(".ptb-news__read-news .news-content img:not(.yt-thumb-img)"); 3334 if (firstImg) { 3335 firstImg.classList.add("first-news-image"); 3336 } 3337}); 3338 3339/* CONSTANTS */ 3340const PUBLISHER_LOGO_INDEX = 0; 3341const POSTER_PORTRAIT_INDEX = 1; 3342const PUBLISHER_INDEX = 2; 3343const COVER_INDEX = 3; 3344const STORIES_INDEX = 4; 3345 3346const COVER_HAS_COVER_INDEX = 0; 3347const COVER_TITLE_INDEX = 1; 3348const COVER_TEXT_INDEX = 2; 3349const COVER_IMAGE_INDEX = 3; 3350 3351const STORY_TITLE_INDEX = 0; 3352const STORY_TEXT_INDEX = 1; 3353const STORY_COLOR_THEME_INDEX = 2; 3354const STORY_IMAGE_INDEX = 3; 3355 3356const DETAILS_SVG = `<svg width="91" height="21" viewBox="0 0 91 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 3.625H7.5C7.15482 3.625 6.875 3.90482 6.875 4.25V16.75C6.875 17.0952 7.15482 17.375 7.5 17.375H12.5C12.8452 17.375 13.125 17.0952 13.125 16.75V4.25C13.125 3.90482 12.8452 3.625 12.5 3.625Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 14.25V6.75C17.5 6.40482 17.2202 6.125 16.875 6.125H13.75C13.4048 6.125 13.125 6.40482 13.125 6.75V14.25C13.125 14.5952 13.4048 14.875 13.75 14.875H16.875C17.2202 14.875 17.5 14.5952 17.5 14.25Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.875 14.25L6.875 6.75C6.875 6.40482 6.59518 6.125 6.25 6.125H3.125C2.77982 6.125 2.5 6.40482 2.5 6.75L2.5 14.25C2.5 14.5952 2.77982 14.875 3.125 14.875H6.25C6.59518 14.875 6.875 14.5952 6.875 14.25Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M30.376 15.5L28.36 6.74H29.56L31.06 14.132L32.704 7.196H33.784L35.428 14.132L36.928 6.74H38.08L36.064 15.5H34.828L33.208 8.672L31.588 15.5H30.376ZM39.6543 12.836C39.6783 13.252 39.7343 13.588 39.8223 13.844C39.9183 14.092 40.0503 14.284 40.2183 14.42C40.3863 14.548 40.5863 14.636 40.8183 14.684C41.0583 14.724 41.3303 14.744 41.6343 14.744C41.9143 14.744 42.1743 14.732 42.4143 14.708C42.6543 14.684 42.8863 14.656 43.1103 14.624V15.344C42.8703 15.44 42.5943 15.512 42.2823 15.56C41.9783 15.616 41.6623 15.644 41.3343 15.644C40.3343 15.644 39.6183 15.388 39.1863 14.876C38.7623 14.356 38.5503 13.584 38.5503 12.56C38.5503 11.456 38.7663 10.652 39.1983 10.148C39.6383 9.636 40.2703 9.38 41.0943 9.38C41.5183 9.38 41.8783 9.448 42.1743 9.584C42.4703 9.712 42.7103 9.908 42.8943 10.172C43.0783 10.428 43.2103 10.744 43.2903 11.12C43.3703 11.496 43.4103 11.928 43.4103 12.416V12.836H39.6543ZM42.3543 12.056C42.3543 11.424 42.2583 10.968 42.0663 10.688C41.8823 10.4 41.5543 10.256 41.0823 10.256C40.5703 10.256 40.2103 10.412 40.0023 10.724C39.7943 11.028 39.6743 11.472 39.6423 12.056H42.3543ZM44.9427 15.5V6.74H46.0467V10.1C46.2147 9.916 46.4347 9.752 46.7067 9.608C46.9867 9.456 47.3667 9.38 47.8467 9.38C48.6467 9.38 49.2387 9.652 49.6227 10.196C50.0067 10.74 50.1987 11.496 50.1987 12.464C50.1987 13.512 49.9827 14.304 49.5507 14.84C49.1267 15.376 48.5067 15.644 47.6907 15.644C47.2347 15.644 46.8707 15.572 46.5987 15.428C46.3347 15.284 46.1107 15.096 45.9267 14.864L45.8427 15.5H44.9427ZM46.0227 12.944C46.0227 13.28 46.0627 13.56 46.1427 13.784C46.2227 14.008 46.3307 14.192 46.4667 14.336C46.6107 14.472 46.7747 14.572 46.9587 14.636C47.1507 14.692 47.3547 14.72 47.5707 14.72C48.0587 14.72 48.4267 14.556 48.6747 14.228C48.9307 13.9 49.0587 13.332 49.0587 12.524C49.0587 12.092 49.0227 11.736 48.9507 11.456C48.8867 11.168 48.7907 10.94 48.6627 10.772C48.5347 10.604 48.3747 10.484 48.1827 10.412C47.9987 10.34 47.7907 10.304 47.5587 10.304C47.3347 10.304 47.1267 10.332 46.9347 10.388C46.7507 10.444 46.5907 10.54 46.4547 10.676C46.3187 10.804 46.2107 10.98 46.1307 11.204C46.0587 11.42 46.0227 11.692 46.0227 12.02V12.944ZM54.1271 14.36C54.4711 14.424 54.8431 14.48 55.2431 14.528C55.6431 14.576 56.0231 14.6 56.3831 14.6C56.6791 14.6 56.9431 14.584 57.1751 14.552C57.4071 14.512 57.6031 14.436 57.7631 14.324C57.9231 14.212 58.0431 14.056 58.1231 13.856C58.2111 13.648 58.2551 13.38 58.2551 13.052C58.2551 12.796 58.2271 12.588 58.1711 12.428C58.1151 12.26 58.0191 12.124 57.8831 12.02C57.7551 11.916 57.5831 11.832 57.3671 11.768C57.1511 11.696 56.8871 11.624 56.5751 11.552L56.2151 11.468C55.8951 11.396 55.5991 11.308 55.3271 11.204C55.0631 11.092 54.8351 10.948 54.6431 10.772C54.4511 10.588 54.2991 10.364 54.1871 10.1C54.0831 9.836 54.0311 9.508 54.0311 9.116C54.0311 8.292 54.2711 7.668 54.7511 7.244C55.2391 6.82 55.9551 6.608 56.8991 6.608C57.3391 6.608 57.7471 6.648 58.1231 6.728C58.5071 6.808 58.8431 6.904 59.1311 7.016V7.82C58.8351 7.78 58.4951 7.736 58.1111 7.688C57.7351 7.64 57.3671 7.616 57.0071 7.616C56.7351 7.616 56.4871 7.632 56.2631 7.664C56.0391 7.696 55.8431 7.764 55.6751 7.868C55.5151 7.964 55.3911 8.104 55.3031 8.288C55.2151 8.472 55.1711 8.712 55.1711 9.008C55.1711 9.264 55.2031 9.476 55.2671 9.644C55.3391 9.804 55.4431 9.936 55.5791 10.04C55.7231 10.144 55.8951 10.232 56.0951 10.304C56.3031 10.368 56.5471 10.428 56.8271 10.484L57.2111 10.568C57.5791 10.648 57.8991 10.748 58.1711 10.868C58.4511 10.98 58.6831 11.128 58.8671 11.312C59.0511 11.496 59.1871 11.724 59.2751 11.996C59.3711 12.268 59.4191 12.6 59.4191 12.992C59.4191 13.464 59.3511 13.868 59.2151 14.204C59.0871 14.54 58.8991 14.816 58.6511 15.032C58.4031 15.24 58.0991 15.392 57.7391 15.488C57.3791 15.584 56.9711 15.632 56.5151 15.632C56.0031 15.632 55.5471 15.584 55.1471 15.488C54.7471 15.384 54.4071 15.276 54.1271 15.164V14.36ZM62.3096 13.52C62.3096 14.016 62.4056 14.348 62.5976 14.516C62.7896 14.676 63.0776 14.756 63.4616 14.756C63.7496 14.756 64.0096 14.744 64.2416 14.72V15.44C64.0736 15.488 63.8896 15.528 63.6896 15.56C63.4896 15.6 63.2776 15.62 63.0536 15.62C62.4056 15.62 61.9336 15.46 61.6376 15.14C61.3496 14.82 61.2056 14.296 61.2056 13.568V10.376H60.1376V9.74L61.2056 9.536V7.7H62.3096V9.524H64.1336V10.376H62.3096V13.52ZM66.6991 14.24C66.8351 14.416 66.9951 14.54 67.1791 14.612C67.3711 14.684 67.5951 14.72 67.8511 14.72C68.0991 14.72 68.3151 14.684 68.4991 14.612C68.6911 14.54 68.8471 14.42 68.9671 14.252C69.0951 14.076 69.1911 13.848 69.2551 13.568C69.3191 13.288 69.3511 12.936 69.3511 12.512C69.3511 12.096 69.3191 11.748 69.2551 11.468C69.1911 11.18 69.0911 10.952 68.9551 10.784C68.8271 10.608 68.6671 10.484 68.4751 10.412C68.2831 10.34 68.0631 10.304 67.8151 10.304C67.5671 10.304 67.3471 10.34 67.1551 10.412C66.9711 10.484 66.8151 10.604 66.6871 10.772C66.5671 10.94 66.4751 11.168 66.4111 11.456C66.3471 11.736 66.3151 12.084 66.3151 12.5C66.3151 12.924 66.3471 13.276 66.4111 13.556C66.4751 13.836 66.5711 14.064 66.6991 14.24ZM67.8271 15.644C66.9311 15.644 66.2671 15.384 65.8351 14.864C65.4031 14.344 65.1871 13.564 65.1871 12.524C65.1871 11.476 65.4031 10.692 65.8351 10.172C66.2751 9.644 66.9471 9.38 67.8511 9.38C68.7471 9.38 69.4111 9.64 69.8431 10.16C70.2751 10.68 70.4911 11.46 70.4911 12.5C70.4911 13.548 70.2711 14.336 69.8311 14.864C69.3991 15.384 68.7311 15.644 67.8271 15.644ZM72.0247 15.5V9.524H72.9127L73.0327 10.28C73.4407 9.712 74.0447 9.428 74.8447 9.428C74.9727 9.428 75.1047 9.44 75.2407 9.464V10.376C75.1767 10.368 75.1167 10.364 75.0607 10.364C75.0047 10.364 74.9487 10.364 74.8927 10.364C74.3007 10.364 73.8567 10.504 73.5607 10.784C73.2727 11.064 73.1287 11.516 73.1287 12.14V15.5H72.0247ZM76.431 15.5V9.524H77.535V15.5H76.431ZM76.995 8.3C76.763 8.3 76.591 8.24 76.479 8.12C76.367 8 76.311 7.832 76.311 7.616C76.311 7.144 76.539 6.908 76.995 6.908C77.227 6.908 77.395 6.968 77.499 7.088C77.611 7.208 77.667 7.376 77.667 7.592C77.667 8.064 77.443 8.3 76.995 8.3ZM80.1778 12.836C80.2018 13.252 80.2578 13.588 80.3458 13.844C80.4418 14.092 80.5738 14.284 80.7418 14.42C80.9098 14.548 81.1098 14.636 81.3418 14.684C81.5818 14.724 81.8538 14.744 82.1578 14.744C82.4378 14.744 82.6978 14.732 82.9378 14.708C83.1778 14.684 83.4098 14.656 83.6338 14.624V15.344C83.3938 15.44 83.1178 15.512 82.8058 15.56C82.5018 15.616 82.1858 15.644 81.8578 15.644C80.8578 15.644 80.1418 15.388 79.7098 14.876C79.2858 14.356 79.0738 13.584 79.0738 12.56C79.0738 11.456 79.2898 10.652 79.7218 10.148C80.1618 9.636 80.7938 9.38 81.6178 9.38C82.0418 9.38 82.4018 9.448 82.6978 9.584C82.9938 9.712 83.2338 9.908 83.4178 10.172C83.6018 10.428 83.7338 10.744 83.8138 11.12C83.8938 11.496 83.9338 11.928 83.9338 12.416V12.836H80.1778ZM82.8778 12.056C82.8778 11.424 82.7818 10.968 82.5898 10.688C82.4058 10.4 82.0778 10.256 81.6058 10.256C81.0938 10.256 80.7338 10.412 80.5258 10.724C80.3178 11.028 80.1978 11.472 80.1658 12.056H82.8778ZM85.2741 14.612C85.5141 14.644 85.7901 14.672 86.1021 14.696C86.4221 14.72 86.7341 14.732 87.0381 14.732C87.2781 14.732 87.4861 14.724 87.6621 14.708C87.8461 14.684 87.9941 14.64 88.1061 14.576C88.2181 14.504 88.3021 14.408 88.3581 14.288C88.4141 14.168 88.4421 14.012 88.4421 13.82C88.4421 13.66 88.4221 13.532 88.3821 13.436C88.3421 13.332 88.2741 13.248 88.1781 13.184C88.0901 13.12 87.9661 13.072 87.8061 13.04C87.6541 13 87.4621 12.964 87.2301 12.932L86.8341 12.872C86.6181 12.84 86.4101 12.792 86.2101 12.728C86.0101 12.656 85.8341 12.56 85.6821 12.44C85.5381 12.312 85.4181 12.148 85.3221 11.948C85.2341 11.74 85.1901 11.48 85.1901 11.168C85.1901 10.848 85.2421 10.576 85.3461 10.352C85.4501 10.128 85.5981 9.944 85.7901 9.8C85.9821 9.656 86.2101 9.552 86.4741 9.488C86.7461 9.424 87.0461 9.392 87.3741 9.392C87.7341 9.392 88.0621 9.42 88.3581 9.476C88.6621 9.524 88.9501 9.592 89.2221 9.68V10.388C88.9901 10.364 88.7301 10.34 88.4421 10.316C88.1621 10.292 87.8701 10.28 87.5661 10.28C87.3581 10.28 87.1701 10.288 87.0021 10.304C86.8341 10.32 86.6901 10.36 86.5701 10.424C86.4501 10.48 86.3541 10.564 86.2821 10.676C86.2181 10.78 86.1861 10.928 86.1861 11.12C86.1861 11.272 86.2061 11.396 86.2461 11.492C86.2941 11.58 86.3621 11.656 86.4501 11.72C86.5461 11.776 86.6661 11.82 86.8101 11.852C86.9541 11.884 87.1301 11.916 87.3381 11.948L87.6621 11.996C87.9421 12.036 88.1941 12.092 88.4181 12.164C88.6421 12.236 88.8301 12.34 88.9821 12.476C89.1421 12.604 89.2621 12.772 89.3421 12.98C89.4301 13.188 89.4741 13.452 89.4741 13.772C89.4741 14.436 89.2861 14.912 88.9101 15.2C88.5341 15.488 88.0141 15.632 87.3501 15.632C87.1501 15.632 86.9501 15.62 86.7501 15.596C86.5501 15.58 86.3581 15.556 86.1741 15.524C85.9901 15.492 85.8181 15.46 85.6581 15.428C85.5061 15.388 85.3781 15.352 85.2741 15.32V14.612Z" fill="white"/> </svg`; 3357 3358/* Função para criar formatar object*/ 3359const createStoryObject = (objectContent) => { 3360 const hasCover = Boolean( 3361 objectContent.contentFields[COVER_INDEX].nestedContentFields[ 3362 COVER_HAS_COVER_INDEX 3363 ].contentFieldValue.data 3364 ); 3365 return { 3366 category: objectContent.taxonomyCategoryBriefs[0].taxonomyCategoryName, 3367 publisherLogoSrc: 3368 objectContent.contentFields[PUBLISHER_LOGO_INDEX].contentFieldValue.data, 3369 posterPortraitSrc: 3370 objectContent.contentFields[POSTER_PORTRAIT_INDEX].contentFieldValue.data, 3371 publisher: 3372 objectContent.contentFields[PUBLISHER_INDEX].contentFieldValue.data, 3373 friendlyUrlPath: objectContent.friendlyUrlPath, 3374 cover: { 3375 image: Boolean( 3376 objectContent.contentFields[COVER_INDEX].nestedContentFields[ 3377 COVER_HAS_COVER_INDEX 3378 ].contentFieldValue.data 3379 ), 3380 title: 3381 objectContent.contentFields[COVER_INDEX].nestedContentFields[ 3382 COVER_TITLE_INDEX 3383 ].contentFieldValue.data, 3384 description: 3385 objectContent.contentFields[COVER_INDEX].nestedContentFields[ 3386 COVER_TEXT_INDEX 3387 ].contentFieldValue.data, 3388 imageUrl: 3389 objectContent.contentFields[COVER_INDEX].nestedContentFields[ 3390 COVER_IMAGE_INDEX 3391 ].contentFieldValue.image?.contentUrl || null, 3392 imageAlt: 3393 objectContent.contentFields[COVER_INDEX].nestedContentFields[ 3394 COVER_IMAGE_INDEX 3395 ].contentFieldValue.image?.description || null, 3396 }, 3397 stories: objectContent.contentFields 3398 .slice(STORIES_INDEX) 3399 .map((contentField) => { 3400 return { 3401 title: 3402 contentField.nestedContentFields[STORY_TITLE_INDEX] 3403 ?.contentFieldValue?.data ?? null, 3404 description: 3405 contentField.nestedContentFields[STORY_TEXT_INDEX]?.contentFieldValue 3406 .data ?? null, 3407 colorTheme: 3408 contentField.nestedContentFields[STORY_COLOR_THEME_INDEX] 3409 ?.contentFieldValue?.value ?? null, 3410 imageUrl: 3411 contentField.nestedContentFields[STORY_IMAGE_INDEX] 3412 ?.contentFieldValue?.image?.contentUrl ?? null, 3413 imageAlt: 3414 contentField.nestedContentFields[STORY_IMAGE_INDEX] 3415 ?.contentFieldValue?.image?.description ?? null, 3416 }; 3417 }), 3418 }; 3419}; 3420 3421/* Renderiza os cards */ 3422const storyCardFrom = (storyData) => { 3423 const storyCard = document.createElement("div"); 3424 storyCard.classList.add("ws-item"); 3425 3426 let displayPageUrl; 3427 if (`${themeDisplay.getURLPortal()}`.includes('webserver')) { 3428 displayPageUrl = `${themeDisplay.getURLPortal()}/web/nossa-energia/w/` + storyData.friendlyUrlPath; 3429 } else { 3430 displayPageUrl = `${themeDisplay.getURLPortal()}/w/` + storyData.friendlyUrlPath; 3431 } 3432 3433 storyCard.addEventListener("click", (e) => { 3434 window.location.href = displayPageUrl; 3435 }); 3436 3437 const image = document.createElement("img"); 3438 image.classList.add("ws-image"); 3439 image.src = storyData.cover.imageUrl 3440 ? storyData.cover.imageUrl 3441 : storyData.stories[0].imageUrl; 3442 image.alt = storyData.cover.imageAlt 3443 ? storyData.cover.imageAlt 3444 : storyData.stories[0].imageAlt; 3445 3446 storyCard.appendChild(image); 3447 3448 const overlay = document.createElement("div"); 3449 overlay.classList.add("ws-overlay"); 3450 storyCard.appendChild(overlay); 3451 3452 const label = document.createElement("span"); 3453 label.classList.add("ws-label"); 3454 label.dataset.category = storyData.category; 3455 label.classList.add((storyData.category || "Categoria").toLowerCase().replace(" ", '-')); 3456 label.textContent = storyData.category || "Categoria"; 3457 storyCard.appendChild(label); 3458 3459 const content = document.createElement("div"); 3460 content.classList.add("ws-content"); 3461 3462 const title = document.createElement("h5"); 3463 title.classList.add("h5") 3464 title.textContent = storyData.cover.title || "Título do Card"; 3465 content.appendChild(title); 3466 3467 const details = document.createElement("div"); 3468 details.classList.add("ws-details"); 3469 3470 details.innerHTML = DETAILS_SVG || `<svg>...</svg>`; 3471 content.appendChild(details); 3472 3473 storyCard.appendChild(content); 3474 3475 return storyCard; 3476}; 3477 3478/* Renderiza cores */ 3479 3480const getCategoriesColorsStyles = async () => { 3481 // 3482 const urlToFetchToGetWebStoriesCategoriesColor = `/o/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/31841266/taxonomy-categories?fields=name%2CtaxonomyCategoryProperties`; 3483 3484 return fetch(urlToFetchToGetWebStoriesCategoriesColor, { 3485 method: "GET", 3486 headers: { 3487 accept: "application/json", 3488 "x-csrf-token": Liferay.authToken, 3489 }, 3490 }) 3491 .then((response) => { 3492 if (response.status === 200) { 3493 return response.json(); 3494 } else { 3495 throw new Error("Erro interno. Por favor tente mais tarde."); 3496 } 3497 }) 3498 .then((data) => { 3499 const styleTag = document.createElement('style'); 3500 styleTag.id= 'webstories-carousel-labels'; 3501 3502 let styleContent = ``; 3503 3504 data.items.forEach(item => { 3505 let textColor = item.taxonomyCategoryProperties.find(taxonomtProp => taxonomtProp.key === "Cor do Texto")?.value; 3506 let textHighContrastColor = item.taxonomyCategoryProperties.find(taxonomtProp => taxonomtProp.key === "Cor do Texto em Alto Contraste")?.value; 3507 3508 if (textColor != undefined) { 3509 styleContent = styleContent + ` 3510 .ws-carousel .ws-carousel-body .ws-container .ws-item .ws-label[data-category="` + item.name + `"] { 3511 color: #` + textColor + `; 3512 } 3513 ` 3514 } 3515 3516 if (textHighContrastColor != undefined) { 3517 styleContent = styleContent + ` 3518 body.high-contrast .ws-carousel .ws-carousel-body .ws-container .ws-item .ws-label[data-category="` + item.name + `"] { 3519 color: #` + textHighContrastColor + `; 3520 } 3521 ` 3522 } 3523 }); 3524 3525 styleTag.textContent = styleContent; 3526 3527 document.head.appendChild(styleTag); 3528 }); 3529}; 3530 3531getCategoriesColorsStyles(); 3532 3533/* Renderiza os itens */ 3534const renderItems = (carouselId, webStoriesObjects) => { 3535 const carouselElement = document.querySelector(`#` + carouselId); 3536 const carouselContainer = carouselElement.querySelector(`.ws-container`); 3537 const carouselBody = carouselElement.querySelector(".ws-carousel-body"); 3538 const navButtons = carouselElement.querySelector(".nav-buttons"); 3539 const leftArrow = navButtons.querySelector(".left-arrow"); 3540 const rightArrow = navButtons.querySelector(".right-arrow"); 3541 3542 // Adiciona Cards 3543 webStoriesObjects.forEach((storyObject, index) => { 3544 const storyCard = storyCardFrom(storyObject); 3545 storyCard.dataset.index = index; 3546 carouselContainer.appendChild(storyCard); 3547 }); 3548 3549 // Altera o Layout 3550 function updateLayout() { 3551 if (webStoriesObjects.length < 3) { 3552 if (window.matchMedia("(min-width: 769px)").matches) { 3553 carouselContainer.style.justifyContent = "center"; 3554 navButtons.style.display = "none"; 3555 } else { 3556 carouselContainer.style.justifyContent = "flex-start"; 3557 navButtons.style.display = "flex"; 3558 } 3559 } else { 3560 carouselContainer.style.justifyContent = ""; 3561 carouselContainer.style.gap = window.matchMedia("(max-width: 768px)") 3562 .matches 3563 ? "32px" 3564 : "16px"; 3565 navButtons.style.display = ""; 3566 } 3567 } 3568 updateLayout(); 3569 window.addEventListener("resize", updateLayout); 3570 3571 // Configura Scroll das setas 3572 leftArrow.addEventListener("click", () => { 3573 const items = carouselBody.querySelectorAll(".ws-item"); 3574 const gap = window.matchMedia("(max-width: 768px)").matches ? 32 : 16; 3575 const pageSize = items[0].offsetWidth + gap; 3576 const currentScroll = carouselBody.scrollLeft; 3577 const currentPageReal = carouselBody.scrollLeft / pageSize; 3578 const currentPage = parseInt(currentPageReal); 3579 const rest = currentPage - currentPageReal; 3580 const nextPage = rest !== 0 ? currentPage : currentPage - 1; 3581 carouselBody.scrollLeft = nextPage * pageSize; 3582 }); 3583 3584 rightArrow.addEventListener("click", () => { 3585 const gap = window.matchMedia("(max-width: 768px)").matches ? 32 : 16; 3586 const items = carouselBody.querySelectorAll(".ws-item"); 3587 carouselBody.scrollLeft += items[0].offsetWidth + gap; 3588 }); 3589 3590 const updateArrows = () => { 3591 const scrollLeft = carouselBody.scrollLeft; 3592 const maxScrollLeft = carouselBody.scrollWidth - carouselBody.clientWidth; 3593 3594 // Regra 1: A seta esquerda fica cinza se scrollLeft for 0 3595 if (scrollLeft === 0) { 3596 leftArrow.classList.remove("active"); 3597 leftArrow.classList.add("inactive"); 3598 } else { 3599 leftArrow.classList.remove("inactive"); 3600 leftArrow.classList.add("active"); 3601 } 3602 3603 // Regra 2: A seta direita fica cinza se o scroll for máximo 3604 if (scrollLeft >= maxScrollLeft) { 3605 rightArrow.classList.remove("active"); 3606 rightArrow.classList.add("inactive"); 3607 } else { 3608 rightArrow.classList.remove("inactive"); 3609 rightArrow.classList.add("active"); 3610 } 3611 }; 3612 3613 carouselBody.addEventListener("scroll", updateArrows); 3614}; 3615 3616/* Fetch Things */ 3617async function getWebStoriesDataSectionFromNews(webContentId) { 3618 const ID_INDEX = 0; 3619 const WEB_STORIES_STRUCTURED_CONTENT_INDEX_START_AT = 2; 3620 const urlToFetchToGetWebStoriesGroup = 3621 `/o/headless-delivery/v1.0/structured-contents/` + 3622 webContentId + 3623 `?fields=contentFields`; 3624 3625 return fetch(urlToFetchToGetWebStoriesGroup, { 3626 method: "GET", 3627 headers: { 3628 accept: "application/json", 3629 "x-csrf-token": Liferay.authToken, 3630 }, 3631 }) 3632 .then((response) => { 3633 if (response.status === 200) { 3634 return response.json(); 3635 } else { 3636 throw new Error("Erro interno. Por favor tente mais tarde."); 3637 } 3638 }) 3639 .then((data) => { 3640 const webStoriesGroups = Array.from(data.contentFields).filter( 3641 (contentField) => contentField.label === "Web Stories" 3642 ); 3643 3644 const webStoriesDataMapped = webStoriesGroups.map((webStoryGroup) => { 3645 const webStoryGroupId = 3646 webStoryGroup.nestedContentFields[ID_INDEX].contentFieldValue.data; 3647 const webStoriesStrucutredContentNodes = 3648 webStoryGroup.nestedContentFields.slice( 3649 WEB_STORIES_STRUCTURED_CONTENT_INDEX_START_AT 3650 ); 3651 const webStoriesIds = Array.from(webStoriesStrucutredContentNodes).map( 3652 (webStoryNode) => { 3653 const webStoryId = 3654 webStoryNode.contentFieldValue.structuredContentLink.id; 3655 return { 3656 webStoryId: webStoryId, 3657 }; 3658 } 3659 ); 3660 return { 3661 webStoryGroupId: webStoryGroupId, 3662 webStoriesIds: webStoriesIds, 3663 }; 3664 }); 3665 3666 return webStoriesDataMapped; 3667 }) 3668 .then((webStoriesDataMapped) => { 3669 // Mapeia os dados recebidos 3670 return Promise.all( 3671 webStoriesDataMapped.map(async (group) => { 3672 const updatedWebStoriesIds = await Promise.all( 3673 group.webStoriesIds.map(async (story) => { 3674 // Faz o fetch para obter os dados do webStoryId 3675 const response = await fetch( 3676 `/o/headless-delivery/v1.0/structured-contents/` + 3677 story.webStoryId, 3678 { 3679 method: "GET", 3680 headers: { 3681 accept: "application/json", 3682 "x-csrf-token": Liferay.authToken, 3683 }, 3684 } 3685 ); 3686 if (!response.ok) { 3687 throw new Error( 3688 `Erro ao buscar dados para webStoryId` + story.webStoryId 3689 ); 3690 } 3691 const webStoryData = await response.json(); 3692 return { webStoryData: webStoryData }; 3693 }) 3694 ); 3695 3696 // Retorna o objeto transformado 3697 return { 3698 webStoryGroupId: group.webStoryGroupId, 3699 webStoriesData: updatedWebStoriesIds, 3700 }; 3701 }) 3702 ); 3703 }) 3704 .then((webStoriesDataFetched) => { 3705 return webStoriesDataFetched.map((data) => { 3706 return { 3707 webStoryGroupId: data.webStoryGroupId, 3708 webStoryObjects: data.webStoriesData.map((data) => 3709 createStoryObject(data.webStoryData) 3710 ), 3711 }; 3712 }); 3713 }) 3714 .catch((error) => { 3715 console.error("Erro ao buscar coleção: ", error); 3716 }); 3717} 3718 3719async function getWebStoriesData(webStoriesIds) { 3720 // Mapeia os IDs para criar um array de promessas 3721 const fetchPromises = webStoriesIds.map((webStoryId) => { 3722 //const urlToFetch = `/o/headless-delivery/v1.0/structured-contents/` + webStoryId + `?fields=contentFields`; 3723 const urlToFetch = 3724 `/o/headless-delivery/v1.0/structured-contents/` + 3725 webStoryId + 3726 `?fields=contentFields%2CtaxonomyCategoryBriefs`; 3727 return fetch(urlToFetch, { 3728 method: "GET", 3729 headers: { 3730 accept: "application/json", 3731 "x-csrf-token": Liferay.authToken, 3732 }, 3733 }).then((response) => { 3734 if (!response.ok) { 3735 throw new Error(`Erro ao buscar ID`); 3736 } 3737 return response.json(); // Transforma a resposta em JSON 3738 }); 3739 }); 3740 3741 // Aguarda todas as promessas e preserva a ordem 3742 try { 3743 const results = await Promise.all(fetchPromises); 3744 return results; // Retorna os resultados em ordem 3745 } catch (error) { 3746 console.error("Erro ao buscar Web Stories:", error); 3747 throw error; // Relança o erro para tratamento posterior 3748 } 3749} 3750 3751<#noparse> 3752const scriptForStoryInNews = (storyData, containerId) => { 3753 3754 storyData.stories = storyData.stories.filter(story => story.imageUrl !== null) 3755 3756 const storiesContainer = document.getElementById(`stories-container-${containerId}`); 3757 const prevArrow = storiesContainer.querySelector('.nav-area.prev svg.arrow'); 3758 const nextArrow = storiesContainer.querySelector('.nav-area.next svg.arrow'); 3759 const restartIcon = storiesContainer.querySelector('.nav-area.next svg.restart-icon'); 3760 const progressBars = storiesContainer.querySelector('.progress-bars'); 3761 const pauseBtn = storiesContainer.querySelector('.pause-btn'); 3762 const shareBtn = storiesContainer.querySelector('.share-btn'); 3763 3764 let currentStoryIndex = 0; 3765 let progressTimeout; 3766 let touchStartX = 0; 3767 let touchEndX = 0; 3768 let isPaused = false; 3769 let viewedStories = new Set(); 3770 let progressStartTime = 0; 3771 let remainingTime = 8000; 3772 3773 // Cria slides dos stories 3774 function createStorySlides() { 3775 // Cria barras de progresso 3776 storyData.stories.forEach((story, index) => { 3777 const progressContainer = document.createElement('div'); 3778 progressContainer.className = 'progress-bar'; 3779 progressContainer.dataset.index = index; 3780 3781 const progress = document.createElement('div'); 3782 progress.className = 'story-progress'; 3783 progressContainer.appendChild(progress); 3784 3785 progressBars.appendChild(progressContainer); 3786 }); 3787 3788 // Cria slides 3789 storyData.stories.forEach((story, index) => { 3790 const slide = document.createElement('div'); 3791 slide.className = `story-slide ${index === 0 ? 'active' : ''}`; 3792 slide.dataset.index = index; 3793 3794 let imageHtml = ''; 3795 if (story.imageUrl) { 3796 imageHtml = `<img src="${story.imageUrl}" alt="${story.imageAlt || ''}" class="story-image" loading="lazy">`; 3797 } 3798 3799 slide.innerHTML = ` 3800 ${imageHtml} 3801 <div class="story-content"> 3802 <div class="content-wrapper"> 3803 ${story.title && ( 3804 `<div class="story-title ${story.colorTheme}"> 3805 <p class="title-text">${story.title}</p> 3806 <div class="mischievous">—</div> 3807 </div>` 3808 )} 3809 ${story.description && `<div class="story-description description-text ${story.colorTheme}">${story.description}</div>`} 3810 </div> 3811 </div> 3812 `; 3813 storiesContainer.insertBefore(slide, storiesContainer.querySelector('.nav-area-container')); 3814 }); 3815 3816 updateArrows(); 3817 updateProgressBars(); 3818 startProgressBar(); 3819 } 3820 3821 // Atualiza o estado das setas de navegação 3822 function updateArrows() { 3823 // Seta anterior 3824 if (currentStoryIndex === 0) { 3825 prevArrow.classList.add('disabled'); 3826 } else { 3827 prevArrow.classList.remove('disabled'); 3828 } 3829 3830 // Próxima seta 3831 if (currentStoryIndex === storyData.stories.length - 1) { 3832 nextArrow.classList.add('hidden'); 3833 restartIcon.classList.remove('hidden'); 3834 } else { 3835 nextArrow.classList.remove('hidden'); 3836 restartIcon.classList.add('hidden'); 3837 } 3838 } 3839 3840 // Atualiza as barras de progresso conforme navegação 3841 function updateProgressBars() { 3842 const allProgressBars = storiesContainer.querySelectorAll('.progress-bar .story-progress'); 3843 3844 allProgressBars.forEach((bar, index) => { 3845 bar.classList.remove('completed', 'active'); 3846 bar.style.width = '0%'; 3847 bar.style.animation = 'none'; 3848 3849 if (index < currentStoryIndex) { 3850 // Stories já vistos - barra completa 3851 bar.classList.add('completed'); 3852 bar.style.width = '100%'; 3853 } else if (index === currentStoryIndex) { 3854 // Story atual - barra em progresso 3855 bar.classList.add('active'); 3856 } else { 3857 // Stories não vistos - barra vazia 3858 bar.style.width = '0%'; 3859 } 3860 }); 3861 } 3862 3863 function nextStory() { 3864 if (currentStoryIndex < storyData.stories.length - 1) { 3865 viewedStories.add(currentStoryIndex); 3866 goToStory(currentStoryIndex + 1); 3867 } 3868 } 3869 3870 function prevStory() { 3871 if (currentStoryIndex > 0) { 3872 viewedStories.delete(currentStoryIndex); 3873 goToStory(currentStoryIndex - 1); 3874 } 3875 } 3876 3877 function goToStory(index) { 3878 // Pausa a animação atual 3879 clearTimeout(progressTimeout); 3880 3881 storiesContainer.querySelector('.story-slide.active').classList.remove('active'); 3882 currentStoryIndex = index; 3883 storiesContainer.querySelector(`.story-slide[data-index="${index}"]`).classList.add('active'); 3884 3885 updateArrows(); 3886 updateProgressBars(); 3887 3888 isPaused = false; 3889 pauseBtn.classList.replace('play', 'pause'); 3890 startProgressBar(); 3891 } 3892 3893 function startProgressBar() { 3894 const currentProgressBar = storiesContainer.querySelector(`.progress-bar[data-index="${currentStoryIndex}"] .story-progress`); 3895 3896 // Resetar e iniciar animação 3897 currentProgressBar.style.animation = 'none'; 3898 currentProgressBar.offsetHeight; // Trigger reflow 3899 currentProgressBar.style.animation = 'progress 8s linear forwards'; 3900 3901 progressStartTime = Date.now(); 3902 3903 progressTimeout = setTimeout(() => { 3904 nextStory(); 3905 }, remainingTime); 3906 } 3907 3908 // Pausar/continuar story 3909 function togglePause() { 3910 isPaused = !isPaused; 3911 3912 const currentProgressBar = storiesContainer.querySelector(`.progress-bar[data-index="${currentStoryIndex}"] .story-progress`); 3913 3914 if (isPaused) { 3915 // Pausar 3916 currentProgressBar.style.animationPlayState = 'paused'; 3917 clearTimeout(progressTimeout); 3918 3919 // Calcular tempo restante 3920 const elapsed = Date.now() - progressStartTime; 3921 remainingTime = Math.max(0, 8000 - elapsed); 3922 3923 pauseBtn.classList.remove('pause'); 3924 pauseBtn.classList.add('play'); 3925 } else { 3926 // Retomar 3927 currentProgressBar.style.animationPlayState = 'running'; 3928 pauseBtn.classList.remove('play'); 3929 pauseBtn.classList.add('pause'); 3930 3931 // Reiniciar com tempo restante 3932 progressStartTime = Date.now(); 3933 progressTimeout = setTimeout(() => { 3934 nextStory(); 3935 }, remainingTime); 3936 } 3937 } 3938 3939 function shareStory() { 3940 const currentStory = storyData.stories[currentStoryIndex]; 3941 const baseUrl = window.location.origin; 3942 let displayPageUrl; 3943 if (baseUrl.includes('webserver')) { 3944 displayPageUrl = `${baseUrl}/web/nossa-energia/w/${storyData.friendlyUrlPath}`; 3945 } else { 3946 displayPageUrl = `${baseUrl}/w/${storyData.friendlyUrlPath}`; 3947 } 3948 3949 const shareData = { 3950 title: currentStory.title || 'Story', 3951 text: currentStory.description ? currentStory.description.replace(/<[^>]*>/g, '') : '', 3952 url: displayPageUrl 3953 }; 3954 3955 if (navigator.share) { 3956 navigator.share(shareData) 3957 .then(() => console.log('Compartilhado com sucesso')) 3958 .catch((error) => console.log('Erro ao compartilhar:', error)); 3959 } else { 3960 // Fallback para navegadores que não suportam a API de compartilhamento 3961 alert('Compartilhar: ' + shareData.title + '\n' + shareData.text + '\n' + shareData.url); 3962 } 3963 } 3964 3965 // Event Listeners 3966 prevArrow.addEventListener('click', (e) => { 3967 e.stopPropagation(); 3968 prevStory(); 3969 }); 3970 3971 nextArrow.addEventListener('click', (e) => { 3972 e.stopPropagation(); 3973 nextStory(); 3974 }); 3975 3976 restartIcon.addEventListener('click', (e) => { 3977 e.stopPropagation(); 3978 goToStory(0); 3979 }); 3980 3981 pauseBtn.addEventListener('click', e => { 3982 e.stopPropagation(); 3983 togglePause(); 3984 }); 3985 3986 shareBtn.addEventListener('click', e => { 3987 e.stopPropagation(); 3988 shareStory(); 3989 }); 3990 3991 // Navegação por clique na tela 3992 storiesContainer.addEventListener('click', (e) => { 3993 const containerWidth = storiesContainer.offsetWidth; 3994 const clickX = e.clientX - storiesContainer.getBoundingClientRect().left; 3995 3996 // Se clicou na metade esquerda 3997 if (clickX < containerWidth / 2) { 3998 prevStory(); 3999 } 4000 // Se clicou na metade direita 4001 else if (clickX > containerWidth / 2) { 4002 nextStory(); 4003 } 4004 }); 4005 4006 // Inicializar 4007 createStorySlides(); 4008} 4009</#noparse> 4010 4011async function fetchAndLogWebStories() { 4012 const webStoriesCarouselDataList = await getWebStoriesDataSectionFromNews( 4013 "${newsJournalArticle.getResourcePrimKey()}" 4014 ); 4015 4016 webStoriesCarouselDataList.forEach((webStoriesCarouselData) => { 4017 const onlyOneWebstory = webStoriesCarouselData.webStoryObjects.length === 1; 4018 4019 if (onlyOneWebstory) { 4020 // renderiza um único story com navegação dentro da notícia 4021 const carouselElement = document.querySelector(`#` + webStoriesCarouselData.webStoryGroupId); 4022 carouselElement.style.alignItems = 'center'; 4023 <#noparse> 4024 carouselElement.innerHTML = 4025 ` <div class="stories-container" id="stories-container-${webStoriesCarouselData.webStoryGroupId}"> 4026 <div class="header-container"> 4027 <div class="story-header"> 4028 <div class="progress-bars"></div> 4029 </div> 4030 <div class="action-buttons"> 4031 <button class="action-btn pause pause-btn"></button> 4032 <button class="action-btn share share-btn"></button> 4033 </div> 4034 </div> 4035 4036 <!-- Os stories serão inseridas aqui via JavaScript --> 4037 4038 <div class="nav-area-container"> 4039 <div class="nav-area prev"> 4040 <svg class="arrow disabled" width="32" height="32" viewBox="0 0 34 33" fill="none" 4041 xmlns="http://www.w3.org/2000/svg"> 4042 <g> 4043 <path 4044 d="M1 16.5C1 7.66344 8.16344 0.5 17 0.5C25.8366 0.5 33 7.66344 33 16.5C33 25.3366 25.8366 32.5 17 32.5C8.16344 32.5 1 25.3366 1 16.5Z" 4045 stroke="#959595" /> 4046 <path d="M19 21.5L14 16.5L19 11.5" stroke="#525252" stroke-width="1.5" stroke-linecap="round" 4047 stroke-linejoin="round" /> 4048 </g> 4049 </svg> 4050 </div> 4051 <div class="nav-area next"> 4052 <svg class="arrow" width="32" height="32" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 4053 <path 4054 d="M1 16.5C1 7.66344 8.16344 0.5 17 0.5C25.8366 0.5 33 7.66344 33 16.5C33 25.3366 25.8366 32.5 17 32.5C8.16344 32.5 1 25.3366 1 16.5Z" 4055 stroke="#008542" /> 4056 <path d="M15 11.5L20 16.5L15 21.5" stroke="#008542" stroke-width="1.5" stroke-linecap="round" 4057 stroke-linejoin="round" /> 4058 </svg> 4059 <svg class="restart-icon hidden" width="32" height="32" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 4060 <path 4061 d="M1 16.5C1 7.66344 8.16344 0.5 17 0.5C25.8366 0.5 33 7.66344 33 16.5C33 25.3366 25.8366 32.5 17 32.5C8.16344 32.5 1 25.3366 1 16.5Z" 4062 stroke="#008542" /> 4063 <path 4064 d="M13.9875 14.7313H10.9875M10.9875 14.7313V11.7313M10.9875 14.7313L13.1125 12.6125C13.8816 11.8429 14.8616 11.3186 15.9286 11.106C16.9956 10.8934 18.1017 11.0021 19.1069 11.4182C20.1122 11.8344 20.9714 12.5393 21.576 13.4439C22.1805 14.3485 22.5032 15.412 22.5032 16.5C22.5032 17.588 22.1805 18.6515 21.576 19.5561C20.9714 20.4607 20.1122 21.1656 19.1069 21.5818C18.1017 21.9979 16.9956 22.1066 15.9286 21.894C14.8616 21.6814 13.8816 21.1571 13.1125 20.3875" 4065 stroke="#008542" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> 4066 </svg> 4067 </div> 4068 </div> 4069 </div> 4070 `; 4071 </#noparse> 4072 const singleWebstoryData = webStoriesCarouselData.webStoryObjects[0]; 4073 scriptForStoryInNews(singleWebstoryData, webStoriesCarouselData.webStoryGroupId); 4074 } else { 4075 // Carrossel 4076 renderItems( 4077 webStoriesCarouselData.webStoryGroupId, 4078 webStoriesCarouselData.webStoryObjects 4079 ); 4080 } 4081 }); 4082} 4083 4084fetchAndLogWebStories(); 4085 4086</script> 4087 4088 <script> 4089 <#assign configureLinkTab = "configureLinkTab_" + randomNumber(5)> 4090 4091 function ${configureLinkTab}() { 4092 const root = document.querySelector(".ptb-news__read-news"); 4093 const newsContentElement = root.querySelector(".news-content div:first-child"); 4094 const pList = newsContentElement.querySelectorAll("p"); 4095 pList.forEach((pElement) => { 4096 const cont = pElement.innerHTML.trim(); 4097 if (cont == "" || cont == " ") { 4098 newsContentElement?.removeChild(pElement); 4099 } 4100 }); 4101 } 4102 4103 ${configureLinkTab}(); 4104 4105 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Infográfico" > 4106 4107 function resizeMediaInfographic() { 4108 if (window.innerWidth > 1024) { 4109 const contents = document.querySelectorAll(".ptb-news__read-news .news-content p"); 4110 contents.forEach((content) => { 4111 content.querySelector("img") && (content.style.gridColumn = "2 / 12"); 4112 }); 4113 } 4114 else { 4115 const contents = document.querySelectorAll(".ptb-news__read-news .news-content p"); 4116 contents.forEach((content) => { 4117 content.querySelector("img") && (content.style.gridColumn = ""); 4118 }); 4119 4120 } 4121 } 4122 resizeMediaInfographic(); 4123 </#if> 4124 4125 4126 4127 document.addEventListener("DOMContentLoaded", () => { 4128 const headers = document.querySelectorAll(".ptb-news__read-news .news-content h1, .ptb-news__read-news .news-content h2, .ptb-news__read-news .news-content h3, .ptb-news__read-news .news-content h4"); 4129 4130 headers.forEach((header) => { 4131 4132 const currentLevel = parseInt(header.tagName.charAt(1)); 4133 4134 if (currentLevel >= 1 && currentLevel <= 5) { 4135 4136 const newLevel = currentLevel + 1; 4137 const newTagName = "h" + newLevel; 4138 4139 // Criar a nova tag e transferir o conteúdo 4140 const newHeader = document.createElement(newTagName); 4141 newHeader.innerHTML = header.innerHTML; 4142 4143 // Substituir a tag antiga pela nova 4144 header.parentNode.replaceChild(newHeader, header); 4145 } 4146 }); 4147 4148 <#assign typeOfNews = getFirstCategoryOfVocabulary(assetEntry, typeOfNewsVocabulary) /> 4149 4150 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Infográfico" > 4151 resizeMediaInfographic(); 4152 window.addEventListener("resize", resizeMediaInfographic); 4153 </#if> 4154 }); 4155 4156 AUI().ready(()=>{ 4157 const audiosContainer = document.querySelectorAll(".ptb-news__read-news .news-content .audio-content"); 4158 const audioTemplate = document.querySelector(".ptb-news__read-news .news-content .audio-template"); 4159 4160 audiosContainer.forEach((audioContainer)=>{ 4161 4162 const audio = audioContainer.querySelector("audio"); 4163 const audioInterface = audioTemplate.cloneNode(true); 4164 4165 const sondwave = audioInterface.querySelector(".audio-sondwave"); 4166 const linesDesktop = audioInterface.querySelectorAll(".audio-sondwave .audio-sondwave-desktop line"); 4167 const linesMobile = audioInterface.querySelectorAll(".audio-sondwave .audio-sondwave-mobile line"); 4168 4169 const playPauseButtonAudioInterface = audioInterface.querySelector(".audio-button-play"); 4170 4171 playPauseButtonAudioInterface.addEventListener("click", ()=>{ 4172 if(audioInterface.classList.contains("audio-play")) { 4173 audioInterface.classList.replace("audio-play", "audio-pause"); 4174 audio.pause(); 4175 } 4176 else { 4177 4178 audiosContainer.forEach((audioContainer)=>{ 4179 const otherAudio = audioContainer.querySelector("audio"); 4180 const otherAudioInterface = audioContainer.querySelector(".audio-button-play"); 4181 !otherAudio.paused && otherAudioInterface.click(); 4182 }); 4183 4184 audioInterface.classList.replace("audio-pause", "audio-play"); 4185 audio.play(); 4186 } 4187 }); 4188 4189 const audioMuteButton = audioInterface.querySelector(".audio-button-mute"); 4190 4191 audioMuteButton.addEventListener("click", ()=>{ 4192 if(audioInterface.classList.contains("audio-unmuted")) { 4193 audioInterface.classList.replace("audio-unmuted", "audio-muted"); 4194 audio.muted = true; 4195 } 4196 else { 4197 audioInterface.classList.replace("audio-muted", "audio-unmuted"); 4198 audio.muted = false; 4199 } 4200 }); 4201 4202 const audioTime = audioInterface.querySelector(".audio-time"); 4203 audioTime.textContent = Math.floor(audio.duration / 60) + ":" + Math.floor(audio.duration % 60); 4204 4205 4206 audio.addEventListener("timeupdate", ()=>{ 4207 let minutes = Math.floor((audio.duration - audio.currentTime) / 60); 4208 let seconds = Math.floor((audio.duration - audio.currentTime) % 60); 4209 4210 minutes = minutes < 10? "0" + minutes : minutes; 4211 seconds = seconds < 10? "0" + seconds : seconds; 4212 4213 audioTime.textContent = minutes + ":" + seconds; 4214 4215 const progress = (audio.currentTime / audio.duration) * 100; 4216 4217 linesDesktop.forEach(function(line, index) { 4218 const lineProgress = (index / linesDesktop.length) * 100; 4219 if (progress >= lineProgress) { 4220 !line.classList.contains("line-active") && line.classList.add("line-active"); 4221 } else { 4222 line.classList.contains("line-active") && line.classList.remove("line-active"); 4223 } 4224 }); 4225 4226 linesMobile.forEach(function(line, index) { 4227 const lineProgress = (index / linesMobile.length) * 100; 4228 if (progress >= lineProgress) { 4229 !line.classList.contains("line-active") && line.classList.add("line-active"); 4230 } else { 4231 line.classList.contains("line-active") && line.classList.remove("line-active"); 4232 } 4233 }); 4234 }); 4235 4236 4237 sondwave.addEventListener("click", (event)=>{ 4238 const distanceLeft = (event.clientX - sondwave.getBoundingClientRect().left)/sondwave.offsetWidth; 4239 audio.currentTime = audio.duration * distanceLeft; 4240 }); 4241 4242 audioInterface.style.display = ""; 4243 audioContainer.appendChild(audioInterface); 4244 }); 4245 4246 }); 4247 </script> 4248</#macro> 4249 4250<#macro renderShareAndCopyNews> 4251 <#-- <div class="share_news_container">--> 4252 <div class="social-media-container"> 4253 4254 <#assign emailMsg = "Veja o conteúdo do post no link "> 4255 <#if locale == "en_US"> 4256 <#assign emailMsg = "See the content of the post in the link "> 4257 </#if> 4258 <a class="social-media-share" href="mailto:?subject=${newsInfo.mainHeadlineOfTheNews}&body=${emailMsg}${newsInfo.url}" 4259 target="_blank"> 4260 <svg class="email" width="37" height="36" viewBox="0 0 37 36" fill="none" 4261 xmlns="http://www.w3.org/2000/svg"> 4262 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 4263 <path d="M24.9231 12H11.0769C10.9239 12 10.7772 12.0579 10.669 12.1611C10.5608 12.2642 10.5 12.4041 10.5 12.55V21.9C10.5 22.1917 10.6216 22.4715 10.838 22.6778C11.0543 22.8841 11.3478 23 11.6538 23H24.3462C24.6522 23 24.9457 22.8841 25.162 22.6778C25.3784 22.4715 25.5 22.1917 25.5 21.9V12.55C25.5 12.4041 25.4392 12.2642 25.331 12.1611C25.2228 12.0579 25.0761 12 24.9231 12ZM24.3462 21.9H11.6538V13.8012L17.6106 19.0056C17.7169 19.0984 17.8559 19.1498 18 19.1498C18.1441 19.1498 18.2831 19.0984 18.3894 19.0056L24.3462 13.8012V21.9Z" 4264 fill="#008542"/> 4265 </svg> 4266 <span >send e-mail</span> 4267 </a> 4268 4269 <a class="social-media-share" href="https://www.facebook.com/sharer/sharer.php?u=${newsInfo.url}" target="_blank"> 4270 <svg class="facebook" width="37" height="36" viewBox="0 0 37 36" fill="none" 4271 xmlns="http://www.w3.org/2000/svg"> 4272 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 4273 <path d="M17.5417 24H20.0341V18.1855H21.9697L22.2879 15.875H20.0341V14.2754C20.0341 13.9199 20.0871 13.6406 20.2462 13.4629C20.4053 13.2598 20.75 13.1582 21.2273 13.1582H22.5V11.1016C22.0227 11.0508 21.3864 11 20.6439 11C19.6894 11 18.947 11.2793 18.3902 11.8125C17.8068 12.3457 17.5417 13.082 17.5417 14.0469V15.875H15.5V18.1855H17.5417V24Z" 4274 fill="#008542"/> 4275 </svg> 4276 <span >Facebook</span> 4277 </a> 4278 4279 <#assign mobileShareButtonId = "mobile-share-" + randomNumber(5)> 4280 <div class="mobile-share" id="${mobileShareButtonId}"> 4281 <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg"> 4282 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 4283 <path d="M13.8923 20.5914C15.2136 20.5914 16.2847 19.5151 16.2847 18.1875C16.2847 16.8599 15.2136 15.7837 13.8923 15.7837C12.5711 15.7837 11.5 16.8599 11.5 18.1875C11.5 19.5151 12.5711 20.5914 13.8923 20.5914Z" 4284 fill="#008542" stroke="#008542" stroke-linecap="round" stroke-linejoin="round"/> 4285 <path d="M22.2654 26.0001C23.5866 26.0001 24.6577 24.9238 24.6577 23.5962C24.6577 22.2686 23.5866 21.1924 22.2654 21.1924C20.9441 21.1924 19.873 22.2686 19.873 23.5962C19.873 24.9238 20.9441 26.0001 22.2654 26.0001Z" 4286 fill="#008542" stroke="#008542" stroke-linecap="round" stroke-linejoin="round"/> 4287 <path d="M22.2654 15.1827C23.5866 15.1827 24.6577 14.1064 24.6577 12.7788C24.6577 11.4512 23.5866 10.375 22.2654 10.375C20.9441 10.375 19.873 11.4512 19.873 12.7788C19.873 14.1064 20.9441 15.1827 22.2654 15.1827Z" 4288 fill="#008542" stroke="#008542" stroke-linecap="round" stroke-linejoin="round"/> 4289 <path d="M20.2546 14.0784L15.9036 16.8879" stroke="#008542" stroke-linecap="round" 4290 stroke-linejoin="round"/> 4291 <path d="M15.9036 19.4871L20.2546 22.2966" stroke="#008542" stroke-linecap="round" 4292 stroke-linejoin="round"/> 4293 </svg> 4294 </div> 4295 4296 <a class="social-media-share" href="https://twitter.com/intent/tweet?url=${newsInfo.url}" target="_blank" data-size="large"> 4297 <svg class="twitter" width="37" height="36" viewBox="0 0 37 36" fill="none" 4298 xmlns="http://www.w3.org/2000/svg"> 4299 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 4300 <path d="M22.7542 12H24.7809L20.3542 17.0933 25.5809 24H21.4742L18.2741 19.8133 14.5941 24H12.5674L17.3141 18.56 12.3008 12H16.5141L19.4208 15.84 22.7542 12ZM22.0342 22.7733H23.1542L15.9008 13.1467H14.6741L22.0342 22.7733Z" fill="#008542"/> 4301 </svg> 4302 <span >twitter</span> 4303 </a> 4304 4305 <a class="social-media-share" href="https://api.whatsapp.com/send?text=${newsInfo.url}" data-action="share/whatsapp/share" 4306 target="_blank"> 4307 <svg class="whatsapp" width="37" height="36" viewBox="0 0 37 36" fill="none" 4308 xmlns="http://www.w3.org/2000/svg"> 4309 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 4310 <path d="M12.5482 21.3241C11.6166 19.7525 11.2908 17.8949 11.6318 16.1C11.9729 14.3052 12.9573 12.6965 14.4003 11.5761C15.8434 10.4556 17.6457 9.90042 19.4691 10.0147C21.2925 10.129 23.0114 10.9049 24.3033 12.1967C25.5951 13.4886 26.371 15.2075 26.4853 17.0309C26.5996 18.8543 26.0444 20.6566 24.9239 22.0997C23.8035 23.5427 22.1948 24.5271 20.4 24.8682C18.6051 25.2092 16.7475 24.8834 15.1759 23.9518L12.5795 24.687C12.4731 24.7181 12.3603 24.72 12.2529 24.6925C12.1455 24.6651 12.0475 24.6092 11.9692 24.5308C11.8908 24.4525 11.8349 24.3545 11.8075 24.2471C11.78 24.1397 11.7819 24.0269 11.813 23.9205L12.5482 21.3241Z" 4311 fill="#008542"/> 4312 <path d="M20.6917 21C20.0094 21.0017 19.3335 20.8686 18.7029 20.6083C18.0722 20.348 17.4992 19.9656 17.0168 19.4832C16.5344 19.0008 16.152 18.4278 15.8917 17.7971C15.6314 17.1665 15.4983 16.4906 15.5 15.8083C15.5017 15.3281 15.6937 14.8682 16.0338 14.5293C16.374 14.1903 16.8346 14 17.3148 14C17.394 13.9994 17.472 14.0201 17.5404 14.06C17.6089 14.1 17.6653 14.1576 17.7037 14.2269L18.462 15.5491C18.5071 15.6295 18.5303 15.7203 18.5291 15.8124C18.528 15.9046 18.5026 15.9948 18.4556 16.0741L17.8463 17.0917C18.1584 17.7859 18.7141 18.3416 19.4083 18.6537L20.4259 18.0444C20.5052 17.9974 20.5954 17.972 20.6876 17.9709C20.7797 17.9697 20.8705 17.9929 20.9509 18.038L22.2731 18.7963C22.3424 18.8347 22.4 18.8911 22.44 18.9596C22.4799 19.028 22.5006 19.106 22.5 19.1852C22.4983 19.6649 22.3074 20.1245 21.9689 20.4643C21.6303 20.8041 21.1713 20.9966 20.6917 21Z" 4313 fill="white"/> 4314 </svg> 4315 <span >Share to WhatsApp </span> 4316 </a> 4317 4318 <div class="copy-text-container"> 4319 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 4320 <path d="M10.5 10.5H13.5V2.5H5.5V5.5" stroke="#008542" stroke-linecap="round" 4321 stroke-linejoin="round"/> 4322 <path d="M10.5 5.5H2.5V13.5H10.5V5.5Z" stroke="#008542" stroke-linecap="round" 4323 stroke-linejoin="round"/> 4324 </svg> 4325 4326 <#if locale == "pt_BR"> 4327 <p class="text">Copiar texto <span class="copy-text-title-news"> ${newsInfo.mainHeadlineOfTheNews} </span> </p> 4328 <#else > 4329 <p class="text">Copy text <span class="copy-text-title-news"> ${newsInfo.mainHeadlineOfTheNews} </span> </p> 4330 </#if> 4331 </div> 4332 4333 </div> 4334 4335 <#if locale == "pt_BR"> 4336 <span class="copy-message">Texto copiado!</span> 4337 <#else > 4338 <span class="copy-message">Text copied!</span> 4339 </#if> 4340 <#-- </div>--> 4341</#macro> 4342 4343<#-- ################################################################################################################## --> 4344 4345<#-- ############# Site de Crise - Notícia - Links do conteúdo da notícia ############################################# --> 4346<#macro renderLinks newsInfo> 4347 <#if newsInfo.links?size != 0> 4348 <#--videos "escondidos" que serão unidos a .ptb-news__read-content --> 4349 4350 <div class="ptb-news__links-container d-none "> 4351 <div id="ptb-news__links-identifiers"> 4352 <#assign separator = ""> 4353 <#list newsInfo.links as link> 4354 ${link.id}; 4355 <#assign separator = ";"> 4356 </#list> 4357 </div> 4358 <#list newsInfo.links as link> 4359 <#assign link_index = link?index> 4360 <#assign linkUrl = "#"> 4361 <#assign target = "_blank"> 4362 <#assign linkClass = ""> 4363 4364 <div id="ptb-news__link-container-${link_index}"> 4365 <#if link.externalLink?has_content> 4366 <#assign linkUrl = link.externalLink> 4367 <#assign target = "_blank"> 4368 <#assign linkClass = "external-link"> 4369 <#elseif link.pageLink?has_content> 4370 <#assign linkUrl = link.pageLink> 4371 <#assign target = "_self"> 4372 <#assign linkClass = "internal-page-link"> 4373 <#elseif link.file.mimeType?has_content> 4374 <#assign linkUrl = link.file.url> 4375 <#assign target = "_blank"> 4376 <#assign linkClass = "file-link"> 4377 </#if> 4378 4379 <#-- PDF icon --> 4380 <#if link.iconType == "Opção78730408" > 4381 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 4382 xmlns="http://www.w3.org/2000/svg"> 4383 <path d="M3.752 15.974H4.664C4.912 15.974 5.124 15.954 5.3 15.914C5.476 15.874 5.62 15.806 5.732 15.71C5.852 15.606 5.94 15.466 5.996 15.29C6.052 15.114 6.08 14.894 6.08 14.63C6.08 14.11 5.968 13.758 5.744 13.574C5.528 13.39 5.168 13.298 4.664 13.298H3.752V15.974ZM2 20.654V11.894H4.784C5.856 11.894 6.632 12.122 7.112 12.578C7.6 13.026 7.844 13.698 7.844 14.594C7.844 15.474 7.604 16.158 7.124 16.646C6.652 17.134 5.872 17.378 4.784 17.378H3.752V20.654H2Z" 4384 fill="#008542"/> 4385 <path d="M10.8402 19.142H11.9442C12.2962 19.142 12.6042 19.102 12.8682 19.022C13.1322 18.942 13.3482 18.798 13.5162 18.59C13.6922 18.374 13.8242 18.082 13.9122 17.714C14.0002 17.338 14.0442 16.854 14.0442 16.262C14.0442 15.678 14.0002 15.202 13.9122 14.834C13.8322 14.458 13.7042 14.166 13.5282 13.958C13.3602 13.75 13.1442 13.606 12.8802 13.526C12.6242 13.446 12.3202 13.406 11.9682 13.406H10.8402V19.142ZM9.16016 20.654V11.894H12.1002C12.7642 11.894 13.3322 11.982 13.8042 12.158C14.2762 12.326 14.6602 12.59 14.9562 12.95C15.2602 13.302 15.4802 13.75 15.6162 14.294C15.7602 14.83 15.8322 15.47 15.8322 16.214C15.8322 17.726 15.5362 18.846 14.9442 19.574C14.3522 20.294 13.3882 20.654 12.0522 20.654H9.16016Z" 4386 fill="#008542"/> 4387 <path d="M17.2695 20.654V11.894H22.2735V13.358H18.9735V15.59H21.9015V17.054H18.9735V20.654H17.2695Z" 4388 fill="#008542"/> 4389 <path d="M6.08984 8.24516V1.60376C6.08984 1.44364 6.15211 1.29007 6.26294 1.17684C6.37377 1.06361 6.52408 1 6.68082 1H13.7725M13.7725 1L17.9094 5.22634M13.7725 1L13.7725 5.22634H17.9094M17.9094 5.22634V8.24516" 4390 stroke="#008542" stroke-width="1.5" stroke-linecap="round" 4391 stroke-linejoin="round"/> 4392 </svg> 4393 4394 <#-- JPG icon --> 4395 <#elseif link.iconType == "Opção89889679" > 4396 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 4397 xmlns="http://www.w3.org/2000/svg"> 4398 <path d="M2 19.1657C2.248 19.1977 2.504 19.2257 2.768 19.2497C3.032 19.2657 3.284 19.2737 3.524 19.2737C3.844 19.2737 4.112 19.2497 4.328 19.2017C4.544 19.1537 4.72 19.0657 4.856 18.9377C4.992 18.8017 5.088 18.6257 5.144 18.4097C5.208 18.1857 5.24 17.8977 5.24 17.5457V11.8937H6.992V17.5457C6.992 18.6817 6.756 19.5057 6.284 20.0177C5.82 20.5297 5.128 20.7857 4.208 20.7857C3.984 20.7857 3.764 20.7737 3.548 20.7497C3.34 20.7257 3.14 20.6937 2.948 20.6537C2.756 20.6137 2.58 20.5697 2.42 20.5217C2.26 20.4737 2.12 20.4257 2 20.3777V19.1657Z" 4399 fill="#008542"/> 4400 <path d="M10.4203 15.9737H11.3323C11.5803 15.9737 11.7923 15.9537 11.9683 15.9137C12.1443 15.8737 12.2883 15.8057 12.4003 15.7097C12.5203 15.6057 12.6083 15.4657 12.6643 15.2897C12.7203 15.1137 12.7483 14.8937 12.7483 14.6297C12.7483 14.1097 12.6363 13.7577 12.4123 13.5737C12.1963 13.3897 11.8363 13.2977 11.3323 13.2977H10.4203V15.9737ZM8.66834 20.6537V11.8937H11.4523C12.5243 11.8937 13.3003 12.1217 13.7803 12.5777C14.2683 13.0257 14.5123 13.6977 14.5123 14.5937C14.5123 15.4737 14.2723 16.1577 13.7923 16.6457C13.3203 17.1337 12.5403 17.3777 11.4523 17.3777H10.4203V20.6537H8.66834Z" 4401 fill="#008542"/> 4402 <path d="M22.0085 20.2697C21.6405 20.4057 21.2085 20.5257 20.7125 20.6297C20.2245 20.7337 19.7165 20.7857 19.1885 20.7857C18.5005 20.7857 17.9245 20.6897 17.4605 20.4977C17.0045 20.2977 16.6365 20.0097 16.3565 19.6337C16.0845 19.2577 15.8885 18.7977 15.7685 18.2537C15.6485 17.7017 15.5885 17.0777 15.5885 16.3817C15.5885 15.6217 15.6565 14.9537 15.7925 14.3777C15.9285 13.8017 16.1445 13.3217 16.4405 12.9377C16.7365 12.5457 17.1205 12.2537 17.5925 12.0617C18.0645 11.8617 18.6405 11.7617 19.3205 11.7617C19.7845 11.7617 20.2125 11.8017 20.6045 11.8817C21.0045 11.9617 21.3605 12.0577 21.6725 12.1697V13.3937C21.5525 13.3857 21.4125 13.3737 21.2525 13.3577C21.0925 13.3337 20.9205 13.3137 20.7365 13.2977C20.5605 13.2817 20.3765 13.2697 20.1845 13.2617C20.0005 13.2457 19.8205 13.2377 19.6445 13.2377C19.2205 13.2377 18.8605 13.2857 18.5645 13.3817C18.2765 13.4697 18.0405 13.6297 17.8565 13.8617C17.6805 14.0857 17.5485 14.3937 17.4605 14.7857C17.3805 15.1777 17.3405 15.6737 17.3405 16.2737C17.3405 16.8417 17.3765 17.3217 17.4485 17.7137C17.5285 18.0977 17.6485 18.4097 17.8085 18.6497C17.9685 18.8897 18.1765 19.0617 18.4325 19.1657C18.6965 19.2697 19.0125 19.3217 19.3805 19.3217C19.6765 19.3217 20.0245 19.2857 20.4245 19.2137V17.1977H19.1045V15.8897H22.0085V20.2697Z" 4403 fill="#008542"/> 4404 <path d="M6.08984 8.24516V1.60376C6.08984 1.44364 6.15211 1.29007 6.26294 1.17684C6.37377 1.06361 6.52408 1 6.68082 1H13.7725M13.7725 1L17.9094 5.22634M13.7725 1L13.7725 5.22634H17.9094M17.9094 5.22634V8.24516" 4405 stroke="#008542" stroke-width="1.5" stroke-linecap="round" 4406 stroke-linejoin="round"/> 4407 </svg> 4408 <#-- DOC icon --> 4409 <#elseif link.iconType == "Opção15480314" > 4410 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 4411 xmlns="http://www.w3.org/2000/svg"> 4412 <path d="M2.68 19.1417H3.784C4.136 19.1417 4.444 19.1017 4.708 19.0217C4.972 18.9417 5.188 18.7977 5.356 18.5897C5.532 18.3737 5.664 18.0817 5.752 17.7137C5.84 17.3377 5.884 16.8537 5.884 16.2617C5.884 15.6777 5.84 15.2017 5.752 14.8337C5.672 14.4577 5.544 14.1657 5.368 13.9577C5.2 13.7497 4.984 13.6057 4.72 13.5257C4.464 13.4457 4.16 13.4057 3.808 13.4057H2.68V19.1417ZM1 20.6537V11.8937H3.94C4.604 11.8937 5.172 11.9817 5.644 12.1577C6.116 12.3257 6.5 12.5897 6.796 12.9497C7.1 13.3017 7.32 13.7497 7.456 14.2937C7.6 14.8297 7.672 15.4697 7.672 16.2137C7.672 17.7257 7.376 18.8457 6.784 19.5737C6.192 20.2937 5.228 20.6537 3.892 20.6537H1Z" 4413 fill="#008542"/> 4414 <path d="M10.7894 20.4977C10.3334 20.3057 9.96138 20.0217 9.67338 19.6457C9.39338 19.2697 9.18937 18.8057 9.06137 18.2537C8.93337 17.6937 8.86938 17.0457 8.86938 16.3097C8.86938 15.5657 8.93337 14.9097 9.06137 14.3417C9.19737 13.7737 9.40938 13.2977 9.69738 12.9137C9.99338 12.5297 10.3694 12.2417 10.8254 12.0497C11.2894 11.8577 11.8494 11.7617 12.5054 11.7617C13.1694 11.7617 13.7294 11.8577 14.1854 12.0497C14.6414 12.2417 15.0094 12.5257 15.2894 12.9017C15.5774 13.2777 15.7854 13.7457 15.9134 14.3057C16.0414 14.8577 16.1054 15.5017 16.1054 16.2377C16.1054 16.9817 16.0374 17.6377 15.9014 18.2057C15.7734 18.7737 15.5614 19.2497 15.2654 19.6337C14.9774 20.0177 14.6014 20.3057 14.1374 20.4977C13.6814 20.6897 13.1254 20.7857 12.4694 20.7857C11.8054 20.7857 11.2454 20.6897 10.7894 20.4977ZM11.0894 18.6737C11.2414 18.9057 11.4334 19.0737 11.6654 19.1777C11.8974 19.2737 12.1694 19.3217 12.4814 19.3217C12.7934 19.3217 13.0654 19.2737 13.2974 19.1777C13.5294 19.0737 13.7214 18.9057 13.8734 18.6737C14.0254 18.4337 14.1374 18.1217 14.2094 17.7377C14.2814 17.3457 14.3174 16.8577 14.3174 16.2737C14.3174 15.6897 14.2814 15.2057 14.2094 14.8217C14.1374 14.4297 14.0254 14.1177 13.8734 13.8857C13.7294 13.6457 13.5414 13.4777 13.3094 13.3817C13.0774 13.2777 12.8054 13.2257 12.4934 13.2257C12.1814 13.2257 11.9094 13.2777 11.6774 13.3817C11.4454 13.4777 11.2534 13.6457 11.1014 13.8857C10.9494 14.1177 10.8374 14.4297 10.7654 14.8217C10.6934 15.2057 10.6574 15.6897 10.6574 16.2737C10.6574 16.8577 10.6934 17.3457 10.7654 17.7377C10.8374 18.1217 10.9454 18.4337 11.0894 18.6737Z" 4415 fill="#008542"/> 4416 <path d="M23.1389 20.3897C22.8349 20.5017 22.4989 20.5937 22.1309 20.6657C21.7709 20.7457 21.3629 20.7857 20.9069 20.7857C20.2189 20.7857 19.6429 20.6897 19.1789 20.4977C18.7229 20.3057 18.3549 20.0257 18.0749 19.6577C17.7949 19.2817 17.5949 18.8177 17.4749 18.2657C17.3629 17.7137 17.3069 17.0777 17.3069 16.3577C17.3069 15.5977 17.3709 14.9297 17.4989 14.3537C17.6269 13.7777 17.8309 13.2977 18.1109 12.9137C18.3909 12.5297 18.7589 12.2417 19.2149 12.0497C19.6709 11.8577 20.2229 11.7617 20.8709 11.7617C21.3029 11.7617 21.6989 11.8017 22.0589 11.8817C22.4269 11.9537 22.7629 12.0457 23.0669 12.1577V13.3817C22.8029 13.3497 22.4949 13.3177 22.1429 13.2857C21.7989 13.2537 21.4829 13.2377 21.1949 13.2377C20.8029 13.2377 20.4709 13.2857 20.1989 13.3817C19.9349 13.4697 19.7189 13.6297 19.5509 13.8617C19.3829 14.0857 19.2629 14.3937 19.1909 14.7857C19.1189 15.1697 19.0829 15.6617 19.0829 16.2617C19.0829 16.8617 19.1189 17.3617 19.1909 17.7617C19.2709 18.1537 19.3949 18.4657 19.5629 18.6977C19.7389 18.9217 19.9669 19.0817 20.2469 19.1777C20.5269 19.2657 20.8709 19.3097 21.2789 19.3097C21.5989 19.3097 21.9309 19.2937 22.2749 19.2617C22.6189 19.2217 22.9069 19.1897 23.1389 19.1657V20.3897Z" 4417 fill="#008542"/> 4418 <path d="M6.08984 8.24516V1.60376C6.08984 1.44364 6.15211 1.29007 6.26294 1.17684C6.37377 1.06361 6.52408 1 6.68082 1H13.7725M13.7725 1L17.9094 5.22634M13.7725 1L13.7725 5.22634H17.9094M17.9094 5.22634V8.24516" 4419 stroke="#008542" stroke-width="1.5" stroke-linecap="round" 4420 stroke-linejoin="round"/> 4421 </svg> 4422 <#-- External link icon --> 4423 <#elseif link.iconType == "Opção43823553" > 4424 <svg width="24" height="24" viewBox="0 0 32 32" fill="none" 4425 xmlns="http://www.w3.org/2000/svg"> 4426 <path opacity="0.98" 4427 d="M25.5 15.5001V26.5001C25.5 26.7653 25.3946 27.0197 25.2071 27.2072C25.0196 27.3947 24.7652 27.5001 24.5 27.5001L5.5 27.5001C5.23479 27.5001 4.98043 27.3947 4.79289 27.2072C4.60536 27.0197 4.5 26.7653 4.5 26.5001L4.5 7.50009C4.5 7.23488 4.60536 6.98052 4.79289 6.79299C4.98043 6.60545 5.23478 6.50009 5.5 6.50009L17 6.50009M20.4742 4.7124H27.8988M27.8988 4.7124V12.137M27.8988 4.7124L14.5 18.0001" 4428 stroke="#008542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 4429 </svg> 4430 <#-- Internal page link icon --> 4431 <#elseif link.iconType == "Opção64212757" > 4432 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#008542" viewBox="0 0 256 256"> 4433 <path d="M137.54,186.36a8,8,0,0,1,0,11.31l-9.94,10A56,56,0,0,1,48.38,128.4L72.5,104.28A56,56,0,0,1,149.31,102a8,8,0,1,1-10.64,12,40,40,0,0,0-54.85,1.63L59.7,139.72a40,40,0,0,0,56.58,56.58l9.94-9.94A8,8,0,0,1,137.54,186.36Zm70.08-138a56.08,56.08,0,0,0-79.22,0l-9.94,9.95a8,8,0,0,0,11.32,11.31l9.94-9.94a40,40,0,0,1,56.58,56.58L172.18,140.4A40,40,0,0,1,117.33,142,8,8,0,1,0,106.69,154a56,56,0,0,0,76.81-2.26l24.12-24.12A56.08,56.08,0,0,0,207.62,48.38Z"> 4434 </path> 4435 </svg> 4436 <#-- Download link icon --> 4437 <#elseif link.iconType == "Opção20766606" > 4438 <svg width="24" height="24" viewBox="0 0 32 32" fill="none" 4439 xmlns="http://www.w3.org/2000/svg"> 4440 <path d="M10.75 13.75L16 19M16 19L21.25 13.75M16 19V5M27 19V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V19" 4441 stroke="#008542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 4442 </svg> 4443 </#if> 4444<#if link.title?? && link.title?has_content> 4445 <a href="${linkUrl}" class="link ${linkClass}" target="${target}">${link.title}</a> 4446 </#if> 4447 </div> 4448 </#list> 4449 </div> 4450 4451 <script> 4452 var newsContent_code = document.querySelector(".news-content").innerHTML; 4453 4454 var linksIdentifiers = document.querySelector("#ptb-news__links-identifiers").innerHTML.trim().split(";"); 4455 linksIdentifiers.forEach((linkIdentifier, index) => { 4456 const linkIdentifierContent = document.querySelector("#ptb-news__link-container-" + index); 4457 if (linkIdentifierContent) { 4458 const tag = "#[" + linkIdentifier.trim() + "]"; 4459 const splitContent = newsContent_code.split(tag); 4460 newsContent_code = splitContent.join(linkIdentifierContent.innerHTML); 4461 //linkIdentifierContent.parentNode.removeChild(linkIdentifierContent); 4462 } 4463 }); 4464 4465 4466 var ptb_news__read_content = document.querySelector(".news-content"); 4467 ptb_news__read_content.innerHTML = newsContent_code; 4468 4469 const links_ptb_news = document.querySelectorAll(".news-content a"); 4470 links_ptb_news.forEach((link) => { 4471 link.classList.add("link-ptb-news"); 4472 }); 4473 4474 </script> 4475 4476 <style> 4477 .ptb-news__read-news .ptb-news__link a { 4478 font-family: var(--font-family-base); 4479 font-style: var(--font-style-normal, normal); 4480 font-weight: var(--font-weight-bold, 700); 4481 font-size: var(--font-size-xxs, 16px); 4482 line-height: var(--line-height-xl, 160%); 4483 text-decoration-line: var(--text-decoration-underline, underline); 4484 color: #008542; 4485 } 4486 4487 body.high-contrast-active .ptb-news__read-news .ptb-news__link a { 4488 color: #E4F7E8; 4489 } 4490 4491 .ptb-news__read-news .news-content .link { 4492 font-family: var(--font-family-base); 4493 font-style: var(--font-style-normal, normal); 4494 font-weight: var(--font-weight-bold, 700); 4495 font-size: var(--font-size-xs, 18px); 4496 line-height: var(--line-height-xl, 160%); 4497 4498 text-decoration-line: var(--text-decoration-underline, underline); 4499 color: #008542; 4500 } 4501 4502 body.high-contrast-active .ptb-news__read-news .news-content .link { 4503 color: #E4F7E8; 4504 } 4505 4506 body.high-contrast-active .ptb-news__read-news .news-content svg path { 4507 stroke: var(--color-neutral-500, #D7D7D7); 4508 fill: rgba(255, 255, 255, 0.32); 4509 } 4510 4511 .ptb-news__read-news .news-content .ptb-link__wrapper { 4512 display: flex; 4513 flex-direction: column; 4514 gap: 0; 4515 margin-top: -24px; 4516 } 4517 4518 .ptb-news__read-news .news-content .ptb-link__wrapper svg { 4519 margin-right: var(--space-sm, 16px); 4520 } 4521 4522 .ptb-news__read-news .news-content .ptb-link__wrapper .first { 4523 gap: 0 !important; 4524 } 4525 4526 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 4527 .ptb-news__read-news .news-content .link { 4528 font-size: var(--font-size-xxs, 16px); 4529 } 4530 } 4531 </style> 4532 </#if> 4533</#macro> 4534 4535<#-- ################################################################################################################## --> 4536 4537<#-- ################################################################################################################## --> 4538 4539<#-- ############# Site de Crise - Notícia - Links do conteúdo da notícia ############################################# --> 4540<#macro renderCite> 4541 <div class="ptb-news__cite-container"> 4542 <div class="ptb-news__cite-container-breakpoint breakpoint"> 4543 <div class="ptb-news__cite-container-col col-1-12 md-col-1-8 sm-col-1-4"> 4544 <div class="ptb-news__cite-title"> 4545 <#if locale?lower_case == "pt_br"> 4546 Notas 4547 <#else> 4548 Notes 4549 </#if> 4550 </div> 4551 4552 <div class="ptb-news__cites-elements"> 4553 </div> 4554 </div> 4555 </div> 4556 </div> 4557 4558 <script> 4559 function positionCitesText(parentNodeCitesText) { 4560 4561 parentNodeCitesText.forEach((parentNodeCiteText)=>{ 4562 if(window.innerWidth > 1024) { 4563 parentNodeCiteText.style.display=""; 4564 parentNodeCiteText.style.gridColumnStart = "11"; 4565 parentNodeCiteText.style.gridColumnEnd = "13"; 4566 } 4567 else { 4568 parentNodeCiteText.style.display="none"; 4569 parentNodeCiteText.style.gridColumnStart = ""; 4570 parentNodeCiteText.style.gridColumnEnd = ""; 4571 } 4572 }); 4573 } 4574 4575 function addCitesTextMobile(citesText) { 4576 const citesContainer = document.querySelector(".ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cites-elements"); 4577 4578 if(citesContainer.children.length === 0) { 4579 citesContainer && citesText.forEach((citeText)=>{ 4580 citesContainer.appendChild(citeText.cloneNode(true)); 4581 }); 4582 } 4583 } 4584 4585 const citesText = document.querySelectorAll(".news-content cite"); 4586 4587 if (citesText.length > 0) { 4588 const parentNodeCitesText = [...citesText].map((citeText)=>citeText.parentNode); 4589 positionCitesText(parentNodeCitesText); 4590 addCitesTextMobile(citesText); 4591 } 4592 else { 4593 const citesContainer = document.querySelector(".ptb-news__cite-container"); 4594 citesContainer && (citesContainer.style.display="none"); 4595 } 4596 4597 document.addEventListener('DOMContentLoaded', ()=>{ 4598 4599 const citesText = document.querySelectorAll(".news-content cite"); 4600 4601 if (citesText.length > 0) { 4602 const parentNodeCitesText = [...citesText].map((citeText)=>citeText.parentNode); 4603 4604 positionCitesText(parentNodeCitesText); 4605 addCitesTextMobile(citesText); 4606 4607 window.addEventListener('resize', ()=>{positionCitesText(parentNodeCitesText)}); 4608 } 4609 else { 4610 const citesContainer = document.querySelector(".ptb-news__cite-container"); 4611 citesContainer && (citesContainer.style.display="none"); 4612 } 4613 }); 4614 4615 </script> 4616 4617 <style> 4618 4619 .ptb-news__read-news-post cite { 4620 color: var(--color-neutral-800, #373737); 4621 font-family: var(--font-family-base); 4622 font-size: var(--font-size-xxxs, 14px) !important; 4623 font-style: var(--font-style-normal, normal); 4624 font-weight: var(--font-weight-regular, 400); 4625 line-height: var(--line-height-xl, 160%); 4626 } 4627 4628 .ptb-news__read-news-post cite a{ 4629 font-size: var(--font-size-xxxs, 14px) !important; 4630 } 4631 4632 body.high-contrast-active .ptb-news__read-news-post cite { 4633 color: var(--text-primary-default, var(--color-neutral-100)); 4634 } 4635 4636 .ptb-news__read-news-post .news-content cite, 4637 .ptb-news__read-news-post .ptb-news__cite-container cite { 4638 display: block; 4639 padding-left: var(--space-md); 4640 border-left: var(--border-width-hairline, 1px) solid var(--color-neutral-500, #D7D7D7); 4641 } 4642 4643 @media screen and (min-width: 1025px) { 4644 .ptb-news__read-news-post .ptb-news__cite-container { 4645 display: none; 4646 } 4647 } 4648 4649 @media screen and (max-width: 1025px) { 4650 .ptb-news__read-news .ptb-news__cite-container .link { 4651 text-decoration-line: var(--text-decoration-underline, underline); 4652 color: #008542; 4653 } 4654 4655 body.high-contrast-active .ptb-news__read-news .ptb-news__cite-container .link { 4656 color: #E4F7E8; 4657 } 4658 4659 body.high-contrast-active .ptb-news__read-news .ptb-news__cite-container svg path { 4660 stroke: var(--color-neutral-500, #D7D7D7); 4661 fill: rgba(255, 255, 255, 0.32); 4662 } 4663 4664 .ptb-news__read-news-post .ptb-news__cite-container { 4665 display: grid; 4666 background: var(--background-surface-level-03, #EEE); 4667 } 4668 4669 body.high-contrast-active .ptb-news__read-news-post .ptb-news__cite-container { 4670 background: var(--background-surface-level-03, #525252); 4671 } 4672 4673 .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col { 4674 padding: var(--space-xxl) 0; 4675 display: flex; 4676 flex-direction: column; 4677 gap: var(--space-lg, 32px); 4678 } 4679 4680 .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cites-elements { 4681 display: flex; 4682 flex-direction: column; 4683 gap: var(--space-lg, 32px); 4684 } 4685 4686 .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cite-title { 4687 color: var(--color-neutral-800, #373737); 4688 font-size: var(--font-size-sm, 20px); 4689 font-style: var(--font-style-normal, normal); 4690 font-weight: var(--font-weight-bold, 700); 4691 line-height: var(--line-height-xl, 160%); 4692 } 4693 4694 body.high-contrast-active .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cite-title { 4695 color: var(--text-primary-default, var(--color-neutral-100)); 4696 } 4697 } 4698 </style> 4699 4700</#macro> 4701 4702<#-- ################################################################################################################## --> 4703 4704 4705<#-- ############# Site de Crise - Notícia - Galeria de imagens ####################################################### --> 4706<#macro renderGallery newsInfo> 4707 <#if newsInfo.galleryItems?size == 0> 4708 <#return /> 4709 </#if> 4710 4711 <div class="gallery-breakpoint breakpoint"> 4712 <div class="gallery col-3-11 md-col-1-8 sm-col-1-4"> 4713 4714 <div class="title-container"> 4715 <svg class="icon" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg"> 4716 <path d="M23 22H3C2.46957 22 1.96086 21.7893 1.58579 21.4142C1.21071 21.0391 1 20.5304 1 20V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H17L19 4H23C23.5304 4 24.0391 4.21071 24.4142 4.58579C24.7893 4.96086 25 5.46957 25 6V20C25 20.5304 24.7893 21.0391 24.4142 21.4142C24.0391 21.7893 23.5304 22 23 22Z" 4717 stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 4718 <path d="M13 17C15.4853 17 17.5 14.9853 17.5 12.5C17.5 10.0147 15.4853 8 13 8C10.5147 8 8.5 10.0147 8.5 12.5C8.5 14.9853 10.5147 17 13 17Z" 4719 stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 4720 </svg> 4721 <p class="title"> 4722 <#if locale == "pt_BR"> Galeria de Imagens <#else > Image gallery </#if> 4723 </p> 4724 </div> 4725 4726 <div class="image-container"> 4727 <#assign index = 0 /> 4728 <#assign index = 0 /> 4729 <#list newsInfo.galleryItems as gItem> 4730 <div class="modal-image-fragment" index="${index}"> 4731 <div class="modal-image-container" index="${index}"> 4732 <span class="click-image" ></span> 4733 4734 <div class="image-player-container"> 4735 <span class="close-image"> 4736 <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"> 4737 <path d="M22 -9.61651e-07C34.1503 -4.30546e-07 44 9.84974 44 22C44 34.1503 34.1503 44 22 44C9.84973 44 -1.49276e-06 34.1503 -9.61651e-07 22C-4.30546e-07 9.84973 9.84974 -1.49276e-06 22 -9.61651e-07Z" fill="white"/> 4738 <path d="M26.5 26.5L17.5 17.5M17.5 26.5L26.5 17.5" stroke="#008542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 4739 </svg> 4740 </span> 4741 <div class="image-player-session"> 4742 <#-- Midias adaptativas de imagem para desktop e mobile --> 4743 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${gItem.image.fileEntryId}") /> 4744 <#assign urlAdaptativeMediaMobile = gItem.image.url/> 4745 <#assign urlAdaptativeMediaDesktop = gItem.image.url/> 4746 4747 <#if fileDataRequest?? && fileDataRequest.adaptedImages?? > 4748 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 4749 <#list dataAdaptativeMedia as data> 4750 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 4751 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 4752 </#if> 4753 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 4754 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 4755 </#if> 4756 </#list> 4757 </#if> 4758 4759 <picture> 4760 <source media="(max-width:767px)" srcset="${urlAdaptativeMediaMobile}" > 4761 <img width="274px" height="152px" loading="lazy" src="${urlAdaptativeMediaDesktop}" alt="${gItem.image.alt}"/> 4762 </picture> 4763 </div> 4764 </div> 4765 </div> 4766 </div> 4767 <#assign index = index + 1 /> 4768 <#assign index = index + 1 /> 4769 </#list> 4770 <div class="control-arrow left-arrow"> 4771 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 4772 <path d="M20 26L10 16L20 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 4773 </svg> 4774 </div> 4775 <div class="control-arrow right-arrow"> 4776 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 4777 <path d="M12 6L22 16L12 26" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 4778 </svg> 4779 </div> 4780 <div class="image-bullets"> 4781 <#list 0..(newsInfo.galleryItems?size-1) as index> 4782 <div index="${index}" class="bullet"></div> 4783 </#list> 4784 </div> 4785 </div> 4786 <div class="control-arrow left-arrow"> 4787 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 4788 <path d="M20 26L10 16L20 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 4789 </svg> 4790 </div> 4791 <div class="control-arrow right-arrow"> 4792 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 4793 <path d="M12 6L22 16L12 26" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 4794 </svg> 4795 </div> 4796 <div class="image-bullets"> 4797 <#list 0..(newsInfo.galleryItems?size-1) as index> 4798 <div index="${index}" class="bullet"></div> 4799 </#list> 4800 </div> 4801 </div> 4802 </div> 4803 </div> 4804 4805 <style> 4806 4807 .ptb-news__read-news .gallery { 4808 padding-top: 42px; 4809 } 4810 4811 .ptb-news__read-news .gallery * { 4812 margin: 0; 4813 padding: 0; 4814 } 4815 4816 .ptb-news__read-news .gallery { 4817 display: flex; 4818 gap: var(--space-xl, 40px); 4819 flex-direction: column; 4820 } 4821 4822 .ptb-news__read-news .gallery .control-arrow { 4823 position: fixed; 4824 height: 100%; 4825 align-items: center; 4826 display: flex; 4827 justify-content: center; 4828 display: none; 4829 z-index: 9999; 4830 } 4831 4832 .ptb-news__read-news .gallery .control-arrow svg { 4833 cursor: pointer; 4834 } 4835 4836 .ptb-news__read-news .gallery .left-arrow { 4837 top: 0; 4838 left: 5vw; 4839 } 4840 4841 .ptb-news__read-news .gallery .right-arrow { 4842 top: 0; 4843 right: 5vw; 4844 } 4845 4846 .ptb-news__read-news .gallery .lefg-arrow svg { 4847 margin-left: 16px !important; 4848 } 4849 4850 .ptb-news__read-news .gallery .right-arrow svg { 4851 margin-right: 16px !important; 4852 } 4853 4854 .ptb-news__read-news .gallery .image-bullets { 4855 display: none; 4856 gap: var(--space-sm, 16px); 4857 position: fixed; 4858 left: 0; 4859 bottom: calc(10vh + 24px); 4860 width: 100vw; 4861 z-index: 9999; 4862 justify-content: center; 4863 } 4864 4865 .ptb-news__read-news .gallery .image-bullets .bullet { 4866 width: var(--size-xs, 16px); 4867 height: var(--size-xs, 16px); 4868 border-radius: 50%; 4869 border: 1px solid var(--color-neutral-100, #FFFFFF); 4870 z-index: 9999; 4871 cursor: pointer; 4872 } 4873 4874 .ptb-news__read-news .gallery .image-bullets .bullet.current-item { 4875 background: var(--color-neutral-100, #FFFFFF); 4876 } 4877 4878 .ptb-news__read-news .gallery .control-arrow { 4879 position: fixed; 4880 height: 100%; 4881 align-items: center; 4882 display: flex; 4883 justify-content: center; 4884 display: none; 4885 z-index: 9999; 4886 } 4887 4888 .ptb-news__read-news .gallery .left-arrow { 4889 top: 0; 4890 left: 5vw; 4891 } 4892 4893 .ptb-news__read-news .gallery .right-arrow { 4894 top: 0; 4895 right: 5vw; 4896 } 4897 4898 .ptb-news__read-news .gallery .lefg-arrow svg { 4899 margin-left: 16px !important; 4900 } 4901 4902 .ptb-news__read-news .gallery .right-arrow svg { 4903 margin-right: 16px !important; 4904 } 4905 4906 .ptb-news__read-news .gallery .image-bullets { 4907 display: none; 4908 gap: var(--space-sm, 16px); 4909 position: fixed; 4910 left: 0; 4911 bottom: calc(10vh + 24px); 4912 width: 100vw; 4913 z-index: 9999; 4914 justify-content: center; 4915 } 4916 4917 .ptb-news__read-news .gallery .image-bullets .bullet { 4918 width: var(--size-xs, 16px); 4919 height: var(--size-xs, 16px); 4920 border-radius: 50%; 4921 border: 1px solid var(--color-neutral-100, #FFFFFF); 4922 z-index: 9999; 4923 } 4924 4925 .ptb-news__read-news .gallery .image-bullets .bullet.current-item { 4926 background: var(--color-neutral-100, #FFFFFF); 4927 } 4928 4929 .ptb-news__read-news .gallery .title-container { 4930 display: flex; 4931 align-items: center; 4932 gap: var(--space-sm, 16px); 4933 } 4934 4935 .ptb-news__read-news .gallery .title-container svg { 4936 width: var(--size-md, 24px); 4937 height: 21px; 4938 } 4939 4940 .ptb-news__read-news .gallery .title-container .title { 4941 color: var(--color-neutral-800, #373737); 4942 font-family: var(--font-family-base); 4943 font-size: var(--font-size-lg); 4944 font-style: var(--font-style-normal); 4945 font-weight: var(--font-weight-bold); 4946 line-height: var(--line-height-md); 4947 } 4948 4949 body.high-contrast-active .ptb-news__read-news .gallery .title-container .title { 4950 color: var(--color-neutral-100); 4951 } 4952 4953 .ptb-news__read-news .gallery .image-container { 4954 display: flex; 4955 gap: var(--space-sm, 16px); 4956 flex-wrap: wrap; 4957 } 4958 4959 .ptb-news__read-news .gallery .image-container .modal-image-fragment { 4960 width: inherit; 4961 height: inherit; 4962 max-height: calc(100vw/2); 4963 padding: 0; 4964 margin: 0; 4965 overflow: hidden; 4966 } 4967 4968 .ptb-news__read-news .gallery .image-container .modal-image-fragment * { 4969 box-sizing: border-box; 4970 margin: 0; 4971 padding: 0; 4972 } 4973 4974 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container { 4975 width: 100%; 4976 height: inherit; 4977 display: flex; 4978 justify-content: center; 4979 align-items: center; 4980 position: relative; 4981 } 4982 4983 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container.image-playing { 4984 position: fixed; 4985 top: 0; 4986 left: 0; 4987 width: 100vw !important; 4988 height: 100vh !important; 4989 z-index: 9999 !important; 4990 background-color: rgba(0, 0, 0, 0.75); 4991 max-height: 100vh; 4992 } 4993 4994 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .click-image { 4995 height: 100%; 4996 width: 100%; 4997 position: absolute; 4998 z-index: 3; 4999 cursor: pointer; 5000 } 5001 5002 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container { 5003 width: 100%; 5004 height: 100%; 5005 } 5006 5007 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing { 5008 position: relative; 5009 width: 90vw !important; 5010 height: 80vh !important; 5011 z-index: 9999 !important; 5012 background-color: rgba(0, 0, 0, 0.75); 5013 border-radius: var(--border-radius-card); 5014 } 5015 5016 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .close-image { 5017 display: none; 5018 position: absolute; 5019 top: 0; 5020 right: 0; 5021 transform: translate(100%, -100%); 5022 z-index: 99999; 5023 } 5024 5025 body.high-contrast-active .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .close-image path:nth-child(1) { 5026 fill: var(--background-Surface-level-01, #010101); 5027 } 5028 5029 body.high-contrast-active .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .close-image path:nth-child(2) { 5030 stroke: #E4F7E8; 5031 } 5032 5033 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .close-image.image-active { 5034 display: block; 5035 } 5036 5037 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .image-player-session { 5038 width: 100%; 5039 height: 100%; 5040 } 5041 5042 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing .image-player-session { 5043 width: 90vw !important; 5044 height: 80vh !important; 5045 z-index: 9999 !important; 5046 background-color: rgba(0, 0, 0, 0.75); 5047 border-radius: var(--border-radius-card); 5048 overflow: hidden; 5049 } 5050 5051 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .image-player-session img { 5052 object-fit: cover; 5053 } 5054 5055 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing .image-player-session img { 5056 width: 100%; 5057 height: 100%; 5058 margin-left: 0 !important; 5059 max-height: 100vh; 5060 } 5061 5062 .ptb-news__read-news .gallery .image-container img { 5063 width: 274px; 5064 height: 152px; 5065 border-radius: var(--border-radius-md, 8px); 5066 } 5067 5068 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 5069 5070 .ptb-news__read-news .gallery { 5071 padding-top: var(--space-xl, 40px); 5072 } 5073 5074 .ptb-news__read-news .gallery .image-container { 5075 gap: var(--space-xxs, 8px); 5076 } 5077 5078 .ptb-news__read-news .gallery .image-container img { 5079 width: 296px; 5080 height: 180px; 5081 } 5082 5083 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container.image-playing .image-player-container.image-playing { 5084 transform: rotate(90deg); 5085 transform-origin: center; 5086 width: 80vh !important; 5087 height: 90vw !important; 5088 } 5089 5090 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container.image-playing .image-player-container.image-playing img{ 5091 cursor: pointer; 5092 } 5093 5094 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing .image-player-session { 5095 width: 80vh !important; 5096 height: 90vw !important; 5097 } 5098 5099 .ptb-news__read-news .gallery .lefg-arrow svg { 5100 margin-left: 4px !important; 5101 } 5102 5103 .ptb-news__read-news .gallery .right-arrow svg { 5104 margin-right: 4px !important; 5105 } 5106 5107 .ptb-news__read-news .gallery .image-bullets { 5108 gap: 14px; 5109 } 5110 5111 .ptb-news__read-news .gallery .image-bullets .bullet { 5112 width: var(--size-xxs, 12px); 5113 height: var(--size-xxs, 12px); 5114 } 5115 5116 .ptb-news__read-news .gallery .lefg-arrow svg { 5117 margin-left: 4px !important; 5118 } 5119 5120 .ptb-news__read-news .gallery .right-arrow svg { 5121 margin-right: 4px !important; 5122 } 5123 5124 .ptb-news__read-news .gallery .image-bullets { 5125 gap: 14px; 5126 } 5127 5128 .ptb-news__read-news .gallery .image-bullets .bullet { 5129 width: var(--size-xxs, 12px); 5130 height: var(--size-xxs, 12px); 5131 } 5132 } 5133 5134 </style> 5135 5136 <script> 5137 5138 5139 const allModalImagesFragment = document.querySelectorAll(".ptb-news__read-news .gallery .modal-image-fragment"); 5140 const totalItems = allModalImagesFragment.length; 5141 const bulletsContainer = document.querySelector(".ptb-news__read-news .gallery .image-bullets"); 5142 const bullets = bulletsContainer.querySelectorAll(".bullet"); 5143 let currentItem = 0; 5144 const nextImage = document.querySelector(".ptb-news__read-news .gallery .right-arrow"); 5145 const previousImage = document.querySelector(".ptb-news__read-news .gallery .left-arrow"); 5146 5147 const stopImage = (getImageClick, imagePlayerContainer, imageContainer, closeImage) => { 5148 getImageClick.classList.remove('image-playing'); 5149 imagePlayerContainer.classList.remove('image-playing'); 5150 imageContainer.classList.remove('image-playing'); 5151 5152 const currentBullet = document.querySelector('.ptb-news__read-news .gallery .image-bullets .bullet[index="' + currentItem + '"]') 5153 currentBullet && currentBullet.classList.remove('current-item'); 5154 5155 closeImage.classList.remove('image-active'); 5156 5157 document.querySelector("body").style.overflow = 'initial'; 5158 [nextImage, previousImage].forEach(item => { 5159 item.style.display = "none"; 5160 }); 5161 bulletsContainer.style.display = "none"; 5162 } 5163 5164 const playImage = (index, getImageClick, imagePlayerContainer, imageContainer, closeImage) => { 5165 getImageClick.classList.add('image-playing'); 5166 imagePlayerContainer.classList.add('image-playing'); 5167 imageContainer.classList.add('image-playing'); 5168 closeImage.classList.add('image-active'); 5169 5170 5171 document.querySelector("body").style.overflow = 'hidden'; 5172 [nextImage, previousImage].forEach(item => { 5173 item.style.display = "flex"; 5174 }); 5175 bulletsContainer.style.display = "flex"; 5176 bullets[index].classList.add('current-item'); 5177 } 5178 5179 const changeImage = (next) => { 5180 if(next == currentItem || next < 0 || next >= totalItems) return; 5181 5182 const getImageClick = allModalImagesFragment[currentItem].querySelector('.click-image'); 5183 const imageContainer = allModalImagesFragment[currentItem].querySelector('.modal-image-container'); 5184 const imagePlayerContainer = allModalImagesFragment[currentItem].querySelector('.image-player-container'); 5185 const image = imagePlayerContainer.querySelector('img'); 5186 const closeImage = imagePlayerContainer.querySelector('.close-image'); 5187 5188 const currentBullet = document.querySelector('.ptb-news__read-news .gallery .image-bullets .bullet[index="' + currentItem + '"]') 5189 currentBullet.classList.remove('current-item'); 5190 5191 stopImage(getImageClick, imagePlayerContainer, imageContainer, closeImage); 5192 allModalImagesFragment[next].querySelector('.click-image')?.click(); 5193 5194 const nextBullet = document.querySelector('.ptb-news__read-news .gallery .image-bullets .bullet[index="' + next + '"]') 5195 nextBullet.classList.add('current-item'); 5196 currentItem = next; 5197 } 5198 5199 nextImage.addEventListener('click', () => { 5200 changeImage(currentItem + 1); 5201 }); 5202 5203 previousImage.addEventListener('click', () => { 5204 changeImage(currentItem - 1); 5205 }); 5206 5207 bullets.forEach((bullet, bulletIndex) => { 5208 bullet.addEventListener('click', (_) => changeImage(bulletIndex)) ; 5209 }); 5210 5211 allModalImagesFragment.forEach((modalImageFragment, index)=>{ 5212 const totalItems = allModalImagesFragment.length; 5213 const bulletsContainer = document.querySelector(".ptb-news__read-news .gallery .image-bullets"); 5214 const bullets = bulletsContainer.querySelectorAll(".bullet"); 5215 let currentItem = 0; 5216 const nextImage = document.querySelector(".ptb-news__read-news .gallery .right-arrow"); 5217 const previousImage = document.querySelector(".ptb-news__read-news .gallery .left-arrow"); 5218 }); 5219 5220 allModalImagesFragment.forEach((modalImageFragment, index)=>{ 5221 const getImageClick = modalImageFragment.querySelector('.click-image'); 5222 const imageContainer = modalImageFragment.querySelector('.modal-image-container'); 5223 const imagePlayerContainer = modalImageFragment.querySelector('.image-player-container'); 5224 5225 const image = imagePlayerContainer.querySelector('img'); 5226 const closeImage = imagePlayerContainer.querySelector('.close-image'); 5227 const body = document.body; 5228 5229 const toTopButton = document.querySelector(".fragment_88038 .petro-button"); 5230 5231 getImageClick.addEventListener('click', () => { 5232 if (document.body.classList.contains('has-edit-mode-menu')) { 5233 return; 5234 } 5235 currentItem = index; 5236 if (imagePlayerContainer.classList.contains('image-playing')) { 5237 toTopButton && (toTopButton.style.zIndex = ""); 5238 stopImage(getImageClick, imagePlayerContainer, imageContainer, closeImage); 5239 } else { 5240 playImage(index, getImageClick, imagePlayerContainer, imageContainer, closeImage); 5241 toTopButton && (toTopButton.style.zIndex = "1"); 5242 } 5243 }) 5244 5245 closeImage.addEventListener('click', () => { 5246 if (imagePlayerContainer.classList.contains('image-playing')) { 5247 toTopButton && (toTopButton.style.zIndex = ""); 5248 stopImage(getImageClick, imagePlayerContainer, imageContainer, closeImage); 5249 const bulletToClose = document.querySelector('.ptb-news__read-news .gallery .image-bullets .bullet[index="' + index + '"]') 5250 bulletToClose?.classList.remove('current-item'); 5251 } 5252 }) 5253 }); 5254 </script> 5255 5256</#macro> 5257 5258 5259<#-- ################################################################################################################## --> 5260 5261 5262 5263 5264 5265 5266 5267 5268 5269 5270 5271 5272 5273 <#-- ############# Site de Crise - Notícia - Galeria de imagens ####################################################### --> 5274<#macro renderQuotes newsInfo> 5275 <#if newsInfo.quotes?size != 0> 5276 <#--quotes "escondidas" que serão unidas a .ptb-news__read-content --> 5277 5278 <div class="ptb-news__quotes-container d-none "> 5279 <div id="ptb-news__quotes-identifiers"> 5280 <#assign separator = ""> 5281 <#list newsInfo.quotes as quote> 5282 ${quote.id}; 5283 <#assign separator = ";"> 5284 </#list> 5285 </div> 5286 <#list newsInfo.quotes as quote> 5287 <#assign quotes_index = quote?index> 5288 <div id="ptb-news__quotes-container-${quote_index}"> 5289 <#assign noAuthorWrapper = !((quote.image.url?? && quote.image.url?has_content) || (quote.author?has_content)) /> 5290 <div class="quote <#if noAuthorWrapper>no-author-wrapper</#if>"> 5291 <div class="text-wrapper"> 5292 <blockquote class="text">${quote.content}</blockquote > 5293 </div> 5294 <#if !noAuthorWrapper> 5295 <div class="author-wrapper"> 5296 <#if quote.image.url?? && quote.image.url?has_content> 5297 <#assign imageUrl = "/o/adaptive-media/image/" + quote.image.fileEntryId +"/Thumbnail-300x300/image"/> 5298 <img src="${imageUrl}" loading="lazy" alt="${quote.image.alt}"> 5299 </#if> 5300 <#if quote.author?? && quote?has_content> 5301 <p class="author">${quote.author}</p> 5302 </#if> 5303 </div> 5304 </#if> 5305 </div> 5306 </div> 5307 </#list> 5308 </div> 5309 5310 <script> 5311 var newsContent_code = document.querySelector(".news-content").innerHTML; 5312 5313 var quotesIdentifiers = document.querySelector("#ptb-news__quotes-identifiers").innerHTML.trim().split(";"); 5314 quotesIdentifiers.forEach((quoteIdentifier, index) => { 5315 const quoteIdentifierContent = document.querySelector("#ptb-news__quotes-container-" + index); 5316 if (quoteIdentifierContent) { 5317 const tag = "#[" + quoteIdentifier.trim() + "]"; 5318 const splitContent = newsContent_code.split(tag); 5319 newsContent_code = splitContent.join(quoteIdentifierContent.innerHTML); 5320 //linkIdentifierContent.parentNode.removeChild(linkIdentifierContent); 5321 } 5322 }); 5323 5324 5325 var ptb_news__read_content = document.querySelector(".news-content"); 5326 ptb_news__read_content.innerHTML = newsContent_code; 5327 5328 </script> 5329 5330 <style> 5331 5332 .ptb-news__read-news .quote { 5333 display: flex; 5334 flex-direction: column; 5335 gap: var(--space-md, 24px); 5336 } 5337 5338 .ptb-news__read-news .quote.no-author-wrapper{ 5339 gap: 0; 5340 } 5341 5342 .ptb-news__read-news .quote .text-wrapper { 5343 padding-left: var(--space-xl, 40px); 5344 } 5345 5346 .ptb-news__read-news .quote .text-wrapper .text { 5347 font-style: var(--font-style-italic) !important; 5348 padding-left: var(--space-md, 24px); 5349 margin-bottom: 0; 5350 border-left: 1px solid var(--border-color-mid, #d7d7d7); 5351 font-size: var(--font-size-xxs, 16px); 5352 } 5353 5354 .ptb-news__read-news .quote .author-wrapper { 5355 display: flex; 5356 flex-direction: row; 5357 gap: var(--space-md, 24px); 5358 } 5359 5360 .ptb-news__read-news .news-content .quote .author-wrapper img { 5361 height: var(--size-xxxl, 56px); 5362 width: var(--size-xxxl, 56px); 5363 border-radius: 100px; 5364 border: var(--size-nano, 2px) solid var(--border-color-mid) !important; 5365 } 5366 5367 .ptb-news__read-news .news-content .quote .author-wrapper p { 5368 margin: 0; 5369 align-self: center; 5370 font-size: var(--font-size-xs, 18px); 5371 font-style: var(--font-style-normal, normal); 5372 font-weight: var(--font-weight-bold, 700); 5373 line-height: var(--line-height-xs, 100%); 5374 } 5375 5376 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 5377 .ptb-news__read-news .quote .text-wrapper { 5378 padding-left: 0; 5379 } 5380 5381 .ptb-news__read-news .quote .text-wrapper .text { 5382 font-size: var(--font-size-xxxs, 14px); 5383 } 5384 5385 .ptb-news__read-news .news-content .quote .author-wrapper p { 5386 font-size: var(--font-size-xxs, 16px); 5387 } 5388 } 5389 </style> 5390 </#if> 5391</#macro> 5392 5393 5394 5395 5396<#-- ################################################################################################################## --> 5397 5398 5399 5400 5401 5402 5403 5404 5405<#-- ############# Site de Crise - Notícia - Extrair dados de Notícias ################################################ --> 5406<#-- 5407Add elements from the sidebar to define your template. Type "${" to use the 5408autocomplete feature. 5409--> 5410<#function extractFeaturedNewsHeadline fieldList xmlArticle> 5411 <#return getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia")> 5412</#function> 5413 5414<#function extractNewsSummary fieldList xmlArticle> 5415 <#return getFieldValue(fieldList, xmlArticle, "Resumo da notícia")> 5416</#function> 5417 5418<#function extractPublishDate journalArticle> 5419 <#assign lastPublishDate = journalArticle.getModifiedDate()> 5420 <#if journalArticle.getLastPublishDate()??> 5421 <#assign lastPublishDate = journalArticle.getLastPublishDate()> 5422 <#else> 5423 <#assign lastPublishDate = journalArticle.getModifiedDate()> 5424 </#if> 5425 <#return lastPublishDate /> 5426</#function> 5427 5428<#-- Seção da imagem de destaque ----------------------------------------------------------------------> 5429<#function extractNewsMedia fieldList xmlArticle fileEntryService> 5430 <#-- Tentando pegar Imagem --> 5431 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) /> 5432 <#assign media = {} /> 5433 <#list mediasGroup as mediaGroup > 5434 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) /> 5435 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "fileEntryId" : media.fileEntryId} /> 5436 5437 <#-- Se não tiver imagem, tentar pegar vídeo --> 5438 <#if !media.imageSrc?has_content> 5439 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") /> 5440 <#if youtubeID?? && youtubeID?has_content> 5441 <#assign media = {"videoYotubeID": youtubeID} /> 5442 <#else> 5443 <#-- Tentar pegar vídeo Interno --> 5444 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) /> 5445 <#if internalVideo?? && internalVideo?has_content> 5446 <#assign media = {"internalVideo": internalVideo} /> 5447 </#if> 5448 </#if> 5449 </#if> 5450 5451 <#assign referenceMediasGroup = getNodes(getIdFromFieldName(fieldList, "Referências"), mediaGroup) /> 5452 <#list referenceMediasGroup as referenciaMediaGroup > 5453 <#assign credits = getFieldValue(fieldList, referenceMediasGroup, "Crédito da mídia de destaque da notícia") /> 5454 <#assign legend = getFieldValue(fieldList, referenceMediasGroup, "Legenda da mídia de destaque da notícia") /> 5455 </#list> 5456 5457 <#assign media = media + {"credits": credits, "legend": legend} /> 5458 5459 </#list> 5460 5461 <#return media> 5462</#function> 5463 5464 5465<#--------------------- Renderização de Lista de Cards -----------------------------------------------> 5466 5467<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS --> 5468<#assign rootCss = "card-news-list-container_" + randomNumber(4586) /> 5469 5470<#attempt> 5471 <#assign ourEnergyStyles = [] /> 5472 <#list ourEnergyVocabulary.getCategories() as ourEnergyCategory > 5473 <#assign shadowColorCategory = "" /> 5474 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra")??)> 5475 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra") /> 5476 <#assign shadowColorCategory = categoryShadowColorByService.value /> 5477 </#if> 5478 5479 <#assign backgroundColorCategory = "" /> 5480 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo")??)> 5481 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo") /> 5482 <#assign backgroundColorCategory = categoryBackgroundColorByService.value /> 5483 </#if> 5484 5485 <#assign textColorCategory = "" /> 5486 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto")??)> 5487 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto") /> 5488 <#assign textColorCategory = categoryTextColorByService.value /> 5489 </#if> 5490 5491 <#assign textColorHighContrastCategory = "" /> 5492 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste")??)> 5493 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste") /> 5494 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value /> 5495 </#if> 5496 5497 <#assign ourEnergyStyles += [{"titleLocale": ourEnergyCategory.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] /> 5498 </#list> 5499 5500 <#recover> 5501 <#assign ourEnergyStyles = [] /> 5502 5503</#attempt> 5504 5505<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article --> 5506<#function getFirstCategoryTitleLocaleOfVocabulary journalArticle vocabulary > 5507 <#attempt> 5508 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 5509 5510 <#list categories as category> 5511 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 5512 <#return category.getTitle(locale)> 5513 </#if> 5514 </#list> 5515 5516 <#return ""> 5517 5518 <#recover> 5519 <#return "" /> 5520 5521 </#attempt> 5522</#function> 5523 5524<#-- Função para obter os dados de um card no Web Content (Journal Article) --> 5525<#function getDataForCard entry > 5526 <#attempt> 5527 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) /> 5528 <#assign ddmStructure = journalArticle.getDDMStructure() /> 5529 <#assign fieldList = getFieldListByStructure(ddmStructure) /> 5530 <#assign xmlArticle = journalArticle.getDocument().getRootElement() /> 5531 5532 <#-- Tentando pegar Imagem --> 5533 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) /> 5534 <#assign media = "" /> 5535 <#list mediasGroup as mediaGroup > 5536 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) /> 5537 5538 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") /> 5539 5540 <#assign urlAdaptativeMediaDesktop = ""/> 5541 <#assign urlAdaptativeMediaMobile = ""/> 5542 <#if media.url?? && media.url?has_content && fileDataRequest?? && fileDataRequest.adaptedImages?? > 5543 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 5544 <#list dataAdaptativeMedia as data> 5545 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 5546 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 5547 </#if> 5548 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 5549 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 5550 </#if> 5551 </#list> 5552 </#if> 5553 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": {"mobile": urlAdaptativeMediaMobile, "desktop": urlAdaptativeMediaDesktop}} /> 5554 5555 <#-- Se não tiver imagem, tentar pegar vídeo --> 5556 <#if !media.imageSrc?? || !media.imageSrc?has_content> 5557 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") /> 5558 <#if youtubeID?? && youtubeID?has_content> 5559 <#assign media = {"videoYotubeID": youtubeID} /> 5560 <#else> 5561 <#-- Tentar pegar vídeo Interno --> 5562 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) /> 5563 <#if internalVideo?? && internalVideo?has_content> 5564 <#assign media = {"internalVideo": internalVideo} /> 5565 </#if> 5566 </#if> 5567 </#if> 5568 </#list> 5569 5570 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") /> 5571 5572 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") /> 5573 5574 <#assign ourEnergyCategory = getFirstCategoryTitleLocaleOfVocabulary(entry, ourEnergyVocabulary) /> 5575 5576 <#assign typeOfNews = getFirstCategoryTitleLocaleOfVocabulary(entry, typeOfNewsVocabulary) /> 5577 5578 <#if themeDisplay.getPortalURL()?contains("webserver")> 5579 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()> 5580 <#else> 5581 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()> 5582 </#if> 5583 5584 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "ourEnergyCategory": ourEnergyCategory, "typeOfNews": typeOfNews, "urlNews": urlNews} /> 5585 5586 <#return cardData> 5587 5588 <#recover> 5589 <#return {} /> 5590 </#attempt> 5591 5592 <#-- cardData -> image: url, alt 5593 title 5594 timeRead 5595 ourEnergyCategory 5596 typeOfNews 5597 urlNews 5598 --> 5599</#function> 5600 5601 5602<#-- Macro para renderizar os arrows--> 5603<#macro renderArrows> 5604 <div class="card-news-list-arrows-breakpoint"> 5605 <div class="card-news-list-arrows"> 5606 <div class="card-news-arrow-left arrow-disable"> 5607 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> 5608 <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"/> 5609 <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"/> 5610 </svg> 5611 </div> 5612 <div class="card-news-arrow-right"> 5613 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> 5614 <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"/> 5615 <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"/> 5616 </svg> 5617 5618 </div> 5619 </div> 5620 </div> 5621 5622 <style> 5623 5624 .${rootCss} .card-news-list-arrows-breakpoint { 5625 position: relative; 5626 z-index: 1; 5627 width: 100%; 5628 } 5629 5630 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows { 5631 display: flex; 5632 align-items: flex-start; 5633 justify-self: flex-end; 5634 gap: var(--space-xxs, 8px); 5635 } 5636 5637 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left, 5638 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right { 5639 cursor: pointer; 5640 } 5641 5642 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(1), 5643 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(1) { 5644 fill: rgb(0, 133, 66); 5645 } 5646 5647 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), 5648 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) { 5649 fill: white; 5650 } 5651 5652 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(2), 5653 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(2) { 5654 stroke: #fff; 5655 } 5656 5657 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), 5658 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) { 5659 stroke: #010101; 5660 } 5661 5662 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable, 5663 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable { 5664 opacity: 0.4; 5665 cursor: auto; 5666 } 5667 5668 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left path, 5669 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right path { 5670 stroke: rgb(0, 133, 66); 5671 transition: all 300ms ease-in-out; 5672 } 5673 5674 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left path, 5675 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right path { 5676 stroke: rgba(228, 247, 232, 1); 5677 } 5678 5679 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(1), 5680 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(1) { 5681 stroke: rgb(149, 149, 149); 5682 } 5683 5684 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(1), 5685 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(1) { 5686 stroke: rgba(215, 215, 215, 1); 5687 } 5688 5689 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(2), 5690 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(2) { 5691 stroke: rgb(82, 82, 82); 5692 } 5693 5694 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(2), 5695 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(2) { 5696 stroke: rgba(149, 149, 149, 1); 5697 } 5698 5699 @media screen and (min-width: 1440px) { 5700 .${rootCss} .card-news-list-arrows-breakpoint { 5701 width: 100%; 5702 } 5703 } 5704 5705 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 5706 5707 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows { 5708 justify-self: flex-start; 5709 margin-top: var(--space-lg); 5710 } 5711 } 5712 5713 </style> 5714 5715</#macro> 5716 5717 5718<#-- Macro para renderizar um Card --> 5719<#macro renderCard cardData> 5720 <#-- cardData -> image: url, alt 5721 title 5722 timeRead 5723 ourEnergyCategory 5724 typeOfNews 5725 urlNews 5726 --> 5727 5728 <div class="card-news-container"> 5729 <a class="news-page-see-more-link card-news-link" href="${cardData.urlNews}"> Link da Notícia ${cardData.title} </a> 5730 <div class="card-news-thumb"> 5731 <#assign noImage = "" /> 5732 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content> 5733 <#assign imageSrcDesktop = cardData.media.imageSrc /> 5734 <#assign imageSrcMobile = cardData.media.imageSrc /> 5735 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content> 5736 <#assign imageSrcDesktop = cardData.media.urlAdaptativeMedia.desktop /> 5737 <#assign imageSrcMobile = cardData.media.urlAdaptativeMedia.mobile /> 5738 </#if> 5739 <picture> 5740 <source media="(max-width:767px)" srcset="${imageSrcMobile}"> 5741 <img class="card-news-image" loading="lazy" src="${imageSrcDesktop}" alt="${cardData.media.imageAlt}"/> 5742 </picture> 5743 <#else> 5744 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content> 5745 <picture> 5746 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/mqdefault.jpg"> 5747 <img class="card-news-image" loading="lazy" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/> 5748 </picture> 5749 <#else> 5750 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) > 5751 <video class="card-news-image" loading="lazy"> 5752 <source src="${cardData.media.internalVideo.url}"> 5753 Your browser does not support the video tag. 5754 </video> 5755 <#else> 5756 <#assign noImage = "no-image" /> 5757 </#if> 5758 </#if> 5759 <svg class="thumb-play-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 5760 <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"/> 5761 <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"/> 5762 </svg> 5763 </#if> 5764 </div> 5765 5766 <div class="card-news-category-container ${noImage}"> 5767 <div data-category="${cardData.ourEnergyCategory}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergyCategory} </div> 5768 </div> 5769 5770 <div class="card-news-text-content ${noImage}"> 5771 <div class="card-news-title h5"> ${cardData.title} </div> 5772 5773 <div class="card-news-info"> 5774 <div class="card-news-type"> 5775 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default(""))?? > 5776 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default("")) /> 5777 <img src="${postTypeIconUrl}" loading="lazy" alt="post type icon" /> 5778 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div> 5779 <#else/> 5780 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 5781 <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"/> 5782 </svg> 5783 <div class="card-news-type-text paragraph-micro-regular">Artigo</div> 5784 </#if> 5785 </div> 5786 5787 <#if cardData.timeRead?? && cardData.timeRead?has_content> 5788 <div class="card-news-time-read"> 5789 <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"> 5790 <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"/> 5791 </svg> 5792 5793 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div> 5794 </div> 5795 </#if> 5796 </div> 5797 </div> 5798 </div> 5799</#macro> 5800 5801<style> 5802 .${rootCss} .card-news-container { 5803 width: 300px; 5804 height: 370px; 5805 display: flex; 5806 flex-direction: column; 5807 flex-shrink: 0; 5808 align-items: flex-start; 5809 border-radius: var(--border-radius-lg); 5810 border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 5811 background: var(--background-surface-level-01, #FFF); 5812 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 5813 overflow: hidden; 5814 scroll-snap-align: start; 5815 cursor: pointer; 5816 transition: border 300ms ease-in-out; 5817 text-decoration: none; 5818 position: relative; 5819 } 5820 5821 body.high-contrast-active .${rootCss} .card-news-container { 5822 border: var(--border-width-hairline) solid var(--border-card-default, #525252); 5823 background: var(--background-surface-level-01, #010101); 5824 } 5825 5826 .${rootCss} .card-news-container:hover { 5827 border: var(--border-width-hairline) solid rgb(0, 133, 66); 5828 } 5829 5830 body.high-contrast-active .${rootCss} .card-news-container:hover { 5831 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 5832 } 5833 5834 .${rootCss} .card-news-container .card-news-link { 5835 position: absolute; 5836 top: 0; 5837 width: 100%; 5838 height: 100%; 5839 z-index: 1; 5840 opacity: 0; 5841 } 5842 5843 .${rootCss} .card-news-container .card-news-thumb { 5844 position: relative; 5845 } 5846 5847 .${rootCss} .card-news-container .card-news-image { 5848 width: 298px; 5849 height: 168px; 5850 object-fit: cover; 5851 } 5852 5853 5854 .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon { 5855 position: absolute; 5856 left: 50%; 5857 top: 50%; 5858 transform: translate(-50%, -50%); 5859 } 5860 5861 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(1) { 5862 fill: black; 5863 } 5864 5865 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(2) { 5866 fill: white; 5867 } 5868 5869 .${rootCss} .card-news-container .card-news-category-container { 5870 position: relative; 5871 } 5872 5873 .${rootCss} .card-news-container .card-news-category-container .card-news-category { 5874 display: flex; 5875 justify-content: center; 5876 align-items: center; 5877 padding: var(--space-micro) var(--space-xs); 5878 position: absolute; 5879 z-index: 2; 5880 left: var(--space-md); 5881 top: -13px; 5882 border-radius: var(--border-radius-pill); 5883 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); 5884 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 5885 line-height: var(--line-height-lg, 144%); 5886 color: var(--default-sup-green-water, #006B65); 5887 white-space: nowrap; 5888 } 5889 5890 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category { 5891 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); 5892 color: var(--default-sup-green-water, #99E0DD); 5893 } 5894 5895 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category { 5896 position: relative; 5897 top: 0; 5898 left: 0; 5899 margin-left: var(--space-md); 5900 margin-top: var(--space-md); 5901 } 5902 5903 .${rootCss} .card-news-container .card-news-text-content { 5904 display: flex; 5905 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 5906 flex-direction: column; 5907 justify-content: space-between; 5908 align-items: flex-start; 5909 flex: 1 0 0; 5910 align-self: stretch; 5911 } 5912 5913 .${rootCss} .card-news-container .card-news-text-content.no-image { 5914 padding-top: var(--space-sm); 5915 } 5916 5917 .${rootCss} .card-news-container .card-news-text-content .card-news-title { 5918 display: -webkit-box; 5919 -webkit-box-orient: vertical; 5920 -webkit-line-clamp: 4; 5921 align-self: stretch; 5922 overflow: hidden; 5923 color: var(--text-primary-default, #373737); 5924 text-overflow: ellipsis; 5925 margin: 0; 5926 } 5927 5928 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title { 5929 color: var(--text-primary-default, #FFF); 5930 } 5931 5932 .${rootCss} .card-news-container .card-news-text-content .card-news-info { 5933 display: flex; 5934 align-items: center; 5935 align-content: center; 5936 gap: var(--space-sm, 16px); 5937 align-self: stretch; 5938 flex-wrap: wrap; 5939 } 5940 5941 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type, 5942 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read { 5943 display: flex; 5944 align-items: center; 5945 gap: var(--space-xxs, 8px); 5946 } 5947 5948 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path { 5949 stroke: #D7D7D7; 5950 } 5951 5952 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 5953 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 5954 color: var(--text-tertiary-default, #959595); 5955 line-height: var(--line-height-lg, 144%); 5956 } 5957 5958 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 5959 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 5960 color: var(--text-tertiary-default, #EEE); 5961 } 5962 5963 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read { 5964 transform: translateY(-0.5px); 5965 } 5966 5967 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 { 5968 fill: #D7D7D7; 5969 } 5970</style> 5971 5972<#assign maxNumberOfCards = 9/> 5973<#assign className = "com.liferay.journal.model.JournalArticle" /> 5974<#assign classNameId = PortalUtil.getClassNameId(className) /> 5975${AssetEntryQuery.setClassNameIds([classNameId]) } 5976${AssetEntryQuery.setEnd(maxNumberOfCards)} 5977 5978<#assign entries = []/> 5979<#assign ourEnergyCategoriesIds = getAllCategoryIdOfVocabulary(assetEntry, ourEnergyVocabulary) /> 5980<#list ourEnergyCategoriesIds as ourEnergyCategoryId> 5981 ${AssetEntryQuery.setAllCategoryIds([ourEnergyCategoryId])} 5982 <#assign ents = AssetEntryQueryService.getEntries(AssetEntryQuery) /> 5983 <#assign entries = entries + ents /> 5984</#list> 5985 5986 5987<#-- Renderizar Lista de cards --> 5988<#if entries?has_content> 5989 <div class="${rootCss}"> 5990 <div class="list-of-news-title breakpoint"> 5991 <div class="list-of-news-title-col col-1-12 md-col-1-8 sm-col-1-4"> 5992 <div class="list-title fragment_85017"> 5993 <div class="petro-title"> 5994 <h2 id="title" class="display-sm" style="color: var(--color-neutral-800)"> 5995 <#if locale?lower_case == "pt_br"> Leia também <#else> Read also </#if> 5996 </h2> 5997 <div class="yellow-bar-container"> 5998 <div class="yellow-bar bar-display-sm" style="background-color: var(--color-secondary-medium)"></div> 5999 <@renderArrows /> 6000 </div> 6001 </div> 6002 </div> 6003 </div> 6004 </div> 6005 6006 <div class="card-news-list-breakpoint breakpoint"> 6007 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4"> 6008 <#if entries?size gt maxNumberOfCards> 6009 <#assign entries = entries[0..maxNumberOfCards] /> 6010 </#if> 6011 <#list entries as entry> 6012 <#if assetEntry.getClassPK() != entry.getClassPK() > 6013 <#assign cardData = getDataForCard(entry) /> 6014 <@renderCard cardData/> 6015 </#if> 6016 </#list> 6017 </div> 6018 </div> 6019 </div> 6020</#if> 6021 6022 6023<style> 6024 .portlet { 6025 margin: 0; 6026 } 6027 6028 .${rootCss} { 6029 padding: var(--space-giant, 80px) 0; 6030 background: var(--background-surface-level-01, #FFF); 6031 width: 100%; 6032 position: relative; 6033 font-family: var(--font-family-base, "Petrobras Sans"); 6034 display: flex; 6035 flex-direction: column; 6036 gap: var(--space-lg); 6037 } 6038 6039 body.high-contrast-active .${rootCss} { 6040 background: var(--background-surface-level-01, #010101); 6041 } 6042 6043 .${rootCss} .list-of-news-title { 6044 position: relative; 6045 z-index: 1; 6046 } 6047 6048 .${rootCss} body.high-contrast-active .fragment_614685 .petro-title .yellow-bar { 6049 background-color: #FFEEB3 !important; 6050 } 6051 6052 .${rootCss} .petro-title > div:has(> .yellow-bar, > .card-news-list-arrows-breakpoint) { 6053 display: flex; 6054 } 6055 6056 .${rootCss} .card-news-list { 6057 display: flex; 6058 gap: var(--space-lg); 6059 overflow: auto; 6060 position: relative; 6061 z-index: 1; 6062 scroll-snap-type: x mandatory; 6063 scrollbar-width: none; 6064 } 6065 6066 .${rootCss} .card-news-list::-webkit-scrollbar { 6067 display: none; 6068 } 6069 6070 @media screen and (min-width: 1441px) { 6071 .${rootCss} .card-news-list-breakpoint { 6072 width: 100%; 6073 } 6074 6075 .${rootCss} .list-of-news-title { 6076 width: 100%; 6077 } 6078 } 6079 6080 @media screen and (max-width: 1024px) { 6081 .${rootCss} .fragment_614685 { 6082 padding: var(--space-xxl, 56px) 0; 6083 } 6084 } 6085 6086 @media screen and (max-width: 768px) { 6087 .${rootCss} .petro-title > div:has(> .yellow-bar, > .card-news-list-arrows-breakpoint) { 6088 flex-direction: column; 6089 } 6090 } 6091 6092 6093</style> 6094 6095<#list ourEnergyStyles as ourEnergyStyle> 6096 <style> 6097 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 6098 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; 6099 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important; 6100 color: #${ourEnergyStyle.textColor} !important; 6101 } 6102 6103 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 6104 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; 6105 color: #${ourEnergyStyle.textColorHighContrast} !important; 6106 } 6107 6108 </style> 6109</#list> 6110 6111<script> 6112 6113 function disableEnableArrow(arrow, scrollBar, maxDistance, direction) 6114 { 6115 if(direction === "left") { 6116 if (scrollBar.scrollLeft > 0) { 6117 arrow.classList.contains("arrow-disable") && arrow.classList.remove("arrow-disable"); 6118 } 6119 else { 6120 !arrow.classList.contains("arrow-disable") && arrow.classList.add("arrow-disable"); 6121 } 6122 } 6123 else if(direction === "right") { 6124 if (Math.ceil(scrollBar.scrollLeft + scrollBar.clientWidth) < maxDistance) { 6125 arrow.classList.contains("arrow-disable") && arrow.classList.remove("arrow-disable"); 6126 } 6127 else { 6128 !arrow.classList.contains("arrow-disable") && arrow.classList.add("arrow-disable"); 6129 } 6130 } 6131 } 6132 6133 function scrollCarousel() 6134 { 6135 const root = document.querySelector(".${rootCss}"); 6136 if(root) { 6137 const scrollBar = root.querySelector(".${rootCss} .card-news-list"); 6138 const gap = 32;// var(--space-lg); 6139 const stepLength = scrollBar.querySelector(".card-news-container").offsetWidth + gap; 6140 const arrowLeftBtn = root.querySelector(".card-news-arrow-left") 6141 const arrowRightBtn = root.querySelector(".card-news-arrow-right") 6142 6143 let maxDistance = scrollBar.scrollWidth; 6144 6145 arrowLeftBtn.addEventListener('click', () => { 6146 if (scrollBar.scrollLeft > 0) { 6147 scrollBar.scroll({ 6148 left: scrollBar.scrollLeft - stepLength, 6149 behavior: "smooth", 6150 }); 6151 } 6152 }); 6153 6154 arrowRightBtn.addEventListener('click', () => { 6155 if (scrollBar.scrollLeft < maxDistance) { 6156 scrollBar.scroll({ 6157 left: scrollBar.scrollLeft + stepLength, 6158 behavior: "smooth", 6159 }); 6160 } 6161 }); 6162 6163 scrollBar.addEventListener("scroll", ()=>{ 6164 disableEnableArrow(arrowLeftBtn, scrollBar, maxDistance, "left"); 6165 disableEnableArrow(arrowRightBtn, scrollBar, maxDistance, "right"); 6166 }); 6167 6168 disableEnableArrow(arrowLeftBtn, scrollBar, maxDistance, "left"); 6169 disableEnableArrow(arrowRightBtn, scrollBar, maxDistance, "right"); 6170 6171 } 6172 } 6173 6174 document.addEventListener('DOMContentLoaded', scrollCarousel); 6175 6176</script> 6177 6178<style> 6179 6180 6181.ptb-news__read-news .news-content .embed-responsive-youtube::before { 6182 padding-top: 0; 6183} 6184 6185.ptb-news__read-news .news-content .embed-responsive-liferay::before { 6186 padding-top: calc(9/16 *100% - 64px); 6187} 6188 6189.ptb-news__read-news .news-content .thumnail-play-button { 6190} 6191 6192.ptb-news__read-news .news-content .thumnail-play-button { 6193 position: relative; 6194 z-index: 100; 6195 height: 64px; 6196 width: 64px; 6197 background-repeat: no-repeat; 6198 top: calc(50%); 6199 left: calc(50% - 32px); 6200} 6201 6202 6203.ptb-news__read-news .news-content .thumnail-play-button-youtube { 6204 position: absolute; 6205 z-index: 100; 6206 height: 64px; 6207 width: 64px; 6208 background-repeat: no-repeat; 6209 top: calc(50% - 135px); 6210 left: calc(50% - 32px); 6211} 6212 6213.ptb-news__read-news .news-content .thumnail-play-button-liferay { 6214 position: relative; 6215 z-index: 100; 6216 height: 64px; 6217 width: 64px; 6218 top: calc(-50% + 32px); 6219 left: calc(50% - 32px); 6220 background-repeat: no-repeat; 6221} 6222 6223 6224 .ptb-news__read-news .news-content .embed-responsive-youtube img { 6225 width: 100%; 6226 height: 100%; 6227 } 6228 6229</style> 6230 6231 <script> 6232 <#assign createYoutubeThumbnails = "createYoutubeThumbnails_"+ randomNumber(5952) /> 6233 6234 function ${createYoutubeThumbnails}(){ 6235 6236 const newsContent = document.querySelector(".news-content"); 6237 6238 const getYoutubeId = (youtubeUrl) => { 6239 6240 const url = new URL(youtubeUrl); 6241 const splittedPathName = url.pathname.split("/"); 6242 6243 if (splittedPathName.length <= 0){ 6244 return ""; 6245 } 6246 6247 return splittedPathName[splittedPathName.length-1]; 6248 }; 6249 6250 window.addEventListener("resize", (event) => { 6251 const iframeList = newsContent.querySelectorAll('iframe'); 6252 iframeList.forEach((iframe) => { 6253 const src = iframe.src; 6254 if (!src){ 6255 return; 6256 } 6257 6258 const isYoutube = src.toLowerCase().includes("youtube"); 6259 if (!isYoutube){ 6260 return; 6261 } 6262 6263 const iframeParent = iframe.parentNode; 6264 6265 const thumbnail = iframeParent.querySelector("img"); 6266 if (thumbnail){ 6267 // thumbnail.style="width:" + iframe.width + "px; height: " + iframe.height + "px"; 6268 } 6269 }); 6270 6271 }); 6272 6273 const iframeList = newsContent.querySelectorAll('iframe'); 6274 iframeList.forEach((iframe) => { 6275 const src = iframe.src; 6276 if (!src){ 6277 return; 6278 } 6279 6280 const isYoutube = src.toLowerCase().includes("youtube"); 6281 if (!isYoutube){ 6282 return; 6283 } 6284 6285 const iframeParent = iframe.parentNode; 6286 6287 const thumbnail = document.createElement("img"); 6288 thumbnail.src = 'https://img.youtube.com/vi/' + getYoutubeId(src) +'/hqdefault.jpg'; 6289 thumbnail.alt = "Youtube"; 6290 thumbnail.loading = "lazy"; 6291 //thumbnail.style="width:" + iframe.width + "px; height: " + iframe.height + "px"; 6292 6293 const playButton = document.createElement("div"); 6294 playButton.style = 'background-image: url("data:image/svg+xml,%3Csvg width=\'64\' height=\'64\' viewBox=\'0 0 64 64\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg clip-path=\'url(%23clip0_4118_27800)\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'white\'/%3E%3Cpath d=\'M39.22 32.52C39.591 32.2726 39.591 31.7274 39.22 31.48L28.9717 24.6478C28.5563 24.3709 28 24.6686 28 25.1678V38.8322C28 39.3314 28.5563 39.6291 28.9717 39.3522L39.22 32.52Z\' fill=\'%23008542\' stroke=\'%23008542\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=\'clip0_4118_27800\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'white\'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")'; 6295 playButton.classList.add("thumnail-play-button-youtube"); 6296 const children = iframeParent.children; 6297 6298 if (children.length > 0) { 6299 iframeParent.insertBefore(thumbnail, children.firstChild); 6300 iframeParent.insertBefore(playButton, thumbnail); 6301 iframe.classList.add("hide"); 6302 iframeParent.classList.add("embed-responsive-youtube"); 6303 } 6304 6305 playButton.addEventListener("click", () => { 6306 thumbnail.click(); 6307 }); 6308 6309 thumbnail.addEventListener("click", () => { 6310 thumbnail.classList.add("hide"); 6311 playButton.classList.add("hide"); 6312 iframe.classList.remove("hide"); 6313 iframeParent.classList.remove("embed-responsive-youtube"); 6314 const url = new URL(src); 6315 const searchParams = url.searchParams; 6316 searchParams.set("rel", "0"); 6317 //searchParams.set("modestbranding", "0"); 6318 //searchParams.set("mute", "0"); 6319 //searchParams.set("color", "white"); 6320 searchParams.set("controls", "1"); 6321 //searchParams.set("playsinline", "1"); 6322 //searchParams.set("enablejsapi", "1"); 6323 searchParams.set("autoplay", "1"); 6324 //searchParams.set("logo", "0"); 6325 iframeParent.setAttribute("data-embed-id", url.toString()); 6326 iframe.setAttribute("src", url.toString()); 6327 }); 6328 }); 6329 6330 } 6331 6332 ${createYoutubeThumbnails}(); 6333 6334 <#assign createLRThumbnails = "createLRThumbnails"+ randomNumber(5952) /> 6335 6336 function ${createLRThumbnails}(){ 6337 6338 const newsContent = document.querySelector(".news-content"); 6339 const iframeList = newsContent.querySelectorAll("iframe[data-video-liferay]"); 6340 6341 iframeList.forEach(iframe => { 6342 6343 const playButton = document.createElement("div"); 6344 playButton.style = 'background-image: url("data:image/svg+xml,%3Csvg width=\'64\' height=\'64\' viewBox=\'0 0 64 64\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg clip-path=\'url(%23clip0_4118_27800)\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'white\'/%3E%3Cpath d=\'M39.22 32.52C39.591 32.2726 39.591 31.7274 39.22 31.48L28.9717 24.6478C28.5563 24.3709 28 24.6686 28 25.1678V38.8322C28 39.3314 28.5563 39.6291 28.9717 39.3522L39.22 32.52Z\' fill=\'%23008542\' stroke=\'%23008542\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=\'clip0_4118_27800\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'white\'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")'; 6345 playButton.classList.add("thumnail-play-button-liferay"); 6346 const children = iframe.parentNode.children; 6347 if (children.length > 0) { 6348 iframe.parentNode.insertBefore(playButton, children.firstChild); 6349 } 6350 6351 iframe.addEventListener("load", () => { 6352 if (iframe.contentDocument){ 6353 const video = iframe.contentDocument.body.querySelector("video"); 6354 video.removeAttribute("controls"); 6355 } 6356 }); 6357 6358 iframe.parentNode.classList.add("embed-responsive-liferay"); 6359 6360 6361 playButton.addEventListener("click", () => { 6362 playButton.classList.add("hide"); 6363 playButton.classList.remove("thumnail-play-button-liferay"); 6364 iframe.parentNode.classList.remove("embed-responsive-liferay"); 6365 if (iframe.contentDocument){ 6366 const video = iframe.contentDocument.body.querySelector("video"); 6367 video.setAttribute("controls", ""); 6368 video.play(); 6369 } 6370 }); 6371 }); 6372 } 6373 6374 ${createLRThumbnails}(); 6375 6376 document.querySelectorAll(".news-content img").forEach(img => img.loading = "lazy"); 6377 6378 </script> 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: