https://www.flutef.in/js/index.js

1/* global $, WOW */
2$(document).ready(function () {
3
4    // ─── WOW animations ──────────────────────────────────────────────────────
5    new WOW().init();
6
7    // ─── Mobile nav ──────────────────────────────────────────────────────────
8    $('.nav-button').on('click', function () {
9        $('body').toggleClass('openm');
10    });
11
12    $(document).on('click', function (e) {
13        if (!$(e.target).closest('.navigation').length) {
14            $('.navigation .collapse').collapse('hide');
15        }
16    });
17
18    // ─── Back to top ─────────────────────────────────────────────────────────
19    var bttTicking = false;
20    $(window).on('scroll.btt', function () {
21        if (bttTicking) return;
22        bttTicking = true;
23        requestAnimationFrame(function () {
24            $('#back-to-top').toggle($(window).scrollTop() > 100);
25            bttTicking = false;
26        });
27    });
28    $('#back-to-top').on('click', function () {
29        $('html, body').animate({ scrollTop: 0 }, 600);
30        return false;
31    });
32
33    // ─── Slider configurations ───────────────────────────────────────────────
34    var SLIDER_CONFIGS = {
35        main: {
36            loop: true,
37            nav: false,
38            items: 1,
39            dots: true,
40            smartSpeed: 650,
41            autoplay: true,
42            autoplayTimeout: 4500,
43            autoplayHoverPause: true,
44            animateOut: 'fadeOut',
45            animateIn: 'fadeIn'
46        },
47        approvals: {
48            loop: true,
49            nav: false,
50            dots: false,
51            margin: 0,
52            smartSpeed: 800,
53            autoplay: true,
54            autoplayTimeout: 2500,
55            autoplayHoverPause: true,
56            responsive: {
57                0:    { items: 1 },
58                576:  { items: 2 },
59                992:  { items: 3 },
60                1400: { items: 4 }
61            }
62        },
63        wires: {
64            loop: true,
65            nav: true,
66            navContainerClass: 'owl-nav01',
67            navText: [
68                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>',
69                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>'
70            ],
71            dots: false,
72            margin: 4,
73            smartSpeed: 800,
74            autoplay: true,
75            autoplayTimeout: 2500,
76            autoplayHoverPause: true,
77            responsive: {
78                0:    { items: 1 },
79                575:  { items: 2 },
80                768:  { items: 3 },
81                992:  { items: 2 },
82                1400: { items: 3 }
83            }
84        },
85        client: {
86            loop: true,
87            nav: false,
88            dots: false,
89            margin: 10,
90            smartSpeed: 800,
91            autoplay: true,
92            autoplayTimeout: 2500,
93            autoplayHoverPause: true,
94            autoWidth: true
95        }
96    };
97
98    // ─── Main slider (above the fold — init immediately) ─────────────────────
99    var $mainSlider = $('.main-slider');
100    if ($mainSlider.length) {

101        $mainSlider.owlCarousel(SLIDER_CONFIGS.main);
102    }
103
104    // ─── Below-fold sliders ───────────────────────────────────────────────────
105    // Each entry maps a selector to its config key.
106    var belowFold = [
107        { selector: '.approvals-slider',    config: SLIDER_CONFIGS.approvals },
108        { selector: '.wires-cables-slider', config: SLIDER_CONFIGS.wires     },
109        { selector: '.client-slider',       config: SLIDER_CONFIGS.client    }
110    ];
111
112    /**
113     * Safely initialize an Owl Carousel element.
114     * Guards against double-init and zero-width containers.
115     */
116    function initOwl($el, config) {
117        if (!$el.length || $el.hasClass('owl-loaded')) return;
118        // Owl requires a non-zero width to calculate item widths correctly.
119        // Force a reflow if the element has no rendered width yet.
120        if ($el.width() === 0) {
121            $el.css('display', 'block');
122        }
123        $el.owlCarousel(config);
124    }
125
126    // Use IntersectionObserver where available; fall back to immediate init.
127    if ('IntersectionObserver' in window) {
128        var observer = new IntersectionObserver(function (entries, obs) {
129            entries.forEach(function (entry) {
130                if (!entry.isIntersecting) return;
131                var el = entry.target;
132                obs.unobserve(el);
133                var $el = $(el);
134                // Find the matching config by checking which selector matches.
135                for (var i = 0; i < belowFold.length; i++) {
136                    if ($el.is(belowFold[i].selector)) {
137                        initOwl($el, belowFold[i].config);
138                        break;
139                    }
140                }
141            });
142        }, { rootMargin: '0px 0px 300px 0px' });
143
144        belowFold.forEach(function (item) {
145            var el = document.querySelector(item.selector);
146            if (el) observer.observe(el);
147        });
148    } else {
149        // No IntersectionObserver — init all immediately.
150        belowFold.forEach(function (item) {
151            initOwl($(item.selector), item.config);
152        });
153    }
154
155    // ─── Fallback: init any uninitialised sliders after all resources load ───
156    // With deferred scripts, window.load may already have fired before
157    // $(document).ready runs. Check readyState first; bind only if still loading.
158    function initRemainingSliders() {
159        belowFold.forEach(function (item) {
160            var $el = $(item.selector);
161            if ($el.length && !$el.hasClass('owl-loaded')) {
162                initOwl($el, item.config);
163            }
164        });
165    }
166
167    if (document.readyState === 'complete') {
168        initRemainingSliders();
169    } else {
170        $(window).one('load', initRemainingSliders);
171    }
172
173});