MediaWiki:Common.js: відмінності між версіями

Матеріал з Київський національний лінгвістичний університет
Перейти до навігації Перейти до пошуку
Немає опису редагування
Немає опису редагування
Рядок 290: Рядок 290:
});
});


/* ── 3. Останні зміни (під випадковими статтями) ── */
function loadRecentChanges() {
    var container = document.getElementById('recent-changes-list');
    if (!container) return;
   
    container.innerHTML = '<div class="random-articles-loading">Завантаження...</div>';
   
    var apiBase = mw.config.get('wgScriptPath') + '/api.php';
    var excludedPages = ['Головна сторінка', 'Структурні підрозділи', 'Викладачі'];
   
    // Отримуємо останні правки
    fetch(apiBase + '?action=query&list=recentchanges&rcnamespace=0&rclimit=10&format=json')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var changes = data.query.recentchanges.filter(function(rc) {
                return excludedPages.indexOf(rc.title) === -1;
            }).slice(0, 3);
           
            if (changes.length === 0) {
                container.innerHTML = '<div class="random-articles-loading">Немає змін</div>';
                return;
            }
           
            var titles = changes.map(function(rc) { return rc.title; }).join('|');
           
            return fetch(
                apiBase + '?action=query&titles=' + encodeURIComponent(titles) +
                '&prop=revisions|images&rvprop=content&format=json'
            );
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var pages = Object.values(data.query.pages);
            container.innerHTML = '';
           
            var promises = pages.map(function(page) {
                var title = page.title;
                var pageUrl = mw.config.get('wgArticlePath').replace(
                    '$1', encodeURIComponent(title.replace(/ /g, '_'))
                );
               
                var content = '';
                if (page.revisions && page.revisions[0]) {
                    content = page.revisions[0]['*'] || '';
                }
               
                var excerpt = extractDescription(content);
                if (!excerpt) excerpt = 'Немає опису.';
               
                var imgName = extractImageName(content);
               
                if (imgName) {
                    var fileTitle = imgName.match(/^(Файл|File|Image|Зображення):/i)
                        ? imgName
                        : 'File:' + imgName;
                   
                    return fetch(
                        apiBase + '?action=query&titles=' + encodeURIComponent(fileTitle) +
                        '&prop=imageinfo&iiprop=url&iiurlwidth=120&format=json'
                    )
                    .then(function(r) { return r.json(); })
                    .then(function(imgData) {
                        var imgPages = Object.values(imgData.query.pages);
                        var imgSrc = null;
                        if (imgPages[0] && imgPages[0].imageinfo && imgPages[0].imageinfo[0]) {
                            imgSrc = imgPages[0].imageinfo[0].thumburl || imgPages[0].imageinfo[0].url;
                        }
                        return { title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: imgSrc };
                    })
                    .catch(function() {
                        return { title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null };
                    });
                }
               
                return Promise.resolve({ title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null });
            });
           
            return Promise.all(promises);
        })
        .then(function(results) {
            var list = document.getElementById('recent-changes-list');
            if (!list) return;
            list.innerHTML = '';
           
            results.forEach(function(item) {
                var thumbHtml = item.imgSrc
                    ? '<img class="random-article-thumb" src="' + item.imgSrc + '" alt="">'
                    : '<div class="random-article-thumb-placeholder">📝</div>';
               
                var card = document.createElement('a');
                card.href = item.pageUrl;
                card.className = 'random-article-card';
                card.innerHTML =
                    thumbHtml +
                    '<div class="random-article-info">' +
                        '<div class="random-article-title">' + mw.html.escape(item.title) + '</div>' +
                        '<div class="random-article-excerpt">' + mw.html.escape(item.excerpt) + '</div>' +
                    '</div>';
               
                list.appendChild(card);
            });
        })
        .catch(function(err) {
            var list = document.getElementById('recent-changes-list');
            if (list) list.innerHTML = '<div class="random-articles-loading">Не вдалося завантажити.</div>';
            console.error('[Recent Changes] error:', err);
        });
}


mw.hook('wikipage.content').add(function() {
    var panel = document.getElementById('recent-changes-panel');
    if (panel) {
        loadRecentChanges();
    }
});


