Um inesperado erro ocorreu.
Um inesperado erro ocorreu.
Um erro ocorreu enquanto processava o modelo.
The following has evaluated to null or missing:
==> entryAPI.contentFields [in template "20099#20135#1295509" at line 84, column 16]
----
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: #list entryAPI.contentFields as conte... [in template "20099#20135#1295509" at line 84, column 9]
----
1<#--
2 Widget templates can be used to modify the look of a
3 specific application.
4
5 Please use the left panel to quickly add commonly used variables.
6 Autocomplete is also available and can be invoked by typing "${".
7 -->
8
9<#assign defaultUrlTitle = "configuracao-do-site" />
10<#assign nomeEstruturaConfig = "Configuração do Site" />
11<#assign idJournalArticle = 1296048 />
12
13<#function getTemplateCategoryValue listaGlobalTemas valorTema>
14 <#attempt>
15 <#assign result = "" />
16 <#list listaGlobalTemas as categ>
17 <#if categ.id?string == valorTema>
18 <#assign result = categ.temaTraducao />
19 </#if>
20 </#list>
21 <#return result />
22 <#recover>
23 <#return "Erro" />
24 </#attempt>
25</#function>
26
27<#assign allCategories = {} />
28<#function getCategoriesByNameVocabulary nameVocabulary>
29 <#attempt>
30 <#assign vocabularies = restClient.get("/headless-admin-taxonomy/v1.0/sites/${groupId}/taxonomy-vocabularies")>
31 <#list vocabularies.items as vocabulary>
32 <#if vocabulary.name == nameVocabulary>
33 <#assign categoriesAPI = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${vocabulary.id}/taxonomy-categories?fields=id%2Cname%2CtaxonomyCategoryProperties")>
34 <#assign categories = [] />
35 <#list categoriesAPI.items as category>
36 <#assign categories += [{"nomeBR": category.name, "temaTraducao": category.name, "id": category.id}] />
37 </#list>
38 <#return categories />
39 </#if>
40 </#list>
41 <#recover>
42 <#return [] />
43 </#attempt>
44</#function>
45
46<#setting url_escaping_charset='ISO-8859-1'>
47
48<#assign idTituloTabela = "CampoDeTexto94912632" />
49<#assign idArquivoTabela = "FazerUpload29779134" />
50
51
52<#assign prefix = "petrTabPrec" />
53<#assign tamanhoTelaCelular = 640 />
54<#assign labelTabelaPreco = "Preços de venda às distribuidoras" />
55<#assign introducaoPrecoDisponivel = "" />
56<#assign labelConhecerBotoesMobile = "Consulte por assuntos" />
57<#assign labelNavegarDimensoes = "Navegue por assunto" />
58<#assign labelVisaoGeral = "gasolina" />
59
60<#assign listaGlobalTemas = [] />
61
62<#assign tireTodasSuasDuvidasRotulo = "" />
63<#assign consultePorAssuntoRotulo = "" />
64<#assign naveguePorAssuntoRotulo = "" />
65
66<#assign urlAtual = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL +"/w/" />
67
68<#assign quantBotoes = 0 />
69<#assign listaBotoes = [] />
70<#assign tabelaPrecos = [] />
71<#assign informeHashPorCategoria = {} />
72<#assign idCount = 1 />
73
74<#assign tireTodasSuasDuvidasRotulo = "" />
75<#assign consultePorAssuntoRotulo = "" />
76<#assign naveguePorAssuntoRotulo = "" />
77<#assign assuntoInstitucional = "" />
78
79<#if entries?has_content>
80 <#assign quantBotoes = entries?size />
81 <#list entries as curEntry>
82 <#assign entryAPI = restClient.get("/headless-delivery/v1.0/structured-contents/${curEntry.classPK}") />
83 <#assign urlTabelaPrecos = "">
84 <#list entryAPI.contentFields as contentField>
85 <#if contentField.name == idTituloTabela>
86 <#assign tituloTabela = contentField.contentFieldValue.data />
87 </#if>
88 <#if contentField.name == idArquivoTabela && contentField.contentFieldValue?? && contentField.contentFieldValue.document??>
89 <#assign urlTabelaPrecos = contentField.contentFieldValue.document.contentUrl />
90 </#if>
91
92 </#list>
93 <#assign idBotao = "button-" + idCount />
94 <#assign listaTemas = [] />
95 <#list entryAPI.taxonomyCategoryBriefs as tema >
96 <#assign listaTemas += [tema.taxonomyCategoryName] />
97 <#if !allCategories[tema.taxonomyCategoryId?string]??>
98 <#assign allCategories += {tema.taxonomyCategoryId?string: {"nomeBR": tema.taxonomyCategoryName, "temaTraducao": tema.taxonomyCategoryName, "id": tema.taxonomyCategoryId}}/>
99 </#if>
100 </#list>
101
102 <#assign structTabelaPrecos = {"titulo": tituloTabela, "urlTabelaPrecos": urlTabelaPrecos, "numero": ((curEntry?index+1)), "temas": listaTemas} />
103 <#assign tabelaPrecos += [structTabelaPrecos] />
104 <#assign idCount = idCount + 1 />
105 </#list>
106
107 <#if quantBotoes gt 0 >
108
109 <#list allCategories?keys as key>
110 <#assign listaGlobalTemas += [allCategories[key]] />
111 </#list>
112
113 <#assign idGrupoCamposInformes = "GrupoDeCampos51731635" />
114 <#assign idGrupoCamposInformes = "GrupoDeCampos54805072" />
115
116 <#assign idGrupoCamposTabelaPrecos = "GrupoDeCampos68795664" />
117 <#assign idTabelaPrecoDisponivel = "CampoDeTexto47844626" />
118 <#assign idIntroducaoPrecoDisponivel = "CampoDeTexto44037977" />
119 <#assign idConsultePorAssunto = "CampoDeTexto78392284" />
120 <#assign idNaveguePorAssunto = "CampoDeTexto62721920" />
121 <#assign entryAPI = restClient.get("/headless-delivery/v1.0/structured-contents/${idJournalArticle}?nestedFields=nestedContentFields") />
122
123 <#assign tabelaPrecoDisponivel = "" />
124 <#if entryAPI?? & entryAPI.contentFields?? >
125 <#list entryAPI.contentFields as contentFields>
126 <#list contentFields.nestedContentFields as field>
127 <#if field.name == idTabelaPrecoDisponivel>
128 <#assign tabelaPrecoDisponivel = field.contentFieldValue.data/>
129 </#if>
130 <#if field.name == idIntroducaoPrecoDisponivel>
131 <#assign introducaoPrecoDisponivel = field.contentFieldValue.data />
132 </#if>
133 <#if field.name == idConsultePorAssunto>
134 <#assign labelConhecerBotoesMobile = field.contentFieldValue.data />
135 </#if>
136 <#if field.name == idNaveguePorAssunto>
137 <#assign labelNavegarDimensoes = field.contentFieldValue.data />
138 </#if>
139 </#list>
140 </#list>
141 </#if>
142
143 </#if>
144</#if>
145
146
147<div class="${prefix}">
148 <h2 id="${prefix}-titulo-secao-tabela-preco">${tabelaPrecoDisponivel}</h2>
149 <p>
150 ${introducaoPrecoDisponivel}
151 </p>
152 <div class="navegar-dim">
153
154 <div id="buttons-dim-out">
155 <div id="buttons-dim">
156 <span>${labelNavegarDimensoes}</span>
157 <div>
158 <input id="gasolina-tab-btn" type="button" class="selected" value="${getTemplateCategoryValue(listaGlobalTemas,'1295907')}" />
159 <input id="diesel-tab-btn" type="button" value="${getTemplateCategoryValue(listaGlobalTemas,'1295910')}" />
160 <input id="gas-cozinha-tab-btn" type="button" value="${getTemplateCategoryValue(listaGlobalTemas,'1295913')}" />
161 <input id="outros-tab-btn" type="button" value="${getTemplateCategoryValue(listaGlobalTemas,'1295916')}" />
162 </div>
163 </div>
164 </div>
165 </div>
166 <div id="page-out">
167 <div id="page-in">
168 <div class="cardlist-Botoes"></div>
169 </div>
170 </div>
171 <div class="navegar-paginas">
172 <svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg"><path id="left-arrow" fill="#D4D4D4" d="M0.292893 7.29289C-0.0976314 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928931C7.68054 0.538407 7.04738 0.538407 6.65686 0.928931L0.292893 7.29289ZM17 7L1 7L1 9L17 9L17 7Z"/></svg>
173 <div class="radio-page-buttons"></div>
174 <svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg"><path id="right-arrow" fill="#008542" d="M16.7071 8.70711C17.0976 8.31658 17.0976 7.68342 16.7071 7.29289L10.3431 0.928932C9.95262 0.538408 9.31946 0.538408 8.92893 0.928932C8.53841 1.31946 8.53841 1.95262 8.92893 2.34315L14.5858 8L8.92893 13.6569C8.53841 14.0474 8.53841 14.6805 8.92893 15.0711C9.31946 15.4616 9.95262 15.4616 10.3431 15.0711L16.7071 8.70711ZM0 9H16V7H0L0 9Z"/></svg>
175 </div>
176</div> <!-- ${prefix}-->
177
178
179<style>
180
181 .notransition {
182 -webkit-transition: none !important;
183 -moz-transition: none !important;
184 -o-transition: none !important;
185 transition: none !important;
186 }
187
188 .disableSelection {
189 -webkit-touch-callout: none;
190 -webkit-user-select: none;
191 -khtml-user-select: none;
192 -moz-user-select: none;
193 -ms-user-select: none;
194 user-select: none;
195 outline: 0;
196 }
197
198 .${prefix} {
199 padding: 0 64px 52px 64px;
200 font-family: 'Petrobras Sans', Sans-serif;
201 display: flex;
202 flex-direction: column;
203 gap: 16px;
204 overflow: hidden;
205 }
206
207 .${prefix} h2 {
208 font-style: normal;
209 font-weight: 700;
210 font-size: 32px;
211 line-height: 38px;
212 color: #2F2F2F;
213 margin: 0;
214 }
215
216 .${prefix} .navegar-dim {
217 margin: 0;
218 display: flex;
219 flex-direction: row;
220 gap: 16px;
221 align-items: center;
222 padding-top: 18px;
223 padding-bottom: 32px;
224 }
225
226 .${prefix} .navegar-dim span {
227 font-family: 'Petrobras Sans';
228 font-style: normal;
229 font-weight: 400;
230 font-size: 14px;
231 line-height: 18px;
232 color: #2F2F2F;
233 }
234
235 .${prefix} .navegar-dim #buttons-dim-out {
236 display: inline-block;
237 position: relative;
238 }
239
240 .${prefix} .navegar-dim #buttons-dim {
241 display: flex;
242 left: 0px;
243 color: #2F2F2F;
244 gap: 16px;
245 align-items: center;
246 }
247
248 .${prefix} .navegar-dim #buttons-dim >div{
249 display: flex;
250 gap:16px;
251 }
252
253 .${prefix} .navegar-dim #buttons-dim input {
254 display: flex;
255 justify-content: center;
256 left: 0px;
257 color: #2F2F2F;
258 }
259
260 .${prefix} .navegar-dim #buttons-dim input[type='button']{
261 padding: 0px 20px 2px 20px;
262 height: 32px;
263 border: 1px solid #E5E5E5;
264 background-color: white;
265 border-radius: 8px;
266 font-family: 'Petrobras Sans', Sans-serif;
267 font-style: normal;
268 font-weight: 400;
269 font-size: 14px;
270 line-height: 28px;
271 }
272
273 .${prefix} .navegar-dim #buttons-dim #gasolina-tab-btn.selected {
274 background: #525252;
275 color: #FFFFFF;
276 }
277
278 .${prefix} .navegar-dim #buttons-dim #diesel-tab-btn.selected {
279 background: #525252;
280 color: #FFFFFF;
281 }
282
283 .${prefix} .navegar-dim #buttons-dim #gas-cozinha-tab-btn.selected {
284 background: #525252;
285 color: #FFFFFF;
286 }
287
288 .${prefix} .navegar-dim #buttons-dim #outros-tab-btn.selected {
289 background: #525252;
290 color: #FFFFFF;
291 }
292
293 .${prefix} .navegar-dim #buttons-dim #documentos-tab-btn.selected {
294 background: #525252;
295 color: #FFFFFF;
296 }
297
298 .${prefix} #page-out {
299 /*height: 324px;*/
300 position: relative;
301 /*overflow: hidden;*/
302 /* width: 94vw; */
303 display: block;
304 }
305
306 .${prefix} #page-out #page-in {
307 /*position: absolute;*/
308 left: 0px;
309 transition: all 1.5s ease-in-out;
310 }
311
312 .${prefix} .cardlist-Botoes {
313 display: flex;
314 flex-direction: column;
315 gap: 32px;
316 }
317
318 .${prefix} .cardlist-Botoes .card-Botao {
319 width: 257px;
320 height: 55px;
321 left: 0px;
322 top: 0px;
323 background: #FFFFFF;
324 border-radius: 8px;
325 margin-right: 24px;
326 }
327
328 .${prefix} .cardlist-Botoes .card-Botao .imagem-Botao {
329 width: 257px;
330 height: 360px;
331 border-radius: 8px;
332 position: relative;
333 background-size: cover;
334 background-position: center;
335 }
336
337 .${prefix} .cardlist-Botoes .card-Botao .imagem-Botao .dimensao-Botao {
338 display: flex;
339 justify-content: space-around;
340 align-items: center;
341 position: absolute;
342 min-width: 138px;
343 height: 33px;
344 left: 24px;
345 top: 24px;
346 background: #FFFFFF;
347 border-radius: 4px;
348 }
349
350
351 .${prefix} .cardlist-Botoes .card-Botao .imagem-Botao span {
352 font-family: 'Petrobras Sans', Sans-serif;
353 font-style: normal;
354 font-weight: 800;
355 font-size: 16px;
356 line-height: 21px;
357 text-transform: uppercase;
358 color: #9E9E9E;
359 margin: auto 16px;
360 }
361
362 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao {
363 width: 386px;
364 background: #008542;
365 border-radius: 999px;
366 display: flex;
367 cursor: pointer;
368 height: 56px;
369 }
370
371 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao .titulo-Botao {
372
373 }
374
375 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h2 {
376 margin: 0;
377 padding: 0;
378 font-family: 'Petrobras Sans';
379 font-style: normal;
380 font-weight: 700;
381 font-size: 20px;
382 line-height: 26px;
383 }
384
385 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h3 {
386 line-height: 21px;
387 margin: 14px 0 0 0;
388 padding: 0;
389 }
390
391 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h2 a {
392 font-style: normal;
393 font-weight: 700;
394 font-size: 20px;
395 line-height: 26px;
396 color: #525252;
397 text-decoration: none;
398 }
399
400 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h3 a {
401 color: #2F2F2F;
402 font-family: 'Petrobras Sans';
403 font-style: normal;
404 font-weight: 400;
405 font-size: 16px;
406 line-height: 21px;
407 text-decoration: none;
408 }
409
410 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao .tempo-Botao {
411 font-family: 'Petrobras Sans', Sans-serif;
412 font-style: normal;
413 font-weight: 400;
414 font-size: 14px;
415 line-height: 18px;
416 color: #2F2F2F;
417 }
418
419 .${prefix} .navegar-paginas {
420 display: none;
421 justify-content: flex-start;
422 align-items: center;
423 gap: 24px;
424 min-width: 80vw;
425 min-height: 20px;
426 margin-top: 40px;
427 }
428
429 .${prefix} .navegar-paginas .radio-page-buttons {
430 display: none;
431 justify-content: space-between;
432 align-items: center;
433 gap: 24px;
434 }
435
436 /* TODO: Melhorar isso daqui (ajuda Luiz)*/
437 .radio-page-buttons input[type="radio"] {
438 width: 4px;
439 height: 3px;
440 }
441
442
443 .${prefix} .navegar-paginas .radio-page-buttons input[type='radio']:after {
444 width: 8px;
445 height: 8px;
446 border-radius: 15px;
447 top: -12px;
448 left: -1px;
449 position: relative;
450 background-color: #d1d3d1;
451 content: '';
452 display: inline-block;
453 visibility: visible;
454 border: 1px solid white;
455 opacity: 1;
456 }
457
458 .${prefix} .navegar-paginas .radio-page-buttons input[type='radio']:checked:after {
459 width: 8px;
460 height: 8px;
461 border-bottom-width: 0px;
462 border-radius: 15px;
463 top: -12px;
464 left: -1px;
465 position: relative;
466 background-color: #008542;;
467 content: '';
468 display: inline-block;
469 visibility: visible;
470 border: 1px solid white;
471 opacity: 1;
472 }
473
474 .${prefix} .card-conhecer-Botoes {
475 position: static;
476 width: 400px;
477 height: 271px;
478 left: 1680px;
479 top: 0px;
480 flex: none;
481 order: 6;
482 flex-grow: 0;
483 background: rgb(0,133,66);
484 border-radius: 8px;
485 cursor: pointer;
486 font-family: 'Petrobras Sans', Sans-serif;
487 }
488
489 .${prefix} .card-conhecer-Botoes h3 {
490 position: relative;
491 left: 30px;
492 top: 30px;
493 font-family: 'Petrobras Sans', Sans-serif;
494 font-style: normal;
495 font-weight: 800;
496 font-size: 14px;
497 line-height: 18px;
498 color: #FFFFFF;
499 text-transform: uppercase;
500 }
501
502 .${prefix} .card-conhecer-Botoes h2 {
503 position: relative;
504 left: 30px;
505 top: 215px;
506 width: 70%;
507 font-family: 'Petrobras Sans', Sans-serif;
508 font-style: normal;
509 font-weight: 700;
510 font-size: 24px;
511 line-height: 32px;
512 color: #FFFFFF;
513 }
514
515 .${prefix} .card-conhecer-Botoes div {
516 position: relative;
517 top: 235px;
518 left: 30px;
519 color: #FFFFFF;
520 font-family: 'Petrobras Sans', Sans-serif;
521 }
522
523
524
525 .${prefix} .descricao-Botao .botao{
526 border-radius: 36px;
527 background-color: #008542;
528 cursor: pointer;
529 transition: 500ms;
530 text-align: center;
531 flex-direction: row;
532 justify-content: space-around;
533 align-items: center;
534 border: none;
535 color: white;
536 font-family: 'Petrobras Sans';
537 font-style: normal;
538 font-weight: 700;
539 font-size: 16px;
540 line-height: 160%;
541 }
542
543 .${prefix} .descricao-Botao .botao-tabela{
544 word-break: keep-all;
545 margin: auto;
546 font-family: 'Petrobras Sans';
547 font-style: normal;
548 font-weight: 700;
549 font-size: 16px;
550 line-height: 160%;
551 display: flex;
552 align-items: center;
553 text-align: center;
554 color: #FFFFFF;
555 padding: 8px;
556 }
557
558 .${prefix} .descricao-Botao .botao-tabela span{
559 position: relative;
560 top: 8px;
561 }
562
563 .${prefix} p {
564 font-family: 'Petrobras Sans';
565 font-style: normal;
566 font-weight: 400;
567 font-size: 20px;
568 line-height: 120%;
569 color: #818181;
570 margin: 0;
571 }
572
573
574
575
576
577
578
579 /* Mobile */
580 @media (max-width: ${tamanhoTelaCelular}px) {
581
582 .${prefix} {
583 padding: 0px 16px 60px 16px;
584 }
585
586 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao{
587 height: unset;
588 min-height: 56px;
589 }
590
591 .${prefix} p {
592 font-family: 'Petrobras Sans', Sans-Serif;
593 font-style: normal;
594 font-weight: 400;
595 font-size: 16px;
596 line-height: 150%;
597 }
598
599 .${prefix} h2 {
600 font-style: normal;
601 font-weight: 700;
602 font-size: 24px;
603 line-height: 120%;
604 }
605
606 .${prefix} .navegar-dim {
607 margin-top: 0;
608 margin-bottom: 0;
609 padding-top: 0;
610 padding-bottom: 4px;
611 flex-direction: column;
612 align-items: flex-start;
613 }
614
615 .${prefix} .navegar-dim div {
616 display: flex;
617 justify-content: flex-start;
618 }
619
620 .${prefix} .navegar-dim span {
621 display: block;
622 white-space: nowrap;
623 font-style: normal;
624 font-weight: 400;
625 line-height: 18px;
626 font-size: 14px;
627 }
628
629 .${prefix} .cardlist-Botoes .card-Botao {
630 width: initial;
631 height: initial;
632 margin: 0;
633 cursor: pointer;
634 }
635
636 .${prefix} .cardlist-Botoes .card-Botao .imagem-Botao {
637 width: 195px;
638 height: 275px;
639 }
640
641 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao {
642 width: 100%;
643 padding: 0 8px;
644 margin: 0;
645 }
646
647 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h2 {
648 line-height: 21px;
649 margin: 0;
650 padding: 0;
651 margin-block: 0;
652 margin-inline: 0;
653 font-family: 'Petrobras Sans';
654 font-style: normal;
655 font-weight: 700;
656 font-size: 16px;
657 line-height: 21px;
658 }
659
660 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h3 {
661 line-height: 18px;
662 margin: 14px 0 0 0;
663 padding: 0;
664 font-family: 'Petrobras Sans';
665 font-style: normal;
666 font-weight: 400;
667 font-size: 14px;
668 line-height: 18px;
669 }
670
671 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h2 a {
672 color: #525252;
673 font-style: normal;
674 font-weight: 700;
675 font-size: 16px;
676 line-height: 21px;
677 }
678
679 .${prefix} .cardlist-Botoes .card-Botao .descricao-Botao h3 a {
680 color: #2F2F2F;
681 font-style: normal;
682 font-weight: 400;
683 font-size: 14px;
684 line-height: 18px;
685 }
686
687 .${prefix} .cardlist-Botoes .card-Botao .imagem-Botao span {
688 font-size: 14px;
689 line-height: 18px;
690 }
691
692 .${prefix}# .cardlist-Botoes .card-Botao .descricao-Botao .titulo-Botao {
693 font-size: 18px;
694 line-height: 24px;
695 }
696
697
698 .${prefix} .navegar-paginas {
699 margin: auto;
700 margin-top: 0;
701 margin-bottom: 0;
702 gap: 20px;
703 min-width: 1vw;
704 max-width: 55px;
705 }
706
707 .${prefix} #page-out {
708 /*position: relative;
709 overflow: hidden;
710 height: 440px;*/
711 }
712
713 .${prefix} .navegar-dim #buttons-dim-out {
714 overflow: hidden;
715 }
716
717 .${prefix} .navegar-dim #buttons-dim {
718 display: flex;
719 justify-content: flex-start;
720 gap: 16px;
721 }
722
723 .${prefix} .card-conhecer-Botoes {
724 width: 80vw !im;
725 height: 271px;
726 }
727
728 .${prefix} .card-conhecer-Botoes h2 {
729 font-size: 24px;
730 top: 145px;
731 left: 25px;
732 }
733
734 .${prefix} .card-conhecer-Botoes h3 {
735 left: 25px;
736 top: 25px;
737 font-size: 14px;
738 }
739
740 .${prefix} .card-conhecer-Botoes div {
741 position: relative;
742 top: 165px;
743 left: 25px;
744 }
745
746 html, body {
747 overflow-x: hidden;
748 }
749
750 body {
751 position: relative
752 }
753
754 .${prefix} .navegar-paginas .radio-page-buttons {
755 display: none;
756 }
757
758 .${prefix} .descricao-Botao .botao-tabela {
759 font-family: 'Petrobras Sans';
760 font-style: normal;
761 font-weight: 700;
762 font-size: 16px;
763 line-height: 160%;
764 display: flex;
765 align-items: center;
766 text-align: center;
767 color: #FFFFFF;
768 }
769 }
770
771 @media (max-width: 1366px) {
772 .${prefix} #page-out #page-in {
773 padding: 0;
774 }
775 }
776
777 @media (min-width: 1367px) {
778
779 .${prefix} {
780 display: flex;
781 flex-direction: column;
782 justify-content: center;
783 align-items: flex-start;
784 }
785
786 .${prefix} #page-out {
787 width: 100%;
788 }
789
790 .${prefix} #page-out #page-in {
791 width: 100%;
792 padding: 0;
793 }
794
795 .${prefix} .cardlist-Botoes {
796 display: flex;
797 justify-content: space-between;
798 }
799
800 .${prefix} .cardlist-Botoes .card-Botao {
801 width: 100%;
802 min-width: 331px;
803 }
804
805 .${prefix} .cardlist-Botoes .card-Botao .imagem-Botao {
806 width: 100%;
807 }
808
809 .${prefix} .navegar-paginas {
810 min-width: 100%;
811 margin-top: 48px;
812
813 }
814 }
815
816 @media screen and (min-width: 1920px) {
817 .${prefix} .navegar-paginas {
818 margin-top: 24px;
819 }
820 }
821</style>
822
823
824<script>
825
826 var listaTabelaJson = ${jsonFactoryUtil.looseSerializeDeep(tabelaPrecos)};
827 var listaTemasTabelaJson = ${jsonFactoryUtil.looseSerializeDeep(listaGlobalTemas)};
828 var prefixTabela = "${prefix}";
829 var temafiltroTabelas = "${labelVisaoGeral}";
830 var quantidadeBotoesTabela = listaTabelaJson.length;
831 var quantidadeAbasTabela = (quantidadeBotoesTabela/3)+1;
832
833
834 function filtrarLista(listaCap, tema) {
835 let filteredArray = listaCap.filter( (elemento) => {
836 return elemento.temas.find(cat => cat == tema);
837 });
838 return filteredArray;
839 }
840
841 function ordenarListaTabelas(listaCap) {
842 listaCap.sort( function (a , b){
843 if (a.temas.length == 0 && b.temas.length > 0) {
844 return -1;
845 }
846 if (a.temas.length == 0 && b.temas.length == 0) {
847 return a.numero < b.numero;
848 }
849 if (a.temas.length > 0 && b.temas.length > 0) {
850 return a.numero < b.numero;
851 }
852 return 0;
853 });
854 }
855
856 function renderizarCarrosselTabelas(sender) {
857 let result = "";
858 let lista = null;
859 if (sender != null){
860 temafiltroTabelas = sender.value;
861 } else {
862 temafiltroTabelas = "${labelVisaoGeral}";
863 }
864 ordenarListaTabelas(listaTabelaJson);
865
866 if (temafiltroTabelas == "${labelVisaoGeral}") {
867 lista = listaTabelaJson;
868 } else {
869 lista = filtrarLista(listaTabelaJson, temafiltroTabelas);
870 }
871 quantidadeBotoesTabela = lista.length;
872 quantidadeAbasTabela = (quantidadeBotoesTabela/3)+1;
873
874 //renderizarItensNavegacao(quantidadeAbasTabela,prefixTabela);
875 renderizarListaBotoes(lista, prefixTabela);
876 //atualizarParametrosCarrosselTabelas(quantidadeBotoesTabela, quantidadeAbasTabela);
877 }
878
879 function getTitleClassNameTabela(tema){
880 //TODO: Fazer parametrizavel
881 if (tema == "${labelVisaoGeral}"){
882 return "gasolina";
883 }
884 if (tema == "Gasolina"){
885 return "gasolina";
886 }
887 if (tema == "Diesel"){
888 return "diesel";
889 }
890 if (tema == "Gás de Cozinha (GLP)"){
891 return "gasCozinhaGLP";
892 }
893 if (tema == "Outros Produtos"){
894 return "institucional";
895 }
896
897 return "${labelVisaoGeral}";
898 }
899
900 function getTitleClassColorTabela(temaLocal){
901 //TODO: Fazer parametrizavel
902 let tema = getTitleClassDefaultNameTabela(temaLocal);
903 if (tema == "${labelVisaoGeral}"){
904 return "#2F2F2F";
905 }
906 if (tema == "Gasolina"){
907 return "#2F2F2F";
908 }
909 if (tema == "Diesel"){
910 return "#2F2F2F";
911 }
912 if (tema == "Gás de Cozinha (GLP)"){
913 return "#2F2F2F";
914 }
915 if (tema == "Outros Produtos"){
916 return "#2F2F2F";
917 }
918
919 return "#2F2F2F";
920 }
921
922
923 function getTitleClassDefaultNameTabela(tema){
924 let result = "${labelVisaoGeral}";
925 for (let i = 0; i < listaTemasTabelaJson.length; i++) {
926 if (listaTemasTabelaJson[i].temaTraducao == tema) {
927 result = listaTemasTabelaJson[i].nomeBR;
928 }
929 }
930 return result;
931 }
932
933 function setActiveButton(tema){
934 var color = '';
935 var backgroundColor = "#FFFFFF";
936
937 //TODO: Fazer parametrizavel
938 if (tema == "${labelVisaoGeral}"){
939 backgroundColor = "#525252";
940 } else if (tema == "Gasolina"){
941 backgroundColor = "#525252";
942 } else if (tema == "Diesel"){
943 backgroundColor = "#525252";
944 } else if (tema == "Gás de Cozinha (GLP)"){
945 backgroundColor = "#525252";
946 }
947
948 backgroundColor = "#525252";
949 }
950
951 function atualizarParametrosCarrosselTabelas(quantidadeBotoesTabela, quantidadeAbasTabela){
952 const elementoRaiz = document.querySelector(".${prefix}");
953 let panels = elementoRaiz.getElementsByClassName("carousel");
954 Array.from(panels).forEach(function(carousel){
955 carousel.style.width = parseInt(parseInt(quantidadeAbasTabela)*100)+'%';
956 });
957
958 let paineis = elementoRaiz.getElementsByClassName("painel");
959 Array.from(paineis).forEach(function(panel){
960 panel.style.width = parseInt(100/parseInt(quantidadeAbasTabela))+'%';
961 });
962 }
963
964
965 function renderizarListaBotoes(lista, prefixTabela){
966 let rootElement = document.querySelector('.'+prefixTabela);
967 let divPrincipal = rootElement.querySelector('.cardlist-Botoes');
968 divPrincipal.innerHTML = "";
969 const quantidadeBotoesTabela = lista.length;
970 let indice=0;
971
972
973 for (let i = 0; i < quantidadeBotoesTabela; i++) {
974 let divCap = renderDivBotaoTabela(lista[i],indice, prefixTabela);
975 divPrincipal.append(divCap);
976 }
977 }
978
979
980
981 function renderizarItensNavegacao(quantidadeAbasTabela, prefixTabela){
982 let rootElement = document.querySelector('.'+prefixTabela);
983 let div = rootElement.querySelector('.'+prefixTabela+'-Botoes-container-seletor');
984 div.innerHTML = "";
985
986 for (let i = 1; i <= quantidadeAbasTabela; i++) {
987 let liNav = renderizarItemNavegacao(i, prefixTabela);
988 div.append(liNav);
989 }
990 }
991
992
993 function renderDivBotaoTabela(Botao){
994 let rootElement = document.querySelector('.'+prefixTabela);
995 var temaBotao = "";
996 if (Botao.temas != null && Botao.temas.length > 0) {
997 temaBotao = Botao.temas[0];
998 }
999
1000 const indiceBotao = Botao.numero;
1001
1002 const divBotao = document.createElement('div');
1003 divBotao.setAttribute("class", "card-Botao");
1004 divBotao.setAttribute("data-dimensao", temaBotao === "" ? "${labelVisaoGeral}" : temaBotao);
1005
1006 const divImagemBotao = document.createElement('div');
1007 divImagemBotao.setAttribute("class", "imagem-Botao");
1008 divImagemBotao.setAttribute("sequenciaAtual", indiceBotao);
1009 divImagemBotao.setAttribute("categoria", temaBotao);
1010 //divImagemBotao.addEventListener("click", (e) => {openStories(divImagemBotao);});
1011
1012
1013 const divDimensaoBotao = document.createElement('div');
1014 if (temaBotao != null && temaBotao != '') {
1015 divDimensaoBotao.setAttribute("class", "dimensao-Botao");
1016 divDimensaoBotao.innerHTML = "<span style='color: "+getTitleClassColorTabela(temaBotao)+";' >"+temaBotao+"</span>"
1017 } else {
1018 divDimensaoBotao.style.display = 'none';
1019 }
1020
1021 const divDescricaoBotao = document.createElement('div');
1022 divDescricaoBotao.setAttribute("class", "descricao-Botao");
1023
1024 let temaPrincipal = temafiltroTabelas;
1025 if (Botao.temas.length != 0) {
1026 temaPrincipal = Botao.temas[0];
1027 }
1028
1029
1030 const tituloInforme = '<span class="botao-tabela" >'+Botao.titulo+'</span>';
1031 divDescricaoBotao.innerHTML = tituloInforme;
1032 if (Botao.urlTabelaPrecos != ""){
1033 let urlPdfTabela = Botao.urlTabelaPrecos;
1034 urlPdfTabela = urlPdfTabela.replace("&previewFileIndex=1", "");
1035 urlPdfTabela = urlPdfTabela.replace("?previewFileIndex=1", "");
1036 divDescricaoBotao.addEventListener("click", (e) => {
1037 window.open(
1038 urlPdfTabela,
1039 '_blank');});
1040 }
1041
1042 //divImagemBotao.append(divDimensaoBotao);
1043 //divBotao.append(divImagemBotao);
1044 divBotao.append(divDescricaoBotao);
1045
1046 return divBotao;
1047 }
1048
1049
1050
1051
1052 function renderizarItemNavegacao(indiceAba, prefixTabela){
1053 const radioPosition = document.createElement('input');
1054 radioPosition.setAttribute("name", "position");
1055 radioPosition.setAttribute("type", "radio");
1056 radioPosition.setAttribute("id", "cap"+indiceAba);
1057 radioPosition.setAttribute("value", indiceAba);
1058 if (indiceAba == 1) {
1059 radioPosition.setAttribute("checked", true);
1060 }
1061 radioPosition.setAttribute("onclick", "selectPanel()");
1062
1063 return radioPosition;
1064 }
1065
1066 function renderizarItemNavegacao(indiceAba, prefixTabela){
1067 const radioPosition = document.createElement('input');
1068 radioPosition.setAttribute("name", "position");
1069 radioPosition.setAttribute("type", "radio");
1070 radioPosition.setAttribute("id", "cap"+indiceAba);
1071 radioPosition.setAttribute("value", indiceAba);
1072 if (indiceAba == 1) {
1073 radioPosition.setAttribute("checked", true);
1074 }
1075 radioPosition.setAttribute("onclick", "selectPanel()");
1076
1077 return radioPosition;
1078 }
1079
1080
1081 function selectPanel() {
1082 const elementoRaiz = document.querySelector(".${prefix}");
1083 let panels = elementoRaiz.getElementsByClassName("painel");
1084 Array.from(panels).forEach(function(panel){
1085 panel.style.display = 'grid';
1086 });
1087 let elements = elementoRaiz.getElementsByName("position");
1088 Array.from(elements).forEach(function(element){
1089 if (element.checked) {
1090 let panels = elementoRaiz.getElementsByClassName("container-painel-"+1);
1091 Array.from(panels).forEach(function(panel){
1092 panel.style.marginLeft = parseInt(-(element.value-1)* (40) )+'%';
1093
1094 });
1095 }
1096 });
1097 }
1098
1099 function mainPageTabelas(){
1100 renderizarCarrosselTabelas();
1101 }
1102
1103 /*
1104 AUI().ready(function() {
1105 mainPageTabelas()
1106 });
1107 */
1108
1109 function mobileEnabled() {
1110 return window.innerWidth <= ${tamanhoTelaCelular};
1111 }
1112
1113 function mudarTextoDoTituloDaSecaoInformes(e) {
1114
1115 /*const titulo = document.getElementById("${prefix}-titulo-secao-informes");
1116 if (mobileEnabled()) {
1117 titulo.innerHTML = "labelConhecerBotoesMobile";
1118 } else {
1119 titulo.innerHTML = "labelConhecerBotoes";
1120 } */
1121 }
1122
1123 AUI().ready(function() {
1124
1125 window.addEventListener('resize', mudarTextoDoTituloDaSecaoInformes);
1126 window.addEventListener('load', mudarTextoDoTituloDaSecaoInformes);
1127
1128 // Define o estilo dos botões de filtro/dimensões
1129 function defineEstiloDosFiltrosTabela() {
1130 let rootElement = document.querySelector('.'+prefixTabela);
1131 let filtrosBtn = rootElement.querySelectorAll("input[type=button]");
1132 for (i = 0; i < filtrosBtn.length; ++i) {
1133 filtrosBtn[i].addEventListener("click", function(e) {
1134 if (!e.target.classList.contains("selected")) {
1135 e.target.classList.add("selected");
1136 for (j = 0; j < filtrosBtn.length; ++j) {
1137 if (filtrosBtn[j] != e.target) {
1138 filtrosBtn[j].classList.remove("selected");
1139 }
1140 }
1141 } else {
1142 //e.target.classList.remove("selected");
1143 }
1144 });
1145 }
1146 }
1147
1148
1149 // Retorna o tamanho de um Botao exposto (todos são iguais)
1150 function tamanhoDeUmBotao() {
1151 let capsExpostos = BotoesExpostos();
1152 if (capsExpostos != null && capsExpostos.length > 0) {
1153 let Botao = capsExpostos[0];
1154 return parseInt(getComputedStyle(Botao)["margin-right"]) + parseInt(getComputedStyle(Botao)["width"]);
1155 } else return 0;
1156 }
1157
1158 // Retorna o tamanho da view desconsiderando a margem
1159 function tamanhoDaView() {
1160 const elementoRaiz = document.querySelector(".${prefix}");
1161 return elementoRaiz.getElementById("page-out").offsetWidth;
1162 }
1163
1164 // Retorna a quantidade de Botoes que cabem numa página (área visível)
1165 function BotoesPorPagina() {
1166 let capPorPag = -1;
1167 if (window.matchMedia("(max-width: ${tamanhoTelaCelular}px)").matches) {
1168 capPorPag = 1;
1169 } else {
1170 capPorPag = 3;
1171 }
1172 return capPorPag;
1173 }
1174
1175 // Retorna uma lista contendo todos os Botoes expostos
1176 function BotoesExpostos() {
1177 let cards = new Array();
1178 const elementoRaiz = document.querySelector(".${prefix}");
1179 let cardsCap = elementoRaiz.getElementsByClassName("card-Botao");
1180 for (i = 0; i < cardsCap.length; ++i) {
1181 if (!cardsCap[i].classList.contains("collapse")) {
1182 cards.push(cardsCap[i]);
1183 }
1184 }
1185 return cards;
1186 }
1187
1188 function vaParaAPagina(indiceDaPagina) {
1189 let novaPosicao = indiceDaPagina * BotoesPorPagina() * tamanhoDeUmBotao() * -1;
1190 const elementoRaiz = document.querySelector(".${prefix}");
1191 elementoRaiz.querySelector("#page-in").style["left"] = "" + novaPosicao + "px";
1192 }
1193
1194 // Retorna a quantidade de paginas necessárias
1195 function paginasNecessarias() {
1196 return Math.ceil((BotoesExpostos().length * tamanhoDeUmBotao()) / (BotoesPorPagina() * tamanhoDeUmBotao()));
1197 }
1198
1199 // Gera botões de paginação conforme a quantidade de Botoes expostos
1200 function geraBotoesDePaginacao() {
1201 // Primeiro remove existentes
1202 const elementoRaiz = document.querySelector(".${prefix}");
1203 let pageButtonsArea = elementoRaiz.getElementsByClassName("radio-page-buttons")[0];
1204 if (!pageButtonsArea) {
1205 return;
1206 }
1207
1208 let child = pageButtonsArea.firstElementChild;
1209 while (child) {
1210 pageButtonsArea.removeChild(child);
1211 child = pageButtonsArea.firstElementChild;
1212 }
1213
1214 // Calcula quantidade de paginas
1215 let quantidadeDePáginasNecessárias = paginasNecessarias();
1216
1217 // Cria os botões de paginação (radiobutton) e adiciona na páginação
1218 let areaDePaginacao = elementoRaiz.getElementsByClassName("radio-page-buttons")[0];
1219 for (i = 0; i < quantidadeDePáginasNecessárias; ++i) {;
1220 element = document.createElement("input");
1221 element.type = "radio";
1222 element.name = "page";
1223 element.value = i;
1224 element.addEventListener("click", function(e) { vaParaAPagina(e.target.value); atualizaCoresDasSetas(e.target.value);});
1225 areaDePaginacao.appendChild(element);
1226 }
1227
1228 // Primeiro sempre está selecionado
1229 if (areaDePaginacao.children[0]) {
1230 areaDePaginacao.children[0].checked = true;
1231 }
1232 }
1233
1234 // Filtra os Botoes com a dimensao informada
1235 // i.e. collapsa todos os Botoes que não são da dimensao informada
1236 // Se a dimensao for none, exibe todos.
1237 function filtrarDimensaoTabelas(dimensao = null) {
1238 if (!dimensao) {
1239 dimensao = "${labelVisaoGeral}";
1240 }
1241 let rootElement = document.querySelector('.'+prefixTabela);
1242 let Botoes = rootElement.getElementsByClassName("card-Botao");
1243 for (i = 0; i < Botoes.length; ++i) {
1244 if (dimensao == "${labelVisaoGeral}" || Botoes[i].dataset.dimensao == dimensao) {
1245 Botoes[i].classList.remove("collapse");
1246 } else {
1247 Botoes[i].classList.add("collapse");
1248 }
1249 }
1250 }
1251
1252 // Aplica o comportamento em relação aos elementos da página para cada filtro/dimensão
1253 function defineComportamentoDosFiltrosTabela() {
1254 let rootElement = document.querySelector('.${prefix}');
1255 let filtrosBtn = rootElement.querySelectorAll("input[type=button]");
1256 for (i = 0; i < filtrosBtn.length; ++i) {
1257 filtrosBtn[i].addEventListener("click", function(e) {
1258 // Verifica se é um novo click na dimensao já selecionada
1259 let BotoesExp = BotoesExpostos();
1260
1261 filtrarDimensaoTabelas(e.target.value);
1262
1263 // Gera novamente os botões de paginação
1264 geraBotoesDePaginacao();
1265
1266 // Move para a primeira página
1267 let areaDeAnimacao = rootElement.querySelector("#page-in");
1268 let radioButtonDaPrimeiraPagina = rootElement.querySelectorAll("input[type=radio]")[0];
1269 if (radioButtonDaPrimeiraPagina) {
1270 areaDeAnimacao.classList.add("notransition");
1271 radioButtonDaPrimeiraPagina.click();
1272 setTimeout(function () {areaDeAnimacao.classList.remove('notransition')}, 1);
1273 }
1274
1275 // Move os botões no mobile
1276 if (window.matchMedia("(max-width: ${tamanhoTelaCelular}px)").matches) {
1277 let indiceSelecionado = Array.prototype.slice.call(filtrosBtn).indexOf(e.target);
1278 let distanciaMovidaAEsquerda = 0;
1279 let diff = 0;
1280 if (indiceSelecionado != 0) {
1281 diff = 120;
1282 }
1283 for (i = 0; i < indiceSelecionado; ++i) {
1284 distanciaMovidaAEsquerda += filtrosBtn[i].offsetWidth + parseInt(getComputedStyle(filtrosBtn[i])["margin-left"]);
1285 }
1286 rootElement.querySelector("#buttons-dim-out").style["left"] = "" + ((distanciaMovidaAEsquerda*-1 - diff)+ (indiceSelecionado ? 40 : 0)) + "px";
1287 }
1288 });
1289 }
1290 }
1291
1292 function atualizaCoresDasSetas(indiceSelecionado) {
1293 const elementoRaiz = document.querySelector(".${prefix}");
1294 let botoesDePaginacao = elementoRaiz.querySelectorAll("input[name=page]");
1295 let setaEsquerda = elementoRaiz.querySelector("#left-arrow");
1296 let setaDireita = elementoRaiz.querySelector("#right-arrow");
1297 if (indiceSelecionado == 0 && botoesDePaginacao.length > 1) {
1298 setaEsquerda.style.fill = "#D4D4D4";
1299 setaDireita.style.fill = "#008542";
1300 } else if (indiceSelecionado == 0 && indiceSelecionado == botoesDePaginacao.length-1) {
1301 setaEsquerda.style.fill = "#D4D4D4";
1302 setaDireita.style.fill = "#D4D4D4";
1303 } else if(indiceSelecionado == botoesDePaginacao.length-1) {
1304 setaEsquerda.style.fill = "#008542";
1305 setaDireita.style.fill = "#D4D4D4";
1306 } else {
1307 setaEsquerda.style.fill = "#008542";
1308 setaDireita.style.fill = "#008542";
1309 }
1310 }
1311
1312 // Utilizada nas três funções de movimentação do CarrosselTabelas
1313 var xPositionOnMouseDown = null;
1314
1315 function CarrosselTabelasTouchStart(e) {
1316 const elementoRaiz = document.querySelector(".${prefix}");
1317 let pageIn = elementoRaiz.querySelector("#page-in");
1318 xPositionOnMouseDown = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
1319 lastPositionPageInLeft = pageIn.offsetLeft;
1320 pageIn.classList.add("notransition");
1321 }
1322
1323 function CarrosselTabelasTouchEnd(e) {
1324 const elementoRaiz = document.querySelector(".${prefix}");
1325
1326 if (!elementoRaiz){
1327 return;
1328 }
1329
1330 let pageIn = elementoRaiz.querySelector("#page-in");
1331 xPositionOnMouseDown = null;
1332 setTimeout(function () {pageIn.classList.remove('notransition')}, 1);
1333 if (pageIn.offsetLeft > 0) {
1334 pageIn.style["left"] = "0px";
1335 return;
1336 }
1337 if (Math.abs(pageIn.offsetLeft) > (pageIn.offsetWidth - tamanhoDeUmBotao())) {
1338 pageIn.style["left"] = "" + (pageIn.offsetWidth - tamanhoDeUmBotao())*-1 + "px";
1339 }
1340 }
1341
1342 function CarrosselTabelasTouchMove(e) {
1343 const elementoRaiz = document.querySelector(".${prefix}");
1344 if (!elementoRaiz){
1345 return;
1346 }
1347 let pageIn = document.querySelector(".${prefix}").querySelector("#page-in");
1348 let botoesDePaginacao = elementoRaiz.querySelectorAll("input[name=page]");
1349 if (!xPositionOnMouseDown) {
1350 return;
1351 }
1352
1353 let newPosition = (e.type.includes('mouse') ? e.clientX : e.touches[0].clientX) - xPositionOnMouseDown + lastPositionPageInLeft;
1354 pageIn.style["left"] = "" + newPosition + "px";
1355
1356 let indiceDaPagina = Math.floor(Math.abs(newPosition) / (BotoesPorPagina()*tamanhoDeUmBotao()))
1357 botoesDePaginacao[indiceDaPagina].checked = true;
1358 atualizaCoresDasSetas(indiceDaPagina);
1359 }
1360
1361 function defineComportamentoDeRolagemPorMouseNoCarroselTabela() {
1362
1363 let pageIn = document.querySelector(".${prefix}").querySelector("#page-in");
1364 let lastPositionPageInLeft = pageIn.offsetLeft;
1365 let xPositionOnMouseDown = null;
1366
1367 // Comportamento Mobile
1368 pageIn.addEventListener("touchstart", CarrosselTabelasTouchStart);
1369 document.addEventListener("touchend", CarrosselTabelasTouchEnd);
1370 document.addEventListener("touchmove", CarrosselTabelasTouchMove);
1371
1372 // Comportamento Desktop
1373 pageIn.addEventListener('mousedown', CarrosselTabelasTouchStart);
1374 document.addEventListener('mouseup', CarrosselTabelasTouchEnd);
1375 document.addEventListener('mousemove', CarrosselTabelasTouchMove);
1376 document.addEventListener('mouseleave', CarrosselTabelasTouchEnd);
1377
1378
1379 window.onbeforeunload = function () {
1380 document.removeEventListener("touchend", CarrosselTabelasTouchEnd);
1381 document.removeEventListener("touchmove", CarrosselTabelasTouchMove);
1382
1383 // Comportamento Desktop
1384 document.removeEventListener('mouseup', CarrosselTabelasTouchEnd);
1385 document.removeEventListener('mousemove', CarrosselTabelasTouchMove);
1386 document.removeEventListener('mouseleave', CarrosselTabelasTouchEnd);
1387
1388 document.removeEventListener("touchend", carrosselTouchEndInformes);
1389 document.removeEventListener("touchmove", carrosselTouchMoveInformes);
1390 document.removeEventListener('mouseup', carrosselTouchEndInformes);
1391 document.removeEventListener('mousemove', carrosselTouchMoveInformes);
1392 document.removeEventListener('mouseleave', carrosselTouchEndInformes);
1393 }
1394 }
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420 // Utilizada nas três funções de movimentação da div de categorias
1421 var xPositionOnMouseDownCateg = null;
1422 var lastPositionPageInLeftCateg = 0;
1423
1424 function tamanhoMedio(){
1425 return 100;
1426 }
1427
1428 function categoriasTabelaTouchStart(e) {
1429 const elementoRaiz = document.querySelector(".${prefix}");
1430 let ElementCategorias = elementoRaiz.querySelector("#buttons-dim-out");
1431 xPositionOnMouseDownCateg = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
1432 lastPositionPageInLeftCateg = ElementCategorias.offsetLeft;
1433 ElementCategorias.classList.add("notransition");
1434 }
1435
1436 function categoriasTabelaTouchEnd(e) {
1437 const elementoRaiz = document.querySelector(".${prefix}");
1438 let ElementCategorias = elementoRaiz.querySelector("#buttons-dim-out");
1439 xPositionOnMouseDownCateg = null;
1440 setTimeout(function () {ElementCategorias.classList.remove('notransition')}, 1);
1441 if (ElementCategorias.offsetLeft > 0) {
1442 ElementCategorias.style["left"] = "0px";
1443 return;
1444 }
1445 if (Math.abs(ElementCategorias.offsetLeft) > (ElementCategorias.offsetWidth - tamanhoMedio())) {
1446 ElementCategorias.style["left"] = "" + (ElementCategorias.offsetWidth - tamanhoMedio())*-1 + "px";
1447 }
1448 }
1449
1450 function categoriasTabelaTouchMove(e) {
1451 const elementoRaiz = document.querySelector(".${prefix}");
1452 let ElementCategorias = elementoRaiz.querySelector("#buttons-dim-out");
1453 if (!xPositionOnMouseDownCateg) {
1454 return;
1455 }
1456 let newPosition = (e.type.includes('mouse') ? e.clientX : e.touches[0].clientX) - xPositionOnMouseDownCateg + lastPositionPageInLeftCateg;
1457 ElementCategorias.style["left"] = "" + newPosition + "px";
1458
1459 }
1460
1461 function defineComportamentoDeRolagemPorMouseEmCategoriasTabela() {
1462
1463
1464 let ElementCategorias = document.querySelector(".${prefix}").querySelector("#buttons-dim-out");
1465 let lastPositionPageInLeftCateg = ElementCategorias.offsetLeft;
1466 let xPositionOnMouseDownCateg = null;
1467
1468 // Comportamento Mobile
1469 ElementCategorias.addEventListener("touchstart", categoriasTabelaTouchStart);
1470 document.addEventListener("touchend", categoriasTabelaTouchEnd);
1471 document.addEventListener("touchmove", categoriasTabelaTouchMove);
1472
1473 // Comportamento Desktop
1474 //ElementCategorias.addEventListener('mousedown', categoriasTabelaTouchStart);
1475 //document.addEventListener('mouseup', categoriasTabelaTouchEnd);
1476 //document.addEventListener('mousemove', categoriasTabelaTouchMove);
1477 //document.addEventListener('mouseleave', categoriasTabelaTouchEnd);
1478
1479
1480 window.onbeforeunload = function () {
1481 document.removeEventListener("touchstart", categoriasTabelaTouchStart);
1482 document.removeEventListener("touchend", categoriasTabelaTouchEnd);
1483 document.removeEventListener("touchmove", categoriasTabelaTouchMove);
1484
1485
1486 // Comportamento Desktop
1487 //document.removeEventListener('mouseup', categoriasTabelaTouchEnd);
1488 //document.removeEventListener('mousemove', categoriasTabelaTouchMove);
1489 //document.removeEventListener('mouseleave', categoriasTabelaTouchEnd);
1490
1491
1492 }
1493 }
1494
1495
1496
1497 function scrollToTabelaPrecos(){
1498 setTimeout(function(){
1499 document.getElementById("${prefix}-titulo-secao-tabela-preco").scrollIntoView();
1500 }, 1000);
1501 }
1502
1503 window.addEventListener('hashchange',() => {
1504 var urlAtual = window.location.href;
1505
1506 if (urlAtual.endsWith("#glp")) {
1507 elementoRaiz.querySelector("#gas-cozinha-tab-btn").click();
1508 scrollToTabelaPrecos();
1509 } else if (urlAtual.endsWith("#diesel")) {
1510 elementoRaiz.querySelector("#diesel-tab-btn").click();
1511 scrollToTabelaPrecos();
1512 } else if (urlAtual.endsWith("#outros")) {
1513 elementoRaiz.querySelector("#outros-tab-btn").click();
1514 scrollToTabelaPrecos();
1515 } else if (urlAtual.endsWith("#gasolina")) {
1516 elementoRaiz.querySelector("#gasolina-tab-btn").click();
1517 scrollToTabelaPrecos();
1518 } else {
1519 elementoRaiz.querySelector("#gasolina-tab-btn").click();
1520 }
1521 });
1522
1523
1524
1525 // Aplicando
1526 mainPageTabelas();
1527 defineEstiloDosFiltrosTabela();
1528 defineComportamentoDosFiltrosTabela();
1529
1530 defineComportamentoDeRolagemPorMouseNoCarroselTabela();
1531 defineComportamentoDeRolagemPorMouseEmCategoriasTabela();
1532
1533 // Seleciona primeiro botão
1534 const elementoRaiz = document.querySelector(".${prefix}");
1535
1536 var urlAtual = window.location.href;
1537 //var anchorLinkTabelas = i.querySelector("#");
1538
1539
1540 if (urlAtual.endsWith("#glp")) {
1541 elementoRaiz.querySelector("#gas-cozinha-tab-btn").click();
1542 scrollToTabelaPrecos();
1543 } else if (urlAtual.endsWith("#diesel")) {
1544 elementoRaiz.querySelector("#diesel-tab-btn").click();
1545 scrollToTabelaPrecos();
1546 } else if (urlAtual.endsWith("#outros")) {
1547 elementoRaiz.querySelector("#outros-tab-btn").click();
1548 scrollToTabelaPrecos();
1549 } else if (urlAtual.endsWith("#gasolina")) {
1550 elementoRaiz.querySelector("#gasolina-tab-btn").click();
1551 scrollToTabelaPrecos();
1552 } else {
1553 elementoRaiz.querySelector("#gasolina-tab-btn").click();
1554 }
1555
1556
1557
1558 });
1559
1560</script>
1561<noscript>Your browser does not support JavaScript!</noscript>
Um inesperado erro ocorreu.
Um inesperado erro ocorreu.