User:TheMcr/common.js: Difference between revisions

Revision as of 15:20, 5 April 2025

(function () {
    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 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 hideTooltip() {
        tooltip.style.display = 'none';
    }

    function fetchPreview(title, event) {
        $.getJSON(
            mw.util.wikiScript('api'), {
                action: 'query',
                prop: 'extracts|pageimages',
                exintro: true,
                explaintext: true,
                titles: title,
                format: 'json',
                pithumbsize: 120
            }
        ).done(function (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);
        });
    }

    function initPreviews() {
        $('#bodyContent a').each(function () {
            const $link = $(this);
            const href = $link.attr('href');

            if (!href || !href.startsWith('/boobs/') || href.includes(':')) return;

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

            let hoverTimer;

            $link.hover(
                function (e) {
                    hoverTimer = setTimeout(() => fetchPreview(title, e), 300);
                },
                function () {
                    clearTimeout(hoverTimer);
                    hideTooltip();
                }
            ).mousemove(function (e) {
                tooltip.style.left = `${e.pageX + 15}px`;
                tooltip.style.top = `${e.pageY + 15}px`;
            });
        });
    }

    $(initPreviews);
})();