https://www.pcsclassical.org/wp-content/themes/salient-child/short…/interactive-content.js?ver=1773685033

1(function ($) {
2    $(document).ready(function () {
3        $('.wp-block-interactive-content').each(function () {
4            const $block = $(this);
5
6            const $firstButton = $block.find('.tab-button').first();
7            const firstIndex = $firstButton.data('tab-index');
8            const $firstPanel = $block.find(`.tab-panel[data-tab-index="${firstIndex}"]`);
9
10            $firstButton.addClass('active');
11            $firstPanel.addClass('active visible');
12
13            $block.find('.tab-button').on('click', function () {
14                const index = $(this).data('tab-index');
15                const $newPanel = $block.find(`.tab-panel[data-tab-index="${index}"]`);
16                const $currentPanel = $block.find('.tab-panel.active');
17
18                if ($(this).hasClass('active')) return;
19
20                $block.find('.tab-button').removeClass('active');
21                $(this).addClass('active');
22
23                $currentPanel
24                    .removeClass('visible')
25                    .one('transitionend', function () {
26                        $currentPanel.removeClass('active');
27                        $newPanel.addClass('active');
28                        setTimeout(() => {
29                            $newPanel.addClass('visible');
30                        }, 20);
31                    });
32            });
33        });
34
35        // --- MOBILE accordion ---
36        $(".mobile-accordion__item .accordion-header").on("click", function () {
37            const item = $(this).closest(".mobile-accordion__item");
38            const body = item.find(".accordion-body");
39
40            if (item.hasClass("active")) {
41                item.removeClass("active");
42                body.slideUp(300);
43            } else {
44                $(".mobile-accordion__item").removeClass("active");
45                $(".accordion-body").slideUp(300);
46                item.addClass("active");
47                body.slideDown(300);
48            }
49        });
50    });
51})(jQuery);
52
53function positionTabButtons(trigger = '') {
54    document.querySelectorAll('.wp-block-interactive-content').forEach(block => {
55        const wrapper = block.querySelector('.buttons-wrapper');
56        const tabButtons = block.querySelectorAll('.tab-button');
57
58        if (!wrapper || tabButtons.length === 0 || window.innerWidth < 768) {
59            tabButtons.forEach(button => {
60                button.style.left = '';
61                button.style.top = '';
62            });
63            return;
64        }
65
66        const numButtons = tabButtons.length;
67        const centerX = wrapper.offsetWidth / 2;
68        const centerY = wrapper.offsetHeight / 2;
69
70        let baseRadius = 240;
71        if (window.innerWidth >= 768 && window.innerWidth <= 991) {
72            baseRadius -= 50;
73        }
74
75        tabButtons.forEach((button, index) => {
76            const angle = (2 * Math.PI / numButtons) * index;
77            const deg = angle * (180 / Math.PI);
78
79            let yOffset = 0;
80            if (deg >= 210 && deg <= 330) yOffset = -25;
81            if (deg >= 30 && deg <= 150) yOffset = 25;
82
83            const x = centerX + baseRadius * Math.cos(angle) - (button.offsetWidth / 2);
84            const y = centerY + baseRadius * Math.sin(angle) - (button.offsetHeight / 2) + yOffset;
85
86            button.style.left = `${x}px`;
87            button.style.top = `${y}px`;
88        });
89    });
90}
91
92function waitForMainImageAndPosition() {
93    const blocks = document.querySelectorAll('.wp-block-interactive-content');
94
95    blocks.forEach(block => {
96        const mainImage = block.querySelector('.main-image img');
97
98        function runPositioning() {
99            requestAnimationFrame(() => {
100                setTimeout(() => {
101                    positionTabButtons('main image loaded');
102                }, 50);
103            });
104        }
105
106        if (!mainImage) {
107            runPositioning();
108            return;
109        }
110
111        if (mainImage.complete) {
112            runPositioning();
113        } else {
114            mainImage.addEventListener('load', runPositioning);
115            mainImage.addEventListener('error', runPositioning);
116        }
117    });
118}
119
120document.addEventListener('DOMContentLoaded', () => {
121    waitForMainImageAndPosition();
122});
123
124window.addEventListener('load', () => {
125    setTimeout(() => {
126        positionTabButtons('window.load fallback');
127    }, 300);
128});
129
130window.addEventListener('resize', () => {
131    positionTabButtons('resize');
132});
133
134let scrollTimeout;
135window.addEventListener('scroll', () => {
136    if (!scrollTimeout) {
137        scrollTimeout = setTimeout(() => {
138            positionTabButtons();
139            scrollTimeout = null;
140        }, 200);
141    }
142});