MediaWiki:Gadget-TimelinePreview.js

// Gadget: Timeline hover previews (final cleaned version)
// Requires: mediawiki.api, jquery, mediawiki.util

mw.loader.using(['mediawiki.api', 'jquery', 'mediawiki.util']).then(function () {
    var api = new mw.Api();
    var timelineCache = null;

    // --- Popup setup (uses outer .mwe-popups class but no inner gray frame) ---
    var popup = $('<div>')
        .addClass('mwe-popups mwe-popups-type-page')
        .css({
            position: 'absolute',
            zIndex: 1000,
            display: 'none',
            background: 'white',
            border: '1px solid #a2a9b1',
            borderRadius: '2px',
            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
            maxWidth: '360px',
            padding: '0.75em 1em'
        })
        .appendTo(document.body);

    function loadTimeline() {
        if (timelineCache) return $.Deferred().resolve();
        return api.get({
            action: 'parse',
            page: 'Timeline',
            prop: 'text',
            formatversion: 2
        }).then(function (data) {
            var html = $('<div>').html(data.parse.text);
            timelineCache = {};
            html.find('dt').each(function () {
                var dt = $(this);
                var id = dt.find('span[id]').attr('id');
                if (!id) return;
                var ddList = [];
                var el = dt.next();
                while (el.length && el.prop('tagName') === 'DD') {
                    var clone = el.clone();
                    // Strip citations and links
                    clone.find('sup.reference').remove();
                    clone.find('a').replaceWith(function () {
                        return $(this).text();
                    });
                    ddList.push(clone.html());
                    el = el.next();
                }
                timelineCache[id] = ddList.join('<br>');
            });
        });
    }

    function showPopup($link, html) {
        popup.html(html);
        var offset = $link.offset();
        popup.css({
            top: offset.top + $link.outerHeight() + 6,
            left: offset.left
        });
        popup.show();
    }

    function hidePopup() {
        popup.hide();
    }

    function onHover() {
        var $link = $(this);
        var href = $link.attr('href') || '';
        var match =
            href.match(/\/Timeline#(\d{4}-\d{2}-\d{2})$/) ||
            href.match(/^#(\d{4}-\d{2}-\d{2})$/);
        if (!match) return;

        var id = match[1];
        loadTimeline().then(function () {
            var content = timelineCache[id];
            if (content) showPopup($link, content);
        });
    }

    function disablePreviews($links) {
        $links.each(function () {
            var $link = $(this);
            $link.attr('data-mw-previews-disable', 'true');
            if (mw.hook && mw.hook('ext.popups.disablePreview')) {
                mw.hook('ext.popups.disablePreview').fire($link[0]);
            }
        });
    }

    function bindTimelineLinks(context) {
        var $links = $(context).find('a[href*="Timeline#"], a[href^="#"]').filter(function () {
            var href = $(this).attr('href') || '';
            return (
                href.match(/Timeline#\d{4}-\d{2}-\d{2}$/) ||
                href.match(/^#\d{4}-\d{2}-\d{2}$/)
            );
        });

        disablePreviews($links);

        $links.off('.timelinePreview')
            .on('mouseenter.timelinePreview', onHover)
            .on('mouseleave.timelinePreview', hidePopup);
    }

    // Initial bind
    mw.hook('wikipage.content').add(bindTimelineLinks);

    // Observe dynamically revealed nodes and disable previews right away
    var observer = new MutationObserver(function (mutations) {
        for (var i = 0; i < mutations.length; i++) {
            var m = mutations[i];
            for (var j = 0; j < m.addedNodes.length; j++) {
                var node = m.addedNodes[j];
                if (node.nodeType === 1) bindTimelineLinks(node);
            }
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});