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:
==> cardData.urlNews [in template "20099#20135#10700480" at line 3692, column 67]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${cardData.urlNews} [in template "20099#20135#10700480" in macro "renderCard" at line 3692, column 65]
- Reached through: @renderCard cardData [in template "20099#20135#10700480" at line 3978, column 25]
---- 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 <div class="ptb-news__read-news"> 189 <div class="ptb-news__read-news-post "> 190 <div class="ptb-news__read-content"> 191 192 <#assign 193 ddmStructure = newsJournalArticle.getDDMStructure() 194 fieldList = getFieldListByStructure(ddmStructure) 195 xmlArticle = newsJournalArticle.getDocument().getRootElement() 196 > 197 198 <#assign 199 <#-- Título principal da notícia --> 200 mainHeadlineOfTheNews = newsJournalArticle.getTitle(locale, true) 201 <#-- Título de destaque da notícia --> 202 featuredNewsHeadline = extractFeaturedNewsHeadline(fieldList, xmlArticle) 203 <#-- Sumário da notícia --> 204 newsSummary = extractNewsSummary(fieldList, xmlArticle) 205 <#-- Data de publicação da notícia --> 206 lastPublishDate = extractPublishDate(newsJournalArticle) 207 <#-- Data de criação da notícia --> 208 createDate = newsJournalArticle.getCreateDate() 209 > 210 211 <#-- Flag da notícia ----------------------------------------------------------------------------------> 212 <#assign flag = getFirstCategoryTitle(newsJournalArticle, flagCategoryTitles, assetCategoryLocalService)> 213 214 <#-- Url amigável da notícia para visualização em DisplayPage -----------------------------------------> 215 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + newsJournalArticle.getUrlTitle()> 216 217 <#-- Conteúdo da notícia ------------------------------------------------------------------------------> 218 <#assign newsContent = getFieldValue(fieldList, xmlArticle, "Corpo da notícia")> 219 220 <#-- Seção do áudio para o conteúdo da notícia --------------------------------------------------------> 221 <#assign audios = [] 222 audioIdentifierFieldSetList = getNodes("Fieldset65862311", xmlArticle) 223 > 224 <#list audioIdentifierFieldSetList as audioIdentifierFieldSet> 225 <#assign 226 <#-- Grupo com as informações de url e legenda do áudio --> 227 audioInfoFieldSet = getGroupNode("Fieldset24035689",audioIdentifierFieldSet)> 228 <#assign 229 externalAudioUrl = getFieldValue(fieldList, audioInfoFieldSet, "URL externa do áudio") 230 internalAudioUrl = getFileFromXML("DocumentLibrary24170668", audioInfoFieldSet, fileEntryService) 231 audioLegend = getFieldValue(fieldList, audioInfoFieldSet, "Legenda do áudio")> 232 233 <#if externalAudioUrl?has_content || internalAudioUrl.url?has_content > 234 <#assign audios += [{ 235 "id": getFieldValue(fieldList, audioIdentifierFieldSet, "Identificador de Áudio"), 236 "externalUrl" : externalAudioUrl, 237 "internalUrl" : internalAudioUrl, 238 "legend" : audioLegend 239 }]> 240 </#if> 241 </#list> 242 243 244 <#-- Seção de vídeo para o conteúdo da notícia --------------------------------------------------------> 245 <#assign videos = [] 246 videoIdentifierFieldSetList = getNodes("Fieldset24460782", xmlArticle) 247 > 248 <#list videoIdentifierFieldSetList as videoIdentifierFieldSet> 249 <#assign 250 <#-- Grupo com as informações de url e legenda do áudio --> 251 videoInfoFieldSet = getGroupNode("Fieldset51040010",videoIdentifierFieldSet) 252 253 videos += [{ 254 "id": getFieldValue(fieldList,videoIdentifierFieldSet, "Identificador de Vídeo"), 255 "youtubeID" : getFieldValue(fieldList, videoInfoFieldSet, "ID do vídeo do YouTube"), 256 "internalUrl" : getFileFromXML("DocumentLibrary15265409", videoInfoFieldSet, fileEntryService), 257 "legend" : getFieldValue(fieldList, videoInfoFieldSet, "Legenda do vídeo") 258 }] 259 > 260 </#list> 261 262 263 <#-- Seção de links para o conteúdo da notícia --------------------------------------------------------> 264 <#assign 265 links = [] 266 linksFieldSetList = getNodes("Fieldset37770113", xmlArticle) 267 > 268 <#list linksFieldSetList as linksFieldSet> 269 <#assign linkFieldSetList = getNodes("Fieldset10524367", linksFieldSet)> 270 271 <#list linkFieldSetList as linkFieldSet> 272 <#assign 273 linkId = getFieldValue(fieldList, linkFieldSet, "Identificador do link") 274 275 <#-- Grupo com as informações de url e legenda do áudio --> 276 linkInfoFieldSeet = getGroupNode("Fieldset86037074", linkFieldSet) 277 278 iconType = getFieldValue(fieldList, linkInfoFieldSeet, "Ícone do link") 279 links += [{ 280 "id": linkId, 281 "externalLink" : getFieldValue(fieldList, linkInfoFieldSeet, "Link externo"), 282 "pageLink" : getPageLayoutLinkFromXML("LinkToLayout77941175", linkInfoFieldSeet, layoutLocalService), 283 "file" : getFileFromXML("DocumentLibrary34820760", linkInfoFieldSeet, fileEntryService), 284 "title" : getFieldValue(fieldList, linkInfoFieldSeet, "Título do link"), 285 "iconType" : iconType 286 }] 287 > 288 </#list> 289 </#list> 290 291 292 293 <#assign galleryItems = []/> 294 295 <#assign mediaGroupList = getNodes(getIdFromFieldName(fieldList, "Galeria de multimídia"), xmlArticle) /> 296 297 <#list mediaGroupList as mediaGroup > 298 <#assign nodes = getNodes(getIdFromFieldName(fieldList, "Imagem da Galeria") , mediaGroup) /> 299 <#list nodes as node> 300 <#assign image = getMediaInfo(fieldList, node, "Imagem", fileEntryService) /> 301 <#if image?? && image?has_content && image.url?has_content> 302 <#assign galleryItems += [{"image": image}] /> 303 </#if> 304 </#list> 305 </#list> 306 307 308 <#-- Seção de Quotes para o conteúdo da notícia --------------------------------------------------------> 309 <#assign quotes = [] /> 310 <#assign quotesRootFieldSetList = getNodes(getIdFromFieldName(fieldList, "Quotes da notícia"), xmlArticle) /> 311 <#list quotesRootFieldSetList as quotesFieldSetList> 312 <#assign quoteFieldSetList = getNodes(getIdFromFieldName(fieldList, "Quote"), quotesFieldSetList) /> 313 <#list quoteFieldSetList as quoteFieldSet> 314 <#assign imageJsonString = getSingleNodeString("Image94530628", quoteFieldSet) /> 315 <#assign imageJson = {"url": "", "alt": "", "fileEntryId" : "", "title" : ""} /> 316 <#attempt> 317 <#if imageJsonString ?? && imageJsonString?has_content> 318 <#assign imageJson = jsonFactoryUtil.createJSONObject(imageJsonString) /> 319 </#if> 320 321 <#if !imageJson.url?? || !imageJson.url?has_content> 322 <#assign imageJson = {"url": "", "alt": "", "fileEntryId" : "", "title" : ""} /> 323 </#if> 324 <#recover> 325 </#attempt> 326 327 <#if !imageJson.url?? || !imageJson.url?has_content> 328 <#assign imageJson = {"url": "", "alt": "", "fileEntryId" : "", "title" : ""} /> 329 </#if> 330 331 <#assign quotes += [{ 332 "id": getFieldValue(fieldList, quoteFieldSet, "Identificador do Quote"), 333 "content" : getFieldValue(fieldList, quoteFieldSet, "Texto do Quote"), 334 "author" : getFieldValue(fieldList, quoteFieldSet, "Nome do autor"), 335 "image" : {"url": imageJson.url, "alt": imageJson.alt, "fileEntryId" : imageJson.fileEntryId, "title" : imageJson.title} 336 }] /> 337 </#list> 338 </#list> 339 340 <#assign newsInfo = { 341 "mainHeadlineOfTheNews": mainHeadlineOfTheNews, 342 "featuredNewsHeadline" : featuredNewsHeadline, 343 "displayDate" : formatDate(createDate), 344 "createDate": createDate, 345 "newsSummary" : newsSummary, 346 "newsMedia": extractNewsMedia(fieldList, xmlArticle, fileEntryService), 347 "lastPublishDate": lastPublishDate, 348 "flag": flag, 349 "url": newsJournalArticleFriendlyUrl, 350 "newsContent": newsContent, 351 "audios": audios, 352 "videos": videos, 353 "galleryItems": galleryItems, 354 "links": links, 355 "quotes": quotes 356 }/> 357 358 <#-- Renderizar o título principal da notícia --> 359 <#-- Conteúdo-> Conteúdo Web -> Templates: Site de Crise - Notícia - Título --> 360 <@renderHeadLine newsInfo = newsInfo/> 361 362 <#-- Renderizar o resumo da notícia --> 363 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Resumo --> 364 <@renderReview newsInfo = newsInfo/> 365 366 <#-- Renderizar a data de publicação/edição da notícia e redes sociais --> 367 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Redes sociais e data de publicação --> 368 <@renderPublishAndSocialMediasInfos newsJournalArticle newsInfo/> 369 370 <#-- Renderizar as tags da notícia --> 371 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Render Tags --> 372 <#assign categoriesAsssetEntryResponse = restClient.get("/headless-delivery/v1.0/structured-contents/${assetEntry.getClassPK()}?nestedFields=embeddedTaxonomyCategory&fields=taxonomyCategoryBriefs") /> 373 374 <#if categoriesAsssetEntryResponse?? && categoriesAsssetEntryResponse?has_content && categoriesAsssetEntryResponse.taxonomyCategoryBriefs??> 375 <#assign tagCategoryList = getCategoriesNamesAndIds("Tags", categoriesAsssetEntryResponse.taxonomyCategoryBriefs) /> 376 <#assign removeStartParameterWhenTagIsClicked = true /> 377 <#assign includeRequestParams = false /> 378 <#assign NEWS_PAGE_NAME= "categorias"/> 379 <@renderNewsTags tagCategoryList NEWS_PAGE_NAME removeStartParameterWhenTagIsClicked includeRequestParams /> 380 </#if> 381 382 383 <#-- Renderizar a imagem de destaque da notícia --> 384 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Imagem de destaque --> 385 <#assign typeOfNews = getFirstCategoryOfVocabulary(assetEntry, typeOfNewsVocabulary) /> 386 387 <#if !typeOfNews?? || !typeOfNews?has_content || typeOfNews != "Infográfico" > 388 <@renderNewsFeaturedMedia newsInfo = newsInfo/> 389 </#if> 390 391 <#-- Renderizar o conteúdo da notícia --> 392 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Conteúdo da notícia --> 393 <@renderNewsContent newsInfo = newsInfo/> 394 395 <#-- Renderiza botoes de compartilhamento na versao mobile --> 396 <div class="render-share-news-container publish_and_social_medias_infos_desk mobile"> 397 <@renderShareAndCopyNews/> 398 </div> 399 400 <#-- Renderizar links da notícia --> 401 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Links do conteúdo da notícia --> 402 <@renderLinks newsInfo /> 403 404 <@renderCite /> 405 406 <#-- Renderizar áudios da notícia --> 407 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Áudios do conteúdo da notícia --> 408 409 <#-- Renderizar galeria de imagens notícia --> 410 <#-- Conteúdo Web -> Templates: Site de Crise - Notícia - Render galeria --> 411 <@renderGallery newsInfo /> 412 413 414 <#-- Renderizar quotes da notícia --> 415 <@renderQuotes newsInfo /> 416 417 </div> 418 </div> 419 </div> 420<#else > 421 <div class="ptb-news__read-news paragraph-sm-regular"> 422 <p> <#if locale == "pt_BR"> Nenhuma notícia <#else> There are no news </#if></p> 423 </div> 424 425 <style> 426 .ptb-news__read-news p { 427 color: #515867; 428 } 429 430 body.high-contrast-active .ptb-news__read-news p { 431 color: var(--color-neutral-100); 432 } 433 </style> 434</#if> 435 436<style> 437 .breadcrumb-breakpoint { 438 padding-top: var(--space-xxl); 439 padding-bottom: var(--space-xl); 440 } 441 442 body.high-contrast-active .breadcrumb-breakpoint { 443 background: var(--background-surface-level-01, #010101); 444 } 445 446 .breadcrumb-breakpoint .breadcrumb-col { 447 display: flex; 448 width: max-content; 449 gap: var(--space-xxs); 450 height: fit-content; 451 overflow-x: hidden; 452 } 453 454 .breadcrumb-breakpoint #liferay-breadcrumb { 455 display: none; 456 } 457 458 .breadcrumb-breakpoint .breadcrumb-page { 459 display: flex; 460 gap: var(--space-micro); 461 height: var(--size-md); 462 size: var(--size-md); 463 border: 1px solid rgba(0, 0, 0, 0); 464 box-sizing: border-box; 465 border-radius: var(--border-radius-sm); 466 } 467 468 .breadcrumb-breakpoint a.breadcrumb-page.text span, 469 .breadcrumb-breakpoint span.breadcrumb-page.text { 470 white-space: nowrap; 471 } 472 473 .breadcrumb-breakpoint .breadcrumb-page a:focus { 474 outline: none; 475 } 476 477 .breadcrumb-breakpoint .breadcrumb-page.active-page { 478 color: var(--color-text-primary-default); 479 background-color: var(--color-background-default-level-02); 480 border-radius: var(--border-radius-sm); 481 } 482 483 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.active-page { 484 background: var(--background-surface-level-02, #373737); 485 color: var(--text-primary-default, #FFF); 486 } 487 488 .breadcrumb-breakpoint .breadcrumb-page.previous-page { 489 transition: 300ms ease-in-out; 490 } 491 492 .breadcrumb-breakpoint .breadcrumb-page.previous-page.text { 493 text-decoration: var(--text-decoration-none); 494 color: var(--color-text-primary-default); 495 text-transform: capitalize; 496 padding-left: var(--space-xxs); 497 padding-right: var(--space-xxs); 498 } 499 500 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.previous-page.text { 501 color: var(--text-primary-default, #FFF); 502 } 503 504 .breadcrumb-breakpoint .breadcrumb-page.active-page.text { 505 color: var(--color-text-primary-default); 506 text-decoration: var(--text-decoration-none); 507 background-color: var(--color-background-default-level-02); 508 text-transform: capitalize; 509 padding-left: var(--space-xxs); 510 padding-right: var(--space-xxs); 511 } 512 513 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.previous-page.text { 514 color: var(--text-primary-default, #FFF); 515 } 516 517 .breadcrumb-breakpoint .breadcrumb-page.previous-page:not(.three-dots):hover { 518 background-color: var(--color-background-default-level-01); 519 border-color: var(--border-color-dark); 520 border-radius: var(--border-radius-sm); 521 border: 1px solid; 522 transition: all 300ms ease-in-out; 523 } 524 525 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page.previous-page:not(.three-dots):hover { 526 background-color: transparent; 527 } 528 529 .breadcrumb-breakpoint .breadcrumb-page:focus-visible { 530 margin: var(--space-micro); 531 border-radius: var(--space-micro); 532 outline: none; 533 border: 1px solid var(--color-primary-medium); 534 box-sizing: border-box; 535 transition: 300ms ease-in-out; 536 } 537 538 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page:focus-visible { 539 border: 1px solid rgba(228, 247, 232, 1); 540 } 541 542 .breadcrumb-breakpoint .breadcrumb-page .icon { 543 width: var(--size-xxs); 544 height: var(--size-xxs); 545 border-color: var(--border-color-darkest); 546 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'); 547 background-size: cover; 548 margin-top: auto; 549 margin-bottom: auto; 550 } 551 552 body.high-contrast-active .breadcrumb-breakpoint .breadcrumb-page .icon { 553 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>'); 554 } 555 556 .ptb-news__read-news { 557 padding-bottom: var(--space-xl, 40px); 558 overflow: hidden; 559 } 560 561 body.high-contrast-active .ptb-news__read-news { 562 background: var(--background-surface-level-01, #010101); 563 } 564</style> 565 566 567<#-- ############# Site de Crise - Notícia - Redes sociais e data de publicação ####################################### --> 568<#-- 569Add elements from the sidebar to define your template. Type "${" to use the 570autocomplete feature. 571--> 572 573<#macro renderHeadLine newsInfo> 574 575 <div class="main-headline-container breakpoint"> 576 <div class="main-headline-container-col col-2-11 md-col-1-8 sm-col-1-4"> 577 <h1 class="main-headline display-sm">${newsInfo.featuredNewsHeadline}</h1> 578 <div class="bar"></div> 579 </div> 580 </div> 581 582 <style> 583 .ptb-news__read-news .main-headline-container .main-headline-container-col { 584 display: flex; 585 flex-direction: column; 586 gap: var(--space-sm); 587 padding-bottom: var(--space-lg); 588 } 589 590 .ptb-news__read-news .main-headline-container .main-headline-container-col * { 591 margin: 0; 592 padding: 0; 593 } 594 595 .ptb-news__read-news .main-headline-container .main-headline { 596 font-family: var(--font-family-base); 597 color: var(--color-neutral-800); 598 } 599 600 body.high-contrast-active .ptb-news__read-news .main-headline-container .main-headline { 601 color: var(--text-primary-default, var(--color-neutral-100)); 602 } 603 604 .ptb-news__read-news .main-headline-container .bar { 605 width: 32px; 606 height: var(--size-micro); 607 background: var(--color-secondary-medium); 608 } 609 610 body.high-contrast-active .ptb-news__read-news .main-headline-container .bar{ 611 background: var(--text-secondary-accent, #FFEEB3); 612 } 613 614 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 615 .ptb-news__read-news .main-headline-container .main-headline-container-col { 616 gap: var(--space-xs, 12px); 617 } 618 } 619 </style> 620</#macro> 621<#-- ################################################################################################################## --> 622 623<#-- ############# Site de Crise - Notícia - Redes sociais e data de publicação ####################################### --> 624<#macro renderReview newsInfo> 625 <#assign summaryCssRoot = "summary-container" /> 626 627 <div class="${summaryCssRoot}-breakpoint breakpoint"> 628 <div class="${summaryCssRoot} col-2-11 md-col-1-8 sm-col-1-4"> 629 <p class="summary paragraph-lg-regular"> 630 ${newsInfo.newsSummary} 631 </p> 632 </div> 633 634 </div> 635 636 <style> 637 .${summaryCssRoot} .summary { 638 padding-bottom: var(--space-lg); 639 } 640 641 .${summaryCssRoot} .summary, 642 .${summaryCssRoot} .summary * { 643 color: var(--color-neutral-800, #373737); 644 font-family: var(--font-family-base); 645 font-style: var(--font-style-italic); 646 margin: var(--space-none); 647 } 648 649 body.high-contrast-active .summary, 650 body.high-contrast-active .summary * { 651 color: var(--text-secondary-default, #F8F8F8); 652 } 653 </style> 654</#macro> 655<#-- ################################################################################################################## --> 656 657<#-- ############# Site de Crise - Notícia - Redes sociais e data de publicação ####################################### --> 658<#macro renderPublishAndSocialMediasInfos journalArticle newsInfo> 659 660 <div class="publish_and_social_medias_infos_desk-breakpoint breakpoint"> 661 <div class="publish_and_social_medias_infos_desk col-2-11 md-col-1-8 sm-col-1-4"> 662 <div class="publish_and_update_date"> 663 <#assign lastPublishDate = journalArticle.getModifiedDate()> 664 <#assign createDate = journalArticle.getCreateDate()> 665 <#if journalArticle.getLastPublishDate()??> 666 <#assign lastPublishDate = journalArticle.getLastPublishDate()> 667 </#if> 668 669 <#if locale == "pt_BR"> 670 <p class="updated">Atualizado em ${formatDate(lastPublishDate)}</p> 671 <p class="published">Postado em ${formatDate(createDate)}</p> 672 <#else > 673 <p class="updated">Updated on ${formatDate(lastPublishDate)}</p> 674 <p class="published">Posted on ${formatDate(createDate)}</p> 675 </#if> 676 </div> 677 <div class="render-share-news-container desktop"> 678 <@renderShareAndCopyNews/> 679 </div> 680 </div> 681 </div> 682 683 <style> 684 .ptb-news__read-news .hidden { 685 display: none; 686 } 687 /*Data de publicação e redes sociais */ 688 689 /* Desktop */ 690 .ptb-news__read-news .publish_and_social_medias_infos_desk { 691 position: relative; 692 display: grid; 693 grid-template-columns: auto 1fr auto; 694 } 695 696 .ptb-news__read-news .render-share-news-container.mobile { 697 display: none; 698 } 699 700 .ptb-news__read-news .publish_and_social_medias_infos_desk * { 701 padding: var(--space-none, 0); 702 margin: var(--space-none, 0); 703 font-family: var(--font-family-base); 704 font-style: var(--font-style-normal, normal); 705 font-weight: var(--font-weight-regular, 400); 706 font-size: var(--font-size-xxs, 16px); 707 line-height: var(--line-height-xl, 160%); 708 color: var(--color-neutral-800, #373737); 709 } 710 711 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk * { 712 color: var(--text-secondary-default, #F8F8F8); 713 } 714 715 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk a svg path, 716 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .mobile-share svg path { 717 stroke: var(--color-neutral-500, #D7D7D7); 718 fill: rgba(255, 255, 255, 0.32); 719 } 720 721 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk a svg circle, 722 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .mobile-share svg circle { 723 fill: rgba(255, 255, 255, 0.32); 724 } 725 726 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date { 727 display: flex; 728 align-items: center; 729 gap: var(--space-sm, 16px); 730 } 731 732 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .updated { 733 font-weight: var(--font-weight-bold, 700); 734 } 735 736 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .updated { 737 color: var(--text-primary-default, var(--color-neutral-100)); 738 } 739 740 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .published { 741 font-weight: var(--font-weight-normal, 400); 742 } 743 744 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container { 745 display: flex; 746 width: 100%; 747 justify-content: flex-end; 748 align-items: center; 749 gap: var(--space-sm, 16px); 750 } 751 752 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .social-media-share { 753 position: relative; 754 } 755 756 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .social-media-share span { 757 position: absolute; 758 width: 100%; 759 height: 100%; 760 opacity: 0; 761 overflow: hidden; 762 pointer-events: none; 763 } 764 765 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .mobile-share { 766 display: none; 767 } 768 769 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container { 770 background: var(--color-neutral-100); 771 border: var(--border-width-hairline, 1px) solid #CCCCCC; 772 border-radius: 32px; 773 display: flex; 774 align-items: center; 775 gap: var(--space-sm, 16px); 776 padding: 6px var(--space-xxs, 8px); 777 height: 36px; 778 margin: 0; 779 cursor: pointer; 780 } 781 782 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container { 783 background: rgba(255, 255, 255, 0.32); 784 border: var(--border-width-hairline, 1px) solid rgba(255, 255, 255, 0.32); 785 } 786 787 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container svg { 788 width: 18px; 789 } 790 791 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk svg path { 792 stroke: var(--color-neutral-500, #D7D7D7); 793 } 794 795 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text { 796 font-family: var(--font-family-base); 797 font-style: normal; 798 margin: 0; 799 height: 100%; 800 display: flex; 801 align-items: center; 802 color: var(--color-primary-medium, #008542); 803 font-size: var(--font-size-micro, 12px); 804 font-weight: var(--font-weight-bold, 700); 805 line-height: var(--line-height-lg, 144%); 806 pointer-events: none; 807 } 808 809 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text .copy-text-title-news { 810 position: absolute; 811 width: 100%; 812 height: 100%; 813 opacity: 0; 814 overflow: hidden; 815 } 816 817 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text { 818 color: var(--text-primary-accent, #E4F7E8); 819 } 820 821 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message { 822 display: none; 823 position: absolute; 824 bottom: -43px; 825 right: -15px; 826 padding: var(--space-xxxs, 4px) 15px; 827 margin: var(--space-micro, 2px) 10px; 828 width: 110px; 829 font-family: var(--font-family-base); 830 font-size: var(--font-size-micro, 12px); 831 832 color: #008542; 833 background: var(--color-neutral-100); 834 border-radius: var(--border-radius-md, 8px); 835 836 filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.16)); 837 838 cursor: pointer; 839 } 840 841 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message { 842 background: rgba(255, 255, 255, 0.32); 843 color: var(--text-primary-accent, #E4F7E8); 844 } 845 846 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message-active { 847 display: block; 848 } 849 850 /* Mobile */ 851 852 .ptb-news__read-news .publish_and_social_medias_infos_mobile { 853 display: flex; 854 flex-direction: column; 855 gap: 19px; 856 } 857 858 .ptb-news__read-news .publish_and_social_medias_infos_mobile { 859 display: none; 860 } 861 862 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text { 863 display: flex; 864 justify-content: space-between; 865 align-items: center; 866 margin-bottom: var(--space-lg, 32px); 867 } 868 869 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date * { 870 padding: 0; 871 margin: 0; 872 font-family: var(--font-family-base); 873 font-style: var(--font-style-normal, normal); 874 font-size: var(--font-size-micro, 12px); 875 line-height: 136%; 876 color: var(--color-neutral-800, #373737); 877 } 878 879 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 * { 880 color: var(--text-primary-accent, #E4F7E8); 881 } 882 883 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date { 884 display: flex; 885 flex-direction: column; 886 gap: 0; 887 } 888 889 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date .updated { 890 font-weight: var(--font-weight-bold, 700); 891 } 892 893 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .publish_and_update_date .published { 894 font-weight: var(--font-weight-regular, 400); 895 } 896 897 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container { 898 background: var(--color-neutral-100); 899 border: var(--border-width-hairline, 1px) solid #CCCCCC; 900 border-radius: 32px; 901 display: flex; 902 align-items: center; 903 gap: var(--space-sm, 16px); 904 padding: 6px var(--space-xxs, 8px); 905 width: 112px; 906 height: 36px; 907 } 908 909 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container { 910 background: rgba(255, 255, 255, 0.32); 911 color: var(--text-primary-accent, #E4F7E8); 912 } 913 914 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container p.text { 915 margin: 0; 916 } 917 918 .ptb-news__read-news .publish_and_social_medias_infos_mobile .publish_and_update_date_and_copy_text .copy-text-container .text { 919 font-family: var(--font-family-base); 920 font-style: var(--font-style-normal, normal); 921 font-weight: var(--font-weight-regular, 400); 922 font-size: 13px; 923 line-height: 14px; 924 color: #008542; 925 } 926 927 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 { 928 background: rgba(255, 255, 255, 0.32); 929 color: var(--text-primary-accent, #E4F7E8); 930 } 931 932 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 933 934 .ptb-news__read-news .publish_and_social_medias_infos_desk .render-share-news-container.desktop { 935 display: none; 936 } 937 938 .ptb-news__read-news .render-share-news-container.mobile { 939 display: block; 940 margin: 0 var(--space-lg); 941 } 942 943 .ptb-news__read-news .publish_and_social_medias_infos_desk * { 944 font-size: var(--font-size-micro, 12px); 945 } 946 947 .ptb-news__read-news .publish_and_social_medias_infos_desk { 948 display: grid; 949 grid-template-columns: 100%; 950 grid-template-rows: 1fr 100%; 951 } 952 953 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date { 954 grid-column-start: 1; 955 grid-column-end: 1; 956 grid-row-start: 1; 957 grid-row-end: 1; 958 gap: var(--space-xxs, 8px); 959 } 960 961 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date * { 962 padding: 0; 963 margin: 0; 964 font-family: var(--font-family-base); 965 font-style: var(--font-style-normal); 966 color: var(--color-neutral-800, #373737); 967 font-weight: var(--font-weight-bold); 968 font-size: var(--font-size-xxxs, 14px); 969 line-height: var(--line-height-md, 132%); 970 } 971 972 body.high-contrast-active .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date * { 973 color: var(--text-primary-accent, #E4F7E8); 974 } 975 976 .ptb-news__read-news .publish_and_social_medias_infos_desk .publish_and_update_date .published { 977 font-weight: var(--font-weight-regular, 400); 978 } 979 980 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container { 981 grid-column-start: 1; 982 grid-column-end: 2; 983 grid-row-start: 2; 984 grid-row-end: 2; 985 justify-content: flex-end; 986 height: 36px; 987 } 988 989 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container { 990 grid-column-start: 1; 991 grid-column-end: 2; 992 grid-row-start: 2; 993 grid-row-end: 2; 994 max-width: 112px; 995 place-self: end; 996 } 997 998 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-text-container .text { 999 display: none; 1000 } 1001 1002 .ptb-news__read-news .publish_and_social_medias_infos_desk .copy-message { 1003 bottom: 0; 1004 right: -9px; 1005 } 1006 1007 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container .mobile-share { 1008 display: initial; 1009 } 1010 } 1011 1012 @media screen and (min-width: ${MIN_TABLET_WIDTH}px) and (max-width: ${MAX_TABLET_WIDTH}px) { 1013 .ptb-news__read-news .publish_and_social_medias_infos_desk .social-media-container { 1014 padding-right: 0; 1015 } 1016 } 1017 1018 1019 </style> 1020 1021 <script> 1022 AUI().ready(function () { 1023 1024 function copyOnClick(text) { 1025 1026 const strWithoutHtmlTags = text.replace(/(<([^>]+)>)/gi, ""); 1027 const strWithoutMarcationBrackets = strWithoutHtmlTags.replace(/ *#\[[^\]]*]/g, ""); 1028 const strWithoutNextPrevious = strWithoutMarcationBrackets.replace(/Previous Next/g, ""); 1029 const strWithoutBlankEnters = strWithoutNextPrevious.replace(/^\s*$(?:\r\n?|\n)/gm, ""); 1030 const strWithoutBlankLines = strWithoutBlankEnters.replace(/ /g, ''); 1031 const tempInput = document.createElement("textarea"); 1032 tempInput.value = strWithoutBlankLines; 1033 1034 document.body.appendChild(tempInput); 1035 tempInput.select(); 1036 document.execCommand("copy"); 1037 1038 if (tempInput.value.length > 0) { 1039 copyMessages.forEach(copyMessage => copyMessage.classList.add('copy-message-active')); 1040 1041 timerToMessage() 1042 } 1043 1044 document.body.removeChild(tempInput); 1045 } 1046 1047 const copyTextContainers = document.querySelectorAll(".publish_and_social_medias_infos_desk .copy-text-container"); 1048 copyTextContainers.forEach(copyTextContainer => { 1049 copyTextContainer.addEventListener("click", (event) => { 1050 event.preventDefault(); 1051 const titleText = document.querySelector(".main-headline-container .main-headline").innerHTML; 1052 const publishSocialMediaText = document.querySelector(".publish_and_social_medias_infos_desk .publish_and_update_date").innerHTML; 1053 const tagsText = document.querySelector(".tags").innerHTML; 1054 const newsContentText = document.querySelector(".news-content").innerHTML; 1055 const text = titleText + publishSocialMediaText + tagsText + newsContentText; 1056 copyOnClick(text) 1057 }); 1058 }); 1059 1060 const mobileShare = async () => { 1061 try { 1062 const shareData = { 1063 title: '${newsInfo.mainHeadlineOfTheNews}', 1064 text: '', 1065 url: '${newsInfo.url}' 1066 }; 1067 await navigator.share(shareData); 1068 } catch (err) { 1069 1070 } 1071 }; 1072 1073 const mobileShareButtons = document.querySelectorAll(".publish_and_social_medias_infos_desk .mobile-share"); 1074 mobileShareButtons.forEach(mobileShareButton => { 1075 mobileShareButton.addEventListener("click", (event) => { 1076 event.preventDefault(); 1077 mobileShare(); 1078 }); 1079 }); 1080 1081 const copyMessages = document.querySelectorAll('.copy-message'); 1082 const timerToMessage = () => { 1083 setTimeout(() => { 1084 removeMessage(); 1085 }, 2500); 1086 1087 } 1088 1089 const removeMessage = () => { 1090 copyMessages.forEach(copyMessage => copyMessage.classList.remove('copy-message-active')); 1091 } 1092 1093 }); 1094 </script> 1095 1096</#macro> 1097 1098<#-- ################################################################################################################## --> 1099 1100<#-- ############# Site de Crise - Notícia - Render Tags ############################################################## --> 1101 1102<#function getCategoriesNamesAndIds vocabularyName categoriesList> 1103 <#assign tagCategoryList = [] /> 1104 1105 <#assign tagsVocabulary = assetVocabularyService.fetchGroupVocabulary(groupId, vocabularyName) /> 1106 <#list categoriesList as cat> 1107 <#if tagsVocabulary.getVocabularyId() == cat.embeddedTaxonomyCategory.taxonomyVocabularyId > 1108 <#assign tagCategoryList += [[cat.taxonomyCategoryName, cat.taxonomyCategoryId]] /> 1109 </#if> 1110 </#list> 1111 <#return tagCategoryList> 1112</#function> 1113 1114<#assign 1115flagVocabulary = findVocabulary("Flag", vocabularies) 1116assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") 1117/> 1118 1119<#macro renderNewsTags categoryList targetPageWhenClickTag removeStartParameterWhenTagIsClicked updateTagParamsWhenClicked> 1120 <#assign tagPrefix = "tags-" + randomNumber(groupId?number)> 1121 <div class="${tagPrefix}-breakpoint breakpoint"> 1122 <div class="${tagPrefix} col-2-11 md-col-1-8 sm-col-1-4"> 1123 1124 <div class="tags"> 1125 <#list categoryList as cat> 1126 <#assign tagLink = mountUrlToPage("") /> 1127 <#assign urlWithoutTrailingSlash = tagLink?substring(0, tagLink?length - 1)> 1128 <#assign lastSlashIndex = urlWithoutTrailingSlash?last_index_of("/")> 1129 <#assign newUrl = urlWithoutTrailingSlash?substring(0, lastSlashIndex + 1)> 1130 <#assign tagLink = newUrl + "categorias?category=" + cat[1] /> 1131 <a href="${tagLink}" 1132 class="category" cetegoryid="${cat[1]}"># ${cat[0]}</a> 1133 </#list> 1134 </div> 1135 </div> 1136 </div> 1137 1138 <style> 1139 .${tagPrefix} { 1140 display: flex; 1141 flex-direction: column; 1142 padding: 0; 1143 gap: var(--space-sm); 1144 } 1145 1146 .${tagPrefix} * { 1147 margin: 0; 1148 padding: 0; 1149 } 1150 1151 .${tagPrefix} .tags { 1152 display: flex; 1153 flex-wrap: wrap; 1154 gap: var(--space-xxs, 8px); 1155 padding: var(--space-lg) 0 var(--space-xl); 1156 } 1157 1158 .${tagPrefix} .tags .category { 1159 padding: var(--space-xxxs) var(--space-xxs); 1160 background: var(--color-neutral-100); 1161 border: var(--border-width-hairline, 1px) solid var(--color-neutral-500); 1162 border-radius: var(--border-radius-xl); 1163 1164 font-family: var(--font-family-base); 1165 font-style: var(--font-style-normal); 1166 font-weight: var(--font-weight-regular); 1167 font-size: var(--font-size-xxxs); 1168 line-height: var(--line-height-xl); 1169 color: var(--color-neutral-800, #373737); 1170 cursor: pointer; 1171 } 1172 1173 body.high-contrast-active .${tagPrefix} .tags .category { 1174 background: rgba(255, 255, 255, 0.32); 1175 border: 1px solid rgba(255, 255, 255, 0.32); 1176 color: var(--text-secondary-default, #F8F8F8); 1177 } 1178 1179 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 1180 .${tagPrefix} .tags { 1181 display: flex; 1182 flex-wrap: wrap; 1183 gap: 8px; 1184 padding: var(--space-sm) 0 var(--space-lg); 1185 } 1186 1187 .${tagPrefix} { 1188 margin-top: var(--space-sm); 1189 } 1190 } 1191 </style> 1192 1193 <script> 1194 AUI().ready(function () { 1195 1196 const urlParams = new URLSearchParams(window.location.search); 1197 const categories = urlParams.getAll("category").sort(); 1198 1199 const root = document.querySelector(".${tagPrefix}"); 1200 const tags = root.querySelectorAll(".category"); 1201 tags.forEach((tag, index) => { 1202 1203 const categoryId = tag.getAttribute("cetegoryid"); 1204 if (categories.indexOf(categoryId) != -1) { 1205 tag.classList.add("active"); 1206 } 1207 1208 <#if updateTagParamsWhenClicked> 1209 tag.addEventListener("click", (e) => { 1210 e.preventDefault(); 1211 const clickedTag = e.target; 1212 const urlParams = new URLSearchParams(window.location.search); 1213 urlParams.delete("tag"); 1214 urlParams.delete("category"); 1215 1216 const categoryId = clickedTag.getAttribute("cetegoryid"); 1217 urlParams.append("category", categoryId); 1218 1219 <#if removeStartParameterWhenTagIsClicked> 1220 urlParams.delete("start"); 1221 </#if> 1222 1223 const href = "${themeDisplay.getPortalURL() + mountUrlToPage(targetPageWhenClickTag)}?" + urlParams.toString(); 1224 window.location.href = href; 1225 }); 1226 </#if> 1227 }); 1228 }); 1229 </script> 1230 1231</#macro> 1232 1233<#-- ################################################################################################################## --> 1234 1235<#-- ############# Site de Crise - Notícia - Imagem de destaque ####################################################### --> 1236<#macro renderNewsFeaturedMedia newsInfo> 1237 <#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)> 1238 <div class="news-featured-media"> 1239 1240 <div class="media-breakpoint breakpoint"> 1241 <div class="media-col col-2-11 md-col-1-8 sm-col-1-4"> 1242 <#if newsInfo.newsMedia.imageSrc?? && newsInfo.newsMedia.imageSrc?has_content> 1243 <#-- Midias adaptativas de imagem para desktop e mobile --> 1244 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${newsInfo.newsMedia.fileEntryId}") /> 1245 <#assign urlAdaptativeMediaMobile = newsInfo.newsMedia.imageSrc/> 1246 <#assign urlAdaptativeMediaDesktop = newsInfo.newsMedia.imageSrc/> 1247 1248 <#if fileDataRequest?? && fileDataRequest.adaptedImages?? > 1249 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 1250 <#list dataAdaptativeMedia as data> 1251 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 1252 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 1253 </#if> 1254 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 1255 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 1256 </#if> 1257 </#list> 1258 </#if> 1259 1260 <picture > 1261 <source media="(max-width:767px)" srcset="${urlAdaptativeMediaMobile}"> 1262 <img src="${urlAdaptativeMediaDesktop}" loading="lazy" alt="${newsInfo.newsMedia.imageAlt}"/> 1263 </picture> 1264 <@liferay_util["html-top"]> 1265 <meta name="title" content="${newsInfo.mainHeadlineOfTheNews}"> 1266 <meta name="description" content="${newsInfo.newsSummary}"> 1267 1268 <meta property="og:url" content="${currentURL}"> 1269 <meta property="og:type" content="website"> 1270 <meta property="og:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1271 <meta property="og:description" content="${newsInfo.newsSummary}" /> 1272 <meta property="og:image" content="${themeDisplay.getPortalURL()}/o/adaptive-media/image/${newsInfo.newsMedia.fileEntryId}/Thumbnail-300x300/image"> 1273 <meta property="og:image:alt" content="${newsInfo.newsMedia.imageAlt}"> 1274 1275 <meta name="twitter:card" content="summary_large_image"> 1276 <meta name="twitter:url" content="${currentURL}" /> 1277 <meta name="twitter:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1278 <meta name="twitter:description" content="${newsInfo.newsSummary}" /> 1279 <meta name="twitter:image" content= "${themeDisplay.getPortalURL()}/o/adaptive-media/image/${newsInfo.newsMedia.fileEntryId}/Thumbnail-300x300/image" > 1280 <meta name="twitter:image:alt" content="${newsInfo.newsMedia.imageAlt}"> 1281 </@> 1282 <#else> 1283 <#if newsInfo.newsMedia.videoYotubeID?? && newsInfo.newsMedia.videoYotubeID?has_content> 1284 <iframe loading="lazy" src="https://www.youtube-nocookie.com/embed/${newsInfo.newsMedia.videoYotubeID}?si=PDNu4EIwtCuSHC1S&controls=0&enablejsapi=1&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 1285 <@liferay_util["html-top"]> 1286 <meta name="title" content="${newsInfo.mainHeadlineOfTheNews}"> 1287 <meta name="description" content="${newsInfo.newsSummary}"> 1288 1289 <meta property="og:url" content="${currentURL}"> 1290 <meta property="og:type" content="website"> 1291 <meta property="og:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1292 <meta property="og:description" content="${newsInfo.newsSummary}" /> 1293 <meta property="og:image" content="https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg"> 1294 <meta property="og:image:alt" content="Youtube Video Thumbnail"> 1295 1296 <meta name="twitter:card" content="summary_large_image"> 1297 <meta name="twitter:url" content="${currentURL}" /> 1298 <meta name="twitter:title" content="${newsInfo.mainHeadlineOfTheNews}"> 1299 <meta name="twitter:description" content="${newsInfo.newsSummary}" /> 1300 <meta name="twitter:image" content= "https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg" > 1301 <meta name="twitter:image:alt" content="Youtube Video Thumbnail"> 1302 </@> 1303 <#else> 1304 <video loading="lazy"> 1305 <source src="${newsInfo.newsMedia.internalVideo.url}"> 1306 Your browser does not support the video tag. 1307 </video> 1308 </#if> 1309 1310 <div class="banner-video-icons"> 1311 <#if newsInfo.newsMedia.videoYotubeID?? && newsInfo.newsMedia.videoYotubeID?has_content> 1312 <picture > 1313 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/mqdefault.jpg"> 1314 <img class="banner-video-thumb-iframe" loading="lazy" src="https://img.youtube.com/vi/${newsInfo.newsMedia.videoYotubeID}/hqdefault.jpg" alt="YouTube Thumbnail"/> 1315 </picture> 1316 </#if> 1317 <svg class="banner-video-icon-play" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 1318 <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"/> 1319 <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"/> 1320 </svg> 1321 </div> 1322 </#if> 1323 </div> 1324 </div> 1325 1326 <div class="credit-legend breakpoint"> 1327 1328 <div class="credit-legend-container col-2-11 md-col-1-8 sm-col-1-4"> 1329 <#if newsInfo.newsMedia.legend != ""> 1330 <div class="legend paragraph-micro-regular"> 1331 <p>${newsInfo.newsMedia.legend}</p> 1332 </div> 1333 </#if> 1334 <#if newsInfo.newsMedia.credits != ""> 1335 <p class="credits paragraph-micro-regular"> 1336 ${newsInfo.newsMedia.credits} 1337 </p> 1338 </#if> 1339 1340 </div> 1341 </div> 1342 </div> 1343 </#if> 1344 <style> 1345 .ptb-news__read-news .news-featured-media { 1346 padding: 0 0 var(--space-xl) 0; 1347 } 1348 1349 .ptb-news__read-news .news-featured-media .media-col { 1350 position: relative; 1351 } 1352 1353 .ptb-news__read-news .news-featured-media img, 1354 .ptb-news__read-news .news-featured-media video, 1355 .ptb-news__read-news .news-featured-media iframe { 1356 width: 100%; 1357 max-height: 567px; 1358 aspect-ratio: 16/9; 1359 object-fit: cover; 1360 border-radius: var(--border-radius-lg, 16px); 1361 } 1362 1363 .ptb-news__read-news .news-featured-media .banner-video-icons { 1364 width: 100%; 1365 height: 100%; 1366 position: absolute; 1367 top: 50%; 1368 left: 50%; 1369 transform: translate(-50%,-50%); 1370 cursor: pointer; 1371 } 1372 1373 .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-thumb-iframe { 1374 position: absolute; 1375 width: 100%; 1376 height: 100%; 1377 object-fit: cover; 1378 } 1379 1380 .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-icon-play { 1381 position: absolute; 1382 top: 50%; 1383 left: 50%; 1384 transform: translate(-50%,-50%); 1385 } 1386 1387 body.high-contrast-active .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-icon-play path:nth-child(1) { 1388 fill: black; 1389 } 1390 1391 body.high-contrast-active .ptb-news__read-news .news-featured-media .banner-video-icons .banner-video-icon-play path:nth-child(2) { 1392 fill: white; 1393 } 1394 1395 .ptb-news__read-news .news-featured-media *:not(.breakpoint) { 1396 margin: 0; 1397 } 1398 .ptb-news__read-news .news-featured-media * { 1399 padding: 0; 1400 font-family: var(--font-family-base); 1401 line-height: var(--line-height-xl); 1402 } 1403 1404 .ptb-news__read-news .news-featured-media .credits { 1405 text-align: right; 1406 color: var(--collor-neutral-dark-to-bright-200, #525252); 1407 margin-bottom: var(--space-xxxs, 4px); 1408 font-style: var(--font-style-italic, italic); 1409 margin-top: var(--space-xxs, 8px); 1410 margin-bottom: 0; 1411 } 1412 1413 body.high-contrast-active .ptb-news__read-news .news-featured-media .credits { 1414 color: var(--text-secondary-default, #F8F8F8); 1415 } 1416 1417 .ptb-news__read-news .news-featured-media .legend { 1418 margin-top: var(--space-xxs, 8px); 1419 display: flex; 1420 justify-content: space-between; 1421 } 1422 1423 .ptb-news__read-news .news-featured-media .legend, 1424 .ptb-news__read-news .news-featured-media .legend * { 1425 font-style: var(--font-style-italic, italic); 1426 color: var(--collor-neutral-dark-to-bright-200, #525252); 1427 } 1428 1429 .ptb-news__read-news .credit-legend .credit-legend-container { 1430 display: flex; 1431 justify-content: space-between; 1432 flex-wrap: wrap; 1433 gap: 8px; 1434 } 1435 1436 body.high-contrast-active .ptb-news__read-news .news-featured-media .legend, 1437 body.high-contrast-active .ptb-news__read-news .news-featured-media .legend * { 1438 color: var(--text-secondary-default, #F8F8F8); 1439 } 1440 1441 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 1442 .ptb-news__read-news .news-featured-media .credits { 1443 text-align: left; 1444 } 1445 } 1446 </style> 1447 1448 <script> 1449 /* Manipulation video*/ 1450 let videoIsPlaying = false; 1451 1452 const modalForClick = document.querySelector(".ptb-news__read-news .news-featured-media .banner-video-icons"); 1453 const video = document.querySelector(".ptb-news__read-news .news-featured-media .media-col > :first-child"); 1454 1455 const playIcon = modalForClick && modalForClick.querySelector(".banner-video-icon-play"); 1456 modalForClick && modalForClick.addEventListener("click", ()=>{ 1457 if(video.tagName === "VIDEO") { 1458 if(videoIsPlaying) { 1459 video.pause(); 1460 playIcon.style.display = ""; 1461 videoIsPlaying = false; 1462 } 1463 else { 1464 video.play(); 1465 playIcon.style.display = "none"; 1466 videoIsPlaying = true; 1467 } 1468 } 1469 else if(video.tagName === "IFRAME") { 1470 const thumbYoutube = modalForClick.querySelector(".banner-video-thumb-iframe"); 1471 if(videoIsPlaying) { 1472 video.contentWindow.postMessage('{"event":"command","func":"pauseVideo"}', '*'); 1473 playIcon.style.display = ""; 1474 videoIsPlaying = false; 1475 } 1476 else { 1477 thumbYoutube && (thumbYoutube.style.display = "none"); 1478 video.contentWindow.postMessage('{"event":"command","func":"playVideo"}', '*'); 1479 playIcon.style.display = "none"; 1480 videoIsPlaying = true; 1481 } 1482 } 1483 }); 1484 </script> 1485<#--/#if --> 1486</#macro> 1487<#-- ################################################################################################################## --> 1488 1489<#-- ############# Site de Crise - Notícia - Conteúdo da notícia ###################################################### --> 1490 1491<#macro renderNewsContent newsInfo> 1492 1493 <#assign targetStr = "<div class='paragraph_separator'><span class='dot'></span><span class='dot'></span><span class='dot'></span><span class='dot'></span></div>"> 1494 <#assign content = newsInfo.newsContent?replace("<p></p>", targetStr, 'r')> 1495 <#assign content = content?replace("<p> </p>", targetStr, 'r')> 1496 <#assign content = content?replace("<p></p>", targetStr, 'r')> 1497 <#assign content = content?replace("<p> </p>", targetStr, 'r')> 1498 1499 1500 <div class="news-content breakpoint"> 1501 <div class="col-1-12 md-col-1-8 sm-col-1-4"> 1502 ${content} 1503 </div> 1504 1505 <div class="audio-template audio-pause audio-unmuted" style="display:none"> 1506 <div class="audio-button-play"> 1507 <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> 1508 </svg> 1509 1510 <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> 1511 </svg> 1512 </div> 1513 <div class="audio-sondwave"> 1514 <svg class="audio-sondwave-desktop" width="100%" height="100%" viewBox="0 0 590 30" fill="none" xmlns="http://www.w3.org/2000/svg"> 1515 <g clip-path="url(#clip0_2625_8152)"> 1516 <line x1="0.75" y1="0.75" x2="0.749999" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1517 <line x1="5.91016" y1="7.75" x2="5.91016" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1518 <line x1="11.0723" y1="5.75" x2="11.0723" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1519 <line x1="16.2344" y1="11.75" x2="16.2344" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1520 <line x1="21.3945" y1="9.75" x2="21.3945" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1521 <line x1="26.5566" y1="9.75" x2="26.5566" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1522 <line x1="30.6855" y1="1.75" x2="30.6855" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1523 <line x1="35.8477" y1="12.75" x2="35.8477" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1524 <line x1="41.0078" y1="13.75" x2="41.0078" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1525 <line x1="46.1699" y1="10.75" x2="46.1699" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1526 <line x1="51.3301" y1="8.75" x2="51.3301" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1527 <line x1="56.4922" y1="0.75" x2="56.4922" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1528 <line x1="61.6523" y1="7.75" x2="61.6523" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1529 <line x1="66.8145" y1="5.75" x2="66.8145" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1530 <line x1="71.9766" y1="11.75" x2="71.9766" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1531 <line x1="77.1367" y1="9.75" x2="77.1367" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1532 <line x1="82.2988" y1="9.75" x2="82.2988" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1533 <line x1="86.4277" y1="1.75" x2="86.4277" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1534 <line x1="91.5879" y1="12.75" x2="91.5879" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1535 <line x1="96.75" y1="13.75" x2="96.75" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1536 <line x1="101.91" y1="10.75" x2="101.91" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1537 <line x1="107.072" y1="8.75" x2="107.072" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1538 <line x1="112.234" y1="0.75" x2="112.234" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1539 <line x1="117.395" y1="7.75" x2="117.395" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1540 <line x1="122.557" y1="5.75" x2="122.557" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1541 <line x1="127.717" y1="11.75" x2="127.717" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1542 <line x1="132.879" y1="9.75" x2="132.879" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1543 <line x1="138.041" y1="9.75" x2="138.041" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1544 <line x1="142.17" y1="1.75" x2="142.17" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1545 <line x1="147.33" y1="12.75" x2="147.33" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1546 <line x1="151.75" y1="0.75" x2="151.75" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1547 <line x1="156.91" y1="7.75" x2="156.91" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1548 <line x1="162.072" y1="5.75" x2="162.072" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1549 <line x1="167.234" y1="11.75" x2="167.234" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1550 <line x1="172.395" y1="9.75" x2="172.395" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1551 <line x1="177.557" y1="9.75" x2="177.557" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1552 <line x1="181.686" y1="1.75" x2="181.686" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1553 <line x1="186.848" y1="12.75" x2="186.848" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1554 <line x1="192.008" y1="13.75" x2="192.008" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1555 <line x1="197.17" y1="10.75" x2="197.17" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1556 <line x1="202.33" y1="8.75" x2="202.33" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1557 <line x1="207.492" y1="0.75" x2="207.492" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1558 <line x1="212.652" y1="7.75" x2="212.652" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1559 <line x1="217.814" y1="5.75" x2="217.814" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1560 <line x1="222.977" y1="11.75" x2="222.977" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1561 <line x1="228.137" y1="9.75" x2="228.137" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1562 <line x1="233.299" y1="9.75" x2="233.299" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1563 <line x1="237.428" y1="1.75" x2="237.428" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1564 <line x1="242.588" y1="12.75" x2="242.588" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1565 <line x1="247.75" y1="13.75" x2="247.75" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1566 <line x1="252.91" y1="10.75" x2="252.91" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1567 <line x1="258.072" y1="8.75" x2="258.072" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1568 <line x1="263.234" y1="0.75" x2="263.234" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1569 <line x1="268.395" y1="7.75" x2="268.395" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1570 <line x1="273.557" y1="5.75" x2="273.557" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1571 <line x1="278.717" y1="11.75" x2="278.717" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1572 <line x1="283.879" y1="9.75" x2="283.879" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1573 <line x1="289.041" y1="9.75" x2="289.041" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1574 <line x1="293.17" y1="1.75" x2="293.17" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1575 <line x1="298.33" y1="12.75" x2="298.33" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1576 <line x1="302.75" y1="10.75" x2="302.75" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1577 <line x1="307.912" y1="8.75" x2="307.912" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1578 <line x1="313.072" y1="0.75" x2="313.072" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1579 <line x1="318.234" y1="7.75" x2="318.234" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1580 <line x1="323.395" y1="5.75" x2="323.395" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1581 <line x1="328.557" y1="11.75" x2="328.557" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1582 <line x1="333.719" y1="9.75" x2="333.719" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1583 <line x1="338.879" y1="9.75" x2="338.879" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1584 <line x1="343.008" y1="1.75" x2="343.008" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1585 <line x1="348.17" y1="12.75" x2="348.17" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1586 <line x1="353.33" y1="13.75" x2="353.33" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1587 <line x1="358.492" y1="10.75" x2="358.492" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1588 <line x1="363.652" y1="8.75" x2="363.652" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1589 <line x1="368.814" y1="0.75" x2="368.814" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1590 <line x1="373.977" y1="7.75" x2="373.977" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1591 <line x1="379.137" y1="5.75" x2="379.137" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1592 <line x1="384.299" y1="11.75" x2="384.299" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1593 <line x1="389.459" y1="9.75" x2="389.459" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1594 <line x1="394.621" y1="9.75" x2="394.621" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1595 <line x1="398.75" y1="1.75" x2="398.75" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1596 <line x1="403.912" y1="12.75" x2="403.912" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1597 <line x1="408.33" y1="10.75" x2="408.33" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1598 <line x1="413.492" y1="8.75" x2="413.492" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1599 <line x1="418.654" y1="0.75" x2="418.654" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1600 <line x1="423.814" y1="7.75" x2="423.814" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1601 <line x1="428.977" y1="5.75" x2="428.977" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1602 <line x1="434.137" y1="11.75" x2="434.137" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1603 <line x1="439.299" y1="9.75" x2="439.299" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1604 <line x1="444.461" y1="9.75" x2="444.461" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1605 <line x1="448.59" y1="1.75" x2="448.59" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1606 <line x1="453.75" y1="12.75" x2="453.75" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1607 <line x1="458.912" y1="13.75" x2="458.912" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1608 <line x1="464.072" y1="10.75" x2="464.072" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1609 <line x1="469.234" y1="8.75" x2="469.234" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1610 <line x1="474.395" y1="0.75" x2="474.395" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1611 <line x1="479.557" y1="7.75" x2="479.557" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1612 <line x1="484.719" y1="5.75" x2="484.719" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1613 <line x1="489.879" y1="11.75" x2="489.879" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1614 <line x1="495.041" y1="9.75" x2="495.041" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1615 <line x1="500.201" y1="9.75" x2="500.201" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1616 <line x1="504.33" y1="1.75" x2="504.33" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1617 <line x1="509.492" y1="12.75" x2="509.492" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1618 <line x1="513.912" y1="10.75" x2="513.912" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1619 <line x1="519.072" y1="8.75" x2="519.072" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1620 <line x1="524.234" y1="0.75" x2="524.234" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1621 <line x1="529.395" y1="7.75" x2="529.395" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1622 <line x1="534.557" y1="5.75" x2="534.557" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1623 <line x1="539.719" y1="11.75" x2="539.719" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1624 <line x1="544.879" y1="9.75" x2="544.879" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1625 <line x1="550.041" y1="9.75" x2="550.041" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1626 <line x1="554.17" y1="1.75" x2="554.17" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1627 <line x1="559.332" y1="12.75" x2="559.332" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1628 <line x1="564.492" y1="13.75" x2="564.492" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1629 <line x1="569.654" y1="10.75" x2="569.654" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1630 <line x1="574.814" y1="8.75" x2="574.814" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1631 <line x1="579.977" y1="0.75" x2="579.977" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1632 <line x1="585.137" y1="7.75" x2="585.137" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1633 <line x1="590.299" y1="5.75" x2="590.299" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1634 </g> 1635 <defs> 1636 <clipPath id="clip0_2625_8152"> 1637 <rect width="590" height="30" fill="white"/> 1638 </clipPath> 1639 </defs> 1640 </svg> 1641 <svg class="audio-sondwave-mobile" width="100%" height="100%" viewBox="0 0 102 30" fill="none" xmlns="http://www.w3.org/2000/svg"> 1642 <g clip-path="url(#clip0_2625_8922)"> 1643 <line x1="0.75" y1="0.75" x2="0.749999" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1644 <line x1="5.91016" y1="7.75" x2="5.91016" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1645 <line x1="11.0723" y1="5.75" x2="11.0723" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1646 <line x1="16.2344" y1="11.75" x2="16.2344" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1647 <line x1="21.3945" y1="9.75" x2="21.3945" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1648 <line x1="26.5566" y1="9.75" x2="26.5566" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1649 <line x1="30.6855" y1="1.75" x2="30.6855" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1650 <line x1="35.8477" y1="12.75" x2="35.8477" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1651 <line x1="41.0078" y1="13.75" x2="41.0078" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1652 <line x1="46.1699" y1="10.75" x2="46.1699" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1653 <line x1="51.3301" y1="8.75" x2="51.3301" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1654 <line x1="56.4922" y1="0.75" x2="56.4922" y2="29.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1655 <line x1="61.6523" y1="7.75" x2="61.6523" y2="21.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1656 <line x1="66.8145" y1="5.75" x2="66.8145" y2="24.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1657 <line x1="71.9766" y1="11.75" x2="71.9766" y2="18.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1658 <line x1="77.1367" y1="9.75" x2="77.1367" y2="20.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1659 <line x1="82.2988" y1="9.75" x2="82.2988" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1660 <line x1="86.4277" y1="1.75" x2="86.4277" y2="28.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1661 <line x1="91.5879" y1="12.75" x2="91.5879" y2="17.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1662 <line x1="96.75" y1="13.75" x2="96.75" y2="16.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1663 <line x1="101.91" y1="10.75" x2="101.91" y2="19.25" stroke="#008542" stroke-width="1.5" stroke-linecap="round"/> 1664 </g> 1665 <defs> 1666 <clipPath id="clip0_2625_8922"> 1667 <rect width="102" height="30" fill="white"/> 1668 </clipPath> 1669 </defs> 1670 </svg> 1671 </div> 1672 <div class="audio-time paragraph-micro-bold"> </div> 1673 <div class="audio-button-mute"> 1674 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"> 1675 <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"/> 1676 </svg> 1677 </div> 1678 </div> 1679 </div> 1680 1681 1682 <style> 1683 1684 .ptb-news__read-news .news-content p { 1685 margin-bottom: var(--space-md, 24px); 1686 } 1687 1688 .ptb-news__read-news .news-content strong { 1689 font-weight: var(--font-weight-bold); 1690 } 1691 1692 .ptb-news__read-news .news-content em { 1693 font-style: var(--font-style-italic); 1694 } 1695 1696 .ptb-news__read-news .news-content a { 1697 font-family: var(--font-family-base); 1698 font-style: var(--font-style-normal, normal); 1699 font-weight: var(--font-weight-bold, 700); 1700 font-size: var(--font-size-xs, 18px); 1701 line-height: var(--line-height-xl, 160%); 1702 1703 text-decoration-line: var(--text-decoration-underline, underline); 1704 color: #008542; 1705 } 1706 1707 body.high-contrast-active .ptb-news__read-news .news-content a { 1708 color: #E4F7E8; 1709 } 1710 1711 .ptb-news__read-news .news-content ul { 1712 padding-left: 27px; 1713 margin-top: -16px; 1714 } 1715 1716 .ptb-news__read-news .news-content ul li::marker { 1717 content: "■" !important; 1718 color: var(--color-secondary-medium) !important; 1719 font-size: var(--size-xxs); 1720 } 1721 1722 .ptb-news__read-news .news-content ul li { 1723 color: var(--color-text-primary-default); 1724 padding: 8px 0; 1725 1726 /*paragraph-sm-regular*/ 1727 font-size: var(--font-size-xxs); 1728 line-height: var(--line-height-xl); 1729 font-weight: var(--font-weight-regular); 1730 font-style: var(--font-style-normal); 1731 text-decoration: var(--text-decoration-none); 1732 1733 margin-left: calc(-1* var(--space-sm)); 1734 padding-left: var(--space-sm); 1735 } 1736 1737 .ptb-news__read-news .news-content ul li * { 1738 color: var(--color-text-primary-default); 1739 padding: 8px 0; 1740 1741 /*paragraph-sm-regular*/ 1742 font-size: var(--font-size-xxs); 1743 line-height: var(--line-height-xl); 1744 font-weight: var(--font-weight-regular); 1745 font-style: var(--font-style-normal); 1746 text-decoration: var(--text-decoration-none); 1747 } 1748 1749 @media screen and (min-width: 1024px) { 1750 .ptb-news__read-news .news-content > * { 1751 grid-column-start: 3; 1752 grid-column-end: 11; 1753 } 1754 1755 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Infográfico" > 1756 .ptb-news__read-news .news-content > *:has(img) { 1757 grid-column-start: 2; 1758 grid-column-end: 12; 1759 } 1760 } 1761 1762 </#if> 1763 } 1764 1765 .ptb-news__read-news .news-content figure { 1766 margin-bottom: var(--space-sm, 16px); 1767 } 1768 1769 .ptb-news__read-news .news-content figure figcaption { 1770 display: flex; 1771 justify-content: space-between; 1772 align-items: flex-start; 1773 align-self: stretch; 1774 margin-top: var(--space-xxs, 8px); 1775 text-align: justify; 1776 } 1777 1778 .ptb-news__read-news .news-content figure figcaption, 1779 .ptb-news__read-news .news-content figure figcaption * { 1780 color: var(--color-neutral-700, #525252); 1781 font-family: var(--font-family-base); 1782 font-size: var(--font-size-xxxs, 14px); 1783 font-style: var(--font-style-italic, italic); 1784 font-weight: var(--font-weight-regular, 400); 1785 line-height: var(--line-height-xl, 160%); 1786 } 1787 1788 body.high-contrast-active .ptb-news__read-news .news-content figure figcaption, 1789 body.high-contrast-active .ptb-news__read-news .news-content figure figcaption * { 1790 color: var(--text-secondary-default, #F8F8F8); 1791 } 1792 1793 .ptb-news__read-news .news-content figure figcaption br { 1794 display: none; 1795 } 1796 1797 .ptb-news__read-news .news-content .embed-responsive { 1798 width: 100% !important; 1799 border-radius: var(--border-radius-md, 16px); 1800 margin-bottom: var(--space-md, 16px); 1801 } 1802 1803 .ptb-news__read-news .news-content img { 1804 width: 100%; 1805 height: auto; 1806 object-fit: cover; 1807 border-radius: var(--border-radius-md, 16px); 1808 } 1809 1810 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Artigo" > 1811 .ptb-news__read-news .news-content img { 1812 aspect-ratio: 16/9; 1813 } 1814 </#if> 1815 1816 .ptb-news__read-news .news-content .paragraph_separator { 1817 display: flex; 1818 width: 100%; 1819 height: fit-content; 1820 justify-content: center; 1821 gap: 6px; 1822 } 1823 1824 .ptb-news__read-news .news-content .paragraph_separator .dot { 1825 height: var(--size-micro, 4px); 1826 width: var(--size-micro, 4px); 1827 background-color: #959595; 1828 border-radius: 100%; 1829 display: inline-block; 1830 } 1831 1832 .ptb-news__read-news .news-content * { 1833 font-family: var(--font-family-base); 1834 font-style: var(--font-style-normal, normal); 1835 font-weight: var(--font-weight-regular, 400); 1836 font-size: var(--font-size-xs, 18px); 1837 line-height: var(--line-height-xl, 160%); 1838 color: var(--color-neutral-800, #373737); 1839 } 1840 1841 body.high-contrast-active .ptb-news__read-news .news-content * { 1842 color: var(--text-primary-default, var(--color-neutral-100)); 1843 } 1844 1845 .ptb-news__read-news .news-content h1, 1846 .ptb-news__read-news .news-content h1 *, 1847 .ptb-news__read-news .news-content h2, 1848 .ptb-news__read-news .news-content h2 *, 1849 .ptb-news__read-news .news-content h3, 1850 .ptb-news__read-news .news-content h3 *, 1851 .ptb-news__read-news .news-content h4, 1852 .ptb-news__read-news .news-content h4 *, 1853 .ptb-news__read-news .news-content h5, 1854 .ptb-news__read-news .news-content h5 *, 1855 .ptb-news__read-news .news-content h6, 1856 .ptb-news__read-news .news-content h6 * { 1857 color: var(--color-neutral-800, #373737) !important; 1858 } 1859 1860 body.high-contrast-active .ptb-news__read-news .news-content h1, 1861 body.high-contrast-active .ptb-news__read-news .news-content h1 *, 1862 body.high-contrast-active .ptb-news__read-news .news-content h2, 1863 body.high-contrast-active .ptb-news__read-news .news-content h2 *, 1864 body.high-contrast-active .ptb-news__read-news .news-content h3, 1865 body.high-contrast-active .ptb-news__read-news .news-content h3 *, 1866 body.high-contrast-active .ptb-news__read-news .news-content h4, 1867 body.high-contrast-active .ptb-news__read-news .news-content h4 *, 1868 body.high-contrast-active .ptb-news__read-news .news-content h5, 1869 body.high-contrast-active .ptb-news__read-news .news-content h5 *, 1870 body.high-contrast-active .ptb-news__read-news .news-content h6, 1871 body.high-contrast-active .ptb-news__read-news .news-content h6 * { 1872 color: var(--text-primary-default, var(--color-neutral-100)) !important; 1873 } 1874 1875 .ptb-news__read-news .news-content h1:last-child, 1876 .ptb-news__read-news .news-content h2:last-child, 1877 .ptb-news__read-news .news-content h3:last-child, 1878 .ptb-news__read-news .news-content h4:last-child, 1879 .ptb-news__read-news .news-content h5:last-child, 1880 .ptb-news__read-news .news-content h5:last-child, 1881 .ptb-news__read-news .news-content h6:last-child, 1882 .ptb-news__read-news .news-content p:last-child { 1883 padding-bottom: 0 !important; 1884 } 1885 1886 .ptb-news__read-news .news-content h1, 1887 .ptb-news__read-news .news-content h1 * { 1888 font-size: var(--font-size-xxl) !important; 1889 line-height: var(--line-height-sm) !important; 1890 font-weight: var(--font-weight-bold) !important; 1891 font-style: var(--font-style-normal) !important; 1892 text-decoration: var(--text-decoration-none) !important; 1893 } 1894 1895 .ptb-news__read-news .news-content h2, 1896 .ptb-news__read-news .news-content h2 * { 1897 1898 font-size: var(--font-size-xl) !important; 1899 line-height: var(--line-height-sm) !important; 1900 font-weight: var(--font-weight-bold) !important; 1901 font-style: var(--font-style-normal) !important; 1902 text-decoration: var(--text-decoration-none) !important; 1903 1904 } 1905 1906 .ptb-news__read-news .news-content h2 { 1907 margin-top: 48px !important; 1908 margin-bottom: var(--space-xl, 40px) !important; 1909 1910 } 1911 1912 .ptb-news__read-news .news-content h3, 1913 .ptb-news__read-news .news-content h3 * { 1914 font-size: var(--font-size-lg) !important; 1915 line-height: var(--line-height-sm) !important; 1916 font-weight: var(--font-weight-bold) !important; 1917 font-style: var(--font-style-normal) !important; 1918 text-decoration: var(--text-decoration-none) !important; 1919 } 1920 1921 .ptb-news__read-news .news-content h3 { 1922 margin-bottom: var(--space-sm, 16px) !important; 1923 margin-top: 48px !important; 1924 } 1925 1926 .ptb-news__read-news .news-content h4, 1927 .ptb-news__read-news .news-content h4 * { 1928 font-size: var(--font-size-md) !important; 1929 line-height: var(--line-height-md) !important; 1930 font-weight: var(--font-weight-bold) !important; 1931 font-style: var(--font-style-normal) !important; 1932 text-decoration: var(--text-decoration-none) !important; 1933 } 1934 1935 .ptb-news__read-news .news-content h4 { 1936 margin-top: 48px !important; 1937 margin-bottom: var(--space-sm, 16px) !important; 1938 } 1939 1940 .ptb-news__read-news .news-content h5, 1941 .ptb-news__read-news .news-content h5 * { 1942 font-size: var(--font-size-sm) !important; 1943 line-height: var(--line-height-md) !important; 1944 font-weight: var(--font-weight-bold) !important; 1945 font-style: var(--font-style-normal) !important; 1946 text-decoration: var(--text-decoration-none) !important; 1947 } 1948 1949 .ptb-news__read-news .news-content h5 { 1950 margin-top: 48px !important; 1951 margin-bottom: var(--space-sm, 16px) !important; 1952 } 1953 1954 .ptb-news__read-news .news-content table { 1955 border-collapse: collapse; 1956 border: none; 1957 width: 100% !important; 1958 margin: 24px 0; 1959 } 1960 1961 .ptb-news__read-news .news-content table * { 1962 font-size: var(--font-size-xxs, 16px); 1963 font-style: var(--font-style-normal, normal); 1964 font-weight: var(--font-weight-regular, 400); 1965 line-height: var(--line-height-xl, 160%); 1966 color: var(--color-neutral-800, #373737); 1967 border: 0; 1968 } 1969 1970 body.high-contrast-active .ptb-news__read-news .news-content table * { 1971 color: var(--text-primary-default, var(--color-neutral-100)); 1972 } 1973 1974 .ptb-news__read-news .news-content table tbody > :first-child, 1975 .ptb-news__read-news .news-content table tbody > :first-child * { 1976 font-weight: var(--font-weight-bold, 700); 1977 flex: 1 0 0; 1978 background: var(--background-Surface-level-02, #F8F8F8); 1979 } 1980 1981 body.high-contrast-active .ptb-news__read-news .news-content table tbody > :first-child, 1982 body.high-contrast-active .ptb-news__read-news .news-content table tbody > :first-child * { 1983 background: #373737; 1984 } 1985 1986 .ptb-news__read-news .news-content table tbody { 1987 display: flex; 1988 flex-direction: column; 1989 } 1990 1991 .ptb-news__read-news .news-content table tbody * { 1992 display: flex; 1993 height: 100%; 1994 align-items: center; 1995 flex: 1 0 0; 1996 } 1997 1998 .ptb-news__read-news .news-content table tbody tr * { 1999 padding: 23px var(--space-lg, 32px); 2000 } 2001 2002 2003 .ptb-news__read-news .news-content table tbody tr { 2004 border-radius: var(--border-radius-md); 2005 border: var(--border-width-hairline, 1px) solid #EEEEEE; 2006 } 2007 2008 body.high-contrast-active .ptb-news__read-news .news-content table tbody tr { 2009 border: var(--border-width-hairline, 1px) solid #525252; 2010 } 2011 2012 .ptb-news__read-news .news-content table tbody tr:not(:last-child) { 2013 border-bottom-left-radius: 0; 2014 border-bottom-right-radius: 0; 2015 } 2016 2017 .ptb-news__read-news .news-content table tbody tr:not(:first-child) { 2018 border-top-left-radius: 0; 2019 border-top-right-radius: 0; 2020 border-top: none; 2021 } 2022 2023 .ptb-news__read-news .news-content table tbody tr td:not(:last-child) { 2024 border-right: var(--border-width-hairline, 1px) solid #EEEEEE; 2025 } 2026 2027 body.high-contrast-active .ptb-news__read-news .news-content table tbody tr td:not(:last-child) { 2028 border-right: var(--border-width-hairline, 1px) solid #525252; 2029 } 2030 2031 .ptb-news__read-news .news-content table tbody tr:first-child td { 2032 border-top: var(--border-width-hairline, 1px) solid #EEEEEE; 2033 border-bottom: var(--border-width-hairline, 1px) solid #EEEEEE; 2034 } 2035 2036 body.high-contrast-active .ptb-news__read-news .news-content table tbody tr:first-child td { 2037 border-top: var(--border-width-hairline, 1px) solid #525252; 2038 border-bottom: var(--border-width-hairline, 1px) solid #525252; 2039 } 2040 2041 .ptb-news__read-news .news-content table tbody tr td:first-child { 2042 padding-left: 0; 2043 } 2044 2045 .ptb-news__read-news .news-content table tbody tr td:last-child{ 2046 padding-right: 0; 2047 } 2048 2049 .ptb-news__read-news .news-content audio { 2050 display: none; 2051 } 2052 2053 .ptb-news__read-news .news-content .audio-template { 2054 display: flex; 2055 padding: var(--space-sm, 16px); 2056 align-items: center; 2057 gap: var(--space-md, 24px); 2058 align-self: stretch; 2059 border-radius: var(--border-radius-lg, 16px); 2060 border: var(--border-width-hairline, 1px) solid var(--border-color-mid); 2061 background: var(--background-card-default, #FFF); 2062 max-height: var(--size-giant, 72px); 2063 margin: 48px 0; 2064 } 2065 2066 body.high-contrast-active .ptb-news__read-news .news-content .audio-template { 2067 background: var(--background-card-default, #010101); 2068 border: var(--border-width-hairline, 1px) solid #525252; 2069 } 2070 2071 .ptb-news__read-news .news-content .audio-template .audio-button-play { 2072 display: flex; 2073 width: var(--size-xl, 40px); 2074 height: var(--size-xl, 40px); 2075 justify-content: center; 2076 align-items: center; 2077 flex-grow: 0; 2078 flex-shrink: 0; 2079 cursor: pointer; 2080 } 2081 2082 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-play-icon, 2083 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-pause-icon { 2084 fill: #FFFFFF; 2085 } 2086 2087 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-play-icon path, 2088 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-play .audio-pause-icon path { 2089 fill: #010101; 2090 } 2091 2092 .ptb-news__read-news .news-content .audio-template.audio-pause .audio-button-play .audio-play-icon { 2093 display: block; 2094 } 2095 2096 .ptb-news__read-news .news-content .audio-template.audio-pause .audio-button-play .audio-pause-icon { 2097 display: none; 2098 } 2099 2100 .ptb-news__read-news .news-content .audio-template.audio-play .audio-button-play .audio-play-icon { 2101 display: none; 2102 } 2103 2104 .ptb-news__read-news .news-content .audio-template.audio-play .audio-button-play .audio-pause-icon { 2105 display: block; 2106 } 2107 2108 .ptb-news__read-news .news-content .audio-template .audio-sondwave { 2109 display: flex; 2110 flex-direction: column; 2111 align-items: flex-start; 2112 gap: var(--space-xxs, 8px); 2113 flex: 1 0 0; 2114 height: 100%; 2115 flex-grow: 1; 2116 flex-shrink: 1; 2117 } 2118 2119 .ptb-news__read-news .news-content .audio-template .audio-sondwave line { 2120 stroke: #008542; 2121 } 2122 2123 .ptb-news__read-news .news-content .audio-template .audio-sondwave line.line-active { 2124 stroke: #90EE90; 2125 } 2126 2127 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-sondwave line { 2128 stroke: #E4F7E8; 2129 } 2130 2131 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-sondwave line.line-active { 2132 stroke: #666666; 2133 } 2134 2135 .ptb-news__read-news .news-content .audio-template .audio-sondwave .audio-sondwave-mobile { 2136 display: none; 2137 } 2138 2139 .ptb-news__read-news .news-content .audio-template .audio-time { 2140 display: flex; 2141 flex-direction: column; 2142 align-items: flex-start; 2143 gap: var(--space-xxs, 8px); 2144 flex: 1 0 0; 2145 color: var(--text-primary-accent, #008542); 2146 text-align: center; 2147 font-family: var(--font-family-base); 2148 line-height: 124% !important; 2149 flex-grow: 0; 2150 flex-shrink: 0; 2151 } 2152 2153 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-time { 2154 color: var(--text-primary-accent, #E4F7E8); 2155 } 2156 2157 .ptb-news__read-news .news-content .audio-template .audio-button-mute { 2158 width: var(--size-lg, 32px); 2159 height: var(--size-lg, 32px); 2160 flex-grow: 0; 2161 flex-shrink: 0; 2162 cursor: pointer; 2163 } 2164 2165 body.high-contrast-active .ptb-news__read-news .news-content .audio-template .audio-button-mute svg path { 2166 stroke: white; 2167 fill: none; 2168 } 2169 2170 .ptb-news__read-news .news-content .audio-template.audio-muted .audio-button-mute { 2171 opacity: 0.6; 2172 } 2173 2174 2175 @media screen and (max-width: 1023px) and (min-width: ${MAX_MOBILE_WIDTH}px) { 2176 .ptb-news__read-news .news-content > * { 2177 grid-column-start: 1; 2178 grid-column-end: 9; 2179 } 2180 } 2181 2182 2183 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 2184 2185 .ptb-news__read-news .news-content * { 2186 font-size: var(--font-size-xxs, 16px); 2187 } 2188 2189 2190 .ptb-news__read-news .news-content > * { 2191 grid-column-start: 1; 2192 grid-column-end: 5; 2193 } 2194 2195 2196 .ptb-news__read-news .news-content h1, 2197 .ptb-news__read-news .news-content h1 * { 2198 font-size: var(--font-size-xl) !important; 2199 line-height: var(--line-height-sm) !important; 2200 font-weight: var(--font-weight-bold) !important; 2201 font-style: var(--font-style-normal) !important; 2202 text-decoration: var(--text-decoration-none) !important; 2203 2204 } 2205 2206 .ptb-news__read-news .news-content h2, 2207 .ptb-news__read-news .news-content h2 * { 2208 font-size: var(--font-size-lg) !important; 2209 line-height: var(--line-height-sm) !important; 2210 font-weight: var(--font-weight-bold) !important; 2211 font-style: var(--font-style-normal) !important; 2212 text-decoration: var(--text-decoration-none) !important; 2213 } 2214 2215 .ptb-news__read-news .news-content h2 { 2216 margin-bottom: var(--space-md, 24px) !important; 2217 } 2218 2219 .ptb-news__read-news .news-content h3, 2220 .ptb-news__read-news .news-content h3 * { 2221 font-size: var(--font-size-md) !important; 2222 line-height: var(--line-height-sm) !important; 2223 font-weight: var(--font-weight-bold) !important; 2224 font-style: var(--font-style-normal) !important; 2225 text-decoration: var(--text-decoration-none) !important; 2226 } 2227 2228 .ptb-news__read-news .news-content h3 { 2229 margin-top: var(--space-xxs, 8px) !important; 2230 } 2231 2232 .ptb-news__read-news .news-content h4, 2233 .ptb-news__read-news .news-content h4 * { 2234 font-size: var(--font-size-sm) !important; 2235 line-height: var(--line-height-md) !important; 2236 font-weight: var(--font-weight-bold) !important; 2237 font-style: var(--font-style-normal) !important; 2238 text-decoration: var(--text-decoration-none) !important; 2239 } 2240 2241 .ptb-news__read-news .news-content h5, 2242 .ptb-news__read-news .news-content h5 * { 2243 font-size: var(--font-size-xs) !important; 2244 line-height: var(--line-height-md) !important; 2245 font-weight: var(--font-weight-bold) !important; 2246 font-style: var(--font-style-normal) !important; 2247 text-decoration: var(--text-decoration-none) !important; 2248 } 2249 2250 .ptb-news__read-news .news-content figure figcaption { 2251 flex-direction: column; 2252 gap: var(--space-xxs, 8px); 2253 } 2254 2255 .ptb-news__read-news .news-content figure figcaption, 2256 .ptb-news__read-news .news-content figure figcaption * { 2257 font-size: var(--font-size-micro, 12px); 2258 } 2259 2260 .ptb-news__read-news .news-content table { 2261 margin-top: var(--space-xxs, 8px); 2262 margin-bottom: var(--space-lg, 32px); 2263 } 2264 2265 .ptb-news__read-news .news-content table * { 2266 font-size: var(--font-size-micro, 12px); 2267 line-height: 19.2%; 2268 } 2269 2270 .ptb-news__read-news .news-content table tbody * { 2271 height: 43px; 2272 padding: var(--space-xs, 12px); 2273 } 2274 2275 .ptb-news__read-news .news-content .audio-template { 2276 margin-top: var(--space-xxs, 8px); 2277 margin-bottom: var(--space-lg, 32px); 2278 } 2279 } 2280 2281 @media screen and (max-width: 500px) { 2282 .ptb-news__read-news .news-content .audio-template .audio-sondwave .audio-sondwave-desktop { 2283 display: none; 2284 } 2285 2286 .ptb-news__read-news .news-content .audio-template .audio-sondwave .audio-sondwave-mobile { 2287 display: block; 2288 } 2289 } 2290 </style> 2291 2292 <script> 2293 <#assign configureLinkTab = "configureLinkTab_" + randomNumber(5)> 2294 2295 function ${configureLinkTab}() { 2296 const root = document.querySelector(".ptb-news__read-news"); 2297 const newsContentElement = root.querySelector(".news-content"); 2298 const pList = newsContentElement.querySelectorAll("p"); 2299 pList.forEach((pElement) => { 2300 const cont = pElement.innerHTML.trim(); 2301 if (cont == "" || cont == " ") { 2302 newsContentElement.removeChild(pElement); 2303 } 2304 }); 2305 } 2306 2307 ${configureLinkTab}(); 2308 2309 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Infográfico" > 2310 2311 function resizeMediaInfographic() { 2312 if (window.innerWidth > 1024) { 2313 const contents = document.querySelectorAll(".ptb-news__read-news .news-content p"); 2314 contents.forEach((content) => { 2315 content.querySelector("img") && (content.style.gridColumn = "2 / 12"); 2316 }); 2317 } 2318 else { 2319 const contents = document.querySelectorAll(".ptb-news__read-news .news-content p"); 2320 contents.forEach((content) => { 2321 content.querySelector("img") && (content.style.gridColumn = ""); 2322 }); 2323 2324 } 2325 } 2326 resizeMediaInfographic(); 2327 </#if> 2328 2329 2330 2331 document.addEventListener("DOMContentLoaded", () => { 2332 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"); 2333 2334 headers.forEach((header) => { 2335 2336 const currentLevel = parseInt(header.tagName.charAt(1)); 2337 2338 if (currentLevel >= 1 && currentLevel <= 5) { 2339 2340 const newLevel = currentLevel + 1; 2341 const newTagName = "h" + newLevel; 2342 2343 // Criar a nova tag e transferir o conteúdo 2344 const newHeader = document.createElement(newTagName); 2345 newHeader.innerHTML = header.innerHTML; 2346 2347 // Substituir a tag antiga pela nova 2348 header.parentNode.replaceChild(newHeader, header); 2349 } 2350 }); 2351 2352 <#assign typeOfNews = getFirstCategoryOfVocabulary(assetEntry, typeOfNewsVocabulary) /> 2353 2354 <#if typeOfNews?? && typeOfNews?has_content && typeOfNews == "Infográfico" > 2355 resizeMediaInfographic(); 2356 window.addEventListener("resize", resizeMediaInfographic); 2357 </#if> 2358 }); 2359 2360 AUI().ready(()=>{ 2361 const audiosContainer = document.querySelectorAll(".ptb-news__read-news .news-content .audio-content"); 2362 const audioTemplate = document.querySelector(".ptb-news__read-news .news-content .audio-template"); 2363 2364 audiosContainer.forEach((audioContainer)=>{ 2365 2366 const audio = audioContainer.querySelector("audio"); 2367 const audioInterface = audioTemplate.cloneNode(true); 2368 2369 const sondwave = audioInterface.querySelector(".audio-sondwave"); 2370 const linesDesktop = audioInterface.querySelectorAll(".audio-sondwave .audio-sondwave-desktop line"); 2371 const linesMobile = audioInterface.querySelectorAll(".audio-sondwave .audio-sondwave-mobile line"); 2372 2373 const playPauseButtonAudioInterface = audioInterface.querySelector(".audio-button-play"); 2374 2375 playPauseButtonAudioInterface.addEventListener("click", ()=>{ 2376 if(audioInterface.classList.contains("audio-play")) { 2377 audioInterface.classList.replace("audio-play", "audio-pause"); 2378 audio.pause(); 2379 } 2380 else { 2381 2382 audiosContainer.forEach((audioContainer)=>{ 2383 const otherAudio = audioContainer.querySelector("audio"); 2384 const otherAudioInterface = audioContainer.querySelector(".audio-button-play"); 2385 !otherAudio.paused && otherAudioInterface.click(); 2386 }); 2387 2388 audioInterface.classList.replace("audio-pause", "audio-play"); 2389 audio.play(); 2390 } 2391 }); 2392 2393 const audioMuteButton = audioInterface.querySelector(".audio-button-mute"); 2394 2395 audioMuteButton.addEventListener("click", ()=>{ 2396 if(audioInterface.classList.contains("audio-unmuted")) { 2397 audioInterface.classList.replace("audio-unmuted", "audio-muted"); 2398 audio.muted = true; 2399 } 2400 else { 2401 audioInterface.classList.replace("audio-muted", "audio-unmuted"); 2402 audio.muted = false; 2403 } 2404 }); 2405 2406 const audioTime = audioInterface.querySelector(".audio-time"); 2407 audioTime.textContent = Math.floor(audio.duration / 60) + ":" + Math.floor(audio.duration % 60); 2408 2409 2410 audio.addEventListener("timeupdate", ()=>{ 2411 let minutes = Math.floor((audio.duration - audio.currentTime) / 60); 2412 let seconds = Math.floor((audio.duration - audio.currentTime) % 60); 2413 2414 minutes = minutes < 10? "0" + minutes : minutes; 2415 seconds = seconds < 10? "0" + seconds : seconds; 2416 2417 audioTime.textContent = minutes + ":" + seconds; 2418 2419 const progress = (audio.currentTime / audio.duration) * 100; 2420 2421 linesDesktop.forEach(function(line, index) { 2422 const lineProgress = (index / linesDesktop.length) * 100; 2423 if (progress >= lineProgress) { 2424 !line.classList.contains("line-active") && line.classList.add("line-active"); 2425 } else { 2426 line.classList.contains("line-active") && line.classList.remove("line-active"); 2427 } 2428 }); 2429 2430 linesMobile.forEach(function(line, index) { 2431 const lineProgress = (index / linesMobile.length) * 100; 2432 if (progress >= lineProgress) { 2433 !line.classList.contains("line-active") && line.classList.add("line-active"); 2434 } else { 2435 line.classList.contains("line-active") && line.classList.remove("line-active"); 2436 } 2437 }); 2438 }); 2439 2440 2441 sondwave.addEventListener("click", (event)=>{ 2442 const distanceLeft = (event.clientX - sondwave.getBoundingClientRect().left)/sondwave.offsetWidth; 2443 audio.currentTime = audio.duration * distanceLeft; 2444 }); 2445 2446 audioInterface.style.display = ""; 2447 audioContainer.appendChild(audioInterface); 2448 }); 2449 2450 }); 2451 </script> 2452</#macro> 2453 2454<#macro renderShareAndCopyNews> 2455 <#-- <div class="share_news_container">--> 2456 <div class="social-media-container"> 2457 2458 <#assign emailMsg = "Veja o conteúdo do post no link "> 2459 <#if locale == "en_US"> 2460 <#assign emailMsg = "See the content of the post in the link "> 2461 </#if> 2462 <a class="social-media-share" href="mailto:?subject=${newsInfo.mainHeadlineOfTheNews}&body=${emailMsg}${newsInfo.url}" 2463 target="_blank"> 2464 <svg class="email" width="37" height="36" viewBox="0 0 37 36" fill="none" 2465 xmlns="http://www.w3.org/2000/svg"> 2466 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 2467 <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" 2468 fill="#008542"/> 2469 </svg> 2470 <span >send e-mail</span> 2471 </a> 2472 2473 <a class="social-media-share" href="https://www.facebook.com/sharer/sharer.php?u=${newsInfo.url}" target="_blank"> 2474 <svg class="facebook" width="37" height="36" viewBox="0 0 37 36" fill="none" 2475 xmlns="http://www.w3.org/2000/svg"> 2476 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 2477 <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" 2478 fill="#008542"/> 2479 </svg> 2480 <span >Facebook</span> 2481 </a> 2482 2483 <#assign mobileShareButtonId = "mobile-share-" + randomNumber(5)> 2484 <div class="mobile-share" id="${mobileShareButtonId}"> 2485 <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg"> 2486 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 2487 <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" 2488 fill="#008542" stroke="#008542" stroke-linecap="round" stroke-linejoin="round"/> 2489 <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" 2490 fill="#008542" stroke="#008542" stroke-linecap="round" stroke-linejoin="round"/> 2491 <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" 2492 fill="#008542" stroke="#008542" stroke-linecap="round" stroke-linejoin="round"/> 2493 <path d="M20.2546 14.0784L15.9036 16.8879" stroke="#008542" stroke-linecap="round" 2494 stroke-linejoin="round"/> 2495 <path d="M15.9036 19.4871L20.2546 22.2966" stroke="#008542" stroke-linecap="round" 2496 stroke-linejoin="round"/> 2497 </svg> 2498 </div> 2499 2500 <a class="social-media-share" href="https://twitter.com/intent/tweet?url=${newsInfo.url}" target="_blank" data-size="large"> 2501 <svg class="twitter" width="37" height="36" viewBox="0 0 37 36" fill="none" 2502 xmlns="http://www.w3.org/2000/svg"> 2503 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 2504 <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"/> 2505 </svg> 2506 <span >twitter</span> 2507 </a> 2508 2509 <a class="social-media-share" href="https://api.whatsapp.com/send?text=${newsInfo.url}" data-action="share/whatsapp/share" 2510 target="_blank"> 2511 <svg class="whatsapp" width="37" height="36" viewBox="0 0 37 36" fill="none" 2512 xmlns="http://www.w3.org/2000/svg"> 2513 <circle cx="18.5" cy="18" r="17.5" fill="white" stroke="#E1E1E1"/> 2514 <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" 2515 fill="#008542"/> 2516 <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" 2517 fill="white"/> 2518 </svg> 2519 <span >Share to WhatsApp </span> 2520 </a> 2521 2522 <div class="copy-text-container"> 2523 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 2524 <path d="M10.5 10.5H13.5V2.5H5.5V5.5" stroke="#008542" stroke-linecap="round" 2525 stroke-linejoin="round"/> 2526 <path d="M10.5 5.5H2.5V13.5H10.5V5.5Z" stroke="#008542" stroke-linecap="round" 2527 stroke-linejoin="round"/> 2528 </svg> 2529 2530 <#if locale == "pt_BR"> 2531 <p class="text">Copiar texto <span class="copy-text-title-news"> ${newsInfo.mainHeadlineOfTheNews} </span> </p> 2532 <#else > 2533 <p class="text">Copy text <span class="copy-text-title-news"> ${newsInfo.mainHeadlineOfTheNews} </span> </p> 2534 </#if> 2535 </div> 2536 2537 </div> 2538 2539 <#if locale == "pt_BR"> 2540 <span class="copy-message">Texto copiado!</span> 2541 <#else > 2542 <span class="copy-message">Text copied!</span> 2543 </#if> 2544 <#-- </div>--> 2545</#macro> 2546 2547<#-- ################################################################################################################## --> 2548 2549<#-- ############# Site de Crise - Notícia - Links do conteúdo da notícia ############################################# --> 2550<#macro renderLinks newsInfo> 2551 <#if newsInfo.links?size != 0> 2552 <#--videos "escondidos" que serão unidos a .ptb-news__read-content --> 2553 2554 <div class="ptb-news__links-container d-none "> 2555 <div id="ptb-news__links-identifiers"> 2556 <#assign separator = ""> 2557 <#list newsInfo.links as link> 2558 ${link.id}; 2559 <#assign separator = ";"> 2560 </#list> 2561 </div> 2562 <#list newsInfo.links as link> 2563 <#assign link_index = link?index> 2564 <#assign linkUrl = "#"> 2565 <#assign target = "_blank"> 2566 <#assign linkClass = ""> 2567 2568 <div id="ptb-news__link-container-${link_index}"> 2569 <#if link.externalLink?has_content> 2570 <#assign linkUrl = link.externalLink> 2571 <#assign target = "_blank"> 2572 <#assign linkClass = "external-link"> 2573 <#elseif link.pageLink?has_content> 2574 <#assign linkUrl = link.pageLink> 2575 <#assign target = "_self"> 2576 <#assign linkClass = "internal-page-link"> 2577 <#elseif link.file.mimeType?has_content> 2578 <#assign linkUrl = link.file.url> 2579 <#assign target = "_blank"> 2580 <#assign linkClass = "file-link"> 2581 </#if> 2582 2583 <#-- PDF icon --> 2584 <#if link.iconType == "Opção78730408" > 2585 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 2586 xmlns="http://www.w3.org/2000/svg"> 2587 <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" 2588 fill="#008542"/> 2589 <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" 2590 fill="#008542"/> 2591 <path d="M17.2695 20.654V11.894H22.2735V13.358H18.9735V15.59H21.9015V17.054H18.9735V20.654H17.2695Z" 2592 fill="#008542"/> 2593 <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" 2594 stroke="#008542" stroke-width="1.5" stroke-linecap="round" 2595 stroke-linejoin="round"/> 2596 </svg> 2597 2598 <#-- JPG icon --> 2599 <#elseif link.iconType == "Opção89889679" > 2600 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 2601 xmlns="http://www.w3.org/2000/svg"> 2602 <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" 2603 fill="#008542"/> 2604 <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" 2605 fill="#008542"/> 2606 <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" 2607 fill="#008542"/> 2608 <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" 2609 stroke="#008542" stroke-width="1.5" stroke-linecap="round" 2610 stroke-linejoin="round"/> 2611 </svg> 2612 <#-- DOC icon --> 2613 <#elseif link.iconType == "Opção15480314" > 2614 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 2615 xmlns="http://www.w3.org/2000/svg"> 2616 <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" 2617 fill="#008542"/> 2618 <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" 2619 fill="#008542"/> 2620 <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" 2621 fill="#008542"/> 2622 <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" 2623 stroke="#008542" stroke-width="1.5" stroke-linecap="round" 2624 stroke-linejoin="round"/> 2625 </svg> 2626 <#-- External link icon --> 2627 <#elseif link.iconType == "Opção43823553" > 2628 <svg width="24" height="24" viewBox="0 0 32 32" fill="none" 2629 xmlns="http://www.w3.org/2000/svg"> 2630 <path opacity="0.98" 2631 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" 2632 stroke="#008542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 2633 </svg> 2634 <#-- Internal page link icon --> 2635 <#elseif link.iconType == "Opção64212757" > 2636 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#008542" viewBox="0 0 256 256"> 2637 <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"> 2638 </path> 2639 </svg> 2640 <#-- Download link icon --> 2641 <#elseif link.iconType == "Opção20766606" > 2642 <svg width="24" height="24" viewBox="0 0 32 32" fill="none" 2643 xmlns="http://www.w3.org/2000/svg"> 2644 <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" 2645 stroke="#008542" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 2646 </svg> 2647 </#if> 2648<#if link.title?? && link.title?has_content> 2649 <a href="${linkUrl}" class="link ${linkClass}" target="${target}">${link.title}</a> 2650 </#if> 2651 </div> 2652 </#list> 2653 </div> 2654 2655 <script> 2656 var newsContent_code = document.querySelector(".news-content").innerHTML; 2657 2658 var linksIdentifiers = document.querySelector("#ptb-news__links-identifiers").innerHTML.trim().split(";"); 2659 linksIdentifiers.forEach((linkIdentifier, index) => { 2660 const linkIdentifierContent = document.querySelector("#ptb-news__link-container-" + index); 2661 if (linkIdentifierContent) { 2662 const tag = "#[" + linkIdentifier.trim() + "]"; 2663 const splitContent = newsContent_code.split(tag); 2664 newsContent_code = splitContent.join(linkIdentifierContent.innerHTML); 2665 //linkIdentifierContent.parentNode.removeChild(linkIdentifierContent); 2666 } 2667 }); 2668 2669 2670 var ptb_news__read_content = document.querySelector(".news-content"); 2671 ptb_news__read_content.innerHTML = newsContent_code; 2672 2673 const links_ptb_news = document.querySelectorAll(".news-content a"); 2674 links_ptb_news.forEach((link) => { 2675 link.classList.add("link-ptb-news"); 2676 }); 2677 2678 </script> 2679 2680 <style> 2681 .ptb-news__read-news .ptb-news__link a { 2682 font-family: var(--font-family-base); 2683 font-style: var(--font-style-normal, normal); 2684 font-weight: var(--font-weight-bold, 700); 2685 font-size: var(--font-size-xxs, 16px); 2686 line-height: var(--line-height-xl, 160%); 2687 text-decoration-line: var(--text-decoration-underline, underline); 2688 color: #008542; 2689 } 2690 2691 body.high-contrast-active .ptb-news__read-news .ptb-news__link a { 2692 color: #E4F7E8; 2693 } 2694 2695 .ptb-news__read-news .news-content .link { 2696 font-family: var(--font-family-base); 2697 font-style: var(--font-style-normal, normal); 2698 font-weight: var(--font-weight-bold, 700); 2699 font-size: var(--font-size-xs, 18px); 2700 line-height: var(--line-height-xl, 160%); 2701 2702 text-decoration-line: var(--text-decoration-underline, underline); 2703 color: #008542; 2704 } 2705 2706 body.high-contrast-active .ptb-news__read-news .news-content .link { 2707 color: #E4F7E8; 2708 } 2709 2710 body.high-contrast-active .ptb-news__read-news .news-content svg path { 2711 stroke: var(--color-neutral-500, #D7D7D7); 2712 fill: rgba(255, 255, 255, 0.32); 2713 } 2714 2715 .ptb-news__read-news .news-content .ptb-link__wrapper { 2716 display: flex; 2717 flex-direction: column; 2718 gap: 0; 2719 margin-top: -24px; 2720 } 2721 2722 .ptb-news__read-news .news-content .ptb-link__wrapper svg { 2723 margin-right: var(--space-sm, 16px); 2724 } 2725 2726 .ptb-news__read-news .news-content .ptb-link__wrapper .first { 2727 gap: 0 !important; 2728 } 2729 2730 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 2731 .ptb-news__read-news .news-content .link { 2732 font-size: var(--font-size-xxs, 16px); 2733 } 2734 } 2735 </style> 2736 </#if> 2737</#macro> 2738 2739<#-- ################################################################################################################## --> 2740 2741<#-- ################################################################################################################## --> 2742 2743<#-- ############# Site de Crise - Notícia - Links do conteúdo da notícia ############################################# --> 2744<#macro renderCite> 2745 <div class="ptb-news__cite-container"> 2746 <div class="ptb-news__cite-container-breakpoint breakpoint"> 2747 <div class="ptb-news__cite-container-col col-1-12 md-col-1-8 sm-col-1-4"> 2748 <div class="ptb-news__cite-title"> 2749 <#if locale?lower_case == "pt_br"> 2750 Notas 2751 <#else> 2752 Notes 2753 </#if> 2754 </div> 2755 2756 <div class="ptb-news__cites-elements"> 2757 </div> 2758 </div> 2759 </div> 2760 </div> 2761 2762 <script> 2763 function positionCitesText(parentNodeCitesText) { 2764 2765 parentNodeCitesText.forEach((parentNodeCiteText)=>{ 2766 if(window.innerWidth > 1024) { 2767 parentNodeCiteText.style.display=""; 2768 parentNodeCiteText.style.gridColumnStart = "11"; 2769 parentNodeCiteText.style.gridColumnEnd = "13"; 2770 } 2771 else { 2772 parentNodeCiteText.style.display="none"; 2773 parentNodeCiteText.style.gridColumnStart = ""; 2774 parentNodeCiteText.style.gridColumnEnd = ""; 2775 } 2776 }); 2777 } 2778 2779 function addCitesTextMobile(citesText) { 2780 const citesContainer = document.querySelector(".ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cites-elements"); 2781 2782 if(citesContainer.children.length === 0) { 2783 citesContainer && citesText.forEach((citeText)=>{ 2784 citesContainer.appendChild(citeText.cloneNode(true)); 2785 }); 2786 } 2787 } 2788 2789 const citesText = document.querySelectorAll(".news-content cite"); 2790 2791 if (citesText.length > 0) { 2792 const parentNodeCitesText = [...citesText].map((citeText)=>citeText.parentNode); 2793 positionCitesText(parentNodeCitesText); 2794 addCitesTextMobile(citesText); 2795 } 2796 else { 2797 const citesContainer = document.querySelector(".ptb-news__cite-container"); 2798 citesContainer && (citesContainer.style.display="none"); 2799 } 2800 2801 document.addEventListener('DOMContentLoaded', ()=>{ 2802 2803 const citesText = document.querySelectorAll(".news-content cite"); 2804 2805 if (citesText.length > 0) { 2806 const parentNodeCitesText = [...citesText].map((citeText)=>citeText.parentNode); 2807 2808 positionCitesText(parentNodeCitesText); 2809 addCitesTextMobile(citesText); 2810 2811 window.addEventListener('resize', ()=>{positionCitesText(parentNodeCitesText)}); 2812 } 2813 else { 2814 const citesContainer = document.querySelector(".ptb-news__cite-container"); 2815 citesContainer && (citesContainer.style.display="none"); 2816 } 2817 }); 2818 2819 </script> 2820 2821 <style> 2822 2823 .ptb-news__read-news-post cite { 2824 color: var(--color-neutral-800, #373737); 2825 font-family: var(--font-family-base); 2826 font-size: var(--font-size-xxxs, 14px) !important; 2827 font-style: var(--font-style-normal, normal); 2828 font-weight: var(--font-weight-regular, 400); 2829 line-height: var(--line-height-xl, 160%); 2830 } 2831 2832 .ptb-news__read-news-post cite a{ 2833 font-size: var(--font-size-xxxs, 14px) !important; 2834 } 2835 2836 body.high-contrast-active .ptb-news__read-news-post cite { 2837 color: var(--text-primary-default, var(--color-neutral-100)); 2838 } 2839 2840 .ptb-news__read-news-post .news-content cite, 2841 .ptb-news__read-news-post .ptb-news__cite-container cite { 2842 display: block; 2843 padding-left: var(--space-md); 2844 border-left: var(--border-width-hairline, 1px) solid var(--color-neutral-500, #D7D7D7); 2845 } 2846 2847 @media screen and (min-width: 1025px) { 2848 .ptb-news__read-news-post .ptb-news__cite-container { 2849 display: none; 2850 } 2851 } 2852 2853 @media screen and (max-width: 1025px) { 2854 .ptb-news__read-news .ptb-news__cite-container .link { 2855 text-decoration-line: var(--text-decoration-underline, underline); 2856 color: #008542; 2857 } 2858 2859 body.high-contrast-active .ptb-news__read-news .ptb-news__cite-container .link { 2860 color: #E4F7E8; 2861 } 2862 2863 body.high-contrast-active .ptb-news__read-news .ptb-news__cite-container svg path { 2864 stroke: var(--color-neutral-500, #D7D7D7); 2865 fill: rgba(255, 255, 255, 0.32); 2866 } 2867 2868 .ptb-news__read-news-post .ptb-news__cite-container { 2869 display: grid; 2870 background: var(--background-surface-level-03, #EEE); 2871 } 2872 2873 body.high-contrast-active .ptb-news__read-news-post .ptb-news__cite-container { 2874 background: var(--background-surface-level-03, #525252); 2875 } 2876 2877 .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col { 2878 padding: var(--space-xxl) 0; 2879 display: flex; 2880 flex-direction: column; 2881 gap: var(--space-lg, 32px); 2882 } 2883 2884 .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cites-elements { 2885 display: flex; 2886 flex-direction: column; 2887 gap: var(--space-lg, 32px); 2888 } 2889 2890 .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cite-title { 2891 color: var(--color-neutral-800, #373737); 2892 font-size: var(--font-size-sm, 20px); 2893 font-style: var(--font-style-normal, normal); 2894 font-weight: var(--font-weight-bold, 700); 2895 line-height: var(--line-height-xl, 160%); 2896 } 2897 2898 body.high-contrast-active .ptb-news__read-news-post .ptb-news__cite-container .ptb-news__cite-container-col .ptb-news__cite-title { 2899 color: var(--text-primary-default, var(--color-neutral-100)); 2900 } 2901 } 2902 </style> 2903 2904</#macro> 2905 2906<#-- ################################################################################################################## --> 2907 2908 2909<#-- ############# Site de Crise - Notícia - Galeria de imagens ####################################################### --> 2910<#macro renderGallery newsInfo> 2911 <#if newsInfo.galleryItems?size == 0> 2912 <#return /> 2913 </#if> 2914 2915 <div class="gallery-breakpoint breakpoint"> 2916 <div class="gallery col-3-11 md-col-1-8 sm-col-1-4"> 2917 2918 <div class="title-container"> 2919 <svg class="icon" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg"> 2920 <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" 2921 stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 2922 <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" 2923 stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 2924 </svg> 2925 <p class="title"> 2926 <#if locale == "pt_BR"> Galeria de Imagens <#else > Image gallery </#if> 2927 </p> 2928 </div> 2929 2930 <div class="image-container"> 2931 <#list newsInfo.galleryItems as gItem> 2932 <div class="modal-image-fragment"> 2933 <div class="modal-image-container"> 2934 <span class="click-image" ></span> 2935 2936 <div class="image-player-container"> 2937 <span class="close-image"> 2938 <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"> 2939 <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"/> 2940 <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"/> 2941 </svg> 2942 </span> 2943 <div class="image-player-session"> 2944 <#-- Midias adaptativas de imagem para desktop e mobile --> 2945 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${gItem.image.fileEntryId}") /> 2946 <#assign urlAdaptativeMediaMobile = gItem.image.url/> 2947 <#assign urlAdaptativeMediaDesktop = gItem.image.url/> 2948 2949 <#if fileDataRequest?? && fileDataRequest.adaptedImages?? > 2950 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 2951 <#list dataAdaptativeMedia as data> 2952 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 2953 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 2954 </#if> 2955 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 2956 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 2957 </#if> 2958 </#list> 2959 </#if> 2960 2961 <picture > 2962 <source media="(max-width:767px)" srcset="${urlAdaptativeMediaMobile}"> 2963 <img width="274px" height="152px" loading="lazy" src="${urlAdaptativeMediaDesktop}" alt="${gItem.image.alt}"/> 2964 </picture> 2965 </div> 2966 </div> 2967 </div> 2968 </div> 2969 2970 </#list> 2971 </div> 2972 </div> 2973 </div> 2974 2975 <style> 2976 2977 .ptb-news__read-news .gallery { 2978 padding-top: 42px; 2979 } 2980 2981 .ptb-news__read-news .gallery * { 2982 margin: 0; 2983 padding: 0; 2984 } 2985 2986 .ptb-news__read-news .gallery { 2987 display: flex; 2988 gap: var(--space-xl, 40px); 2989 flex-direction: column; 2990 } 2991 2992 .ptb-news__read-news .gallery .title-container { 2993 display: flex; 2994 align-items: center; 2995 gap: var(--space-sm, 16px); 2996 } 2997 2998 .ptb-news__read-news .gallery .title-container svg { 2999 width: var(--size-md, 24px); 3000 height: 21px; 3001 } 3002 3003 .ptb-news__read-news .gallery .title-container .title { 3004 color: var(--color-neutral-800, #373737); 3005 font-family: var(--font-family-base); 3006 font-size: var(--font-size-lg); 3007 font-style: var(--font-style-normal); 3008 font-weight: var(--font-weight-bold); 3009 line-height: var(--line-height-md); 3010 } 3011 3012 body.high-contrast-active .ptb-news__read-news .gallery .title-container .title { 3013 color: var(--color-neutral-100); 3014 } 3015 3016 .ptb-news__read-news .gallery .image-container { 3017 display: flex; 3018 gap: var(--space-sm, 16px); 3019 flex-wrap: wrap; 3020 } 3021 3022 .ptb-news__read-news .gallery .image-container .modal-image-fragment { 3023 width: inherit; 3024 height: inherit; 3025 max-height: calc(100vw/2); 3026 padding: 0; 3027 margin: 0; 3028 overflow: hidden; 3029 } 3030 3031 .ptb-news__read-news .gallery .image-container .modal-image-fragment * { 3032 box-sizing: border-box; 3033 margin: 0; 3034 padding: 0; 3035 } 3036 3037 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container { 3038 width: 100%; 3039 height: inherit; 3040 display: flex; 3041 justify-content: center; 3042 align-items: center; 3043 cursor: pointer; 3044 position: relative; 3045 } 3046 3047 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container.image-playing { 3048 position: fixed; 3049 top: 0; 3050 left: 0; 3051 width: 100vw !important; 3052 height: 100vh !important; 3053 z-index: 9999 !important; 3054 background-color: rgba(0, 0, 0, 0.75); 3055 max-height: 100vh; 3056 } 3057 3058 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .click-image { 3059 height: 100%; 3060 width: 100%; 3061 position: absolute; 3062 z-index: 3; 3063 } 3064 3065 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container { 3066 width: 100%; 3067 height: 100%; 3068 } 3069 3070 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing { 3071 position: relative; 3072 width: 90vw !important; 3073 height: 80vh !important; 3074 z-index: 9999 !important; 3075 background-color: rgba(0, 0, 0, 0.75); 3076 border-radius: var(--border-radius-card); 3077 } 3078 3079 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .close-image { 3080 display: none; 3081 position: absolute; 3082 top: 0; 3083 right: 0; 3084 transform: translate(100%, -100%); 3085 z-index: 99999; 3086 } 3087 3088 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) { 3089 fill: var(--background-Surface-level-01, #010101); 3090 } 3091 3092 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) { 3093 stroke: #E4F7E8; 3094 } 3095 3096 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .close-image.image-active { 3097 display: block; 3098 } 3099 3100 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .image-player-session { 3101 width: 100%; 3102 height: 100%; 3103 } 3104 3105 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing .image-player-session { 3106 width: 90vw !important; 3107 height: 80vh !important; 3108 z-index: 9999 !important; 3109 background-color: rgba(0, 0, 0, 0.75); 3110 border-radius: var(--border-radius-card); 3111 overflow: hidden; 3112 } 3113 3114 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container .image-player-session img { 3115 object-fit: cover; 3116 } 3117 3118 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing .image-player-session img { 3119 width: 100%; 3120 height: 100%; 3121 margin-left: 0 !important; 3122 max-height: 100vh; 3123 } 3124 3125 .ptb-news__read-news .gallery .image-container img { 3126 width: 274px; 3127 height: 152px; 3128 border-radius: var(--border-radius-md, 8px); 3129 cursor: pointer; 3130 } 3131 3132 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 3133 3134 .ptb-news__read-news .gallery { 3135 padding-top: var(--space-xl, 40px); 3136 } 3137 3138 .ptb-news__read-news .gallery .image-container { 3139 gap: var(--space-xxs, 8px); 3140 } 3141 3142 .ptb-news__read-news .gallery .image-container img { 3143 width: 296px; 3144 height: 180px; 3145 } 3146 3147 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container.image-playing .image-player-container.image-playing { 3148 transform: rotate(90deg); 3149 transform-origin: center; 3150 width: 80vh !important; 3151 height: 90vw !important; 3152 } 3153 3154 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container.image-playing .image-player-container.image-playing img{ 3155 cursor: pointer; 3156 } 3157 3158 .ptb-news__read-news .gallery .image-container .modal-image-fragment .modal-image-container .image-player-container.image-playing .image-player-session { 3159 width: 80vh !important; 3160 height: 90vw !important; 3161 } 3162 } 3163 3164 </style> 3165 3166 <script> 3167 const allModalImagesFragment = document.querySelectorAll(".ptb-news__read-news .gallery .modal-image-fragment"); 3168 allModalImagesFragment.forEach((modalImageFragment)=>{ 3169 const getImageClick = modalImageFragment.querySelector('.click-image'); 3170 const imageContainer = modalImageFragment.querySelector('.modal-image-container'); 3171 const imagePlayerContainer = modalImageFragment.querySelector('.image-player-container'); 3172 3173 const image = imagePlayerContainer.querySelector('img'); 3174 const closeImage = imagePlayerContainer.querySelector('.close-image'); 3175 const body = document.body; 3176 3177 const toTopButton = document.querySelector(".fragment_88038 .petro-button"); 3178 3179 const stopImage= () => { 3180 getImageClick.classList.toggle('image-playing'); 3181 imagePlayerContainer.classList.toggle('image-playing'); 3182 imageContainer.classList.toggle('image-playing'); 3183 closeImage.classList.toggle('image-active'); 3184 body.style.overflow = 'initial'; 3185 } 3186 3187 const playImage = () => { 3188 getImageClick.classList.toggle('image-playing'); 3189 imagePlayerContainer.classList.toggle('image-playing'); 3190 imageContainer.classList.toggle('image-playing'); 3191 closeImage.classList.toggle('image-active') 3192 3193 body.style.overflow = 'hidden'; 3194 } 3195 3196 getImageClick.addEventListener('click', () => { 3197 if (document.body.classList.contains('has-edit-mode-menu')) { 3198 return; 3199 } 3200 if (imagePlayerContainer.classList.contains('image-playing')) { 3201 toTopButton && (toTopButton.style.zIndex = ""); 3202 stopImage(); 3203 } else { 3204 playImage(); 3205 toTopButton && (toTopButton.style.zIndex = "1"); 3206 } 3207 }) 3208 3209 closeImage.addEventListener('click', () => { 3210 if (imagePlayerContainer.classList.contains('image-playing')) { 3211 toTopButton && (toTopButton.style.zIndex = ""); 3212 stopImage(); 3213 } 3214 }) 3215 }); 3216 </script> 3217 3218</#macro> 3219 3220 3221<#-- ################################################################################################################## --> 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 <#-- ############# Site de Crise - Notícia - Galeria de imagens ####################################################### --> 3236<#macro renderQuotes newsInfo> 3237 <#if newsInfo.quotes?size != 0> 3238 <#--quotes "escondidas" que serão unidas a .ptb-news__read-content --> 3239 3240 <div class="ptb-news__quotes-container d-none "> 3241 <div id="ptb-news__quotes-identifiers"> 3242 <#assign separator = ""> 3243 <#list newsInfo.quotes as quote> 3244 ${quote.id}; 3245 <#assign separator = ";"> 3246 </#list> 3247 </div> 3248 <#list newsInfo.quotes as quote> 3249 <#assign quotes_index = quote?index> 3250 <div id="ptb-news__quotes-container-${quote_index}"> 3251 <#assign noAuthorWrapper = !((quote.image.url?? && quote.image.url?has_content) || (quote.author?has_content)) /> 3252 <div class="quote <#if noAuthorWrapper>no-author-wrapper</#if>"> 3253 <div class="text-wrapper"> 3254 <blockquote class="text">${quote.content}</blockquote > 3255 </div> 3256 <#if !noAuthorWrapper> 3257 <div class="author-wrapper"> 3258 <#if quote.image.url?? && quote.image.url?has_content> 3259 <#assign imageUrl = "/o/adaptive-media/image/" + quote.image.fileEntryId +"/Thumbnail-300x300/image"/> 3260 <img src="${imageUrl}" loading="lazy" alt="${quote.image.alt}"> 3261 </#if> 3262 <#if quote.author?? && quote?has_content> 3263 <p class="author">${quote.author}</p> 3264 </#if> 3265 </div> 3266 </#if> 3267 </div> 3268 </div> 3269 </#list> 3270 </div> 3271 3272 <script> 3273 var newsContent_code = document.querySelector(".news-content").innerHTML; 3274 3275 var quotesIdentifiers = document.querySelector("#ptb-news__quotes-identifiers").innerHTML.trim().split(";"); 3276 quotesIdentifiers.forEach((quoteIdentifier, index) => { 3277 const quoteIdentifierContent = document.querySelector("#ptb-news__quotes-container-" + index); 3278 if (quoteIdentifierContent) { 3279 const tag = "#[" + quoteIdentifier.trim() + "]"; 3280 const splitContent = newsContent_code.split(tag); 3281 newsContent_code = splitContent.join(quoteIdentifierContent.innerHTML); 3282 //linkIdentifierContent.parentNode.removeChild(linkIdentifierContent); 3283 } 3284 }); 3285 3286 3287 var ptb_news__read_content = document.querySelector(".news-content"); 3288 ptb_news__read_content.innerHTML = newsContent_code; 3289 3290 </script> 3291 3292 <style> 3293 3294 .ptb-news__read-news .quote { 3295 display: flex; 3296 flex-direction: column; 3297 gap: var(--space-md, 24px); 3298 } 3299 3300 .ptb-news__read-news .quote.no-author-wrapper{ 3301 gap: 0; 3302 } 3303 3304 .ptb-news__read-news .quote .text-wrapper { 3305 padding-left: var(--space-xl, 40px); 3306 } 3307 3308 .ptb-news__read-news .quote .text-wrapper .text { 3309 font-style: var(--font-style-italic) !important; 3310 padding-left: var(--space-md, 24px); 3311 margin-bottom: 0; 3312 border-left: 1px solid var(--border-color-mid, #d7d7d7); 3313 font-size: var(--font-size-xxs, 16px); 3314 } 3315 3316 .ptb-news__read-news .quote .author-wrapper { 3317 display: flex; 3318 flex-direction: row; 3319 gap: var(--space-md, 24px); 3320 } 3321 3322 .ptb-news__read-news .news-content .quote .author-wrapper img { 3323 height: var(--size-xxxl, 56px); 3324 width: var(--size-xxxl, 56px); 3325 border-radius: 100px; 3326 border: var(--size-nano, 2px) solid var(--border-color-mid) !important; 3327 } 3328 3329 .ptb-news__read-news .news-content .quote .author-wrapper p { 3330 margin: 0; 3331 align-self: center; 3332 font-size: var(--font-size-xs, 18px); 3333 font-style: var(--font-style-normal, normal); 3334 font-weight: var(--font-weight-bold, 700); 3335 line-height: var(--line-height-xs, 100%); 3336 } 3337 3338 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 3339 .ptb-news__read-news .quote .text-wrapper { 3340 padding-left: 0; 3341 } 3342 3343 .ptb-news__read-news .quote .text-wrapper .text { 3344 font-size: var(--font-size-xxxs, 14px); 3345 } 3346 3347 .ptb-news__read-news .news-content .quote .author-wrapper p { 3348 font-size: var(--font-size-xxs, 16px); 3349 } 3350 } 3351 </style> 3352 </#if> 3353</#macro> 3354 3355 3356 3357 3358<#-- ################################################################################################################## --> 3359 3360 3361 3362 3363 3364 3365 3366 3367<#-- ############# Site de Crise - Notícia - Extrair dados de Notícias ################################################ --> 3368<#-- 3369Add elements from the sidebar to define your template. Type "${" to use the 3370autocomplete feature. 3371--> 3372<#function extractFeaturedNewsHeadline fieldList xmlArticle> 3373 <#return getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia")> 3374</#function> 3375 3376<#function extractNewsSummary fieldList xmlArticle> 3377 <#return getFieldValue(fieldList, xmlArticle, "Resumo da notícia")> 3378</#function> 3379 3380<#function extractPublishDate journalArticle> 3381 <#assign lastPublishDate = journalArticle.getModifiedDate()> 3382 <#if journalArticle.getLastPublishDate()??> 3383 <#assign lastPublishDate = journalArticle.getLastPublishDate()> 3384 <#else> 3385 <#assign lastPublishDate = journalArticle.getModifiedDate()> 3386 </#if> 3387 <#return lastPublishDate /> 3388</#function> 3389 3390 3391 3392<#-- Seção da imagem de destaque ----------------------------------------------------------------------> 3393<#function extractNewsMedia fieldList xmlArticle fileEntryService> 3394 <#-- Tentando pegar Imagem --> 3395 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) /> 3396 <#assign media = {} /> 3397 <#list mediasGroup as mediaGroup > 3398 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) /> 3399 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "fileEntryId" : media.fileEntryId} /> 3400 3401 <#-- Se não tiver imagem, tentar pegar vídeo --> 3402 <#if !media.imageSrc?has_content> 3403 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") /> 3404 <#if youtubeID?? && youtubeID?has_content> 3405 <#assign media = {"videoYotubeID": youtubeID} /> 3406 <#else> 3407 <#-- Tentar pegar vídeo Interno --> 3408 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) /> 3409 <#if internalVideo?? && internalVideo?has_content> 3410 <#assign media = {"internalVideo": internalVideo} /> 3411 </#if> 3412 </#if> 3413 </#if> 3414 3415 <#assign referenceMediasGroup = getNodes(getIdFromFieldName(fieldList, "Referências"), mediaGroup) /> 3416 <#list referenceMediasGroup as referenciaMediaGroup > 3417 <#assign credits = getFieldValue(fieldList, referenceMediasGroup, "Crédito da mídia de destaque da notícia") /> 3418 <#assign legend = getFieldValue(fieldList, referenceMediasGroup, "Legenda da mídia de destaque da notícia") /> 3419 </#list> 3420 3421 <#assign media = media + {"credits": credits, "legend": legend} /> 3422 3423 </#list> 3424 3425 <#return media> 3426</#function> 3427 3428 3429<#--------------------- Renderização de Lista de Cards -----------------------------------------------> 3430 3431<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS --> 3432<#assign rootCss = "card-news-list-container_" + randomNumber(4586) /> 3433 3434<#attempt> 3435 <#assign ourEnergyStyles = [] /> 3436 <#list ourEnergyVocabulary.getCategories() as ourEnergyCategory > 3437 <#assign shadowColorCategory = "" /> 3438 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra")??)> 3439 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra") /> 3440 <#assign shadowColorCategory = categoryShadowColorByService.value /> 3441 </#if> 3442 3443 <#assign backgroundColorCategory = "" /> 3444 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo")??)> 3445 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo") /> 3446 <#assign backgroundColorCategory = categoryBackgroundColorByService.value /> 3447 </#if> 3448 3449 <#assign textColorCategory = "" /> 3450 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto")??)> 3451 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto") /> 3452 <#assign textColorCategory = categoryTextColorByService.value /> 3453 </#if> 3454 3455 <#assign textColorHighContrastCategory = "" /> 3456 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste")??)> 3457 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste") /> 3458 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value /> 3459 </#if> 3460 3461 <#assign ourEnergyStyles += [{"titleLocale": ourEnergyCategory.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] /> 3462 </#list> 3463 3464 <#recover> 3465 <#assign ourEnergyStyles = [] /> 3466 3467</#attempt> 3468 3469<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article --> 3470<#function getFirstCategoryTitleLocaleOfVocabulary journalArticle vocabulary > 3471 <#attempt> 3472 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 3473 3474 <#list categories as category> 3475 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 3476 <#return category.getTitle(locale)> 3477 </#if> 3478 </#list> 3479 3480 <#return ""> 3481 3482 <#recover> 3483 <#return "" /> 3484 3485 </#attempt> 3486</#function> 3487 3488<#-- Função para obter os dados de um card no Web Content (Journal Article) --> 3489<#function getDataForCard entry > 3490 <#attempt> 3491 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) /> 3492 <#assign ddmStructure = journalArticle.getDDMStructure() /> 3493 <#assign fieldList = getFieldListByStructure(ddmStructure) /> 3494 <#assign xmlArticle = journalArticle.getDocument().getRootElement() /> 3495 3496 <#-- Tentando pegar Imagem --> 3497 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) /> 3498 <#assign media = "" /> 3499 <#list mediasGroup as mediaGroup > 3500 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) /> 3501 3502 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") /> 3503 3504 <#assign urlAdaptativeMediaDesktop = ""/> 3505 <#assign urlAdaptativeMediaMobile = ""/> 3506 <#if media.url?? && media.url?has_content && fileDataRequest?? && fileDataRequest.adaptedImages?? > 3507 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 3508 <#list dataAdaptativeMedia as data> 3509 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 3510 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 3511 </#if> 3512 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 3513 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 3514 </#if> 3515 </#list> 3516 </#if> 3517 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": {"mobile": urlAdaptativeMediaMobile, "desktop": urlAdaptativeMediaDesktop}} /> 3518 3519 <#-- Se não tiver imagem, tentar pegar vídeo --> 3520 <#if !media.imageSrc?? || !media.imageSrc?has_content> 3521 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") /> 3522 <#if youtubeID?? && youtubeID?has_content> 3523 <#assign media = {"videoYotubeID": youtubeID} /> 3524 <#else> 3525 <#-- Tentar pegar vídeo Interno --> 3526 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) /> 3527 <#if internalVideo?? && internalVideo?has_content> 3528 <#assign media = {"internalVideo": internalVideo} /> 3529 </#if> 3530 </#if> 3531 </#if> 3532 </#list> 3533 3534 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") /> 3535 3536 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") /> 3537 3538 <#assign ourEnergyCategory = getFirstCategoryTitleLocaleOfVocabulary(entry, ourEnergyVocabulary) /> 3539 3540 <#assign typeOfNews = getFirstCategoryTitleLocaleOfVocabulary(entry, typeOfNewsVocabulary) /> 3541 3542 <#if themeDisplay.getPortalURL()?contains("webserver")> 3543 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()> 3544 <#else> 3545 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()> 3546 </#if> 3547 3548 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "ourEnergyCategory": ourEnergyCategory, "typeOfNews": typeOfNews, "urlNews": urlNews} /> 3549 3550 <#return cardData> 3551 3552 <#recover> 3553 <#return {} /> 3554 </#attempt> 3555 3556 <#-- cardData -> image: url, alt 3557 title 3558 timeRead 3559 ourEnergyCategory 3560 typeOfNews 3561 urlNews 3562 --> 3563</#function> 3564 3565 3566<#-- Macro para renderizar os arrows--> 3567<#macro renderArrows> 3568 <div class="card-news-list-arrows-breakpoint breakpoint"> 3569 <div class="card-news-list-arrows col-11-12 md-col-7-8 sm-col-1-4"> 3570 <div class="card-news-arrow-left arrow-disable"> 3571 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> 3572 <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"/> 3573 <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"/> 3574 </svg> 3575 </div> 3576 <div class="card-news-arrow-right"> 3577 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> 3578 <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"/> 3579 <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"/> 3580 </svg> 3581 3582 </div> 3583 </div> 3584 </div> 3585 3586 <style> 3587 3588 .${rootCss} .card-news-list-arrows-breakpoint { 3589 position: relative; 3590 z-index: 1; 3591 } 3592 3593 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows { 3594 display: flex; 3595 align-items: flex-start; 3596 justify-self: flex-end; 3597 gap: var(--space-xxs, 8px); 3598 } 3599 3600 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left, 3601 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right { 3602 cursor: pointer; 3603 } 3604 3605 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(1), 3606 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(1) { 3607 fill: rgb(0, 133, 66); 3608 } 3609 3610 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), 3611 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) { 3612 fill: white; 3613 } 3614 3615 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left:not(.arrow-disable):hover path:nth-child(2), 3616 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right:not(.arrow-disable):hover path:nth-child(2) { 3617 stroke: #fff; 3618 } 3619 3620 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), 3621 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) { 3622 stroke: #010101; 3623 } 3624 3625 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable, 3626 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable { 3627 opacity: 0.4; 3628 cursor: auto; 3629 } 3630 3631 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left path, 3632 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right path { 3633 stroke: rgb(0, 133, 66); 3634 transition: all 300ms ease-in-out; 3635 } 3636 3637 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left path, 3638 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right path { 3639 stroke: rgba(228, 247, 232, 1); 3640 } 3641 3642 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(1), 3643 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(1) { 3644 stroke: rgb(149, 149, 149); 3645 } 3646 3647 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(1), 3648 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(1) { 3649 stroke: rgba(215, 215, 215, 1); 3650 } 3651 3652 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(2), 3653 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(2) { 3654 stroke: rgb(82, 82, 82); 3655 } 3656 3657 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-left.arrow-disable path:nth-child(2), 3658 body.high-contrast-active .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows .card-news-arrow-right.arrow-disable path:nth-child(2) { 3659 stroke: rgba(149, 149, 149, 1); 3660 } 3661 3662 @media screen and (min-width: 1440px) { 3663 .${rootCss} .card-news-list-arrows-breakpoint { 3664 width: 100%; 3665 } 3666 } 3667 3668 @media screen and (max-width: ${MAX_MOBILE_WIDTH}px) { 3669 3670 .${rootCss} .card-news-list-arrows-breakpoint .card-news-list-arrows { 3671 justify-self: flex-start; 3672 margin-top: var(--space-lg); 3673 } 3674 } 3675 3676 </style> 3677 3678</#macro> 3679 3680 3681<#-- Macro para renderizar um Card --> 3682<#macro renderCard cardData> 3683 <#-- cardData -> image: url, alt 3684 title 3685 timeRead 3686 ourEnergyCategory 3687 typeOfNews 3688 urlNews 3689 --> 3690 3691 <div class="card-news-container"> 3692 <a class="news-page-see-more-link card-news-link" href="${cardData.urlNews}"> Link da Notícia ${cardData.title} </a> 3693 <div class="card-news-thumb"> 3694 <#assign noImage = "" /> 3695 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content> 3696 <#assign imageSrcDesktop = cardData.media.imageSrc /> 3697 <#assign imageSrcMobile = cardData.media.imageSrc /> 3698 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content> 3699 <#assign imageSrcDesktop = cardData.media.urlAdaptativeMedia.desktop /> 3700 <#assign imageSrcMobile = cardData.media.urlAdaptativeMedia.mobile /> 3701 </#if> 3702 <picture > 3703 <source media="(max-width:767px)" srcset="${imageSrcMobile}"> 3704 <img class="card-news-image" loading="lazy" src="${imageSrcDesktop}" alt="${cardData.media.imageAlt}"/> 3705 </picture> 3706 <#else> 3707 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content> 3708 <picture > 3709 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/mqdefault.jpg"> 3710 <img class="card-news-image" loading="lazy" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/> 3711 </picture> 3712 <#else> 3713 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) > 3714 <video class="card-news-image" loading="lazy"> 3715 <source src="${cardData.media.internalVideo.url}"> 3716 Your browser does not support the video tag. 3717 </video> 3718 <#else> 3719 <#assign noImage = "no-image" /> 3720 </#if> 3721 </#if> 3722 <svg class="thumb-play-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 3723 <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"/> 3724 <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"/> 3725 </svg> 3726 </#if> 3727 </div> 3728 3729 <div class="card-news-category-container ${noImage}"> 3730 <div data-category="${cardData.ourEnergyCategory}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergyCategory} </div> 3731 </div> 3732 3733 <div class="card-news-text-content ${noImage}"> 3734 <div class="card-news-title h5"> ${cardData.title} </div> 3735 3736 <div class="card-news-info"> 3737 <div class="card-news-type"> 3738 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default(""))?? > 3739 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default("")) /> 3740 <img src="${postTypeIconUrl}" loading="lazy" alt="post type icon" /> 3741 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div> 3742 <#else/> 3743 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 3744 <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"/> 3745 </svg> 3746 <div class="card-news-type-text paragraph-micro-regular">Artigo</div> 3747 </#if> 3748 </div> 3749 3750 <#if cardData.timeRead?? && cardData.timeRead?has_content> 3751 <div class="card-news-time-read"> 3752 <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"> 3753 <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"/> 3754 </svg> 3755 3756 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div> 3757 </div> 3758 </#if> 3759 </div> 3760 </div> 3761 </div> 3762</#macro> 3763 3764<style> 3765 .${rootCss} .card-news-container { 3766 width: 300px; 3767 height: 370px; 3768 display: flex; 3769 flex-direction: column; 3770 flex-shrink: 0; 3771 align-items: flex-start; 3772 border-radius: var(--border-radius-lg); 3773 border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 3774 background: var(--background-surface-level-01, #FFF); 3775 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 3776 overflow: hidden; 3777 scroll-snap-align: start; 3778 cursor: pointer; 3779 transition: border 300ms ease-in-out; 3780 text-decoration: none; 3781 position: relative; 3782 } 3783 3784 body.high-contrast-active .${rootCss} .card-news-container { 3785 border: var(--border-width-hairline) solid var(--border-card-default, #525252); 3786 background: var(--background-surface-level-01, #010101); 3787 } 3788 3789 .${rootCss} .card-news-container:hover { 3790 border: var(--border-width-hairline) solid rgb(0, 133, 66); 3791 } 3792 3793 body.high-contrast-active .${rootCss} .card-news-container:hover { 3794 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 3795 } 3796 3797 .${rootCss} .card-news-container .card-news-link { 3798 position: absolute; 3799 top: 0; 3800 width: 100%; 3801 height: 100%; 3802 z-index: 1; 3803 opacity: 0; 3804 } 3805 3806 .${rootCss} .card-news-container .card-news-thumb { 3807 position: relative; 3808 } 3809 3810 .${rootCss} .card-news-container .card-news-image { 3811 width: 298px; 3812 height: 168px; 3813 object-fit: cover; 3814 } 3815 3816 3817 .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon { 3818 position: absolute; 3819 left: 50%; 3820 top: 50%; 3821 transform: translate(-50%, -50%); 3822 } 3823 3824 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(1) { 3825 fill: black; 3826 } 3827 3828 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(2) { 3829 fill: white; 3830 } 3831 3832 .${rootCss} .card-news-container .card-news-category-container { 3833 position: relative; 3834 } 3835 3836 .${rootCss} .card-news-container .card-news-category-container .card-news-category { 3837 display: flex; 3838 justify-content: center; 3839 align-items: center; 3840 padding: var(--space-micro) var(--space-xs); 3841 position: absolute; 3842 z-index: 2; 3843 left: var(--space-md); 3844 top: -13px; 3845 border-radius: var(--border-radius-pill); 3846 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); 3847 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 3848 line-height: var(--line-height-lg, 144%); 3849 color: var(--default-sup-green-water, #006B65); 3850 white-space: nowrap; 3851 } 3852 3853 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category { 3854 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); 3855 color: var(--default-sup-green-water, #99E0DD); 3856 } 3857 3858 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category { 3859 position: relative; 3860 top: 0; 3861 left: 0; 3862 margin-left: var(--space-md); 3863 margin-top: var(--space-md); 3864 } 3865 3866 .${rootCss} .card-news-container .card-news-text-content { 3867 display: flex; 3868 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 3869 flex-direction: column; 3870 justify-content: space-between; 3871 align-items: flex-start; 3872 flex: 1 0 0; 3873 align-self: stretch; 3874 } 3875 3876 .${rootCss} .card-news-container .card-news-text-content.no-image { 3877 padding-top: var(--space-sm); 3878 } 3879 3880 .${rootCss} .card-news-container .card-news-text-content .card-news-title { 3881 display: -webkit-box; 3882 -webkit-box-orient: vertical; 3883 -webkit-line-clamp: 4; 3884 align-self: stretch; 3885 overflow: hidden; 3886 color: var(--text-primary-default, #373737); 3887 text-overflow: ellipsis; 3888 margin: 0; 3889 } 3890 3891 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title { 3892 color: var(--text-primary-default, #FFF); 3893 } 3894 3895 .${rootCss} .card-news-container .card-news-text-content .card-news-info { 3896 display: flex; 3897 align-items: center; 3898 align-content: center; 3899 gap: var(--space-sm, 16px); 3900 align-self: stretch; 3901 flex-wrap: wrap; 3902 } 3903 3904 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type, 3905 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read { 3906 display: flex; 3907 align-items: center; 3908 gap: var(--space-xxs, 8px); 3909 } 3910 3911 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path { 3912 stroke: #D7D7D7; 3913 } 3914 3915 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 3916 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 3917 color: var(--text-tertiary-default, #959595); 3918 line-height: var(--line-height-lg, 144%); 3919 } 3920 3921 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 3922 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 3923 color: var(--text-tertiary-default, #EEE); 3924 } 3925 3926 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read { 3927 transform: translateY(-0.5px); 3928 } 3929 3930 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 { 3931 fill: #D7D7D7; 3932 } 3933</style> 3934 3935<#assign maxNumberOfCards = 9/> 3936<#assign className = "com.liferay.journal.model.JournalArticle" /> 3937<#assign classNameId = PortalUtil.getClassNameId(className) /> 3938${AssetEntryQuery.setClassNameIds([classNameId]) } 3939${AssetEntryQuery.setEnd(maxNumberOfCards)} 3940 3941<#assign entries = []/> 3942<#assign ourEnergyCategoriesIds = getAllCategoryIdOfVocabulary(assetEntry, ourEnergyVocabulary) /> 3943<#list ourEnergyCategoriesIds as ourEnergyCategoryId> 3944 ${AssetEntryQuery.setAllCategoryIds([ourEnergyCategoryId])} 3945 <#assign ents = AssetEntryQueryService.getEntries(AssetEntryQuery) /> 3946 <#assign entries = entries + ents /> 3947</#list> 3948 3949 3950<#-- Renderizar Lista de cards --> 3951<#if entries?has_content> 3952 <div class="${rootCss}"> 3953 <div class="list-of-news-title breakpoint"> 3954 <div class="list-of-news-title-col col-1-12 md-col-1-8 sm-col-1-4"> 3955 <div class="list-title fragment_85017"> 3956 <div class="petro-title"> 3957 <h2 id="title" class="display-sm" style="color: var(--color-neutral-800)"> 3958 <#if locale?lower_case == "pt_br"> Leia também <#else> Read also </#if> 3959 </h2> 3960 3961 <div class="yellow-bar bar-display-sm" style="background-color: var(--color-secondary-medium)"></div> 3962 3963 </div> 3964 </div> 3965 </div> 3966 </div> 3967 3968 <@renderArrows /> 3969 3970 <div class="card-news-list-breakpoint breakpoint"> 3971 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4"> 3972 <#if entries?size gt maxNumberOfCards> 3973 <#assign entries = entries[0..maxNumberOfCards] /> 3974 </#if> 3975 <#list entries as entry> 3976 <#if assetEntry.getClassPK() != entry.getClassPK() > 3977 <#assign cardData = getDataForCard(entry) /> 3978 <@renderCard cardData/> 3979 </#if> 3980 </#list> 3981 </div> 3982 </div> 3983 </div> 3984</#if> 3985 3986 3987<style> 3988 3989 .portlet { 3990 margin: 0; 3991 } 3992 3993 .${rootCss} { 3994 padding: var(--space-giant, 80px) 0; 3995 background: var(--background-surface-level-01, #FFF); 3996 width: 100%; 3997 position: relative; 3998 font-family: var(--font-family-base, "Petrobras Sans"); 3999 display: flex; 4000 flex-direction: column; 4001 gap: var(--space-lg); 4002 } 4003 4004 body.high-contrast-active .${rootCss} { 4005 background: var(--background-surface-level-01, #010101); 4006 } 4007 4008 .${rootCss} .list-of-news-title { 4009 position: relative; 4010 z-index: 1; 4011 } 4012 4013 .${rootCss} body.high-contrast-active .fragment_614685 .petro-title .yellow-bar { 4014 background-color: #FFEEB3 !important; 4015 } 4016 4017 .${rootCss} .card-news-list { 4018 display: flex; 4019 gap: var(--space-lg); 4020 overflow: auto; 4021 position: relative; 4022 z-index: 1; 4023 scroll-snap-type: x mandatory; 4024 scrollbar-width: none; 4025 } 4026 4027 .${rootCss} .card-news-list::-webkit-scrollbar { 4028 display: none; 4029 } 4030 4031 @media screen and (min-width: 1440px) { 4032 .${rootCss} .card-news-list-breakpoint { 4033 width: 100%; 4034 } 4035 4036 .${rootCss} .list-of-news-title { 4037 width: 100%; 4038 } 4039 } 4040 4041 @media screen and (max-width: 1024px) { 4042 .${rootCss} .fragment_614685 { 4043 padding: var(--space-xxl, 56px) 0; 4044 } 4045 } 4046 4047</style> 4048 4049<#list ourEnergyStyles as ourEnergyStyle> 4050 <style> 4051 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 4052 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; 4053 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important; 4054 color: #${ourEnergyStyle.textColor} !important; 4055 } 4056 4057 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 4058 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; 4059 color: #${ourEnergyStyle.textColorHighContrast} !important; 4060 } 4061 4062 </style> 4063</#list> 4064 4065<script> 4066 4067 function disableEnableArrow(arrow, scrollBar, maxDistance, direction) 4068 { 4069 if(direction === "left") { 4070 if (scrollBar.scrollLeft > 0) { 4071 arrow.classList.contains("arrow-disable") && arrow.classList.remove("arrow-disable"); 4072 } 4073 else { 4074 !arrow.classList.contains("arrow-disable") && arrow.classList.add("arrow-disable"); 4075 } 4076 } 4077 else if(direction === "right") { 4078 if (Math.ceil(scrollBar.scrollLeft + scrollBar.clientWidth) < maxDistance) { 4079 arrow.classList.contains("arrow-disable") && arrow.classList.remove("arrow-disable"); 4080 } 4081 else { 4082 !arrow.classList.contains("arrow-disable") && arrow.classList.add("arrow-disable"); 4083 } 4084 } 4085 } 4086 4087 function scrollCarousel() 4088 { 4089 const root = document.querySelector(".${rootCss}"); 4090 if(root) { 4091 const scrollBar = root.querySelector(".${rootCss} .card-news-list"); 4092 const gap = 32;// var(--space-lg); 4093 const stepLength = scrollBar.querySelector(".card-news-container").offsetWidth + gap; 4094 const arrowLeftBtn = root.querySelector(".card-news-arrow-left") 4095 const arrowRightBtn = root.querySelector(".card-news-arrow-right") 4096 4097 let maxDistance = scrollBar.scrollWidth; 4098 4099 arrowLeftBtn.addEventListener('click', () => { 4100 if (scrollBar.scrollLeft > 0) { 4101 scrollBar.scroll({ 4102 left: scrollBar.scrollLeft - stepLength, 4103 behavior: "smooth", 4104 }); 4105 } 4106 }); 4107 4108 arrowRightBtn.addEventListener('click', () => { 4109 if (scrollBar.scrollLeft < maxDistance) { 4110 scrollBar.scroll({ 4111 left: scrollBar.scrollLeft + stepLength, 4112 behavior: "smooth", 4113 }); 4114 } 4115 }); 4116 4117 scrollBar.addEventListener("scroll", ()=>{ 4118 disableEnableArrow(arrowLeftBtn, scrollBar, maxDistance, "left"); 4119 disableEnableArrow(arrowRightBtn, scrollBar, maxDistance, "right"); 4120 }); 4121 4122 disableEnableArrow(arrowLeftBtn, scrollBar, maxDistance, "left"); 4123 disableEnableArrow(arrowRightBtn, scrollBar, maxDistance, "right"); 4124 4125 } 4126 } 4127 4128 document.addEventListener('DOMContentLoaded', scrollCarousel); 4129 4130</script> 4131 4132<style> 4133 4134 4135.ptb-news__read-news .news-content .embed-responsive-youtube::before { 4136 padding-top: 0; 4137} 4138 4139.ptb-news__read-news .news-content .embed-responsive-liferay::before { 4140 padding-top: calc(9/16 *100% - 64px); 4141} 4142 4143.ptb-news__read-news .news-content .thumnail-play-button { 4144} 4145 4146.ptb-news__read-news .news-content .thumnail-play-button { 4147 position: relative; 4148 z-index: 100; 4149 height: 64px; 4150 width: 64px; 4151 background-repeat: no-repeat; 4152 top: calc(50%); 4153 left: calc(50% - 32px); 4154} 4155 4156 4157.ptb-news__read-news .news-content .thumnail-play-button-youtube { 4158 position: absolute; 4159 z-index: 100; 4160 height: 64px; 4161 width: 64px; 4162 background-repeat: no-repeat; 4163 top: calc(50% - 64px); 4164 left: calc(50% - 32px); 4165} 4166 4167.ptb-news__read-news .news-content .thumnail-play-button-liferay { 4168 position: relative; 4169 z-index: 100; 4170 height: 64px; 4171 width: 64px; 4172 top: calc(-50% + 32px); 4173 left: calc(50% - 32px); 4174 background-repeat: no-repeat; 4175} 4176 4177 4178 .ptb-news__read-news .news-content .embed-responsive-youtube img { 4179 width: 100%; 4180 height: 100%; 4181 } 4182 4183</style> 4184 4185 <script> 4186 <#assign createYoutubeThumbnails = "createYoutubeThumbnails_"+ randomNumber(5952) /> 4187 4188 function ${createYoutubeThumbnails}(){ 4189 4190 const newsContent = document.querySelector(".news-content"); 4191 4192 const getYoutubeId = (youtubeUrl) => { 4193 4194 const url = new URL(youtubeUrl); 4195 const splittedPathName = url.pathname.split("/"); 4196 4197 if (splittedPathName.length <= 0){ 4198 return ""; 4199 } 4200 4201 return splittedPathName[splittedPathName.length-1]; 4202 }; 4203 4204 window.addEventListener("resize", (event) => { 4205 const iframeList = newsContent.querySelectorAll('iframe'); 4206 iframeList.forEach((iframe) => { 4207 const src = iframe.src; 4208 if (!src){ 4209 return; 4210 } 4211 4212 const isYoutube = src.toLowerCase().includes("youtube"); 4213 if (!isYoutube){ 4214 return; 4215 } 4216 4217 const iframeParent = iframe.parentNode; 4218 4219 const thumbnail = iframeParent.querySelector("img"); 4220 if (thumbnail){ 4221 // thumbnail.style="width:" + iframe.width + "px; height: " + iframe.height + "px"; 4222 } 4223 }); 4224 4225 }); 4226 4227 const iframeList = newsContent.querySelectorAll('iframe'); 4228 iframeList.forEach((iframe) => { 4229 const src = iframe.src; 4230 if (!src){ 4231 return; 4232 } 4233 4234 const isYoutube = src.toLowerCase().includes("youtube"); 4235 if (!isYoutube){ 4236 return; 4237 } 4238 4239 const iframeParent = iframe.parentNode; 4240 4241 const thumbnail = document.createElement("img"); 4242 thumbnail.src = 'https://img.youtube.com/vi/' + getYoutubeId(src) +'/hqdefault.jpg'; 4243 thumbnail.alt = "Youtube"; 4244 //thumbnail.style="width:" + iframe.width + "px; height: " + iframe.height + "px"; 4245 4246 const playButton = document.createElement("div"); 4247 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")'; 4248 playButton.classList.add("thumnail-play-button-youtube"); 4249 const children = iframeParent.children; 4250 4251 if (children.length > 0) { 4252 iframeParent.insertBefore(thumbnail, children.firstChild); 4253 iframeParent.insertBefore(playButton, thumbnail); 4254 iframe.classList.add("hide"); 4255 iframeParent.classList.add("embed-responsive-youtube"); 4256 } 4257 4258 playButton.addEventListener("click", () => { 4259 thumbnail.click(); 4260 }); 4261 4262 thumbnail.addEventListener("click", () => { 4263 thumbnail.classList.add("hide"); 4264 playButton.classList.add("hide"); 4265 iframe.classList.remove("hide"); 4266 iframeParent.classList.remove("embed-responsive-youtube"); 4267 const url = new URL(src); 4268 const searchParams = url.searchParams; 4269 searchParams.set("rel", "0"); 4270 //searchParams.set("modestbranding", "0"); 4271 //searchParams.set("mute", "0"); 4272 //searchParams.set("color", "white"); 4273 searchParams.set("controls", "1"); 4274 //searchParams.set("playsinline", "1"); 4275 //searchParams.set("enablejsapi", "1"); 4276 searchParams.set("autoplay", "1"); 4277 //searchParams.set("logo", "0"); 4278 4279 console.log(url.toString()); 4280 4281 iframeParent.setAttribute("data-embed-id", url.toString()); 4282 iframe.setAttribute("src", url.toString()); 4283 }); 4284 }); 4285 4286 } 4287 4288 ${createYoutubeThumbnails}(); 4289 4290 <#assign createLRThumbnails = "createLRThumbnails"+ randomNumber(5952) /> 4291 4292 function ${createLRThumbnails}(){ 4293 4294 const newsContent = document.querySelector(".news-content"); 4295 const iframeList = newsContent.querySelectorAll("iframe[data-video-liferay]"); 4296 4297 iframeList.forEach(iframe => { 4298 4299 const playButton = document.createElement("div"); 4300 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")'; 4301 playButton.classList.add("thumnail-play-button-liferay"); 4302 const children = iframe.parentNode.children; 4303 if (children.length > 0) { 4304 iframe.parentNode.insertBefore(playButton, children.firstChild); 4305 } 4306 4307 iframe.addEventListener("load", () => { 4308 if (iframe.contentDocument){ 4309 const video = iframe.contentDocument.body.querySelector("video"); 4310 video.removeAttribute("controls"); 4311 } 4312 }); 4313 4314 iframe.parentNode.classList.add("embed-responsive-liferay"); 4315 4316 4317 playButton.addEventListener("click", () => { 4318 playButton.classList.add("hide"); 4319 playButton.classList.remove("thumnail-play-button-liferay"); 4320 iframe.parentNode.classList.remove("embed-responsive-liferay"); 4321 if (iframe.contentDocument){ 4322 const video = iframe.contentDocument.body.querySelector("video"); 4323 video.setAttribute("controls", ""); 4324 video.play(); 4325 } 4326 }); 4327 }); 4328 } 4329 4330 ${createLRThumbnails}(); 4331 </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: