https://www.ttbbank.com/global/assets/js/skrollr-about.js

1document.addEventListener("DOMContentLoaded", () => {
2  setTimeout(function () {
3    var mainPage = $(".about-main-page").length;
4    var timelinePage = $(".about-timeline-page").length;
5    var isDesktop = $(window).width() > 1199;
6    var isSmallDesktop = $(window).height() < 780;
7    var about = {
8      init: function () {
9        this.carouselHero();
10        this.skrollrActions();
11        this.toggleContent();
12        this.videoAction();
13        this.breakPointImage();
14        this.detailSeemore();
15        this.showScrollTop();
16        this.dataAppendXs();
17        this.slickRandom();
18        this.xsTableGrid();
19        this.resize();
20      },
21      skrollrActions() {
22        var constantList = {};
23        if (mainPage) {
24          var desktopAddon = 400;
25          constantList = {
26            posvision: $(".content-vision").offset().top,
27            posvisiontop: $(".vision-image-top").offset().top,
28            posvisionbottom: $(".vision-image-bottom").offset().top,
29            posvideo1: $(".content-video-banner--1").offset().top,
30            posoldbrand: $(".content-old-brands").offset().top,
31            posverticalline: $(".vertical-lines").offset().top,
32            posnewbrand: $(".content-new-brand").offset().top,
33            posvideo2: $(".content-video-banner--2").offset().top,
34            posswicth: $(".content-swicth-cols ").offset().top,
35            poslogoci: $(".content-logo-ci-height").offset().top + desktopAddon,
36            poscolorci: $(".content-color-ci-height").offset().top + desktopAddon,
37          };
38          if (isDesktop && isSmallDesktop) {
39            constantList.poscolorci + 200;
40          }
41          if (!isDesktop) {
42            var addon = 800;
43            constantList.poslogoci += addon;
44            constantList.poscolorci += addon + 300;
45          }
46        }
47        if (timelinePage) {
48          constantList = {
49            postimeline: $(".cols-list").offset().top,
50            posbottomlist: $(".bottom-cols-list").offset().top,
51            posmerge: $(".content-merge-list").offset().top,
52            possupport: $(".content-support-list").offset().top,
53          };
54        }
55        skrollr.init({
56          forceHeight: false,
57          mobileCheck: function () {
58            return false;
59          },
60          render: function (data) {
61            //Log the current scroll position.
62            // console.log(data.curTop);
63          },
64          constants: constantList,
65        });
66      },
67      carouselHero: function () {
68        var slider = $(".content-hero-slider >.card-list");
69        var item = slider.find(".card-item");
70        if (item.length > 1) {
71          slider.slick({
72            dots: true,
73            arrows: true,
74            infinite: true,
75            speed: 900,
76            autoplay: true,
77            adaptiveHeight: true,
78            cssEase: "linear",
79            fade: true,
80            responsive: [
81              {
82                breakpoint: 1200,
83                settings: {
84                  dots: false,
85                  arrows: false,
86                },
87              },
88            ],
89          });
90          slider.on(
91            "beforeChange",
92            function (event, slick, currentSlide, nextSlide) {
93              slider
94                .find(
95                  "[data-slick-index=" + currentSlide + "] .card-text  > div >  *"
96                )
97                .addClass("animate__fadeOutDown ")
98                .removeClass("animate__fadeInDown ");
99              slider
100                .find("[data-slick-index=" + nextSlide + "] .card-text  > div > *")
101                .addClass("animate__fadeInDown ")
102                .removeClass("animate__fadeOutDown ");
103            }
104          );
105
106          function arrowPos() {
107            var body = $("body");
108            var container = slider.find(".container");
109            var space = (body.width() - container.width()) / 2;
110            var slickArrow = slider.find(".slick-arrow");
111            var arrowSize = slickArrow.width();
112            var right = space / 2 - arrowSize / 2;
113            slider.find(".slick-prev ").css("right", right + 50);
114            slider.find(".slick-next ").css("right", right);
115            slickArrow.addClass("active");
116          }
117          $(window).on("load", function () {
118            arrowPos();
119          });
120          $(window).resize(function () {
121            arrowPos();
122          });
123        }
124      },
125      slickRandom: function () {
126        var total = $(".slick-random img").length, // get the number of slides
127          rand = Math.floor(Math.random() * total); // random number
128        var slider = $(".slick-random");
129        slider.slick({
130          autoplay: false,
131          autoplaySpeed: 7000,

132          arrows: false,
133          fade: true,
134          slide: ".card-item",
135          pauseOnHover: false,
136        });
137        slider.slick("slickGoTo", rand);
138      },
139      colorWidth: function () {
140        var colors = $(".col-colors");
141        colors.each(function () {
142          var item = $(this).find(".col-item");
143          var length = item.length;
144          item.each(function () {
145            var index = $(this).index();
146            var width = (100 / length) * (index + 1);
147            $(this).css({
148              width: width + "%",
149              zIndex: length - index,
150            });
151          });
152        });
153      },
154      toggleContent: function () {
155        var self = this;
156        $(".card-toggle-nav").click(function () {
157          $(this).toggleClass("active");
158          $(this)
159            .next(".card-toggle-content")
160            .toggleClass("active")
161            .stop(true, true)
162            .slideToggle();
163          if ($(window).width() < 768) {
164            if ($(this).next(".card-toggle-content").hasClass("active")) {
165              self.appendSeeMore(
166                $(this).next(".card-toggle-content").find(".detail-toggle-more")
167              );
168            }
169          }
170        });
171      },
172      videoAction: function () {
173        $("body").on("click", ".toggle-video", function () {
174          var parents = $(this).parents(".content-video-banner");
175          var player = parents.find(".card-video-player");
176          parents.toggleClass("active");
177          player.toggleClass("active");
178          if (player.find(".video-pop").get(0).paused) {
179            player.find(".video-pop").trigger("play");
180          } else {
181            player.find(".video-pop").trigger("pause");
182          }
183        });
184
185        $("body").on("click", ".toggle-play-pause", function () {
186          var video = $(this).attr("data-video");
187          $(this).toggleClass("isPause");
188          if ($(video).get(0).paused) {
189            $(video).trigger("play");
190          } else {
191            $(video).trigger("pause");
192          }
193        });
194      },
195      breakPointImage: function () {
196        $("[data-image-desktop]").each(function () {
197          var tagName = this.tagName.toLowerCase();
198          var desktop = $(this).attr("data-image-desktop");
199          var mobile = $(this).attr("data-image-mobile");
200          var image = desktop;
201          if (mobile) {
202            if (!isDesktop) {
203              image = mobile;
204            }
205          }
206          if (tagName === "img") $(this).attr("src", image);
207          else $(this).css("background-image", "url(" + image + ")");
208        });
209      },
210      appendSeeMore: function (element) {
211        element.each(function () {
212          var height = $(this).height();
213          if (height > 75 && !$(this).hasClass("see-more")) {
214            $(this).addClass("see-more");
215            var parent = $(this).parent();
216            parent.append(
217              '<div class="toggle-see-more"><div><span> </span> <i class="icomoon-arrow-right"></i></div></div>'
218            );
219          }
220        });
221      },
222      detailSeemore: function () {
223        if ($(window).width() > 767) {
224          this.appendSeeMore($(".detail-toggle-more"));
225        }
226        $("body").on("click", ".toggle-see-more", function () {
227          var parent = $(this).parent();
228          parent.find(".detail-toggle-more").toggleClass("see-more");
229          $(this).hide();
230        });
231      },
232      showScrollTop() {
233        const self = this;
234        if (!isDesktop) {
235          $(window).scroll(function () {
236            var scroll = self.getCurrentScroll();
237            if (scroll >= $(window).height() / 2)
238              $(".scrolltop-xs").addClass("active");
239            else $(".scrolltop-xs").removeClass("active");
240          });
241        }
242      },
243      getCurrentScroll: function () {
244        return window.pageYOffset;
245      },
246      dataAppendXs: function () {
247        if (!isDesktop) {
248          $("[data-append]").each(function () {
249            var data = $(this).attr("data-append");
250            if ($(data).length) {
251              $(this).html($(data).html());
252            }
253          });
254        }
255      },
256      xsTableGrid: function () {
257        var colLogo = $(".content-logo-ci .col-logo");
258        var width = colLogo.width();
259        if (!isDesktop) {
260          colLogo.find(".table").css({
261            width: width,
262            height: width,
263          });
264          colLogo.find(".logo-image img").css({
265            width: width,
266            height: width,
267          });
268        }
269      },
270      resize: function () {
271        const self = this;
272        $(window).resize(function () {
273          self.xsTableGrid();
274          self.breakPointImage();
275          self.showScrollTop();
276          self.dataAppendXs();
277        });
278      },
279    };
280
281    about.init();
282  }, 2000);
283});