https://veja.abril.com.br/wp-content/themes/abril-master2/plugins/…/new-share-template.js?ver=1790171748

1(function () {
2    var ICON_W      = 42;
3    var ICON_GAP    = 8;
4    var ICON_STEP   = ICON_W + ICON_GAP; // 50px por ícone
5    var EXPANDED_W  = 224;               // 200px + 24px padding (0 12px)
6    var STICKY_DELAY = 1000;
7
8    document.querySelectorAll('.single .content .top-share .share-wrapper').forEach(function (wrapper) {
9        var shareItems = wrapper.querySelector('.share-items');
10        if (!shareItems) return;
11
12        var links = Array.from(shareItems.children); // <a class="share-link">
13        var items = Array.from(shareItems.querySelectorAll('.share-item'));
14        if (!items.length) return;
15
16        var currentExpanded = null;
17        var closeTimer     = null;
18        var pointerTimer   = null;
19
20        function initWrapper() {
21            var isDesktop = window.innerWidth >= 769;
22            var topShare  = wrapper.parentElement;
23
24            if (!isDesktop) {
25                wrapper.style.cssText = '';
26                if (topShare) topShare.style.justifyContent = '';
27                return;
28            }
29
30            wrapper.style.cssText = '';
31            void wrapper.offsetWidth;
32
33            var iconsW = links.length * ICON_W + Math.max(0, links.length - 1) * ICON_GAP;
34
35            wrapper.style.flex           = '0 0 ' + iconsW + 'px';
36            wrapper.style.width          = iconsW + 'px';
37            wrapper.style.overflow       = 'visible';
38            wrapper.style.clipPath       = 'inset(0 -9999px 0 0)';
39            wrapper.style.display        = 'flex';
40            wrapper.style.alignItems     = 'center';
41            wrapper.style.justifyContent = '';
42
43            if (topShare) topShare.style.justifyContent = 'center';
44        }
45
46        function setTransform(val) {
47            if (val === (shareItems.style.transform || '')) return;
48            clearTimeout(pointerTimer);
49            shareItems.style.pointerEvents = 'none';
50            shareItems.style.transform = val;
51            pointerTimer = setTimeout(function () { shareItems.style.pointerEvents = ''; }, 260);
52        }
53
54        function applyShift(idx) {
55            var topShare = wrapper.parentElement;
56            if (!topShare) return;
57            var wrapperStart = wrapper.getBoundingClientRect().left - topShare.getBoundingClientRect().left;
58            var overflow     = Math.ceil(idx * ICON_STEP + EXPANDED_W + wrapperStart - topShare.offsetWidth);
59            setTransform(overflow > 0 ? 'translateX(' + (-overflow) + 'px)' : '');
60        }
61
62        /* --- abrir / fechar --- */
63        function closeExpanded() {
64            if (currentExpanded) { currentExpanded.classList.remove('expanded'); currentExpanded = null; }
65            setTransform('');
66        }
67
68        function openItem(item) {
69            clearTimeout(closeTimer);
70            if (currentExpanded && currentExpanded !== item) {
71                currentExpanded.classList.remove('expanded');
72            }
73            item.classList.add('expanded');
74            currentExpanded = item;
75
76            var link = item.closest('.share-link') || item.parentElement;
77            var idx  = links.indexOf(link);
78            applyShift(idx);
79        }
80
81        items.forEach(function (item) {
82            item.addEventListener('mouseenter', function () {
83                if (window.innerWidth < 769) return;
84                openItem(item);
85            });
86            item.addEventListener('mouseleave', function () {
87                if (window.innerWidth < 769) return;
88                closeTimer = setTimeout(closeExpanded, STICKY_DELAY);
89            });
90        });
91
92        initWrapper();
93        window.addEventListener('load', initWrapper);
94        window.addEventListener('resize', initWrapper);
95    });
96
97    /* --- dropdown --- */
98    document.querySelectorAll('.dropdown').forEach(function (item) {
99        item.addEventListener('click', function (e) { e.stopPropagation(); this.classList.toggle('open'); });
100    });
101    document.addEventListener('click', function () {
102        document.querySelectorAll('.dropdown').forEach(function (item) { item.classList.remove('open'); });
103    });
104
105    /* --- GA --- */
106    document.querySelectorAll('.top-share .share-link').forEach(function (link) {
107        link.addEventListener('click', function () {
108            var dataEvent = this.getAttribute('data-event');
109            if (typeof gaSendEvent === 'function') {
110                gaSendEvent({ category: 'Botão Seguir Rede Sociais', action: 'Follow Social Medias', label: dataEvent, noninteraction: false });
111            }
112        });
113    });
114}());