Module:Infobox

From Fanon Wiki
Revision as of 14:07, 9 May 2022 by Lakelimbo (talk | contribs) (Untrimming did nothing, so split items with two slashes instead)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

This module allows the creation of infoboxes in a very flexible and easy way with colors and ways of spliting cells.

How to use

{{#invoke:infobox|main|color=MAIN COLOR|text=TEXT COLOR|title=TITLE|
Head // Content // Mode
Head // Content // Mode
Head // Content // Mode
...
}}
  • MANDATORY: mainthe first parameter will always need to be main, otherwise the infobox invokation will fail.
  • MANDATORY: TITLE — the title of the infobox.
  • Optional: color — the main color of the infobox, for the borders and the background of the title and heads.
  • Optional: text — the text color. Set to black (#000000) by default. If needed to change, it's recommended to use white (#ffffff) in the majority of cases.

After that, break a line and start the rows. Each new line break (on the editor) will create a new row.

  • MANDATORY: Head — the title of that row, the "header cell". It's the part that stays colored and text-centered.
  • MANDATORY: Content — the actual content of that row. It's the part that is not colored.
  • Optional: Mode — the mode of the row. See more below.
My title
Head
Content
Head
Content
Head
Content
Head
Content
Head
Content
{{#invoke:infobox|main|color=gold|text=#000|title=My title|
Head // Content
Head // Content
Head // Content
Head // Content
Head // Content
}}

Row modes

Each row can be assigned a "Mode", which is the way the row is split between cells. There are 3 available modes:

  • split — split the Head and Content horizontally, with the Content being somewhat larger.
  • wide — does not split the Head and Content, so they will take 100% of the width of that row.
  • img — similar to wide, but intended for images, usually placed at the top of the infobox. This takes out the background color of the Head so you can place the file there. The Content cell then is text-centered and italicized.
Modes of the infobox
Split row
Split row
Wide row
Wide row
Image row
Image row
Unset row
Unset row
Wide row
Wide row

Modes are optional. If the mode is omitted (like the "Unset row" above), then it will default to split.

{{#invoke:infobox|main|color=turquoise|text=#fff|title=Modes of the infobox|
Split row // Split row // split
Wide row // Wide row // wide
Image row // Image row // img
Unset row // Unset row
Wide row // Wide row // wide
}}

local p = {}

function p.main(frame)
	local c1, c2, title
		c1 = mw.text.trim(frame.args["color"] or "#ff8100")
		c2 = mw.text.trim(frame.args["text"] or "#000")
		title = frame.args["title"]
    local items = frame.args[1]
    if items ~= nil then
        items = mw.text.split(items, "\n")
    else
        items = {}
    end
    local result = {}
    table.insert(result, ' <div class="infobox" style="border-color: '.. c1 ..'"><div class="p-1 fs-1 br-4 text-center" style="background:'.. c1 ..'; color: '.. c2 ..'; grid-column: span 4; font-weight: bold">'.. title ..'</div> ')
    local i = 1
    local x = 1
    local y = 2
    local item = {}
    local parents = {}
    local resultItems = ""
    local resultSection = ""
    local resultForm = ""
    while items[i] do
        item = mw.text.split(items[i], "//")
        if item[2] and mw.text.trim(item[1]) ~= "" and mw.text.trim(item[2]) ~= "" then
            x = 1
            resultItems = ""
            while parents[x] do
                resultItems = resultItems .. parents[x]
                x = x + 1
            end
            y = 2
            resultSection = mw.text.trim(item[1])
            resultForm = item[2] or "N/A"
            resultExt = mw.text.trim(item[3] or "split")
            
            table.insert(result, '<div class="p-1 infobox-head infobox-'.. resultExt ..'" style="background:'.. c1 ..'; color:'.. c2 ..'">'.. resultSection ..'</div><div class="p-1 infobox-cell infobox-'.. resultExt ..'">'.. resultForm ..'</div>')
            
        end
        i = i + 1
    end
    table.insert(result, "</div>")
    return table.concat(result, "")
end

return p