https://www.pravda.com.ua/scripts/popover.js?1

1let currentPopover = null;
2let currentItem = null;
3const overlay = document.createElement('div');
4overlay.className = 'popover-overlay';
5document.body.appendChild(overlay);
6
7document.querySelectorAll('.post_news_text, .post_article_text')
8    .forEach(container => {
9        const popover = document.createElement('div');
10        popover.className = 'popover';
11        container.appendChild(popover);
12    });
13document.addEventListener('click', function (e) {
14
15    const item = e.target.closest('.popover-item');
16    if (item) {
17        if (currentItem === item) {
18            hidePopover();
19            return;
20        }
21        showPopover(item);
22        return;
23    }
24    if (e.target.closest('.popover-close')) {
25        hidePopover();
26        return;
27    }
28    if (e.target.classList.contains('popover-overlay')) {
29        hidePopover();
30        return;
31    }
32    if (
33        currentPopover &&
34        currentPopover.contains(e.target)
35    ) {
36        return;
37    }
38    hidePopover();
39});
40
41function showPopover(item) {
42    hidePopover();
43    currentItem = item;
44    currentItem.classList.add('active');
45    const container = item.closest('.post_news_text, .post_article_text');
46    const popover = container.querySelector('.popover');
47    currentPopover = popover;
48
49    const template= document.getElementById(item.dataset.explanationId);
50
51    popover.innerHTML = `
52        <div class="popover-inner">
53
54            <button class="popover-close" type="button">
55                <span class="icon_close">
56                    <svg class="close_icon">
57                        <use xlink:href="#close_icon"></use>
58                    </svg>
59                </span>
60            </button>
61            ${template.innerHTML}
62        </div>
63    `;
64
65    positionPopover(item, container, popover);
66    popover.classList.add('visible');
67    if (window.innerWidth < 1024) {
68        overlay.classList.add('visible');
69    }
70}
71
72function hidePopover() {
73    if (currentItem) {
74        currentItem.classList.remove('active');
75    }
76    if (!currentPopover) return;
77    currentPopover.classList.remove('visible');
78    currentPopover.innerHTML = '';
79    overlay.classList.remove('visible');
80    currentPopover = null;
81    currentItem = null;
82}
83
84function positionPopover(item, container, popover) {
85    const offset = 8;
86    const itemRect = item.getBoundingClientRect();
87    if (window.innerWidth >= 1024) {
88        popover.style.width = '320px';
89        popover.style.left =
90            (container.clientWidth - 80) + 'px';
91    } else {
92        const containerRect = container.getBoundingClientRect();
93        popover.style.width =
94            (window.innerWidth - 0) + 'px';
95
96        popover.style.left =
97            (0 - containerRect.left) + 'px';
98
99    }
100    let top;
101    const showAbove =
102        itemRect.bottom > (window.innerHeight * 0.9);
103    if (showAbove) {
104        top =
105            item.offsetTop -
106            popover.offsetHeight -
107            offset;
108    } else {
109        top =
110            item.offsetTop +
111            item.offsetHeight +
112            offset;
113    }
114    if (top < 0) {
115        top = 0;
116    }
117    popover.style.top = top + 'px';
118}
119window.addEventListener('resize', function () {
120    if (
121        currentItem &&
122        currentPopover
123    ) {
124        const container = currentItem.closest(
125            '.post_news_text, .post_article_text'
126        );
127        positionPopover(
128            currentItem,
129            container,
130            currentPopover
131        );
132    }
133});