User:Bradv/Scripts/ExpandDiffs.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
(function( $, mw ) {
    'use strict';
    if (mw.config.get('wgAction')==='history' 
    || mw.config.get('wgCanonicalSpecialPageName') == 'Contributions'
    || mw.config.get('wgCanonicalSpecialPageName') == 'IPContributions'
    || mw.config.get('wgCanonicalSpecialPageName') == 'SuggestedInvestigations'
    || (mw.config.get('wgCanonicalSpecialPageName') || '').startsWith('Recentchanges')) {
        const api = new mw.Api();
        const app = {
            styleSheet: mw.util.addCSS(`
                .diff-addedline,
                .diff-deletedline,
                .diff-context {
                    font-size: 0.9em;
                }
                .diff > tr.hidden {
                    display:none;
                }
                .difftoggle {
                    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/ArrowDown.svg/8px-ArrowDown.svg.png);
                    background-repeat: no-repeat;
                    background-position: left bottom;
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    cursor: pointer;
                }
                .difftoggle.diffcollapsed {
                    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/ArrowRight.svg/8px-ArrowRight.svg.png);
                }
                .diff.diffcollapsed {
                    display:none;
                }
                .mw-changeslist-line:hover,
                li[data-mw-revid]:hover {
                    outline:1px dashed #a2a9b1 !important;
                }
                .diff .diff-addedline a:not(:hover),
                .diff .diff-deletedline a:not(:hover) {
                    color: inherit;
                }
                .diff a:hover,
                .diff a:active,
                .diff a:focus {
                    text-decoration:none;
                }
            `),
            observer: null,
            init: function () {
                app.makelinks();

                mw.loader.using(['mediawiki.util', 'mediawiki.diff.styles']).then(function () {
                    var $link = $(mw.util.addPortletLink('p-views', '', 'Expand diffs', 'ca-expand', '', '', '#ca-history'))
                    .click(function(e) {
                        e.preventDefault();
                        if (!$link.hasClass('selected')) {
                            $link.addClass('selected');
                            $link.find('a').text('Collapse diffs');
                            app.expandAll();
                            app.expanding=true;
                        } else {
                            $link.removeClass('selected');
                            $link.find('a').text('Expand diffs');
                            app.collapseAll();
                            app.expanding=false;
                        }
                    });

                    app.observer = new MutationObserver(app.makelinks);
                    app.observer.observe($('#mw-content-text').get(0), { childList: true });
                });
            },
            makelinks: function () {
                $('*[data-mw-revid]:not(.mw-userlink)').each(function() {
                    if ($(this).find('.difftoggle').length==0) {
                        $('<span>', {'class': 'difftoggle diffcollapsed'})
                            .prependTo($(this))
                            .click(app.toggle);
                    }
                    $(this).click(app.toggle);
                    if (app.expanding) {
                        $(this).click();
                    }
                });
            },
            diffcache: [],
            load: async function ($row) {
                if ($row.attr('diffloaded')===undefined) {
                    $row.attr('diffloaded', '');
                    $row.find('.difftoggle').removeClass('diffcollapsed');
                    var revid = $row.attr('data-mw-revid');

                    if (app.diffcache[revid]===undefined) {                    
                        const response = await api.get({
                            action: 'compare',
                            format: 'json',
                            fromrev: revid,
                            torelative: 'prev',
                            prop: 'diff'
                        })
                            
                        console.log(response);
                        var diff = response.compare['*'];
                        var $diff = $('<table>', {'class':'diff diff-contentalign-left diff-editfont-monospace'})
                            .append($('<colgroup><col class="diff-marker"/><col class="diff-content"/><col class="diff-marker"/><col class="diff-content"/></colgroup>'))
                            .append(diff)
                            .appendTo($row);
                        $row.find('tr:has(td.diff-context), tr:has(td.diff-lineno)').addClass('hidden');
                        app.linkify($diff);
                        app.diffcache[revid] == $diff.get(0).outerHTML;
                        
                    } else {
                        await $(app.diffcache[revid]).appendTo($row);
                    }
                } else {
                    await $row.find('.diff, .difftoggle').removeClass('diffcollapsed');
                }
            },
            expandAll: async function () {
                const rows = $('*[data-mw-revid]:not(.mw-userlink)').toArray();
                for (const row of rows) {
                    await app.load($(row))
                }
            },
            collapseAll: function () {
                $('.diff, .difftoggle').addClass('diffcollapsed');
            },
            toggle: function (e) {
                var $row;
                if ($(e.target).hasClass('difftoggle')) {
                    $row = $(e.target).parent();
                } else if ($(e.target).attr('data-mw-revid')) {
                    $row = $(e.target);
                } else {
                    return;
                }          
                e.stopPropagation();
                if ($row.attr('diffloaded')===undefined) {
                    app.load($row);
                } else {
                    console.log($row);
                    $row.find('.diff, .difftoggle').toggleClass('diffcollapsed');
                }
            },
            linkify: function ($diff) {
                function makelinks(text, regex1, regex2, urlprefix) {
                    var out = text;
                    var arr = text.match(regex1);
                    if (arr) {
                        for (var i=0;i<arr.length;i++) {
                            var s = arr[i];
                            var slink;
                            if (regex2) {
                                slink = s.match(regex2)[0].replaceAll(' ', '_');
                            } else {
                                slink = s.replace(' ', '_');
                            }
                            var snew = "<a href='" + (urlprefix ? urlprefix : '') + slink + "'>" + s + "</a>";
                            out = out.replace(s, snew);
                        }
                    }
                    return out;
                }

                try {
                    $.each($diff.find('div'), function () {
                        var html = $(this).html();
                        console.log(html);

                        try {
                          html = makelinks(html, /https?:\/\/.*?(?=[\s\<\]\|]|&lt;)/gi);
                          html = makelinks(html, /\[\[.*?\]\]/g, /(?<=\[\[).*?(?=\||\]\])/, '/wiki/');
                          html = makelinks(html, /\{\{.*?\}\}/g, /(?<=\{\{).*?(?=\||\}\})/, '/wiki/Template:');
                        } catch (e) {
                          // https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group/51568859
                        }

                        $(this).html(html);
                    });
                } catch (e) {
                    console.log(e)
                }
            }
        }
        app.init();
    }
}(jQuery, mediaWiki ));