https://seranking.com/wp-content/themes/se_theme/js/hint.js?v=3352

1// hint
2
3/*
4 
5 <div class="hint_trigger" data-hint-cont="<h5>Hint title</h5><p>Hint text</p>">
6 
7 hint can be fixed - add to trigger class hint_fixed:
8 <div class="hint_trigger hint_fixed">
9 
10 hint can include variables - add to trigger attribute data-hint-vars:
11 <div class="hint_trigger" data-hint-vars="Friend`,`meet" data-hint-cont="Hi %s0, nice to %s1 you!">
12 result: "Hi Friend, nice to meet you!"
13 
14 delimiter between variables - `,`
15 
16 */
17
18(function() {
19    var hintTriggers = document.querySelectorAll('.hint_trigger'),
20        customOffset = 20,
21        hintContainer,
22        hintDelimiter = '`,`',
23        isMobile = window.innerWidth < 992;
24    
25    if (!hintTriggers) {
26        return;
27    }
28    
29    hintContainer = document.createElement('div');
30    hintContainer.className = 'hint_pop';
31    document.body.appendChild(hintContainer);
32    
33    var isAgenciesPage = window.location.pathname.indexOf('/agencies/') !== -1;
34    
35    var helpLinks = {
36        en: 'https://help.seranking.com/hc/en-us/articles/18786039690780-What-is-the-Agency-Catalog#h_01JNDR3CRVE2RESFXAQE03QJV7',
37        de: 'https://help.seranking.com/hc/de/articles/18786039690780-%C3%9Cberblick-%C3%BCber-den-Agenturkatalog#h_01JNDR3CRVE2RESFXAQE03QJV7',
38        fr: 'https://help.seranking.com/hc/fr/articles/18786039690780-Pr%C3%A9sentation-du-Catalogue-d-Agences#h_01JNDR3CRVE2RESFXAQE03QJV7',
39        es: 'https://help.seranking.com/hc/es/articles/18786039690780-Resumen-del-Cat%C3%A1logo-de-Agencias#h_01JNDR3CRVE2RESFXAQE03QJV7',
40        nl: 'https://help.seranking.com/hc/en-us/articles/18786039690780-What-is-the-Agency-Catalog#h_01JNDR3CRVE2RESFXAQE03QJV7' // temporarily to the English version (en-us)
41    };
42    
43    Array.from(hintTriggers).forEach(function(trigger) {
44        if (!isMobile) {
45            ['mouseenter', 'mousemove'].forEach(function(ev) {
46                trigger.addEventListener(ev, function(event) {
47                    handleHintEvent(event, trigger);
48                });
49            });
50            trigger.addEventListener('mouseleave', function() {
51                hintContainer.classList.remove('show');
52            });
53        } else if (trigger.classList.contains('hint_trigger_mobile')) {
54            trigger.addEventListener('touchstart', function(event) {
55                handleHintEvent(event, trigger);
56            }, {passive: true});
57            trigger.addEventListener('click', function(event) {
58                handleHintEvent(event, trigger);
59            });
60        }
61        
62        if (isAgenciesPage) {
63            trigger.addEventListener('click', function(event) {
64                hintContainer.classList.remove('show');
65                if (event && typeof event.preventDefault === 'function') {
66                    event.preventDefault();
67                    event.stopPropagation();
68                }
69                var url = helpLinks[lang] || helpLinks.en;
70                window.open(url, '_blank', 'noopener');
71            });
72        }
73    });
74    
75    function handleHintEvent(event, element) {
76        if (isMobile && !element.classList.contains('hint_trigger_mobile')) {
77            return;
78        }
79        var content = element.getAttribute('data-hint-cont');
80        if (content) {
81            var contentVars = element.getAttribute('data-hint-vars');
82            if (contentVars) {
83                var varsArray = contentVars.split(hintDelimiter);
84                for (var i = 0; i < varsArray.length; i++) {
85                    var regex = new RegExp('%s' + i, 'gm');
86                    content = content.replace(regex, varsArray[i]);
87                }
88            }
89            hintContainer.innerHTML = content;
90            hintContainer.classList.add('show');
91            hintContainer.classList.toggle('se-pdl__hint-trigger', element.classList.contains('se-pdl__item'));
92            hintPosition(event);
93        }
94        removeHintOnMobile();
95    }
96    
97    function removeHintOnMobile() {
98        if (isMobile) {
99            var timeout;
100            document.addEventListener('scroll', function() {
101                if (!timeout) {
102                    timeout = setTimeout(function() {
103                        hintContainer.classList.remove('show');
104                        timeout = null;
105                    }, 50);
106                }
107            });
108        }
109    }
110    
111    function hintPosition(event) {
112        hintContainer.style.width = '';
113        var curX = isMobile ? event.touches[0].pageX : event.clientX,
114            curY = isMobile ? event.touches[0].pageY : event.clientY,
115            windW = window.innerWidth,
116            windH = window.innerHeight,
117            hintPopW = hintContainer.offsetWidth,
118            hintPopH = hintContainer.offsetHeight,
119            hintL, hintT;
120        
121        if (hintPopW <= windW) {
122            if ((curX + hintPopW + (customOffset + 10)) <= windW) {
123                hintL = curX + customOffset;
124            } else if ((curX - hintPopW - customOffset) >= 0) {
125                hintL = curX - hintPopW - customOffset;
126            } else {
127                hintL = (windW - hintPopW) / 2;
128            }
129        } else {
130            hintContainer.style.width = '100%';
131        }
132        
133        if (hintPopH <= windH) {
134            if ((curY + hintPopH + (customOffset + 10)) <= windH) {
135                hintT = curY + customOffset;
136            } else {
137                hintT = curY - hintPopH - customOffset;
138            }
139        } else {
140            hintT = curY - customOffset - hintPopH;
141        }
142        
143        hintContainer.style.top = hintT + 'px';
144        hintContainer.style.left = hintL + 'px';
145    }
146})();