1<#--
2Add elements from the sidebar to define your template. Type "${" to use the
3autocomplete feature.
4-->
5<#include "${templatesPath}/1975602" />
6
7<#assign contentNumber = randomNumber(33) >
8
9<#assign chronoOrder = Fieldset59611434 />
10<#assign timelineId = 1 />
11<#assign timelineItemId = 1 />
12<#assign titleTag = Select38155997.getData() />
13<#if !(titleTag??) || !(titleTag?trim?has_content) >
14 <#assign titleTag = "h2" />
15</#if>
16
17<div class="timeline-component-${contentNumber}">
18 <div class="petro-timeline">
19
20 <#if chronoOrder.getSiblings()?has_content>
21
22 <div class="petro-timeline-container">
23
24 <#list chronoOrder.getSiblings() as chronoOrderItems>
25
26 <#assign title = chronoOrderItems.Fieldset12586647.Text46017877 />
27 <#assign timelineEvents = chronoOrderItems.Fieldset12878233 />
28
29 <div class="petro-timeline-item" id='tl${timelineId}'>
30 <#if (title.getData())??>
31 <div class="title-container">
32 <div class="title-wrapper">
33 <${titleTag} class="timeline-title h1">${title.getData()}</${titleTag}>
34 <span class='mischievous h1'>—</span>
35 </div>
36 </div>
37 </#if>
38
39 <#if timelineEvents.getSiblings()?has_content>
40
41 <#list timelineEvents.getSiblings() as events>
42
43 <#assign subtitle = events.Text16439035 />
44 <#assign description = events.RichText15834174 />
45
46 <div class="timeline-section" id='ts${timelineItemId}'>
47 <#if (subtitle.getData())?? && subtitle.getData() != "">
48 <h3 class="timeline-subtitle"> ${subtitle.getData()} </h3>
49 </#if>
50 <#if (description.getData())??>
51 <div class="timeline-description paragraph-sm-regular"> ${description.getData()} </div>
52 </#if>
53 </div>
54 <#assign timelineItemId = timelineItemId + 1 />
55 </#list>
56 </#if>
57 </div>
58
59 <#assign timelineId = timelineId + 1 />
60 </#list>
61 </div>
62
63 <div class="timeline-events-section">
64
65 <#assign timelineId = 1 />
66 <#assign timelineItemId = 1 />
67
68 <#list chronoOrder.getSiblings() as chronoOrderItems>
69
70
71 <#assign title = chronoOrderItems.Fieldset12586647.Text46017877 />
72 <#assign timelineEvents = chronoOrderItems.Fieldset12878233 />
73
74 <div class="timeline-events-item" id='tl${timelineId}'>
75 <#if (title.getData())??>
76 <p class="event-title h4">${title.getData()}</p>
77 </#if>
78
79 <div class="timeline-events-marks">
80
81 <#list timelineEvents.getSiblings() as events>
82 <span class="timeline-mark" id='ts${timelineItemId}'></span>
83 <#assign timelineItemId = timelineItemId + 1 />
84 </#list>
85 </div>
86 </div>
87 <#assign timelineId = timelineId + 1 />
88 </#list>
89 </div>
90
91 <div class="timeline-buttons-section">
92 <div class="marks-buttons">
93 <button class="mark-button-to-left active">
94 <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
95 <path d="M12.5 6H1.5M1.5 6L6 1.5M1.5 6L6 10.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
96 </svg>
97 </button>
98 <button class="mark-button-to-right active">
99 <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
100 <path d="M1.5 6H12.5M12.5 6L8 1.5M12.5 6L8 10.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
101 </svg>
102 </button>
103 </div>
104 <div class="end-begin-buttons-section">
105 <button class="to-end-button active">
106 <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
107 <path d="M1.5 6H12.5M12.5 6L8 1.5M12.5 6L8 10.5" stroke="var(--color-primary-solid-to-bright-100, var(--color-primary-medium))" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
108 </svg>
109 </button>
110 <button class="to-begin-button">
111 <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
112 <path d="M1.5 6H12.5M12.5 6L8 1.5M12.5 6L8 10.5" stroke="var(--color-primary-solid-to-bright-100, var(--color-primary-medium))" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
113 </svg>
114 </button>
115 </div>
116 </div>
117 </#if>
118 </div>
119</div>
120
121<style>
122
123 .timeline-component-${contentNumber} {
124 display: flex;
125 justify-content: center;
126 }
127
128
129 .timeline-component-${contentNumber} * {
130 font-family: var(--font-family-base);
131 color: var(--color-neutral-dark-to-bright-200, var(--color-neutral-700));
132 margin: 0;
133 padding: 0;
134 }
135
136 .timeline-component-${contentNumber} .petro-timeline {
137 display: flex;
138 flex-direction: column;
139 min-height: 480px;
140 width: 100%;
141 max-width: 1440px;
142 overflow-x: hidden;
143 padding: var(--space-huge) 0 96px;
144 }
145
146 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container {
147 display: flex;
148 flex-direction: column;
149 position: relative;
150 min-height: 95px;
151
152 }
153
154 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container.has-subtitle .petro-timeline-item .timeline-section {
155 height: 146px;
156 }
157
158
159 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item {
160 display: none;
161 }
162
163 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-section {
164 display: none;
165 flex-direction: column;
166 justify-content: flex-start;
167 gap: var(--space-md);
168 height: 98px;
169 width: 100%;
170 max-width: 632px;
171 overflow: auto;
172 scrollbar-color: var(--border-color-accent) var(--border-color-mid);
173 scrollbar-width: thin;
174 }
175
176
177 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item
178 .timeline-section::-webkit-scrollbar {
179 height: 4px;
180 width: 4px;
181 }
182
183 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item
184 .timeline-section::-webkit-scrollbar-track {
185 background: var(--border-color-mid);
186 border-radius: 2px;
187 width: 4px;
188 }
189
190 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item
191 .timeline-section::-webkit-scrollbar-thumb {
192 background: var(--border-color-accent);
193 border-radius: 2px;
194 width: 4px;
195 }
196
197
198 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item
199 .timeline-section .timeline-subtitle {
200 max-height: 68px;
201 min-height: 22px;
202 overflow: hidden;
203 }
204
205 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-section.active {
206 display: flex;
207 }
208
209 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .title-container {
210 padding-right: var(--space-lg);
211 min-width: 403px;
212 text-align: right;
213 }
214
215 .timeline-component-${contentNumber} .title-wrapper {
216 text-align: left;
217 justify-self: end;
218 }
219
220 .timeline-component-${contentNumber} .mischievous {
221 color: var(--color-secondary-medium, #FDC82F);
222 }
223
224
225 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-subtitle {
226 display: -webkit-box;
227 -webkit-line-clamp: 1;
228 -webkit-box-orient: vertical;
229 overflow: hidden;
230 }
231
232 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description {
233 width: 100%;
234 max-width: 632px;
235 line-height: 150%;
236 display: -webkit-box;
237 -webkit-line-clamp: 4;
238 -webkit-box-orient: vertical;
239 overflow: hidden;
240 }
241
242 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description::-webkit-scrollbar {
243 width: var(--size-xs, 16px);
244 }
245
246 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description::-webkit-scrollbar-track {
247 background-color: #F8F8F8;
248 border: 1px solid var(--border-color-light, #EEEEEE);
249 }
250
251 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description::-webkit-scrollbar-thumb {
252 background-color: #008542;
253 opacity: 0.5;
254 border-radius: var(--border-radius-lg);
255 border: 4px solid transparent;
256 background-clip: content-box;
257 }
258
259 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description::-webkit-scrollbar-thumb:hover {
260 opacity: 0.8;
261 }
262
263 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description {
264 scrollbar-width: auto; /* ou "thin" */
265 scrollbar-color: #008542 #F8F8F8;
266 }
267
268 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item
269 .timeline-description * {
270 margin: 0;
271 padding: 0;
272 }
273
274 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item
275 .timeline-description p {
276 padding-right: 9px;
277 }
278
279 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item.active {
280 display: flex;
281 }
282
283 /* EVENTS SECTION */
284 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section {
285 display: flex;
286 margin: var(--space-lg, 32px) 0 var(--space-lg, 32px) 400px;
287 overflow-x: hidden;
288 cursor: grab;
289 scroll-behavior: smooth;
290 align-items: end;
291 /* height: 74px; */
292 }
293
294.timeline-component-${contentNumber} .petro-timeline .timeline-events-section.grab {
295 scroll-behavior: initial;
296}
297
298 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section:active {
299 cursor: grabbing;
300 }
301
302 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item {
303 display: flex;
304 flex-direction: column;
305 min-width: 180px;
306 pointer-events: none;
307 flex-shrink: 0;
308 }
309
310 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item .event-title {
311 margin-bottom: var(--space-xxs);
312 color: var(--color-neutral-bright-to-dark-800, var(--color-neutral-700));
313 max-width: 90%;
314 }
315
316 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item.active .event-title {
317 color: var(--color-primary-solid-to-bright-100, var(--color-primary-medium));
318
319 }
320 /* verificar tokens */
321 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item .timeline-events-marks {
322 list-style: none;
323 display: flex;
324 align-items: flex-end;
325 gap: var(--space-xxs);
326 border-top: var(--color-neutral-700) solid 2px;
327 height: 35px;
328 }
329
330 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item.active .timeline-events-marks {
331 border-top: var(--color-primary-solid-to-bright-100, var(--color-primary-medium)) solid 2px;
332 }
333
334 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item .timeline-events-marks {
335 padding: var(--space-xxxs);
336 padding-left: 0;
337 }
338
339 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item .timeline-events-marks span {
340 display: flex;
341 border: var(--color-neutral-bright-to-dark-800, var(--color-neutral-700)) solid 1px;
342 border-radius: 50%;
343 width: 16px;
344 height: 16px;
345 cursor: pointer;
346 pointer-events: all;
347 flex-shrink: 0;
348 }
349
350 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item .timeline-events-marks:last-child {
351 padding-right: 25px;
352 }
353
354
355 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section .timeline-events-item .timeline-events-marks span.active {
356 border: var(--color-primary-solid-to-bright-100, var(--color-primary-medium)) solid 1px;
357 background-color: var(--color-primary-solid-to-bright-100, var(--color-primary-medium));
358 }
359
360 /* buttons */
361 .timeline-component-${contentNumber} .timeline-buttons-section {
362 display: flex;
363 justify-content: space-between;
364 margin-left: 400px;
365 width: calc(100% - 400px);
366 height: 32px;
367 }
368
369 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons {
370 display: flex;
371 gap: var(--space-xxs);
372 }
373
374 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons button:not(.active) {
375 opacity: 0.5;
376 }
377
378 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons button {
379 display: flex;
380 align-items: center;
381 justify-content: center;
382 width: 32px;
383 height: 32px;
384 border-radius: 50%;
385 border: var(--color-neutral-bright-to-dark-800, var(--color-neutral-700)) solid 1px;
386 background-color: transparent;
387 pointer-events: none;
388 }
389
390 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons button svg {
391 stroke: var(--color-neutral-bright-to-dark-800, var(--color-neutral-700));
392 }
393 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons button:active{
394 transform: scale(0.98)
395 }
396
397 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons button.active {
398 border: var(--color-primary-solid-to-bright-100, var(--color-primary-medium)) solid 1px;
399 pointer-events: all;
400 }
401
402 .timeline-component-${contentNumber} .timeline-buttons-section .marks-buttons button.active svg {
403 stroke: var(--color-primary-solid-to-bright-100, var(--color-primary-medium));
404 }
405
406 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section {
407 width: 400px;
408 display: flex;
409 }
410
411 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section button {
412 display: none;
413 align-items: center;
414 justify-content: center;
415 gap: var(--space-xxs);
416 width: 125px;
417 height: 32px;
418 padding: 5px;
419 color: var(--color-primary-solid-to-bright-100, var(--color-primary-medium));
420 border: var(--color-primary-solid-to-bright-100, var(--color-primary-medium)) solid 1px;
421 background-color: transparent;
422 border-radius: 25px;
423 margin-right: 25%;
424 }
425
426 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section button:active{
427 transform: scale(0.98)
428 }
429
430 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section button.active{
431 display: flex;
432 }
433
434 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section .to-begin-button svg {
435 transform: rotate(180deg);
436 }
437
438 @media screen and (max-width: 1024px) {
439 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-title {
440 width: 100%;
441 max-width: 632px;
442 text-align: left;
443 }
444
445 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .title-container {
446 margin-bottom: var(--space-md);
447 width: 100%;
448 max-width: 632px;
449 }
450
451 .timeline-component-${contentNumber} .title-wrapper {
452 justify-self: start;
453 }
454
455 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item {
456 display: none;
457 flex-direction: column;
458 align-items: center;
459 justify-content: center;
460 width: 100%;
461 }
462
463 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section {
464 margin: var(--space-lg) auto var(--space-lg);
465 max-width: 632px;
466 }
467
468 .timeline-component-${contentNumber} .timeline-buttons-section {
469 max-width: 632px;
470 width: 100%;
471 margin: auto;
472 }
473
474 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section {
475 width: 200px;
476 justify-content: flex-end;
477 }
478 }
479
480 @media screen and (max-width: 767px) {
481
482 .timeline-component-${contentNumber} .petro-timeline {
483 padding: var(--space-xl, 40px) 0;
484 min-height: unset;
485 }
486
487 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item {
488 padding: 0 25px;
489 }
490
491 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-description {
492 -webkit-line-clamp: unset;
493 overflow-y: scroll;
494 line-height: 120%;
495 }
496
497 .timeline-component-${contentNumber} .petro-timeline .petro-timeline-container .petro-timeline-item .timeline-title {
498 min-width: 0;
499 }
500
501 .timeline-component-${contentNumber} .petro-timeline .timeline-events-section {
502 padding: 0 25px;
503 max-width: 100%;
504 }
505
506 .timeline-component-${contentNumber} .timeline-buttons-section {
507 padding: 0 25px;
508 }
509
510 .timeline-component-${contentNumber} .timeline-buttons-section {
511 margin: 0 auto;
512 }
513
514 .timeline-component-${contentNumber} .timeline-buttons-section .end-begin-buttons-section button {
515 margin-right: 0;
516 }
517 }
518</style>
519
520<script>
521
522
523function setTimelineDates${contentNumber}() {
524 const petroTimeline = document.querySelector('.petro-timeline .petro-timeline-container');
525 const petroTimelineItems = petroTimeline.querySelectorAll('.petro-timeline-item');
526 const petroTimelineItemsSections = petroTimeline.querySelectorAll('.timeline-section');
527 const petroTimelineEvents = document.querySelector('.petro-timeline .timeline-events-section');
528 const timelineEventsMarks = document.querySelectorAll('.timeline-events-item .timeline-events-marks .timeline-mark');
529 const buttonLeft = document.querySelector('.mark-button-to-left');
530 const buttonRight = document.querySelector('.mark-button-to-right');
531 const buttonToEnd = document.querySelector('.to-end-button');
532 const buttonToBegin = document.querySelector('.to-begin-button');
533 const rightArrow = buttonToEnd.querySelector('svg');
534
535 if (petroTimeline.querySelector('.timeline-subtitle')) {
536 petroTimeline.classList.add('has-subtitle');
537 }
538
539
540 // SLIDER EVENTS
541 let mouseOrTouchDown = false;
542 let startX, scrollLeft;
543
544 const startDragging = (e) => {
545 mouseOrTouchDown = true;
546 petroTimelineEvents.classList.add('grab')
547 startX = e.pageX ? e.pageX - petroTimelineEvents.offsetLeft : e.touches[0].clientX - petroTimelineEvents.offsetLeft;
548 scrollLeft = petroTimelineEvents.scrollLeft;
549 };
550
551 const stopDragging = (event) => {
552 mouseOrTouchDown = false;
553 petroTimelineEvents.classList.remove('grab')
554 };
555
556 petroTimelineEvents.addEventListener('mousemove', (e) => {
557 e.preventDefault();
558 if(!mouseOrTouchDown) { return; }
559 const x = e.pageX - petroTimelineEvents.offsetLeft;
560 const scroll = x - startX;
561 petroTimelineEvents.scrollLeft = scrollLeft - scroll;
562
563 });
564
565
566 petroTimelineEvents.addEventListener('touchmove', (e) => {
567 e.preventDefault();
568
569 if(!mouseOrTouchDown) { return; }
570 const x = e.touches[0].clientX - petroTimelineEvents.offsetLeft;
571 const scroll = x - startX;
572 petroTimelineEvents.scrollLeft = scrollLeft - scroll;
573
574 });
575
576 // actives indexes
577 let timelineIndex = 0, timelineItemIndex = 0;
578
579 const changeMarks = (e) => {
580 let elementClicked = e.target;
581 let elementParent = elementClicked.parentElement.parentElement;
582
583 petroTimelineItems.forEach((item, index) => {
584 if (item.id === elementParent.id) {
585 timelineIndex = index;
586 }
587 });
588
589
590 petroTimelineItemsSections.forEach((item, index) => {
591 if (item.id === elementClicked.id) {
592 timelineItemIndex = index;
593 }
594 });
595
596 setActiveTimeline();
597
598 }
599
600
601 const scrollToActive = (scrollItem) => {
602 petroTimelineEvents.scrollTo(scrollItem, 0)
603 }
604
605 const setActiveTimeline = () => {
606 let scrollItem = 0;
607
608 petroTimelineItems.forEach((item, index) => {
609 if (+index === timelineIndex) {
610 item.classList.add('active');
611 scrollItem = index * 180;
612 } else {
613 item.classList.remove('active');
614 }
615 });
616
617 petroTimelineItemsSections.forEach((item, index) => {
618 if (+index === timelineItemIndex) {
619 item.classList.add('active');
620 } else {
621 item.classList.remove('active');
622 }
623 });
624
625 petroTimelineEvents.querySelectorAll('.timeline-events-item').forEach((item, index) => {
626 if (index === timelineIndex) {
627 item.classList.add('active');
628 } else {
629 item.classList.remove('active');
630 }
631 });
632
633 timelineEventsMarks.forEach((item, index) => {
634 if (index === timelineEventsMarks.length - 1) {
635 buttonToEnd.classList.add('active')
636 buttonToBegin.classList.remove('active')
637 } else {
638 buttonToEnd.classList.remove('active')
639 buttonToBegin.classList.add('active')
640 }
641
642 if (index === timelineItemIndex) {
643 item.classList.add('active');
644 } else {
645 item.classList.remove('active');
646 }
647 });
648
649 if (timelineIndex === petroTimelineItems.length - 1) {
650 buttonToEnd.classList.remove('active');
651 buttonToBegin.classList.add('active');
652 } else {
653 buttonToEnd.classList.add('active');
654 buttonToBegin.classList.remove('active');
655 }
656
657 if (timelineItemIndex === 0) {
658 buttonLeft.classList.remove('active')
659 } else if (!buttonLeft.classList.contains('active')) {
660 buttonLeft.classList.add('active')
661 }
662
663 if (timelineItemIndex === timelineEventsMarks.length - 1) {
664 buttonRight.classList.remove('active')
665 } else if (!buttonRight.classList.contains('active')) {
666 buttonRight.classList.add('active')
667 }
668
669 scrollToActive(scrollItem);
670 }
671
672 const backTimelineItem = () => {
673 timelineItemIndex--;
674 if (timelineItemIndex < 0) {
675 timelineItemIndex = 0;
676 return
677 }
678
679 timelineEventsMarks[timelineItemIndex].click()
680 setActiveTimeline();
681
682 }
683
684 const nextTimelineItem = () => {
685 timelineItemIndex++;
686
687 if (timelineItemIndex > (petroTimelineItemsSections.length - 1)) {
688 timelineItemIndex = petroTimelineItemsSections.length - 1;
689 return
690 }
691
692 timelineEventsMarks[timelineItemIndex].click()
693 setActiveTimeline();
694
695 }
696
697 const toBeginItem = () => {
698 timelineEventsMarks[0].click()
699 setActiveTimeline();
700
701 }
702
703 const toEndItem = () => {
704 timelineItemIndex = petroTimelineItemsSections.length - 1;
705
706 timelineEventsMarks[timelineItemIndex].click()
707 setActiveTimeline();
708
709 }
710
711
712 buttonToEnd.innerHTML = <#if themeDisplay.getLanguageId() == 'pt_BR'> "Ir para o final " <#else> "Go to end" </#if>
713 /* <#if themeDisplay.getLanguageId() == 'pt_BR'> "Ir para " <#else> "Go to " </#if> +
714 petroTimelineItems[petroTimelineItems.length - 1].firstChild.nextElementSibling.innerHTML */
715 buttonToEnd.insertAdjacentElement('beforeend', rightArrow)
716 buttonToBegin.innerHTML = buttonToBegin.innerHTML + <#if themeDisplay.getLanguageId() == 'pt_BR'> "Ir para o início" <#else> "Go to begin" </#if>
717 /* buttonToBegin.innerHTML + <#if themeDisplay.getLanguageId() == 'pt_BR'> "Ir para " <#else> "Go to " </#if> +
718 petroTimelineItems[0].firstChild.nextElementSibling.innerHTML */
719
720
721 // Add the event listeners
722 petroTimelineEvents.addEventListener('mousedown', startDragging, false);
723 petroTimelineEvents.addEventListener('mouseup', stopDragging, false);
724 petroTimelineEvents.addEventListener('mouseleave', stopDragging, false);
725 petroTimelineEvents.addEventListener('touchstart', startDragging, false);
726 petroTimelineEvents.addEventListener('touchend', stopDragging, false);
727 petroTimelineEvents.addEventListener('touchcancel', stopDragging, false);
728 buttonRight.addEventListener('click', nextTimelineItem);
729 buttonLeft.addEventListener('click', backTimelineItem);
730 buttonToEnd.addEventListener('click', toEndItem);
731 buttonToBegin.addEventListener('click', toBeginItem);
732
733 timelineEventsMarks.forEach(marks => {
734 marks.addEventListener('click', changeMarks)
735 });
736
737 // set firsts actives
738 setActiveTimeline();
739}
740
741setTimelineDates${contentNumber}();
742
743</script>