User:TheMcr/common.js: Difference between revisions

Boobpedia - Encyclopedia of big boobs
Jump to navigationJump to search
No edit summary
No edit summary
 
Line 1: Line 1:
(function () {
document.addEventListener("DOMContentLoaded", function () {
    // Create the tooltip element
     const table = document.querySelector('.wikitable');
     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
     // Apply fade-in effect
     function showTooltip(event, content) {
     table.style.opacity = 0;
        tooltip.innerHTML = content;
    table.style.transition = "opacity 2s";
        tooltip.style.left = `${event.pageX + 15}px`;
    setTimeout(function() {
        tooltip.style.top = `${event.pageY + 15}px`;
         table.style.opacity = 1;
         tooltip.style.display = 'block';
     }, 10);
     }


     // Function to hide the tooltip
     // Hover effect for each row
     function hideTooltip() {
     const rows = table.querySelectorAll('tr');
        tooltip.style.display = 'none';
     rows.forEach(row => {
     }
         row.addEventListener('mouseenter', function() {
 
             row.style.transform = "scale(1.05)";
    // Function to fetch preview of the page
            row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
    function fetchPreview(title, event) {
            row.style.backgroundColor = "#f0f0f0";
         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
         row.addEventListener('mouseleave', function() {
    function initPreviews() {
             row.style.transform = "scale(1)";
        const body = document.body;
            row.style.backgroundColor = ""; // reset background color
         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);
})();

Latest revision as of 15:59, 5 April 2025

document.addEventListener("DOMContentLoaded", function () {
    const table = document.querySelector('.wikitable');

    // Apply fade-in effect
    table.style.opacity = 0;
    table.style.transition = "opacity 2s";
    setTimeout(function() {
        table.style.opacity = 1;
    }, 10);

    // Hover effect for each row
    const rows = table.querySelectorAll('tr');
    rows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            row.style.transform = "scale(1.05)";
            row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
            row.style.backgroundColor = "#f0f0f0";
        });

        row.addEventListener('mouseleave', function() {
            row.style.transform = "scale(1)";
            row.style.backgroundColor = ""; // reset background color
        });
    });
});
Retrieved from "https://www.boobpedia.com/wiki/index.php?title=User:TheMcr/common.js&oldid=916829"