https://www.ontariosoilcrop.org/wp-content/plugins/oscia-elementor/assets/js/flower-puzzle.js?ver=1.0.0

1
2
3document.addEventListener('DOMContentLoaded', function() {
4    var puzzles = document.getElementsByClassName('flower-puzzle');
5
6    for (let i = 0; i < puzzles.length; i++) {
7        var puzzle = puzzles[i];
8        var svg = puzzle.querySelector('svg');
9        var petals = svg.querySelectorAll('path');
10        var tabContent  = puzzle.querySelector('.tabs-content');
11        var titles = svg.querySelector('h5');
12        for (let j = 0; j < petals.length; j++) {
13            var petal = petals[j];
14            petal.addEventListener('mouseenter',function(event) {
15                var id = this.getAttribute('data-index');
16
17                var $active = jQuery(tabContent).find('.is-active');
18                var $nextTab = jQuery(tabContent).find('.tab-'+id);
19
20                if(!$active.hasClass('tab-'+id)) {
21                    $active.removeClass('is-active');
22                    $nextTab.addClass('is-active');
23                }
24                var $actPetal = jQuery(svg).find('.group-1 path.active');
25                var $nextPetal = jQuery(svg).find('.group-1 path[data-index="'+id+'"]');
26                if($actPetal.data('index') !== id) {
27                    $actPetal.removeClass('active');
28                    $nextPetal.addClass('active');
29                }
30            });
31        }
32        for (let t = 0; t < titles.length; t++) {
33            var title = titles[t];
34            title.addEventListener('click',function(event) {
35                var id = this.getAttribute('data-index');
36
37                var $active = jQuery(tabContent).find('.is-active');
38                var $nextTab = jQuery(tabContent).find('.tab-'+id);
39                console.log('title click', id, $active, $nextTab);
40                if(!$active.hasClass('tab-'+id)) {
41                    $active.removeClass('is-active');
42                    $nextTab.addClass('is-active');
43                }
44                var $actPetal = jQuery(svg).find('.group-1 path.active');
45                var $nextPetal = jQuery(svg).find('.group-1 path[data-index="'+id+'"]');
46                if($actPetal.data('index') !== id) {
47                    $actPetal.removeClass('active');
48                    $nextPetal.addClass('active');
49                }
50            });
51        }
52
53        svg.addEventListener('mouseleave', function() {
54            var $active = jQuery(tabContent).find('.is-active');
55            var $nextTab = jQuery(tabContent).find('.tab-0');
56            $active.removeClass('is-active');
57            $nextTab.addClass('is-active');
58            var $petals = jQuery(svg).find('path.active');
59            $petals.removeClass('active');
60        })
61    }
62});