/* ── 4. Сортування карточок за прізвищем ── */
/* ── 4. Сортування карточок за прізвищем ── */
Рядок 476: Рядок 362:
     });
     });
});
});


/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════
   ПОПАПИ ДЛЯ КАРТОЧОК НА ГОЛОВНІЙ СТОРІНЦІ
   ПОПАПИ ДЛЯ ГОЛОВНОЇ СТОРІНКИ
══════════════════════════════════════════════ */
══════════════════════════════════════════════ */


mw.hook('wikipage.content').add(function() {
(function() {
     if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
     var popup = null;
    var hideTimer = null;
      
      
    var preview = null;
     function createPopup() {
    var previewEl = null;
         if (popup) return popup;
    var previewTimer = null;
         popup = document.createElement('div');
   
         popup.className = 'mp-popup';
    // Створюємо елемент попапу
         popup.style.cssText = 'position:fixed;z-index:99999;opacity:0;transition:opacity 0.2s;pointer-events:none;';
     function createPreviewEl() {
         document.body.appendChild(popup);
         if (previewEl) return previewEl;
         return popup;
         previewEl = document.createElement('div');
         previewEl.className = 'main-preview-popup';
         previewEl.style.position = 'absolute';
        previewEl.style.zIndex = '10000';
        previewEl.style.pointerEvents = 'none';
         document.body.appendChild(previewEl);
         return previewEl;
     }
     }
      
      
    // Показати попап для карточки категорії
     function positionPopup(target) {
     function showCategoryPreview(card, event) {
         var rect = target.getBoundingClientRect();
         clearTimeout(previewTimer);
        var p = createPopup();
          
          
         var title = card.querySelector('.card-title');
        // Визначаємо позицію
         if (!title) return;
         var left = rect.right + 12;
         var top = rect.top;
          
          
         var titleText = title.textContent.trim();
         // Якщо не вміщується справа — показуємо зліва
        var img = card.querySelector('.card-image img');
        if (left + 250 > window.innerWidth) {
         var imgSrc = img ? img.src : null;
            left = rect.left - 262;
         }
          
          
         var rect = card.getBoundingClientRect();
         // Якщо не вміщується знизу — підіймаємо
        var scrollY = window.scrollY || window.pageYOffset;
        if (top + 200 > window.innerHeight) {
         var scrollX = window.scrollX || window.pageXOffset;
            top = window.innerHeight - 220;
         }
          
          
         previewTimer = setTimeout(function() {
         p.style.left = left + 'px';
            var popup = createPreviewEl();
        p.style.top = top + 'px';
           
            popup.innerHTML =
                '<div class="main-preview-content">' +
                    (imgSrc ? '<img src="' + imgSrc + '" class="main-preview-img" />' : '') +
                    '<div class="main-preview-title">' + titleText + '</div>' +
                    '<div class="main-preview-hint">Клікніть щоб перейти →</div>' +
                '</div>';
           
            var spaceRight = window.innerWidth - rect.right;
            if (spaceRight > 250) {
                popup.style.left = (rect.right + scrollX + 12) + 'px';
            } else {
                popup.style.left = (rect.left + scrollX - 242) + 'px';
            }
            popup.style.top = (rect.top + scrollY) + 'px';
            popup.style.opacity = '1';
        }, 200);
     }
     }
      
      
    // Показати попап для статті
     function showPopup(html, target) {
     function showArticlePreview(card, event) {
         clearTimeout(hideTimer);
         clearTimeout(previewTimer);
         var p = createPopup();
       
         p.innerHTML = html;
         var titleEl = card.querySelector('.random-article-title');
         positionPopup(target);
         var excerptEl = card.querySelector('.random-article-excerpt');
         setTimeout(function() { p.style.opacity = '1'; }, 10);
        var thumbEl = card.querySelector('.random-article-thumb, .random-article-thumb-placeholder');
       
        if (!titleEl) return;
       
        var title = titleEl.textContent.trim();
         var excerpt = excerptEl ? excerptEl.textContent.trim() : '';
         var thumbSrc = thumbEl && thumbEl.tagName === 'IMG' ? thumbEl.src : null;
       
        var rect = card.getBoundingClientRect();
        var scrollY = window.scrollY || window.pageYOffset;
        var scrollX = window.scrollX || window.pageXOffset;
       
        previewTimer = setTimeout(function() {
            var popup = createPreviewEl();
           
            popup.innerHTML =
                '<div class="main-preview-content article-preview">' +
                    (thumbSrc ? '<img src="' + thumbSrc + '" class="main-preview-img" />' : '<div class="main-preview-placeholder">📄</div>') +
                    '<div class="main-preview-title">' + title + '</div>' +
                    (excerpt ? '<div class="main-preview-excerpt">' + excerpt + '</div>' : '') +
                    '<div class="main-preview-hint">Клікніть щоб відкрити →</div>' +
                '</div>';
           
            var panelRect = card.closest('.random-articles-panel, .right-column');
            if (panelRect) {
                var panelBox = panelRect.getBoundingClientRect();
                popup.style.left = (panelBox.left + scrollX - 262) + 'px';
            } else {
                popup.style.left = (rect.left + scrollX - 262) + 'px';
            }
            popup.style.top = (rect.top + scrollY) + 'px';
            popup.style.opacity = '1';
        }, 200);
     }
     }
      
      
     function hidePreview() {
     function hidePopup() {
         clearTimeout(previewTimer);
         clearTimeout(hideTimer);
         previewTimer = setTimeout(function() {
         hideTimer = setTimeout(function() {
             if (previewEl) {
             if (popup) popup.style.opacity = '0';
                previewEl.style.opacity = '0';
        }, 150);
                setTimeout(function() {
                    previewEl.innerHTML = '';
                }, 150);
            }
        }, 100);
     }
     }
      
      
     // Додаємо обробники на картки категорій
     mw.hook('wikipage.content').add(function() {
    document.querySelectorAll('.category-card').forEach(function(card) {
        if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
        card.addEventListener('mouseenter', function(e) {
       
             showCategoryPreview(card, e);
        // Попапи для карточок категорій
        document.querySelectorAll('.category-card').forEach(function(card) {
            card.addEventListener('mouseenter', function() {
                var title = card.querySelector('.card-title');
                var img = card.querySelector('.card-image img');
               
                if (!title) return;
               
                var html = '<div class="mp-popup-box">' +
                    (img ? '<img src="' + img.src + '" class="mp-popup-img"/>' : '') +
                    '<div class="mp-popup-title">' + title.textContent.trim() + '</div>' +
                    '<div class="mp-popup-hint">Клікніть щоб перейти →</div>' +
                    '</div>';
               
                showPopup(html, card);
             });
            card.addEventListener('mouseleave', hidePopup);
         });
         });
         card.addEventListener('mouseleave', hidePreview);
          
    });
        // Попапи для випадкових статей
   
        function attachArticlePopup(card) {
    // Додаємо обробники на статті
            if (card.dataset.popupBound) return;
    document.querySelectorAll('.random-article-card').forEach(function(card) {
            card.dataset.popupBound = 'true';
         card.addEventListener('mouseenter', function(e) {
           
             showArticlePreview(card, e);
            card.addEventListener('mouseenter', function() {
                var title = card.querySelector('.random-article-title');
                var excerpt = card.querySelector('.random-article-excerpt');
                var thumb = card.querySelector('.random-article-thumb');
               
                if (!title) return;
               
                var html = '<div class="mp-popup-box">' +
                    (thumb ? '<img src="' + thumb.src + '" class="mp-popup-img"/>' : '<div class="mp-popup-placeholder">📄</div>') +
                    '<div class="mp-popup-title">' + title.textContent.trim() + '</div>' +
                    (excerpt ? '<div class="mp-popup-excerpt">' + excerpt.textContent.trim() + '</div>' : '') +
                    '<div class="mp-popup-hint">Клікніть щоб відкрити →</div>' +
                    '</div>';
               
                showPopup(html, card);
            });
            card.addEventListener('mouseleave', hidePopup);
        }
       
        document.querySelectorAll('.random-article-card').forEach(attachArticlePopup);
       
        // Спостереження за новими статтями
         var observer = new MutationObserver(function() {
             document.querySelectorAll('.random-article-card').forEach(attachArticlePopup);
         });
         });
         card.addEventListener('mouseleave', hidePreview);
          
        var list = document.getElementById('random-articles-list');
        if (list) observer.observe(list, { childList: true, subtree: true });
     });
     });
   
})();
    // Для динамічно доданих статей
    var observer = new MutationObserver(function() {
        document.querySelectorAll('.random-article-card').forEach(function(card) {
            if (!card.dataset.previewBound) {
                card.dataset.previewBound = 'true';
                card.addEventListener('mouseenter', function(e) {
                    showArticlePreview(card, e);
                });
                card.addEventListener('mouseleave', hidePreview);
            }
        });
    });
   
    var randomList = document.getElementById('random-articles-list');
    var recentList = document.getElementById('recent-changes-list');
    if (randomList) observer.observe(randomList, { childList: true });
    if (recentList) observer.observe(recentList, { childList: true });
});

