Jump to content

Module:ElementPortraitCarousel

Revision as of 22:50, 6 May 2025 by MarkWD (talk | contribs) (// via Wikitext Extension for VSCode)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Documentation for this module may be created at Module:ElementPortraitCarousel/doc

--[[ 
 * Module:ElementPortraitCarousel
 * Renders a portrait carousel for person templates with 3 display modes:
 * 1. Single image - Simple centered display
 * 2. Dual images - Orbital display with animation
 * 3. Multi-image - Full carousel with navigation arrows
 * 
 * Integrates with Blueprint template system.
 ]]

local p = {}

p.elementName = "portraitCarousel"

-- Load required modules
local ErrorHandling = require('Module:ErrorHandling')

-- Default configuration
p.defaultConfig = {
    maxWidth = "220px",
    carouselClass = "person-portrait-carousel"
}

-- Split portrait field by semicolons
local function splitPortraitImages(portrait)
    if not portrait or portrait == "" then
        return {}
    end
    
    local images = {}
    for image in portrait:gmatch("[^;]+") do
        table.insert(images, mw.text.trim(image))
    end
    return images
end

-- Create single image HTML
local function createSingleImage(image, maxWidth)
    return string.format(
        '<div class="person-portrait-carousel">' ..
        '<img src="%s" style="max-width:%s;" alt="Portrait" />' ..
        '</div>',
        image, maxWidth
    )
end

-- Create dual-image orbital display HTML
local function createDualImages(images, maxWidth)
    local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person")
    
    return string.format(
        '<div class="person-portrait-carousel">' ..
        '<div class="carousel-container">' ..
        '<div class="carousel-images" id="carousel-%s">' ..
        '<div class="carousel-item carousel-orbital-1"><img src="%s" alt="Portrait 1" /></div>' ..
        '<div class="carousel-item carousel-orbital-2"><img src="%s" alt="Portrait 2" /></div>' ..
        '</div></div></div>',
        navId,
        images[1], images[2]
    )
end

-- Create multi-image carousel HTML
local function createCarousel(images, maxWidth)
    local itemsHtml = {}
    local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person")
    
    -- Generate carousel items
    for i, image in ipairs(images) do
        local class = i == 1 and "carousel-visible" or "carousel-hidden"
        table.insert(itemsHtml, string.format(
            '<div class="carousel-item %s"><img src="%s" alt="Portrait %d" /></div>',
            class, image, i
        ))
    end
    
    -- Build complete carousel HTML
    return string.format(
        '<div class="person-portrait-carousel">' ..
        '<div class="carousel-container">' ..
        '<div class="carousel-nav carousel-prev" onclick="rotateCarousel(\'%s\', \'prev\')">&#9664;</div>' ..
        '<div class="carousel-images" id="carousel-%s">%s</div>' ..
        '<div class="carousel-nav carousel-next" onclick="rotateCarousel(\'%s\', \'next\')">&#9654;</div>' ..
        '</div></div>',
        navId, navId, table.concat(itemsHtml), navId
    )
end

-- Create block function
function p.createBlock()
    return function(template, args)
        -- Protected execution wrapper
        local function execute()
            local portrait = args.portrait or ""
            local images = splitPortraitImages(portrait)
            local maxWidth = template.config.portraitCarousel 
                and template.config.portraitCarousel.maxWidth
                or p.defaultConfig.maxWidth
            
            -- Determine display type based on number of images
            if #images == 0 then
                return "" -- No images
            elseif #images == 1 then
                return createSingleImage(images[1], maxWidth)
            elseif #images == 2 then
                return createDualImages(images, maxWidth)
            else
                return createCarousel(images, maxWidth)
            end
        end
        
        -- Wrap with error handling
        if template._errorContext then
            return ErrorHandling.protect(
                template._errorContext,
                "ElementBlock_portraitCarousel",
                execute,
                ""
            )
        else
            local ok, result = pcall(execute)
            return ok and result or ""
        end
    end
end

return p