User:TheMcr/common.js: Difference between revisions

Revision as of 15:34, 5 April 2025

(function () {
    // Create the tooltip element
    const tooltip = document.createElement('div');
    tooltip.style.position = 'absolute';
    tooltip.style.maxWidth = '300px';
    tooltip.style.padding = '10px';
    tooltip.style.background = '#fff';
    tooltip.style.border = '1px solid #aaa';
    tooltip.style.borderRadius = '6px';
    tooltip.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
    tooltip.style.fontSize = '14px';
    tooltip.style.zIndex = '9999';
    tooltip.style.display = 'none';
    document.body.appendChild(tooltip);

    // Function to show the tooltip
    function showTooltip(event, content) {
        tooltip.innerHTML = content;
        tooltip.style.left = `${event.pageX + 15}px`;
        tooltip.style.top = `${event.pageY + 15}px`;
        tooltip.style.display = 'block';
    }

    // Function to hide the tooltip
    function hideTooltip() {
        tooltip.style.display = 'none';
    }

    // Function to fetch preview of the page
    function fetchPreview(title, event) {
        const url = mw.util.wikiScript('api');
        const params = {
            action: 'query',
            prop: 'extracts|pageimages',
            exintro: true,
            explaintext: true,
            titles: title,
            format: 'json',
            pithumbsize: 120
        };

        // Perform the API request
        fetch(`${url}?${new URLSearchParams(params)}`)
            .then(response => response.json())
            .then(data => {
                const page = data.query.pages[Object.keys(data.query.pages)[0]];
                if (page.missing) return;

                let content = `<strong>${page.title}</strong><br>`;
                if (page.thumbnail && page.thumbnail.source) {
                    content += `<img src="${page.thumbnail.source}" style="float:left; margin-right:10px;" />`;
                }
                content += `<div>${page.extract || 'No summary available.'}</div>`;
                showTooltip(event, content);
            });
    }

    // Initialize previews for specific elements in the page
    function initPreviews() {
        const body = document.body;
        const links = body.querySelectorAll('body a');

        links.forEach(link => {
            const href = link.getAttribute('href');
            if (!href || !href.startsWith('/boobs/') || href.includes(':')) return;

            const title = decodeURIComponent(href.replace(/^\/boobs\//, '')).replace(/_/g, ' ');

            let hoverTimer;

            // Event listeners for hover and mousemove
            link.addEventListener('mouseenter', function (e) {
                hoverTimer = setTimeout(() => fetchPreview(title, e), 300);
            });

            link.addEventListener('mouseleave', function () {
                clearTimeout(hoverTimer);
                hideTooltip();
            });

            link.addEventListener('mousemove', function (e) {
                tooltip.style.left = `${e.pageX + 15}px`;
                tooltip.style.top = `${e.pageY + 15}px`;
            });
        });
    }

    // Initialize the tooltip previews when the page content is loaded
    document.addEventListener('DOMContentLoaded', initPreviews);
})();