Версія за 16:09, 16 лютого 2026

$(function() {
    $('.category-card').each(function() {
        var $card = $(this);
        var href = $card.attr('data-href');
        
        if (href) {
            $card.css('cursor', 'pointer');
            
            $card.on('click', function(e) {
                if ($(e.target).closest('a').length === 0) {
                    window.location.href = href;
                }
            });
            
            $card.hover(
                function() { $card.addClass('card-hover'); },
                function() { $card.removeClass('card-hover'); }
            );
        }
    });
});
/* ── Випадкові статті на головній сторінці ── */

/* Витягнути назву зображення з вікі-тексту */
function extractImageName(wikitext) {
    if (!wikitext) return null;

    // 1. Шукаємо в Infobox: | image = Файл.jpg
    var infoboxImg = wikitext.match(/\|\s*image\s*=\s*([^\|\n\}]+)/i);
    if (infoboxImg) {
        var name = infoboxImg[1].trim();
        if (name && name.length > 0) return name;
    }

    // 2. Шукаємо [[Файл:Назва.jpg|...]] або [[File:...]]
    var fileMatch = wikitext.match(/\[\[(?:Файл|File|Зображення|Image):([^\|\]]+)/i);
    if (fileMatch) {
        return fileMatch[1].trim();
    }

    return null;
}

