User:TheMcr/common.js: Difference between revisions

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


     function hideTooltip() {
     // Hover effect for each row
        tooltip.style.display = 'none';
    const rows = table.querySelectorAll('tr');
     }
     rows.forEach(row => {
 
         row.addEventListener('mouseenter', function() {
    function fetchPreview(title, event) {
             row.style.transform = "scale(1.05)";
         $.getJSON(
             row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
            mw.util.wikiScript('api'), {
             row.style.backgroundColor = "#f0f0f0";
                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]];
             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() {
         row.addEventListener('mouseleave', function() {
         $('#bodyContent a').each(function () {
             row.style.transform = "scale(1)";
             const $link = $(this);
             row.style.backgroundColor = ""; // reset background color
            const href = $link.attr('href');
 
            if (!href || href.indexOf('/boobs/') !== 0 || href.indexOf(':') !== -1) return; // skip special pages
 
            const title = decodeURIComponent(href.replace(/^\/boobs\//, '')).replace(/_/g, ' ');
 
             $link.hover(
                function (e) {
                    fetchPreview(title, e);
                },
                function () {
                    hideTooltip();
                }
            ).mousemove(function (e) {
                tooltip.style.left = `${e.pageX + 15}px`;
                tooltip.style.top = `${e.pageY + 15}px`;
            });
         });
         });
     }
     });
 
});
    $(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"