Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« MediaWiki:Common.js » : différence entre les versions

Page de l’interface de MediaWiki
Hiob (discussion | contributions)
Aucun résumé des modifications
Hiob (discussion | contributions)
minicard
Ligne 255 : Ligne 255 :
/* === fin Modèle:Règle === */
/* === fin Modèle:Règle === */


/* MiniCard Grid - Ajustement dynamique des colonnes */
/* =============================================================================
( function ( mw ) {
  EFFET D'APPARITION EN CASCADE POUR LES MINICARDS (Intersection Observer)
     'use strict';
  ============================================================================= */
mw.hook('wikipage.content').add(function ($content) {
     // On cherche toutes les minicards de la page qui n'ont pas encore été animées
    const cards = $content[0].querySelectorAll('.minicard:not(.is-loaded)');
    if (!cards.length) return;


     var MIN_CARD_WIDTH = 140;
     // Vérification de la compatibilité du navigateur
    var GAP = 12;
    if ('IntersectionObserver' in window) {
        let delay = 0;
        let resetDelayTimeout;


    function calcBestCols( total, containerWidth ) {
        const observer = new IntersectionObserver((entries, obs) => {
        var maxColsByWidth = Math.floor(
            entries.forEach(entry => {
            ( containerWidth + GAP ) / ( MIN_CARD_WIDTH + GAP )
                if (entry.isIntersecting) {
        );
                    // Si la carte entre dans l'écran, on applique un délai pour l'effet "cascade"
        maxColsByWidth = Math.max( 1, Math.min( maxColsByWidth, total ) );
                    setTimeout(() => {
                        entry.target.classList.add('is-loaded');
                    }, delay);
                   
                    delay += 75; // 75ms de décalage entre chaque carte
                   
                    // On réinitialise le délai si on a fini de traiter un groupe de cartes
                    clearTimeout(resetDelayTimeout);
                    resetDelayTimeout = setTimeout(() => { delay = 0; }, 100);
                   
                    // On arrête d'observer cette carte pour ne l'animer qu'une seule fois
                    obs.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: '0px 0px -30px 0px', // Déclenche l'animation 30px AVANT que la carte n'arrive en bas de l'écran
            threshold: 0.1
        });


         var bestCols = 1;
         // On observe chaque carte trouvée
         for ( var n = 1; n <= maxColsByWidth; n++ ) {
         cards.forEach(card => observer.observe(card));
            if ( total % n === 0 ) {
    } else {
                bestCols = n;
         // Fallback pour les très vieux navigateurs : on affiche tout direct
            }
         cards.forEach(card => card.classList.add('is-loaded'));
        }
 
        if ( bestCols === 1 && maxColsByWidth > 1 ) {
            bestCols = maxColsByWidth;
        }
 
        return bestCols;
    }
 
    function adjustGrid( grid ) {
        var cards = grid.querySelectorAll( '.minicard' );
        var total = cards.length;
        if ( total === 0 ) return;
 
        var containerWidth = grid.offsetWidth;
        if ( containerWidth === 0 ) {
            requestAnimationFrame( function () { adjustGrid( grid ); } );
            return;
        }
 
        var bestCols = calcBestCols( total, containerWidth );
        grid.style.gridTemplateColumns = 'repeat(' + bestCols + ', 1fr)';
 
        var cardWidth = ( containerWidth - ( bestCols - 1 ) * GAP ) / bestCols;
         /* Hauteur dynamique gérée par le JS en fonction de la largeur dispo */
        var rowHeight = cardWidth < 120 ? '48px' : cardWidth < 160 ? '52px' : '60px';
       
        grid.style.gridAutoRows = rowHeight;
         cards.forEach( function ( c ) {
            c.style.height = rowHeight;
        } );
 
        grid.classList.add( 'is-ready' );
     }
     }
 
});
    function adjustAllGrids() {
        document.querySelectorAll( '.minicard-grid' ).forEach( adjustGrid );
    }
 
    /* Exécution MediaWiki : Gère le chargement initial ET les prévisualisations d'édition */
    mw.hook( 'wikipage.content' ).add( function () {
        adjustAllGrids();
    } );
 
    /* Resize fenêtre */
    var resizeTimer;
    window.addEventListener( 'resize', function () {
        clearTimeout( resizeTimer );
        resizeTimer = setTimeout( adjustAllGrids, 80 );
    } );
 
    /* Observer les changements de classe sur :root (changement de mode clair/sombre Citizen) */
    var rootObserver = new MutationObserver( function ( mutations ) {
        mutations.forEach( function ( mutation ) {
            if ( mutation.attributeName === 'class' ) {
                /* Petit délai pour laisser Citizen appliquer ses styles */
                setTimeout( adjustAllGrids, 150 );
            }
        } );
    } );
 
    rootObserver.observe( document.documentElement, {
        attributes: true,
        attributeFilter: [ 'class' ]
    } );
 
}( mediaWiki ) );

Version du 5 mars 2026 à 14:21

/* Tout JavaScript présent ici sera exécuté par tous les utilisateurs à chaque chargement de page. */
$( function () {
    $( '.citizen-search-trigger' ).on( 'click', function () {
        $( '#searchInput' ).focus();
    } );

    // Raccourci Ctrl+K (ou Cmd+K sur Mac)
    $( document ).on( 'keydown', function ( e ) {
        if ( ( e.ctrlKey || e.metaKey ) && e.key === 'k' ) {
            e.preventDefault();
            $( '#searchInput' ).focus();
        }
    } );
} );

/**
 * MinecraftConnect - Boutons de copie d'adresse serveur Minecraft
 * Inspiré de l'extension PreToClip
 */
(function() {
    'use strict';
    
    function initMinecraftButtons($content) {
        $content.find('.minecraft-connect-wrapper').each(function() {
            var $wrapper = $(this);
            
            // Éviter la double initialisation
            if ($wrapper.data('mc-initialized')) {
                return;
            }
            $wrapper.data('mc-initialized', true);
            
            var serverAddress = $wrapper.data('mc-server');
            var buttonText = $wrapper.data('mc-text');
            
            // Créer le bouton
            var $button = $('<button>')
                .addClass('mw-ui-button mw-ui-progressive minecraft-connect-btn')
                .attr('type', 'button')
                .attr('title', 'Cliquer pour copier : ' + serverAddress)
                .text(buttonText + ' 📋');
            
            // Remplacer le span par le bouton
            $wrapper.replaceWith($button);
            
            // Gestion du clic
            $button.on('click', function() {
                copyToClipboard(serverAddress, $button, buttonText);
            });
        });
    }
    
    function copyToClipboard(text, $button, originalText) {
        // Méthode moderne (Clipboard API)
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(
                function() {
                    showSuccess($button, originalText);
                },
                function() {
                    // Fallback si échec
                    fallbackCopy(text, $button, originalText);
                }
            );
        } else {
            // Fallback pour anciens navigateurs
            fallbackCopy(text, $button, originalText);
        }
    }
    
    function fallbackCopy(text, $button, originalText) {
        var $temp = $('<textarea>')
            .val(text)
            .css({
                position: 'fixed',
                top: 0,
                left: 0,
                width: '2em',
                height: '2em',
                padding: 0,
                border: 'none',
                outline: 'none',
                boxShadow: 'none',
                background: 'transparent'
            })
            .appendTo('body');
        
        $temp[0].select();
        $temp[0].setSelectionRange(0, 99999);
        
        try {
            var successful = document.execCommand('copy');
            if (successful) {
                showSuccess($button, originalText);
            } else {
                showError($button, originalText);
            }
        } catch (err) {
            showError($button, originalText);
        }
        
        $temp.remove();
    }
    
    function showSuccess($button, originalText) {
        mw.notify('Adresse copiée dans le presse-papier !', {
            type: 'success',
            autoHide: true,
            tag: 'minecraft-connect'
        });
        
        $button
            .text('✓ Copié !')
            .removeClass('mw-ui-progressive')
            .addClass('mw-ui-constructive')
            .prop('disabled', true);
        
        setTimeout(function() {
            $button
                .text(originalText + ' 📋')
                .prop('disabled', false)
                .removeClass('mw-ui-constructive')
                .addClass('mw-ui-progressive');
        }, 2000);
    }
    
    function showError($button, originalText) {
        mw.notify('Erreur lors de la copie', {
            type: 'error',
            autoHide: true,
            tag: 'minecraft-connect'
        });
        
        $button
            .text('✗ Erreur')
            .removeClass('mw-ui-progressive')
            .addClass('mw-ui-destructive');
        
        setTimeout(function() {
            $button
                .text(originalText + ' 📋')
                .removeClass('mw-ui-destructive')
                .addClass('mw-ui-progressive');
        }, 2000);
    }
    
    // Initialisation au chargement et pour VisualEditor
    mw.hook('wikipage.content').add(initMinecraftButtons);
    
}());