/* Витягнути перший змістовний абзац */
function extractDescription(wikitext) {
    if (!wikitext) return '';

    // Прибрати інфобокс {{...}} (може бути багаторядковим)
    var text = wikitext;
    var depth = 0;
    var infoboxEnd = -1;
    for (var i = 0; i < text.length; i++) {
        if (text[i] === '{') depth++;
        else if (text[i] === '}') {
            depth--;
            if (depth === 0) { infoboxEnd = i + 1; break; }
        }
    }
    if (infoboxEnd > 0) text = text.substring(infoboxEnd);

    // Прибрати [[Файл:...]] блоки
    text = text.replace(/\[\[(?:Файл|File|Зображення|Image):[^\]]*\]\]/gi, '');

    // Прибрати wikitable {| ... |}
    text = text.replace(/\{\|[\s\S]*?\|\}/g, '');

    // Прибрати шаблони {{...}}
    text = text.replace(/\{\{[^}]*\}\}/g, '');

    // Прибрати заголовки == ... ==
    text = text.replace(/={2,6}[^=\n]+=+/g, '');

    // Прибрати вікі-посилання — залишити текст
    text = text.replace(/\[\[(?:[^\|\]]*\|)?([^\]]+)\]\]/g, '$1');

    // Прибрати зовнішні посилання [url текст]
    text = text.replace(/\[[^\s\]]+\s+([^\]]+)\]/g, '$1');
    text = text.replace(/\[[^\]]+\]/g, '');

    // Прибрати жирний/курсив
    text = text.replace(/'{2,3}/g, '');

    // Прибрати HTML теги
    text = text.replace(/<[^>]+>/g, '');

    // Прибрати рядки що починаються з * # : ;
    text = text.replace(/^[\*#:;].*/gm, '');

    // Прибрати порожні рядки і зайві пробіли
    var lines = text.split('\n').map(function(l) { return l.trim(); }).filter(function(l) { return l.length > 20; });

    // Взяти перший змістовний рядок
    if (lines.length > 0) {
        var result = lines[0].substring(0, 160);
        if (lines[0].length > 160) result += '…';
        return result;
    }

    return '';
}

function loadRandomArticles() {
    var list = document.getElementById('random-articles-list');
    if (!list) return;

    list.innerHTML = '<div class="random-articles-loading">Завантаження...</div>';

    var apiBase = mw.config.get('wgScriptPath') + '/api.php';

    // Сторінки які не повинні з'являтись у випадкових статтях
    var excludedPages = ['Головна сторінка', 'Структурні підрозділи', 'Викладачі'];

    fetch(apiBase + '?action=query&list=random&rnnamespace=0&rnlimit=10&format=json')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var pages = data.query.random.filter(function(p) {
                return excludedPages.indexOf(p.title) === -1;
            }).slice(0, 3);

            var titles = pages.map(function(p) { return p.title; }).join('|');

            return fetch(
                apiBase +
                '?action=query' +
                '&titles=' + encodeURIComponent(titles) +
                '&prop=revisions' +
                '&rvprop=content' +
                '&format=json'
            );
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var pages = Object.values(data.query.pages);
            list.innerHTML = '';

            var promises = pages.map(function(page) {
                var title = page.title;
                var pageUrl = mw.config.get('wgArticlePath').replace(
                    '$1', encodeURIComponent(title.replace(/ /g, '_'))
                );

                var content = '';
                if (page.revisions && page.revisions[0]) {
                    content = page.revisions[0]['*'] || '';
                }

                var excerpt = extractDescription(content);
                if (!excerpt) excerpt = 'Немає опису.';

                var imgName = extractImageName(content);

                if (imgName) {
                    var fileTitle = imgName.match(/^(Файл|File|Image|Зображення):/i)
                        ? imgName
                        : 'File:' + imgName;

                    return fetch(
                        apiBase +
                        '?action=query' +
                        '&titles=' + encodeURIComponent(fileTitle) +
                        '&prop=imageinfo' +
                        '&iiprop=url' +
                        '&iiurlwidth=120' +
                        '&format=json'
                    )
                    .then(function(r) { return r.json(); })
                    .then(function(imgData) {
                        var imgPages = Object.values(imgData.query.pages);
                        var imgSrc = null;
                        if (imgPages[0] && imgPages[0].imageinfo && imgPages[0].imageinfo[0]) {
                            imgSrc = imgPages[0].imageinfo[0].thumburl || imgPages[0].imageinfo[0].url;
                        }
                        return { title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: imgSrc };
                    })
                    .catch(function() {
                        return { title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null };
                    });
                }

                return Promise.resolve({ title: title, excerpt: excerpt, pageUrl: pageUrl, imgSrc: null });
            });

            return Promise.all(promises);
        })
        .then(function(results) {
            var list2 = document.getElementById('random-articles-list');
            if (!list2) return;
            list2.innerHTML = '';

            results.forEach(function(item) {
                var thumbHtml = item.imgSrc
                    ? '<img class="random-article-thumb" src="' + item.imgSrc + '" alt="">'
                    : '<div class="random-article-thumb-placeholder">📄</div>';

                var card = document.createElement('a');
                card.href = item.pageUrl;
                card.className = 'random-article-card';
                card.innerHTML =
                    thumbHtml +
                    '<div class="random-article-info">' +
                        '<div class="random-article-title">' + mw.html.escape(item.title) + '</div>' +
                        '<div class="random-article-excerpt">' + mw.html.escape(item.excerpt) + '</div>' +
                    '</div>';

                list2.appendChild(card);
            });
        })
        .catch(function(err) {
            var list3 = document.getElementById('random-articles-list');
            if (list3) list3.innerHTML = '<div class="random-articles-loading">Не вдалося завантажити статті.</div>';
            console.error('[RA] error:', err);
        });
}

