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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 255 : / Ligne 255 : @@
 /* === 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 ) );