Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Module:Flexbox: Difference between revisions

From Credoth
mNo edit summary
mNo edit summary
Line 1: Line 1:
local mArguments --initialize lazily
local getArgNums = require('Module:Common').getArgNums
local p = {}
--Implements {{flexbox}} from the frame
function p.flexbox(frame)
mArguments = require('Module:Arguments')
return p._flexbox(mArguments.getArgs(frame), frame)
end
function p._flexbox(args, frame)
function p._flexbox(args, frame)
if not args then
    if not args then
return 'Missing arguments'
        return 'Missing arguments'
end
    end


local html = mw.html.create('div'):addClass('template-flexbox')
    local html = mw.html.create('div'):addClass('template-flexbox')
local columns = args['columns']
    local columns = args['columns'] or 3  -- Default to 3 columns if not passed
local rows = args['rows']
    local rows = args['rows']
local gap = args['gap'] or '0.5rem'
    local gap = args['gap'] or '0.5rem'
local direction
    local direction


if columns then
    if columns then
direction = 'row'
        direction = 'row'
elseif rows then
    elseif rows then
direction = 'column'
        direction = 'column'
end
    end


html:css('--template-flexbox-columns', columns or rows )
    html:css('--template-flexbox-columns', columns) -- Set the number of columns
html:css('--template-flexbox-direction', direction )
    html:css('--template-flexbox-direction', direction)
html:css('--template-flexbox-gap', gap )
    html:css('--template-flexbox-gap', gap)


for i, _ in ipairs(getArgNums('content', args)) do
    for i, _ in ipairs(getArgNums('content', args)) do
local num = tostring(i)
        local num = tostring(i)
local content = args['content' .. num]
        local content = args['content' .. num]
if not content then return end
        if not content then return end


local item = mw.html.create('div'):addClass('template-flexbox-item')
        local item = mw.html.create('div'):addClass('template-flexbox-item')
local span = args['span' .. num] or '1'
        local span = args['span' .. num] or '1'
item:css('--template-flexbox-item-span', span)
        item:css('--template-flexbox-item-span', span)
item:css('--template-flexbox-item-width', 'calc(' .. span .. ' * ' .. args['columns'] .. '% / 100)')
        item:css('--template-flexbox-item-width', 'calc(' .. span .. ' * 100% / ' .. columns .. ')') -- Adjust the width based on span and columns
item:wikitext(content)
        item:wikitext(content)
html:node(item)
        html:node(item)
end
    end


return frame:extensionTag {
    return frame:extensionTag {
name = 'templatestyles', args = { src = 'Module:Flexbox/styles.css' }
        name = 'templatestyles', args = { src = 'Module:Flexbox/styles.css' }
} .. tostring(html)
    } .. tostring(html)
end
end
return p

Revision as of 16:47, 28 December 2024

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

function p._flexbox(args, frame)
    if not args then
        return 'Missing arguments'
    end

    local html = mw.html.create('div'):addClass('template-flexbox')
    local columns = args['columns'] or 3  -- Default to 3 columns if not passed
    local rows = args['rows']
    local gap = args['gap'] or '0.5rem'
    local direction

    if columns then
        direction = 'row'
    elseif rows then
        direction = 'column'
    end

    html:css('--template-flexbox-columns', columns)  -- Set the number of columns
    html:css('--template-flexbox-direction', direction)
    html:css('--template-flexbox-gap', gap)

    for i, _ in ipairs(getArgNums('content', args)) do
        local num = tostring(i)
        local content = args['content' .. num]
        if not content then return end

        local item = mw.html.create('div'):addClass('template-flexbox-item')
        local span = args['span' .. num] or '1'
        item:css('--template-flexbox-item-span', span)
        item:css('--template-flexbox-item-width', 'calc(' .. span .. ' * 100% / ' .. columns .. ')')  -- Adjust the width based on span and columns
        item:wikitext(content)
        html:node(item)
    end

    return frame:extensionTag {
        name = 'templatestyles', args = { src = 'Module:Flexbox/styles.css' }
    } .. tostring(html)
end