/* Запуск */
mw.hook('wikipage.content').add(function() {
    var panel = document.getElementById('random-articles-panel');
    if (!panel) return;

    loadRandomArticles();

    var btn = document.getElementById('random-articles-refresh');
    if (btn) {
        btn.addEventListener('click', function() {
            loadRandomArticles();
        });
    }
});

/* ══════════════════════════════════════════════
   ГОЛОВНА СТОРІНКА: покращення
══════════════════════════════════════════════ */

/* ── 1. AOS: анімації при скролі ── */
mw.loader.getScript('https://unpkg.com/aos@2.3.1/dist/aos.js').then(function() {
    mw.loader.load('https://unpkg.com/aos@2.3.1/dist/aos.css', 'text/css');
    
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 600,
            easing: 'ease-out-cubic',
            once: true,
            offset: 50
        });
    }
});

/* ── 2. Анімація чисел статистики ── */
function animateNumber(element, target) {
    var current = 0;
    var increment = target / 60; // 60 кадрів
    var timer = setInterval(function() {
        current += increment;
        if (current >= target) {
            current = target;
            clearInterval(timer);
        }
        element.textContent = Math.floor(current);
    }, 16); // ~60 FPS
}

mw.hook('wikipage.content').add(function() {
    // Запускаємо анімацію тільки на головній сторінці
    if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
    
    var statsNumbers = document.querySelectorAll('.stats-panel-number');
    var animated = false;
    
    function checkAndAnimate() {
        if (animated) return;
        var statsPanel = document.querySelector('.stats-panel');
        if (!statsPanel) return;
        
        var rect = statsPanel.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom > 0) {
            animated = true;
            statsNumbers.forEach(function(el) {
                var text = el.textContent.trim();
                var num = parseInt(text.replace(/[^\d]/g, ''), 10);
                if (!isNaN(num) && num > 0) {
                    el.textContent = '0';
                    setTimeout(function() { animateNumber(el, num); }, 200);
                }
            });
        }
    }
    
    window.addEventListener('scroll', checkAndAnimate);
    checkAndAnimate();
});



