https://www.keystonedentalcampus.com/site/www.keystonedentalcampus.com/js/scripts.js?v=1779098458

1$(document).ready(function () {
2    $(".slider.owl-carousel").owlCarousel({
3        margin: 0,
4        items: 1,
5        loop: true,
6        nav: false,
7        autoplay: false,
8        autoplayTimeout: 3000,
9        autoplaySpeed: 500,
10        navText: ["", ""],
11        dots: true,
12        dotsEach: false,
13        mouseDrag: true,
14        autoHeight: true,
15        responsive: {},
16    });
17
18    $(".listing.owl-carousel, .certificates.owl-carousel").each(function () {
19        let $carousel = $(this);
20        let $dots = $carousel.prev().find(".listing-dots");
21
22        $carousel.owlCarousel({
23            items: 2,
24            loop: true,
25            nav: false,
26            autoplay: false,
27            dots: true,
28            mouseDrag: true,
29            autoHeight: true,
30
31            responsive: {
32                0: {
33                    items: 1,
34                    margin: 0,
35                    dotsContainer: false, // 👈 IMPORTANT
36                },
37                992: {
38                    items: 2,
39                    margin: 40,
40                    dotsContainer: $dots,
41                },
42            },
43        });
44    });
45
46    $(window).on("resize", function () {
47        $(".listing.owl-carousel, .certificates.owl-carousel").trigger(
48            "refresh.owl.carousel",
49        );
50    });
51
52
53
54    
55
56    $(".symposia-banners.owl-carousel").each(function () {
57        let $carousel = $(this);
58        let $dots = $carousel.prev().find(".listing-dots");
59
60        $carousel.owlCarousel({
61            items: 1,
62            loop: true,
63            nav: false,
64            autoplay: false,
65            dots: true,
66            mouseDrag: true,
67            autoHeight: true,
68
69            responsive: {
70                0: {
71                    items: 1,
72                    margin: 0,
73                    dotsContainer: false, // 👈 IMPORTANT
74                },
75                992: {
76                    items: 1,
77                    margin: 40,
78                    dotsContainer: $dots,
79                },
80            },
81        });
82    });
83
84    $(window).on("resize", function () {
85        $(".symposia-banners.owl-carousel").trigger(
86            "refresh.owl.carousel",
87        );
88    });
89
90
91    $(".event-carousel.owl-carousel").each(function () {
92        let $carousel = $(this);
93        let $dots = $(this).prev().find(".listing-dots");
94
95        $carousel.owlCarousel({
96            margin: 10,
97            items: 6,
98            loop: true,
99            nav: true,
100            autoplay: true,
101            autoplayTimeout: 3000,
102            autoplaySpeed: 500,
103            navText: [
104                '<i class="fa-thin fa-angle-left"></i>',
105                '<i class="fa-thin fa-angle-right"></i>',
106            ],
107            dots: true,
108            dotsEach: false,
109            autoplayHoverPause: true,
110            mouseDrag: true,
111            autoHeight: true,
112            responsive: {
113                0: {
114                    items: 2,
115                    margin: 20,
116                    dotsContainer: false, // 👈 IMPORTANT
117                },
118                992: {
119                    items: 3,
120                    margin: 20,
121                     dotsContainer: $dots,
122                },
123                1200: {
124                    items: 6,
125                    margin: 20,
126                },
127            },
128        });
129    });
130
131    // Create the floating zoom preview container
132    let $zoom = $(
133        '<div id="event-carousel-preview" class="hidden"></div>',
134    ).appendTo("body");
135    let zoomTimer = null;
136
137    // Hover in: start delay timer
138    $(".event-carousel").on("mouseenter", ".owl-item", function () {
139        const $item = $(this).find(".elem").clone();
140        const rect = this.getBoundingClientRect();
141
142        // Start 1-second delay before showing zoom
143        zoomTimer = setTimeout(() => {
144            $zoom
145                .html($item.html())
146                .css({
147                    top: rect.top + "px",
148                    left: rect.left + "px",
149                    width: rect.width + "px",
150                    height: rect.height - 10 + "px",
151                })
152                .removeClass("hidden");
153        }, 500); // 1000ms = 1 second
154    });

155
156    // Hover out: cancel timer and hide zoom
157    $(".event-carousel").on("mouseleave", ".owl-item", function () {
158        clearTimeout(zoomTimer);
159        $zoom.addClass("hidden");
160    });
161
162    $(document).on("scroll", function () {
163        clearTimeout(zoomTimer);
164        $zoom.addClass("hidden");
165    });
166
167    function setItemMinHeightPerRow() {
168        $(".listing:not(.owl-carousel)").each(function () {
169            const $listing = $(this);
170            const items = $listing.find(".item");
171            const columns = parseInt($listing.data("columns")) || 2;
172
173            // reset heights
174            items.css("min-height", "");
175            items.find(".text").css("min-height", "");
176
177            // loop per row
178            for (let i = 0; i < items.length; i += columns) {
179                const rowItems = items.slice(i, i + columns);
180                let maxHeight = 0;
181
182                rowItems.each(function () {
183                    const textHeight = $(this).find(".text").outerHeight();
184                    const photoHeight = $(this)
185                        .find("> .photo img")
186                        .outerHeight();
187                    maxHeight = Math.max(maxHeight, textHeight, photoHeight);
188                });
189
190                rowItems.css("min-height", maxHeight + "px");
191                rowItems.find(".text").css("min-height", maxHeight + "px");
192            }
193        });
194    }
195
196    $(document).ready(function () {
197        // Run after all images inside each .listing are loaded
198        $(".listing").each(function () {
199            const $listing = $(this);
200            $listing.imagesLoaded(function () {
201                setItemMinHeightPerRow();
202            });
203        });
204
205        // Re-run on resize
206        $(window).on("resize", function () {
207            $(".listing").each(function () {
208                const $listing = $(this);
209                $listing.imagesLoaded(function () {
210                    setItemMinHeightPerRow();
211                });
212            });
213        });
214    });
215});
216
217function setOwlCarouselItemHeight() {
218    $(".listing.owl-carousel").each(function () {
219        const $carousel = $(this);
220        const items = $carousel.find(".owl-item .item");
221
222        // reset heights
223        items.css("min-height", "");
224        items.find(".text").css("min-height", "");
225
226        let maxHeight = 0;
227
228        items.each(function () {
229            const textHeight = $(this).find(".text").outerHeight();
230            const photoHeight = $(this).find("> .photo img").outerHeight();
231            maxHeight = Math.max(maxHeight, textHeight, photoHeight);
232        });
233
234        items.css("min-height", maxHeight + "px");
235        items.find(".text").css("min-height", maxHeight + "px");
236    });
237}
238
239// Run after Owl Carousel initializes
240$(".listing.owl-carousel").on("initialized.owl.carousel", function () {
241    const $carousel = $(this);
242    $carousel.imagesLoaded(function () {
243        setOwlCarouselItemHeight();
244    });
245});
246
247$(".listing.owl-carousel").on("resized.owl.carousel", function () {
248    const $carousel = $(this);
249    $carousel.imagesLoaded(function () {
250        setOwlCarouselItemHeight();
251    });
252});
253
254
255
256
257
258
259let layoutCache = new WeakMap();
260let resizeTimeout;
261
262// 🔥 MAIN FUNCTION
263function adjustTextAndNameWrap(forceRecalc = false) {
264
265    $(".slider .item").each(function () {
266        const $item = $(this);
267        const $photo = $item.find("> .photo");
268        const $text = $item.find(".text");
269        const $nameWrap = $item.find(".name-wrap");
270
271        if (!$photo.length || !$text.length || !$nameWrap.length) return;
272
273        const photoH = $photo.outerHeight();
274        if (!photoH) return;
275
276        let cached = layoutCache.get(this);
277
278        // ✅ RECALCULATE ONLY WHEN NEEDED
279        if (!cached || forceRecalc) {
280
281            // 1️⃣ RESET layout
282            $text.css("height", "");
283            $nameWrap.css({
284                height: "",
285                fontSize: "",
286                overflow: "hidden"
287            });
288
289            // 2️⃣ FORCE REFLOW
290            $text[0].offsetHeight;
291
292            // 3️⃣ MEASURE stable layout
293            let usedHeight = 0;
294            $text.children().not(".name-wrap").each(function () {
295                usedHeight += $(this).outerHeight(true);
296            });
297
298            cached = { usedHeight };

299            layoutCache.set(this, cached);
300        }
301
302        // 4️⃣ APPLY HEIGHT
303        const contentHeight = photoH;
304        $text.css("height", contentHeight);
305
306        const remaining = Math.max(0, contentHeight - cached.usedHeight);
307
308        $nameWrap.css({
309            height: remaining,
310            fontSize: "",
311            overflow: "hidden"
312        });
313
314        // 5️⃣ TEXTFILL (safe timing)
315        requestAnimationFrame(() => {
316
317            if (!$nameWrap.is(":visible")) return;
318
319            // force reflow before textfill
320            $nameWrap[0].offsetHeight;
321
322            $nameWrap.textfill({
323                maxFontPixels: 60,
324                minFontPixels: 16,
325                innerTag: $item.closest(".owl-carousel").length ? "a" : "p"
326            });
327
328            // lock to real text height
329            const $name = $nameWrap.find(".name");
330            if ($name.length) {
331                const realHeight = $name.outerHeight(true);
332                if (realHeight > 0) {
333                    $nameWrap.css("height", realHeight);
334                }
335            }
336        });
337    });
338}
339
340
341// 🔁 RUN WRAPPER
342function runAdjustments(forceRecalc = false) {
343    requestAnimationFrame(() => {
344        adjustTextAndNameWrap(forceRecalc);
345    });
346}
347
348
349// ✅ ON PAGE LOAD
350$(window).on("load", function () {
351    runAdjustments(true); // force initial calculation
352});
353
354
355// ✅ ON RESIZE (NO FULL RECALC)
356$(window).on("resize", function () {
357    clearTimeout(resizeTimeout);
358
359    resizeTimeout = setTimeout(() => {
360        runAdjustments(false); // reuse cached values
361    }, 250);
362});
363
364
365// ✅ OWL EVENTS (CRITICAL)
366$('.slider.owl-carousel')
367.on('initialized.owl.carousel', function () {
368    layoutCache = new WeakMap(); // reset cache
369    runAdjustments(true);
370})
371.on('translated.owl.carousel', function () {
372    runAdjustments(false);
373})
374.on('resized.owl.carousel', function () {
375    runAdjustments(false);
376});
377
378
379// ✅ FONT LOADING FIX
380if (document.fonts) {
381    document.fonts.ready.then(() => {
382        layoutCache = new WeakMap(); // fonts change layout → reset
383        runAdjustments(true);
384    });
385}
386
387$(document).ready(function () {
388
389    $('.tutorials-listing video').each(function () {
390
391        const video = this;
392
393        // force loading
394        video.load();
395
396        $(video).on('loadedmetadata', function () {
397
398            video.currentTime = 10;
399
400        });
401
402    });
403
404});