https://www.zippia.com/wp-content/themes/zippia-react/js/aboutScripts.js?ver=6.9

1jQuery(document).ready(function ($) {
2  var mentionsContainer = document.getElementById("mentions-container");
3  var mentionDotsContainer = document.getElementById("mention-dots-container");
4  var dotMentionsArray = [];
5  for (let i = 0; i < 17; i++) {
6    dotMentionsArray.push( document.getElementById("onClickMentionDot-"+i));
7  }
8  function onClickMentionDot(i) {
9    var containerMargin = parseInt($(mentionsContainer).css("margin-left"));
10    var mentionPadding = parseInt(
11      $(mentionsContainer.children[i]).css("padding-left")
12    );
13    console.log(
14      mentionsContainer.children[i].offsetLeft -
15        mentionPadding -
16        containerMargin
17    );
18    mentionsContainer.scroll({
19      left:
20        mentionsContainer.children[i].offsetLeft -
21        mentionPadding -
22        containerMargin,
23      behavior: "smooth",
24    });
25  }
26
27  function scrollMention(e) {
28    var dots = mentionDotsContainer.children;
29    var mentionWidth = mentionsContainer.children[0].clientWidth;
30
31    var left = e.srcElement.scrollLeft;
32    var itemStart = (left / mentionWidth) | 0;
33    for (var i = 0; i < dots.length; i++) {
34      var dot = dots[i];
35      if (i === itemStart) {
36        dot.classList.add("carousel-dot-active"); // Highlight dot
37      } else {
38        dot.classList.remove("carousel-dot-active"); // De-highlight dot
39      }
40    }
41    showLeftArrowMentionsSh();
42    showRightArrowMentionsSh();
43  }
44  mentionsContainer.addEventListener("scroll", (e) => {
45    scrollMention(e);
46  });
47  dotMentionsArray.forEach((value,i) =>{
48    dotMentionsArray[i].addEventListener("click", (e) => {
49      onClickMentionDot(i);
50    });
51  })
52
53
54  function slideMentions(value) {
55    var dots = mentionDotsContainer.children;
56    for (var i = 0; i < dots.length; i++) {
57      if (dots[i].classList.contains("carousel-dot-active")) {
58        var index = i + parseInt(value + 1);
59        console.log(index);
60        if (index < 0) {
61          index = 0;
62        } else if (index >= dots.length) {
63          index = dots.length - 1;
64        }
65        onClickMentionDot(index);
66        break;
67      }
68    }
69  }
70  const prevMentionTarget = document.getElementById("prevMention");
71  const nextMentionTarget = document.getElementById("nextMention");
72
73  prevMentionTarget.addEventListener("click", (e) => {
74    slideMentions("-");
75  });
76  nextMentionTarget.addEventListener("click", (e) => {
77    slideMentions("+");
78  });
79
80  function showLeftArrowMentionsSh() {
81    var elemt = document.getElementById("mentions-container");
82    if (!elemt) return;
83    if (elemt.scrollLeft <= 10) {
84      document.getElementById("prevMention").style.display = "none";
85    } else {
86      document.getElementById("prevMention").style.display = "block";
87    }
88  }
89
90  function showRightArrowMentionsSh() {
91    var elemt = document.getElementById("mentions-container");
92    if (!elemt) return;
93    var maxScrollLeft = elemt.scrollWidth - elemt.clientWidth;
94    if (maxScrollLeft > 1) {
95      if (maxScrollLeft <= elemt.scrollLeft + 30) {
96        document.getElementById("nextMention").style.display = "none";
97      } else {
98        document.getElementById("nextMention").style.display = "block";
99      }
100    }
101  }
102
103  mentionsContainer.dispatchEvent(new Event("scroll"));
104  var elements = document.getElementsByClassName("testimonial-about");
105  const divFunction = function (zEvent) {
106    var id = this.getAttribute("data-id");
107    var show_or_hide = "";
108    if ($("#detail-" + id).css("display") == "none") {
109      show_or_hide = "show";
110    } else {
111      show_or_hide = "hide";
112    }
113
114    $(".newboxes-2").hide();
115    $(".user-thumb").removeClass("active");
116
117    if (show_or_hide == "show") {
118      $("#detail-" + id).show(100);
119      $("#" + id).addClass("active");
120    } else {
121      $("#detail-" + id).hide(100);
122    }
123  };
124  for (var i = 0; i < elements.length; i++) {
125    elements[i].addEventListener("click", divFunction, false);
126  }
127
128  const showonlyonev2 = function (thechosenone, action) {
129    $(".newboxes-2").hide();
130    $(".user-thumb").removeClass("active");
131
132    if (action == "show") {
133      $("#detail-" + thechosenone).show();
134      $("#" + thechosenone).addClass("active");
135    } else {
136      $("#detail-" + thechosenone).hide();
137    }
138  };
139});