/* ── 4. Сортування карточок за прізвищем ── */
mw.hook('wikipage.content').add(function() {
    document.querySelectorAll('div[style*="grid-template-columns"]').forEach(function(grid) {
        var cards = Array.from(grid.children);
        if (cards.length < 2) return;

        cards.sort(function(a, b) {
            var aLink = a.querySelector('div[style*="flex-grow"] a');
            var bLink = b.querySelector('div[style*="flex-grow"] a');
            if (!aLink || !bLink) return 0;

            var aSurname = aLink.textContent.trim().split(' ')[0];
            var bSurname = bLink.textContent.trim().split(' ')[0];

            return aSurname.localeCompare(bSurname, 'uk');
        });

        cards.forEach(function(card) {
            grid.appendChild(card);
        });
    });
});

/* ══════════════════════════════════════════════
   ТАЙМЛАЙН ІСТОРІЇ УНІВЕРСИТЕТУ
══════════════════════════════════════════════ */

var timelineData = [
    { year: 1948, event: "Заснування університету" },
    { year: 1962, event: "Початок наукової школи прагмалінгвістики та мовленнєвої комунікації" },
    { year: 1963, event: "Започаткування школи комп'ютерної лінгвістики та статистичної лексикографії" },
    { year: 1972, event: "Створення школи лінгвостилістики в синхронії та діахронії" },
    { year: 1992, event: "Заснування наукової школи контрастивної семантики і типології" },
    { year: 1993, event: "Відкриття першої в Україні кафедри ЮНЕСКО" },
    { year: 1994, event: "Внесення до реєстру закладів освіти України з IV рівнем акредитації" },
    { year: 1996, event: "Формування школи зарубіжного і порівняльного літературознавства" },
    { year: 2000, event: "Проведення Міжнародної конференції ЮНЕСКО «Лінгвопакс-VIII»" }
];

mw.hook('wikipage.content').add(function() {
    var container = document.getElementById('history-timeline');
    if (!container) return;
    
    timelineData.forEach(function(item, index) {
        var point = document.createElement('div');
        point.className = 'timeline-point';
        point.setAttribute('data-aos', 'fade-up');
        point.setAttribute('data-aos-delay', (100 + index * 100).toString());
        
        point.innerHTML =
            '<div class="timeline-dot"></div>' +
            '<div class="timeline-content">' +
                '<div class="timeline-year">' + item.year + '</div>' +
                '<div class="timeline-event">' + item.event + '</div>' +
            '</div>';
        
        container.appendChild(point);
    });
});

