Ir para o conteúdo

Módulo:Slides

De Wikiversidade

A documentação para este módulo pode ser criada na página Módulo:Slides/doc

local p = {}
local getArgs = require('Module:Arguments').getArgs

function p.main(frame)
    local args = getArgs(frame)
    local html = {}
    local count = 0
    local carouselId = args['id'] or "1"
    
    while args[tostring(count + 1)] or args[count + 1] do
        count = count + 1
    end

    if count == 0 then return "" end

    table.insert(html, '<div class="carousel-container" style="scroll-snap-align:start; color:inherit;">')
    table.insert(html, '<div class="carousel-track" style="scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; color:inherit;">')

    for i = 1, count do
        local content = args[i]
        local bg = args['bg' .. i] or "var(--background-color-neutral-subtle)"
        local color = args['color' .. i] or "inherit"
        local padding = args['padding' .. i] or "30px"
        local font = args['font' .. i] or "sans-serif"

        table.insert(html, string.format('<div class="card" tabindex="0" id="item-%d-%s" style="aspect-ratio:16/9; background:%s; color:%s; padding:%s; font-family:%s">', i, carouselId, bg, color, padding, font))
        table.insert(html, content)
        table.insert(html, '<div class="nav-controls">')
        
        if i == 1 then
            if count > 1 then
                table.insert(html, string.format('<div class="nav-btn">[[File:Iconoir nav-arrow-right.svg|20px|link=#item-%d-%s|alt=Próxima|class=skin-invert]]</div>', i + 1, carouselId))
            end
        elseif i < count then
            table.insert(html, string.format('<div class="nav-btn">[[File:Iconoir nav-arrow-left.svg|20px|link=#item-%d-%s|alt=Anterior|class=skin-invert]]</div>', i - 1, carouselId))
            table.insert(html, string.format('<div class="nav-btn">[[File:Iconoir nav-arrow-right.svg|20px|link=#item-%d-%s|alt=Próximo|class=skin-invert]]</div>', i + 1, carouselId))
        else
            table.insert(html, string.format('<div class="nav-btn">[[File:Iconoir nav-arrow-left.svg|20px|link=#item-%d-%s|alt=Anterior|class=skin-invert]]</div>', i - 1, carouselId))
            if count >= 3 then
                table.insert(html, string.format('<div class="nav-btn">[[File:Iconoir undo.svg|20px|link=#item-1-%s|alt=Reiniciar|class=skin-invert]]</div>', carouselId))
            end
        end
        
        table.insert(html, '</div>')
        table.insert(html, '</div>')
    end

    table.insert(html, '</div>')
    table.insert(html, '</div>')

    return table.concat(html, "\n")
end

return p