More actions
mNo edit summary Tag: Reverted |
Tag: Undo |
||
Line 4: | Line 4: | ||
-- Implements {{flexbox}} from the frame | -- 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 | ||
Line 10: | Line 15: | ||
local html = mw.html.create('div'):addClass('template-flexbox') | local html = mw.html.create('div'):addClass('template-flexbox') | ||
local columns = | 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 gap = args['gap'] or '0.5rem' | ||
local direction | local direction | ||
Line 16: | Line 22: | ||
if columns then | if columns then | ||
direction = 'row' | direction = 'row' | ||
elseif rows then | |||
direction = 'column' | |||
end | end | ||
html:css('--template-flexbox-columns', columns) | html:css('--template-flexbox-columns', columns) -- Set the number of columns | ||
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) | ||
Line 28: | Line 36: | ||
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) |
Revision as of 17:16, 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 = 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
-- Ensure the module returns the table 'p'
return p