/* ── AOS на картки категорій ── */
mw.hook('wikipage.content').add(function() {
    if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
    
    var cards = document.querySelectorAll('.category-card');
    cards.forEach(function(card, index) {
        card.setAttribute('data-aos', 'fade-up');
        card.setAttribute('data-aos-delay', (100 + (index % 12) * 50).toString());
    });
});



/* ══════════════════════════════════════════════
   ПОПАПИ ДЛЯ ГОЛОВНОЇ СТОРІНКИ
══════════════════════════════════════════════ */

(function() {
    var popup = null;
    var hideTimer = null;
    
    function createPopup() {
        if (popup) return popup;
        popup = document.createElement('div');
        popup.className = 'mp-popup';
        popup.style.cssText = 'position:fixed;z-index:99999;opacity:0;transition:opacity 0.2s;pointer-events:none;';
        document.body.appendChild(popup);
        return popup;
    }
    
    function positionPopup(target) {
        var rect = target.getBoundingClientRect();
        var p = createPopup();
        
        // Визначаємо позицію
        var left = rect.right + 12;
        var top = rect.top;
        
        // Якщо не вміщується справа — показуємо зліва
        if (left + 250 > window.innerWidth) {
            left = rect.left - 262;
        }
        
        // Якщо не вміщується знизу — підіймаємо
        if (top + 200 > window.innerHeight) {
            top = window.innerHeight - 220;
        }
        
        p.style.left = left + 'px';
        p.style.top = top + 'px';
    }
    
    function showPopup(html, target) {
        clearTimeout(hideTimer);
        var p = createPopup();
        p.innerHTML = html;
        positionPopup(target);
        setTimeout(function() { p.style.opacity = '1'; }, 10);
    }
    
    function hidePopup() {
        clearTimeout(hideTimer);
        hideTimer = setTimeout(function() {
            if (popup) popup.style.opacity = '0';
        }, 150);
    }
    
    mw.hook('wikipage.content').add(function() {
        if (mw.config.get('wgPageName') !== 'Головна_сторінка') return;
        
        // Попапи для карточок категорій
        document.querySelectorAll('.category-card').forEach(function(card) {
            card.addEventListener('mouseenter', function() {
                var title = card.querySelector('.card-title');
                var img = card.querySelector('.card-image img');
                
                if (!title) return;
                
                var html = '<div class="mp-popup-box">' +
                    (img ? '<img src="' + img.src + '" class="mp-popup-img"/>' : '') +
                    '<div class="mp-popup-title">' + title.textContent.trim() + '</div>' +
                    '<div class="mp-popup-hint">Клікніть щоб перейти →</div>' +
                    '</div>';
                
                showPopup(html, card);
            });
            card.addEventListener('mouseleave', hidePopup);
        });
        
        // Попапи для випадкових статей
        function attachArticlePopup(card) {
            if (card.dataset.popupBound) return;
            card.dataset.popupBound = 'true';
            
            card.addEventListener('mouseenter', function() {
                var title = card.querySelector('.random-article-title');
                var excerpt = card.querySelector('.random-article-excerpt');
                var thumb = card.querySelector('.random-article-thumb');
                
                if (!title) return;
                
                var html = '<div class="mp-popup-box">' +
                    (thumb ? '<img src="' + thumb.src + '" class="mp-popup-img"/>' : '<div class="mp-popup-placeholder">📄</div>') +
                    '<div class="mp-popup-title">' + title.textContent.trim() + '</div>' +
                    (excerpt ? '<div class="mp-popup-excerpt">' + excerpt.textContent.trim() + '</div>' : '') +
                    '<div class="mp-popup-hint">Клікніть щоб відкрити →</div>' +
                    '</div>';
                
                showPopup(html, card);
            });
            card.addEventListener('mouseleave', hidePopup);
        }
        
        document.querySelectorAll('.random-article-card').forEach(attachArticlePopup);
        
        // Спостереження за новими статтями
        var observer = new MutationObserver(function() {
            document.querySelectorAll('.random-article-card').forEach(attachArticlePopup);
        });
        
        var list = document.getElementById('random-articles-list');
        if (list) observer.observe(list, { childList: true, subtree: true });
    });
})();