Utilisateur:Od1n/CompareVersionsButtonsToLinks.js

/**
 * Ce script remplace dans les pages d'historiques les deux boutons « Comparer les versions sélectionnées »
 * par des liens mis à jour dynamiquement, qui visent à avoir le même fonctionnement et la même apparence,
 * mais qui permettent en plus de faire "clic milieu" ou "ctrl+clic" pour ouvrir dans un nouvel onglet.
 *
 * {{Catégorisation JS}}
 */

/* globals mw, $ */

if ( mw.config.get('wgAction') === 'history' ) {

    mw.loader.using( 'mediawiki.util', function () {
        $( function ( $ ) {
            'use strict';

            // rustine pour que l'introduction d'un <a> ne modifie pas la hauteur de ces conteneurs
            $( '.mw-history-compareselectedversions' ).css( 'line-height', 0 );

            var $buttons = $( '.mw-history-compareselectedversions-button' );
            if ( !$buttons.length ) {
                return;
            }

            var replacements = [];

            $buttons.each( function ( _, button ) {
                var link = document.createElement( 'a' );
                link.textContent = button.value;
                link.title = button.title;
                link.className = button.className;

                // rustine pour affichage identique qu'avec le bouton, suite au passage aux composants Codex
                // voir : https://doc.wikimedia.org/codex/latest/components/demos/button.html#link-buttons-and-other-elements
                // (le test s'il y a la classe "cdx-button", c'est parce que je les vois bien changer encore et encore de système)
                if ( link.classList.contains( 'cdx-button' ) ) {
                    link.classList.add( 'cdx-button--fake-button' );
                    link.classList.add( 'cdx-button--fake-button--enabled' );
                }

                // rustine pour affichage identique qu'avec le bouton
                // https://stackoverflow.com/questions/5166574/vertical-align-text-in-block-element/5166693#5166693
                // edit : désactivation de ces styles, ils sont redondants suite à l'ajout de la rustine "Codex" au-dessus
                /*
                link.style.display = 'inline-flex';
                link.style.alignItems = 'center';
                */

                replacements.push( { button: button, link: link } );
            } );

            $buttons = null; // for garbage collection

            var pagehistory = document.getElementById( 'pagehistory' ); // attention, variable encore utilisée par la suite
            if ( !pagehistory ) {
                return;
            }

            $( pagehistory ).on( 'change', 'input[name="oldid"], input[name="diff"]', function () {
                updateButtons();
            } );

            updateButtons();

            function updateButtons() {
                var newUrl = makeLinkUrl();

                if ( newUrl ) {
                    replacements.forEach( function ( replacement ) {
                        replacement.link.href = newUrl;
                        replaceIfNeeded( replacement.button, replacement.link );
                    } );
                } else {
                    // si la génération de l'URL a échoué, on remet en place
                    // les boutons d'origine pour avoir quelque chose de fonctionnel
                    replacements.forEach( function ( replacement ) {
                        replaceIfNeeded( replacement.link, replacement.button );
                    } );
                }
            }

            function makeLinkUrl() {
                var radioOldid = pagehistory.querySelector( 'input[name="oldid"]:checked' );
                var radioDiff = pagehistory.querySelector( 'input[name="diff"]:checked' );
                if ( !radioOldid || !radioDiff ) {
                    return false;
                }

                var oldid = radioOldid.value;
                var diff = radioDiff.value;
                if ( !oldid || !diff ) {
                    return false;
                }

                return mw.util.getUrl( null, { type: 'revision', diff: diff, oldid: oldid } );
            }

            function replaceIfNeeded( from, to ) {
                // si c'est l'élément voulu qui est déjà en place dans le DOM, on n'a rien à faire,
                // plutôt que de compter sur replaceWith() pour qu'il ne fasse rien
                if ( to.isConnected ) {
                    return;
                }
                from.replaceWith( to );
            }

        } );
    } );
}