https://e-nrp.org/js/refpopoverScript.js

1jQuery(document).ready(function ($) {
2
3    var popover_counter;
4    var isDisplayReferencePanel;
5
6    var objectWindowMedia = window.matchMedia("(max-width: 767px)");
7    var isScreenSizeSM = false;
8        
9        
10    objectWindowMedia.addEventListener("change", () => {
11
12        if  ( objectWindowMedia.matches ) {
13            isScreenSizeSM = true;
14
15            $('[data-toggle="ref-popover"]').each((i, el) => { 
16                let $el = $(el);
17                $el.popover("disable");
18            });
19        }
20        else {
21            isScreenSizeSM = false;
22            
23            $('[data-toggle="ref-popover"]').each((i, el) => { 
24                let $el = $(el);
25                $el.popover("enable");
26            });
27        }
28    });
29
30    if  ( objectWindowMedia.matches ) {
31        $('[data-toggle="ref-popover"]').each((i, el) => { 
32            let $el = $(el);
33            $el.popover("disable");
34        });
35
36        isScreenSizeSM = true;
37    }
38
39
40    window.addEventListener('scroll', eventScrollReferencePanel );
41
42    $('.abody .xref a').on("click", function(e) {
43        if  ( isScreenSizeSM ) {
44            var id = $(this).data('id');
45            var label = $(this).text();
46            $('#reference-panel-item').html( label + ". " + $('#'+id+'_DATA').html()+'' );
47
48            if  ( $('#reference-panel').hasClass( "d-none" ) ) {
49                $('#reference-panel').toggleClass("d-none d-xs-block d-sm-block d-md-none");        
50                isDisplayReferencePanel = isDisplayReferencePanel ? false:true;
51            }            
52            e.preventDefault();            
53        }
54        else {
55            // DO NOHTING
56        }
57    });
58
59
60    $('#reference-panel .close').on("click", function(e) {        
61        $('#reference-panel').toggleClass("d-none d-xs-block d-sm-block d-md-none");
62        isDisplayReferencePanel = false;
63        e.preventDefault();
64    });
65
66
67    function    eventScrollReferencePanel() {
68        if  ( isDisplayReferencePanel ) {
69            $('#reference-panel').toggleClass("d-none d-xs-block d-sm-block d-md-none");
70            isDisplayReferencePanel = false;
71        }
72    }
73
74    $('[data-toggle="ref-popover"]').each((i, el) => {        
75        let $el = $(el);
76
77        $el.popover({ html: true, content: function() {            
78            var id = $el.data('id');
79            var label = $el.text();
80            return '<div class="abody"><div class="references-and-notes-list"><div class="ref-item">'+ label + ". " + $('#'+id+'_DATA').html()+'</div></div></div>';
81        }}).on("mouseenter", function () {
82            var _this = this;
83
84            clearTimeout(popover_counter);
85            $('[data-toggle=ref-popover]').not(_this).popover('hide');
86
87            // start new timeout to show popover
88            popover_counter = setTimeout(function(){
89                if($(_this).is(':hover'))
90                {
91                    $(_this).popover("show");
92                }
93                $(".popover").on("mouseleave", function () {
94                    $('[data-toggle=ref-popover]').popover('hide');
95                });
96            }, 200);
97
98        }).on("mouseleave", function () {
99            var _this = this;       
100
101            setTimeout(function () {
102                if (!$(".popover:hover").length) {
103                    $(_this).popover("hide");
104                }
105                else {
106                    $('.popover').mouseleave(function() {
107                        $(_this).popover("hide");
108                        $(this).off('mouseleave');
109                    });
110                }
111            }, 200);
112        });
113    });    
114
115});