https://www.exeliatech.com/wp-content/plugins/b-timeline//public/assets/js/public.js?ver=2.0.2

1jQuery(document).ready(function ($) {
2  let tlDataId = $(".bp_titleline");
3
4  // console.log(tlDataId);
5  // tlDataId.map(function (index, item) {
6  //   console.log(item);
7  // });
8
9  // console.log(timelineData);
10  tlDataId.map((index, timeline_item) => {
11    const timelineData = $(timeline_item).data("timeline");
12    timeline_item.removeAttribute("data-timeline");
13
14    if (!timelineData) return false;
15
16    const {
17      timeline_type,
18      date_location,
19      item_datas,
20      start_item,
21      move_item,
22      visible_items,
23      vertica_trigger,
24      rtl_mode,
25      content_position = "",
26    } = timelineData;
27
28    $(timelineData).removeAttr("data-timeline");
29    // console.log({ timeline_type })
30    $(timeline_item).addClass(`content_${timeline_type}_${content_position}`);
31
32    $(timeline_item).timeline({
33      mode: timeline_type || "vertical",
34      horizontalStartPosition: date_location,
35      forceVerticalMode: 600,
36      verticalStartPosition: date_location,
37      verticalTrigger: `${vertica_trigger}%`,
38      moveItems: parseInt(move_item),
39      startIndex: parseInt(start_item),
40      visibleItems: parseInt(visible_items),
41      rtlMode: rtl_mode === "1",
42    });
43
44    const maintainContentPosition = (el, mode, position, labelLocation) => {
45      const itemsContainer = el.querySelector(`.timeline__items`);
46      const allTimelineItem = el.querySelectorAll(
47        `.timeline__items .timeline__item`
48      );
49      const allTimelineNavButton = el.querySelectorAll(`.timeline-nav-button`);
50      const timelineDivider = el.querySelector(`.timeline-divider`);
51
52      allTimelineItem?.forEach((item, index) => {
53        if (mode === "horizontal") {
54          if (position === "end") {
55            if (item.classList.contains("timeline__item--top")) {
56              item.classList.remove("timeline__item--top");
57              item.classList.add("timeline__item--bottom");
58            }
59            item.style.transform = "translateY(20px)";
60            allTimelineNavButton.forEach((btn) => {
61              btn.style.top = "20px";
62            });
63            timelineDivider.style.top = "20px";
64            itemsContainer.style.height = `${
65              item.getBoundingClientRect().height + 20
66            }px`;
67            const inner = item.querySelectorAll(".timeline__item__inner");
68            inner.forEach((inner) => {
69              inner.style.display = "flex";
70              inner.style.alignItems = "start";
71            });
72            const contentWrap = item.querySelectorAll(
73              ".timeline__content__wrap"
74            );
75            contentWrap.forEach((inner) => {
76              inner.style.display = "block";
77              inner.style.width = "fit-content";
78              inner.style.margin = "0 auto";
79              inner.style.maxWidth = "100%";
80            });
81          } else if (position === "start") {
82            if (item.classList.contains("timeline__item--bottom")) {
83              item.classList.remove("timeline__item--bottom");
84              item.classList.add("timeline__item--top");
85            }
86            item.style.transform = "unset";
87
88            const inner = item.querySelectorAll(".timeline__item__inner");
89            inner.forEach((inner) => {
90              inner.style.display = "flex";
91              inner.style.alignItems = "end";
92            });
93            const contentWrap = item.querySelectorAll(
94              ".timeline__content__wrap"
95            );
96            contentWrap.forEach((inner) => {
97              inner.style.display = "block";
98              inner.style.width = "fit-content";
99              inner.style.margin = "0 auto";
100              inner.style.maxWidth = "100%";
101            });
102
103            allTimelineNavButton.forEach((btn) => {
104              // btn.style.top = item.clientHeight;
105              btn.style.top = "calc(100% - 15px)";
106            });
107            timelineDivider.style.top = item.clientHeight;
108            itemsContainer.style.height = `${
109              item.getBoundingClientRect().height + 20
110            }px`;
111          } else {
112            if (labelLocation == "top") {
113              if (index % 2 == 0) {
114                item.classList.remove("timeline__item--bottom");
115                item.classList.add("timeline__item--top");
116              } else {
117                item.classList.remove("timeline__item--top");
118                item.classList.add("timeline__item--bottom");
119                item.style.transform = `${item.clientHeight}px`;
120              }
121              // Fix: Ensure rendering is complete before measuring heights
122              setTimeout(() => {
123                const bottomItems = el.querySelectorAll(
124                  ".timeline__item--bottom"
125                );

126                bottomItems.forEach((item) => {
127                  item.style.height = "fit-content";
128                });
129                const bottomItemHighest = Math.max(
130                  ...Array.from(bottomItems).map(
131                    (el) => el.getBoundingClientRect().height
132                  )
133                );
134
135                const topItems = el.querySelectorAll(".timeline__item--top");
136                const topItemsHighest = Math.max(
137                  ...Array.from(topItems).map(
138                    (el) => el.getBoundingClientRect().height
139                  )
140                );
141
142                itemsContainer.style.height = `${
143                  bottomItemHighest + topItemsHighest + 20
144                }px`;
145              }, 50);
146            } else if (labelLocation == "bottom") {
147              if (index % 2 === 0) {
148                item.classList.remove("timeline__item--top");
149                item.classList.add("timeline__item--bottom");
150                item.style.transform = `${item.clientHeight}px`;
151              } else {
152                item.classList.remove("timeline__item--bottom");
153                item.classList.add("timeline__item--top");
154              }
155
156              // Fix: Ensure rendering is complete before measuring heights
157              setTimeout(() => {
158                const topItems = el.querySelectorAll(".timeline__item--top");
159                topItems.forEach((item) => {
160                  item.style.height = "fit-content";
161                });
162                const topItemsHighest = Math.max(
163                  ...Array.from(topItems).map(
164                    (el) => el.getBoundingClientRect().height
165                  )
166                );
167                topItems.forEach((item) => {
168                  item.style.height = `${topItemsHighest}px`;
169                });
170
171                timelineDivider.style.top = `${topItemsHighest}px`;
172                allTimelineNavButton.forEach((btn) => {
173                  btn.style.top = `${topItemsHighest}px`;
174                });
175
176                const bottomItems = el.querySelectorAll(
177                  ".timeline__item--bottom"
178                );
179                bottomItems.forEach((item) => {
180                  item.style.transform = `translateY(${topItemsHighest}px)`;
181                });
182                const bottomItemHighest = Math.max(
183                  ...Array.from(bottomItems).map(
184                    (el) => el.getBoundingClientRect().height
185                  )
186                );
187
188                itemsContainer.style.height = `${
189                  bottomItemHighest + topItemsHighest
190                }px`;
191              }, 50);
192            }
193          }
194        }
195
196        if (mode === "vertical") {
197          if (position == "start") {
198            const rightItems = el.querySelectorAll(".timeline__item--right");
199
200            rightItems.forEach((item) => {
201              item.classList.remove("timeline__item--right");
202              item.classList.add("timeline__item--left");
203            });
204          } else if (position == "end") {
205            const leftItems = el.querySelectorAll(".timeline__item--left");
206
207            leftItems.forEach((item) => {
208              item.classList.remove("timeline__item--left");
209              item.classList.add("timeline__item--right");
210            });
211          }
212        }
213      });
214    };
215
216    maintainContentPosition(
217      timeline_item,
218      timeline_type,
219      content_position,
220      date_location
221    );
222  });
223});