https://gracia-baur.tv/js/main.js

1document.addEventListener('DOMContentLoaded', () => {
2    if (window.innerWidth < 768) {
3        const desc = document.querySelector('.big-desc');
4        const review = document.querySelector('.review');
5        review.parentNode.insertBefore(desc, review);
6    }
7    let touchStartX = 0;
8    let touchStartY = 0;
9    document.addEventListener('touchstart', (event) => {
10        const container = event.target.closest('.site-thumb-container');
11        if (!container) return;
12        touchStartX = event.touches[0].clientX;
13        touchStartY = event.touches[0].clientY;
14    });
15    document.addEventListener('touchend', (event) => {
16        const container = event.target.closest('.site-thumb-container');
17        if (!container) return;
18        const touchEndX = event.changedTouches[0].clientX;
19        const touchEndY = event.changedTouches[0].clientY;
20        const diffX = Math.abs(touchEndX - touchStartX);
21        const diffY = Math.abs(touchEndY - touchStartY);
22        if (diffX < 10 && diffY < 10) {
23            const siteButtonsContainer = container.querySelector('.site-buttons-container');
24            if (siteButtonsContainer.style.visibility !== 'visible') {
25                event.preventDefault();
26                siteButtonsContainer.style.visibility = 'visible';
27                siteButtonsContainer.style.opacity = '1';
28                container.querySelector('.site-thumb').style.filter = 'brightness(0.5)';
29            }
30        }
31    });
32
33    const yme = document.querySelector('[data-ym-id]');
34    if (yme) {
35        const ymId = yme.getAttribute('data-ym-id');
36        if (!ymId) return;
37        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
38            []).push(arguments)};
39            m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)
40                [0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
41        (window, document, "script", "https://mc.yandex.com/metrika/tag.js", "ym")
42        ym(ymId, "init", {
43            id:ymId,
44            clickmap:true,
45            trackLinks:true,
46            accurateTrackBounce:true
47        });
48    }
49
50
51
52    let path = window.location.pathname;
53    if (path.endsWith('/')) {
54        path = path.slice(0, -1);
55    }
56
57    if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome') && path === '') {
58        const descriptionInfos = document.querySelectorAll('.site-description-info');
59        descriptionInfos.forEach(function(desc) {
60            desc.classList.add('site-description-info-s');
61        });
62
63        const grid = document.querySelector('.category-grid');
64        if (grid) {
65            grid.classList.remove('category-grid'); // Remove the columns layout class
66            grid.classList.add('category-grid-s');
67        }
68
69        const categoryContainers = document.querySelectorAll('.category-container');
70        categoryContainers.forEach(function(container) {
71            container.classList.add('category-container-s');
72        });
73
74        const gridItems = grid.querySelectorAll('.category-container-s');
75
76        function resizeGridItem(item) {
77            const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
78            const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('gap'));
79            const categoryNameHeight = item.querySelector('.category-name').offsetHeight;
80            const siteListHeight = item.querySelector('.site-list').offsetHeight;
81            let descriptionsHeight = 0;
82            const contentHeight = categoryNameHeight + siteListHeight + descriptionsHeight;
83            const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
84            item.style.gridRowEnd = 'span ' + rowSpan;
85        }
86
87        function resizeAllGridItems() {
88            gridItems.forEach(resizeGridItem);
89        }
90
91        function watchDescriptionTransitions(item) {
92            const descriptionInfos = item.querySelectorAll('.site-description-info');
93
94            descriptionInfos.forEach(function(desc) {
95                desc.addEventListener('transitionend', function(event) {
96                    if (event.propertyName === 'max-height') {
97                        resizeGridItem(item);
98                    }
99                });
100            });
101        }
102

103        gridItems.forEach(function(item) {
104            resizeGridItem(item);
105            watchDescriptionTransitions(item);
106        });
107
108        window.addEventListener('resize', resizeAllGridItems);
109    }
110});