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
m Undo revision 80 by Buzzworth (talk)
Tag: Undo
mNo edit summary
Line 15: Line 15:


     local html = mw.html.create('div'):addClass('template-flexbox')
     local html = mw.html.create('div'):addClass('template-flexbox')
     local columns = args['columns'] or 3  -- Default to 3 columns if not passed
     local columns = tonumber(args['columns']) or 3  -- Default to 3 columns if not passed
    local rows = args['rows']
     local gap = args['gap'] or '0.5rem'
     local gap = args['gap'] or '0.5rem'
     local direction
     local direction
Line 22: Line 21:
     if columns then
     if columns then
         direction = 'row'
         direction = 'row'
    elseif rows then
        direction = 'column'
     end
     end


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


    -- Loop over content arguments
     for i, _ in ipairs(getArgNums('content', args)) do
     for i, _ in ipairs(getArgNums('content', args)) do
         local num = tostring(i)
         local num = tostring(i)
Line 36: Line 33:


         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'
        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)
         item:wikitext(content)
         html:node(item)
         html:node(item)
Line 47: Line 41:
     } .. tostring(html)
     } .. tostring(html)
end
end


-- Ensure the module returns the table 'p'
-- Ensure the module returns the table 'p'
return p
return p

Revision as of 17:30, 28 December 2024

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

local mArguments -- initialize lazily
local getArgNums = require('Module:Common').getArgNums
local p = {}  -- Initialize the p table to hold functions

-- 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)
    if not args then
        return 'Missing arguments'
    end

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

    if columns then
        direction = 'row'
    end

    html:css('--template-flexbox-columns', columns)
    html:css('--template-flexbox-gap', gap)

    -- Loop over content arguments
    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')
        item:wikitext(content)
        html:node(item)
    end

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


-- Ensure the module returns the table 'p'
return p