/* === Modèle:Règle — copie d'ancre === */
mw.hook('wikipage.content').add(function ($content) {

    /* Crée le toast une seule fois */
    var $toast = $('#regle-toast');
    if ($toast.length === 0) {
        $toast = $('<div>')
            .attr('id', 'regle-toast')
            .addClass('regle-toast')
            .appendTo('body');
    }

    var toastTimer;

    function showToast(message) {
        clearTimeout(toastTimer);
        $toast.text(message).addClass('regle-toast--visible');
        toastTimer = setTimeout(function () {
            $toast.removeClass('regle-toast--visible');
        }, 2000);
    }

    /* Cible tous les liens internes dont le href commence par #r- */
    $content.find('a[href^="#r-"]').off('click.regle').on('click.regle', function (e) {
        e.preventDefault();

        var ancre = $(this).attr('href').replace('#', '');
        var url   = window.location.origin
                  + window.location.pathname
                  + '#' + ancre;

        /* Défilement vers l'ancre */
        var cible = document.getElementById(ancre);
        if (cible) {
            cible.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        /* Mise à jour de l'URL */
        history.replaceState(null, '', '#' + ancre);

        /* Copie dans le presse-papier */
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(url)
                .then(function () { showToast('🔗 Lien copié !'); })
                .catch(function () { showToast('❌ Copie impossible'); });
        } else {
            /* Fallback navigateurs anciens */
            var $tmp = $('<textarea>')
                .val(url)
                .css({ position: 'fixed', opacity: 0 })
                .appendTo('body');
            $tmp[0].select();
            try {
                document.execCommand('copy');
                showToast('Lien copié !');
            } catch (err) {
                showToast('❌ Copie impossible');
            }
            $tmp.remove();
        }
    });

});
/* === Modèle:Règle — injection CSS du toast === */
(function () {
    if (document.getElementById('regle-toast-style')) return;
    var style = document.createElement('style');
    style.id = 'regle-toast-style';
style.textContent = [
    '.regle-toast {',
    '  position: fixed;',
    '  bottom: 2rem;',
    '  left: 50%;',
    '  transform: translateX(-50%) translateY(1rem);',
    '  background: var(--color-surface-2);',
    '  color: var(--color-base);',
    '  border: 1px solid var(--color-surface-4);',
    '  padding: 0.4rem 1rem;',
    '  border-radius: var(--border-radius-pill, 2rem);',
    '  font-size: 0.875rem;',
    '  font-weight: 500;',
    '  letter-spacing: 0.01em;',
    '  opacity: 0;',
    '  pointer-events: none;',
    '  transition: opacity 0.25s ease, transform 0.25s ease;',
    '  z-index: 200000;',
    '  white-space: nowrap;',
    '  box-shadow: var(--box-shadow-dialog, 0 4px 16px rgba(0,0,0,0.15));',
    '  display: flex;',
    '  align-items: center;',
    '  gap: 0.4em;',
    '}',
    '.regle-toast.regle-toast--visible {',
    '  opacity: 1;',
    '  transform: translateX(-50%) translateY(0);',
    '}'
].join('\n');

    document.head.appendChild(style);
}());
/* === fin injection CSS === */

