Module:MasonryLayout: Difference between revisions

← Older edit Newer edit →

@@ Line 733: / Line 733: @@
      local options = config.options or {}
      local blockRenderers = config.blockRenderers or {}
+    -- Determine render mode (mobile vs desktop)
+    -- Default to desktop mode, but can be overridden by options
+    local isMobileMode = options.mobileMode or false
+    local columnCount = isMobileMode and 1 or (options.columns or DEFAULT_COLUMNS)
      -- Build cards with render-time content generation
@@ Line 770: / Line 775: @@
      end
-     -- NEW: Mobile-first approach - build ordered single column
+     -- Branch based on render mode
-    local orderedCards = {}
+    if isMobileMode or columnCount == 1 then
-    local introCard = nil
+        -- MOBILE MODE: Single column with explicit ordering
-    local infoBoxCard = nil
+        local orderedCards = {}
-    local otherCards = {}
+        local introCard = nil
+        local infoBoxCard = nil
-    -- Separate special cards from regular cards
+        local otherCards = {}
-    for _, card in ipairs(cards) do
-        if card.id == 'intro' then
+        -- Separate special cards from regular cards
-            introCard = card
+        for _, card in ipairs(cards) do
-        elseif card.id == 'infoBox' then
+            if card.id == 'intro' then
-            infoBoxCard = card
+                introCard = card
-         else
+            elseif card.id == 'infoBox' then
-             table.insert(otherCards, card)
+                infoBoxCard = card
+            else
+                table.insert(otherCards, card)
+            end
+        end
+        -- Build final ordered list: intro → infoBox → others
+        if introCard then
+            table.insert(orderedCards, introCard)
+        end
+         if infoBoxCard then
+             table.insert(orderedCards, infoBoxCard)
+        end
+        for _, card in ipairs(otherCards) do
+            table.insert(orderedCards, card)
          end
-    end
+         -- Render as single column layout
-    -- Build final ordered list: intro → infoBox → others
+        local containerClass = options.containerClass or 'country-hub-masonry-container'
-    if introCard then
+        local cardClass = options.cardClass or 'country-hub-masonry-card'
-         table.insert(orderedCards, introCard)
-    end
+        local masonryHtml = string.format('<div class="%s country-hub-mobile-mode">', containerClass)
-    if infoBoxCard then
-         table.insert(orderedCards, infoBoxCard)
+        -- Add debug information
-    end
-    for _, card in ipairs(otherCards) do
-        table.insert(orderedCards, card)
-    end
-    -- Render as single column layout
-    local containerClass = options.containerClass or 'country-hub-masonry-container'
-    local cardClass = options.cardClass or 'country-hub-masonry-card'
-    local masonryHtml = string.format('<div class="%s">', containerClass)
-    -- Add debug information
-    masonryHtml = masonryHtml .. string.format(
-        '<!-- Masonry Debug: Total cards: %d, Mobile-first single column layout -->',
-        #orderedCards
-    )
-    -- Render each card in order
-    for _, card in ipairs(orderedCards) do
          masonryHtml = masonryHtml .. string.format(
-             '\n<div class="%s" data-card-id="%s">%s</div>',
+             '<!-- Masonry Debug: Total cards: %d, Mobile single column layout -->',
-             cardClass,
+             #orderedCards
-            card.id or 'unknown',
-            card.content or EMPTY_STRING
          )
+        -- Render each card in order
+        for _, card in ipairs(orderedCards) do
+            masonryHtml = masonryHtml .. string.format(
+                '\n<div class="%s" data-card-id="%s">%s</div>',
+                cardClass,
+                card.id or 'unknown',
+                card.content or EMPTY_STRING
+            )
+        end
+        masonryHtml = masonryHtml .. '\n</div>'
+        return masonryHtml
+    else
+        -- DESKTOP MODE: Multi-column with intelligent distribution
+        local distribution = p.distributeCards(cards, columnCount)
+        -- Render the complete masonry layout
+        local containerClass = options.containerClass or 'country-hub-masonry-container'
+        local masonryHtml = string.format('<div class="%s">', containerClass)
+        -- Add debug information as HTML comments
+        if distribution then
+            masonryHtml = masonryHtml .. string.format(
+                '<!-- Masonry Debug: Total cards: %d, Columns: %d, Heights: [%s], Balance: %.2f, Extreme cards: %d -->',
+                #cards,
+                #(distribution.columns or {}),
+                table.concat(distribution.heights or {}, ', '),
+                distribution.balance or 0,
+                distribution.extremeCards or 0
+            )
+            -- Add per-card debug info
+            for i, column in ipairs(distribution.columns or {}) do
+                masonryHtml = masonryHtml .. string.format('\n<!-- Column %d: ', i)
+                for _, card in ipairs(column) do
+                    masonryHtml = masonryHtml .. string.format('%s(%dpx) ', card.id or 'unknown', card.estimatedSize or 0)
+                end
+                masonryHtml = masonryHtml .. '-->'
+            end
+        end
+        masonryHtml = masonryHtml .. '\n' .. p.renderDistributedLayout(distribution, options)
+        masonryHtml = masonryHtml .. '</div>'
+        return masonryHtml
      end
-    masonryHtml = masonryHtml .. '\n</div>'
-    return masonryHtml
 end