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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 259 : / Ligne 259 : @@
      'use strict';
-     var MIN_CARD_WIDTH = 140; /* Largeur minimale acceptable par carte en px */
+     var MIN_CARD_WIDTH = 140;
      var GAP = 12;
-     function adjustMiniCardGrids() {
+     function calcBestCols( total, containerWidth ) {
-         document.querySelectorAll( '.minicard-grid' ).forEach( function ( grid ) {
+         var maxColsByWidth = Math.floor(
-            var cards = grid.querySelectorAll( '.minicard' );
+            ( containerWidth + GAP ) / ( MIN_CARD_WIDTH + GAP )
-            var total = cards.length;
+        );
-            if ( total === 0 ) return;
+        maxColsByWidth = Math.max( 1, Math.min( maxColsByWidth, total ) );
-             var containerWidth = grid.offsetWidth;
+        /* Cherche le diviseur exact le plus grand <= maxColsByWidth */
+        var bestCols = 1;
+        for ( var n = 1; n <= maxColsByWidth; n++ ) {
+             if ( total % n === 0 ) {
+                bestCols = n;
+            }
+        }
+        /* Pas de diviseur exact : on prend maxColsByWidth */
+        if ( bestCols === 1 && maxColsByWidth > 1 ) {
+            bestCols = maxColsByWidth;
+        }
+        return bestCols;
+    }
-            /* Nombre max de colonnes qui respectent la largeur minimale */
+    function adjustGrid( grid ) {
-            var maxColsByWidth = Math.floor(
+        var cards = grid.querySelectorAll( '.minicard' );
-                ( containerWidth + GAP ) / ( MIN_CARD_WIDTH + GAP )
+        var total = cards.length;
-            );
+        if ( total === 0 ) return;
-            maxColsByWidth = Math.max( 1, Math.min( maxColsByWidth, total ) );
-            /* On cherche le meilleur diviseur de total <= maxColsByWidth */
+        var containerWidth = grid.offsetWidth;
-            var bestCols = 1;
-            for ( var n = 1; n <= maxColsByWidth; n++ ) {
-                if ( total % n === 0 ) {
-                    bestCols = n;
-                }
-            }
-            /* Si aucun diviseur exact trouvé au-delà de 1, on prend maxColsByWidth */
+        /* Si le conteneur n'est pas encore rendu (width = 0), on réessaie */
-            if ( bestCols === 1 && maxColsByWidth > 1 ) {
+        if ( containerWidth === 0 ) {
-                bestCols = maxColsByWidth;
+            requestAnimationFrame( function () { adjustGrid( grid ); } );
-             }
+             return;
+        }
-            grid.style.gridTemplateColumns = 'repeat(' + bestCols + ', 1fr)';
+        var bestCols = calcBestCols( total, containerWidth );
+        grid.style.gridTemplateColumns = 'repeat(' + bestCols + ', 1fr)';
-            /* Ajustement hauteur sur mobile */
+        /* Hauteur adaptative */
-            var cardWidth = ( containerWidth - ( bestCols - 1 ) * GAP ) / bestCols;
+        var cardWidth = ( containerWidth - ( bestCols - 1 ) * GAP ) / bestCols;
-            if ( cardWidth < 120 ) {
+        var rowHeight = cardWidth < 120 ? '48px' : cardWidth < 160 ? '52px' : '60px';
-                grid.style.gridAutoRows = '48px';
+        grid.style.gridAutoRows = rowHeight;
-                grid.querySelectorAll( '.minicard' ).forEach( function ( c ) {
+        cards.forEach( function ( c ) {
-                    c.style.height = '48px';
+            c.style.height = rowHeight;
-                } );
-            } else if ( cardWidth < 160 ) {
-                grid.style.gridAutoRows = '52px';
-                grid.querySelectorAll( '.minicard' ).forEach( function ( c ) {
-                    c.style.height = '52px';
-                } );
-            } else {
-                grid.style.gridAutoRows = '60px';
-                grid.querySelectorAll( '.minicard' ).forEach( function ( c ) {
-                    c.style.height = '60px';
-                } );
-            }
          } );
+        /* Révèle la grille une fois calculée */
+        grid.classList.add( 'is-ready' );
      }
-    var resizeTimer;
+     function adjustAllGrids() {
-     function onResize() {
+         document.querySelectorAll( '.minicard-grid' ).forEach( adjustGrid );
-         clearTimeout( resizeTimer );
-        resizeTimer = setTimeout( adjustMiniCardGrids, 100 );
      }
+    /* Exécution immédiate si le DOM est prêt, sinon au plus tôt */
      if ( document.readyState === 'loading' ) {
-         document.addEventListener( 'DOMContentLoaded', adjustMiniCardGrids );
+         document.addEventListener( 'DOMContentLoaded', adjustAllGrids );
      } else {
-         adjustMiniCardGrids();
+         adjustAllGrids();
      }
-     window.addEventListener( 'resize', onResize );
+    /* Recalcul au resize avec debounce */
+    var resizeTimer;
+     window.addEventListener( 'resize', function () {
+        clearTimeout( resizeTimer );
+        resizeTimer = setTimeout( adjustAllGrids, 100 );
+    } );
 }() );