/* === fin Modèle:Règle === */

/* =============================================================================
   EFFET D'APPARITION EN CASCADE POUR LES MINICARDS (Intersection Observer)
   ============================================================================= */
mw.hook('wikipage.content').add(function ($content) {
    // On cherche toutes les minicards de la page qui n'ont pas encore été animées
    const cards = $content[0].querySelectorAll('.minicard:not(.is-loaded)');
    if (!cards.length) return;

    // Vérification de la compatibilité du navigateur
    if ('IntersectionObserver' in window) {
        let delay = 0;
        let resetDelayTimeout;

        const observer = new IntersectionObserver((entries, obs) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Si la carte entre dans l'écran, on applique un délai pour l'effet "cascade"
                    setTimeout(() => {
                        entry.target.classList.add('is-loaded');
                    }, delay);
                    
                    delay += 75; // 75ms de décalage entre chaque carte
                    
                    // On réinitialise le délai si on a fini de traiter un groupe de cartes
                    clearTimeout(resetDelayTimeout);
                    resetDelayTimeout = setTimeout(() => { delay = 0; }, 100);
                    
                    // On arrête d'observer cette carte pour ne l'animer qu'une seule fois
                    obs.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: '0px 0px -30px 0px', // Déclenche l'animation 30px AVANT que la carte n'arrive en bas de l'écran
            threshold: 0.1
        });

        // On observe chaque carte trouvée
        cards.forEach(card => observer.observe(card));
    } else {
        // Fallback pour les très vieux navigateurs : on affiche tout direct
        cards.forEach(card => card.classList.add('is-loaded'));
    }
});
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.