https://www.vitalevarkenshouderij.nl/applications/vitalevarkenshou…/1762343908-assets-js-infographic.js

1// JavaScript Document
2(function ($) {
3
4    $(document).ready(function () {
5        initModInfographic();
6    });
7
8})(jQuery);
9
10
11function initModInfographic() {
12
13    if ($('.mod-infographic').length == 0) {
14        return false;
15    }
16
17    $('.mod-infographic-modal .modal-close').on('click', function () {
18        $('.mod-infographic-modal').removeClass('show');
19    });
20
21    $('.mod-infographic .marker, .mod-infographic .spot-inner, .mod-infographic-modal .modal-navigation .nav-item').on('click', function () {
22        const hotspot_id = $(this).attr('data-hotspot');
23        let infographic_id = $(this).closest('.mod-infographic').attr('data-id');
24        let hotspot_number = $(this).text().trim();
25
26        if ($(this).find('.nav-item-number').length > 0) {
27            hotspot_number = $(this).find('.nav-item-number').first().text().trim();
28        }
29
30        if (infographic_id === undefined) {
31            infographic_id = $(this).closest('.mod-infographic-modal').attr('id').replace('mod-infographic-modal-', '');
32        }
33
34        // Toggle content
35        $('.mod-infographic-modal .spot-content').removeClass('show');
36        $('#mod-infographic-modal-' + infographic_id + ' .spot-content[data-hotspot="' + hotspot_id + '"]').addClass('show');
37
38        // Hide duplicate content
39        $('#mod-infographic-modal-' + infographic_id + ' .spot-content[data-hotspot="' + hotspot_id + '"]').each(function(){
40            const spotContentNumber = $(this).find('.spot-content-number').text().trim();
41
42            if (hotspot_number != spotContentNumber) {
43                $(this).removeClass('show');
44            }
45        });
46
47        // Toggle navigation
48        $('.mod-infographic-modal .modal-navigation .nav-item').removeClass('prev').removeClass('next');
49        const prevNav = $('.mod-infographic-modal .modal-navigation .nav-item[data-hotspot="' + hotspot_id + '"]').prev('.nav-item');
50        const nextNav = $('.mod-infographic-modal .modal-navigation .nav-item[data-hotspot="' + hotspot_id + '"]').next('.nav-item');
51        if (prevNav.length) {
52            prevNav.addClass('prev');
53        }
54        if (nextNav.length) {
55            nextNav.addClass('next');
56        }
57
58        $('#mod-infographic-modal-' + infographic_id).addClass('show');
59    });
60
61    $(document).on('click', function (event) {
62        const $modal = $('.mod-infographic-modal');
63        const $inner = $('.inner');
64
65        // Check if the click was outside the .inner div
66        if (!$inner.is(event.target) && $inner.has(event.target).length === 0 && $modal.hasClass('show')) {
67            $modal.removeClass('show');
68        }
69    });
70
71
72
73
74    const div1 = document.getElementById('infographic-image');
75    const div2 = document.getElementById('infographic-nav');
76
77    const leftArrow = document.querySelector(".mod-infographic-nav.left");
78    const rightArrow = document.querySelector(".mod-infographic-nav.right");
79    const scrollPercentage = 20; // Set your scroll percentage here
80
81    div1.addEventListener('scroll', mapAutoScroll);
82
83    if (div2) {
84        div2.addEventListener('scroll', navAutoScroll);
85    }
86
87    // Initialize arrow visibility on page load
88    updateArrowsVisibility();
89
90    // infographic: Image load (fixes arrows based on image width)
91    const infographicImage = div1.querySelector('img');
92    if (infographicImage.complete) {
93        updateArrowsVisibility();
94    } else {
95        infographicImage.addEventListener('load', () => {
96            updateArrowsVisibility();
97        });
98    }
99
100
101    leftArrow.addEventListener("click", function () {
102        scrollDiv(scrollPercentage, "left");
103    });
104
105    rightArrow.addEventListener("click", function () {
106        scrollDiv(scrollPercentage, "right");
107    });
108
109
110    function mapAutoScroll() {
111        const scrollPercentage = div1.scrollLeft / (div1.scrollWidth - div1.clientWidth);
112        if (div2) {
113            div2.scrollLeft = scrollPercentage * (div2.scrollWidth - div2.clientWidth);
114        }
115        updateArrowsVisibility();
116    }
117    function navAutoScroll() {
118        const scrollPercentage = div2.scrollLeft / (div2.scrollWidth - div2.clientWidth);
119        div1.scrollLeft = scrollPercentage * (div1.scrollWidth - div1.clientWidth);
120        updateArrowsVisibility();
121    }
122
123    function scrollDiv(percentage, direction) {
124        const scrollAmount = div1.scrollWidth * (percentage / 100) * (direction === "left" ? -1 : 1);
125
126
127        div1.scrollBy({
128            left: scrollAmount,
129            behavior: 'smooth'
130        });
131
132
133    }
134
135    function updateArrowsVisibility() {
136        // Small margin of error to handle rounding differences
137        const epsilon = (div1.scrollLeft > 0) ? 10 : 0;
138
139        // Check if at the start or end of the scrollable area
140        const atStart = div1.scrollLeft <= 0;
141        const atEnd = div1.scrollLeft + div1.clientWidth >= div1.scrollWidth - epsilon;
142
143
144        // Toggle visibility with `flex` display
145        leftArrow.style.display = atStart ? "none" : "flex";
146        rightArrow.style.display = atEnd ? "none" : "flex";
147    }
148}
149