https://denisesellsccmd.com/js/HomePageTestimonialCarousel.js

1let hptc = {};
2function isOverflown(element) {
3    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
4};
5
6function UpdateCustomerTextContainerOverflow(cItem) {
7    let ctc = cItem.querySelector(".customerTextContainer");
8    let ct = ctc.querySelector(".customerText");
9    //let overflow = cItem.querySelector(".overflow");
10    let btnSeeMore = cItem.querySelector(".btnSeeMore");
11    let btnSeeLess = cItem.querySelector(".btnSeeLess");
12    let ctStyle = window.getComputedStyle(ct);
13    let lines = Math.round(ct.offsetHeight / window.parseFloat(ctStyle.lineHeight))
14    if (lines > 4) {
15        //overflow.style.display = "block";
16        if (btnSeeMore != null) {
17            btnSeeMore.style.display = "block";
18        }
19        if (btnSeeLess != null) {
20            btnSeeLess.style.display = "none";
21        }
22    }
23    else {
24        //overflow.style.display = "none";
25        if (btnSeeMore != null) {
26            btnSeeMore.style.display = "none";
27        }
28        if (btnSeeLess != null) {
29            btnSeeLess.style.display = "block";
30        }
31    }
32};
33
34function CarouselSeeMore(tSlide, cItem, SeeMore) {
35    let ctc = cItem.querySelector(".customerTextContainer");
36    let btnSeeMore = cItem.querySelector(".btnSeeMore");
37    let btnSeeLess = cItem.querySelector(".btnSeeLess");
38    if (SeeMore) {
39        btnSeeMore.style.display = "none";
40        btnSeeLess.style.display = "block";
41        ctc.classList.remove("setHeight");
42        if (tSlide.hasAttribute("cycle")) {
43            $(tSlide).carousel('pause');
44        }
45    }
46    else {
47        btnSeeMore.style.display = "block";
48        btnSeeLess.style.display = "none";
49        ctc.classList.add("setHeight");
50        if (tSlide.hasAttribute("cycle")) {
51            $(tSlide).carousel('cycle');
52        }
53    }
54};
55
56$(document).ready(async (e) => {
57    let tSlide = document.querySelector("#testimonialSlides");
58    let cItem = tSlide.querySelector(".carousel-inner .carousel-item.active")
59    UpdateCustomerTextContainerOverflow(cItem);
60
61    hptc.cItemList = tSlide.querySelectorAll(".carousel-inner .carousel-item");
62    hptc.cItemList.forEach((cItem) => {
63        let btnSeeMore = cItem.querySelector(".btnSeeMore");
64        let btnSeeLess = cItem.querySelector(".btnSeeLess");
65        if (btnSeeMore != null) {
66            btnSeeMore.addEventListener("click", (e) => {
67                CarouselSeeMore(tSlide, cItem, true);
68            });
69        }
70        if (btnSeeLess != null) {
71            btnSeeLess.addEventListener("click", (e) => {
72                CarouselSeeMore(tSlide, cItem, false);
73            });
74        }
75    });
76    $(tSlide).on('slide.bs.carousel', function (e) {
77        //console.log("Testimonial Cycling.")
78        //when sliding starts, the item to slide in hasn't been rendered yet.
79        window.setTimeout(() => {
80            let tSlides = document.querySelector("#testimonialSlides");
81            let cInner = tSlides.querySelector(".carousel-inner");
82            let cItem = cInner.children[e.to];
83            if (cItem != null) {
84                UpdateCustomerTextContainerOverflow(cItem);
85            }
86        }, 0);
87    });
88});
89