Module:Notice

Usage

Use this template to create other Notice Templates.

Syntax: {{notice|align=|text-align=|width=|file=|filesize=|header=|content=}}

color	Named, optional	The color preset for the border. Defined options are green, blue, teal, orange, yellow, red, maroon, pink, and gray. However, if a color is a known CSS color, it can be used. Defaults to green.
text-align	Named, optional	The text-align attribute of the header and content text, e.g. center. Defaults to left.
file	Named, optional	The file to show on the left-hand section as a filename. e.g. Example.jpg. Defaults to nothing shown.
filesize	Named, optional	The file's size on the left-hand section. e.g. 30px. Defaults to 48px if a file was specified, otherwise none.
header	Named, optional	The header text. e.g. Notice. Defaults to nothing shown.
content	Named, optional	The content text. e.g. Test message. Defaults to nothing shown.
width	Named, optional	The width attribute of the notice, e.g. 30%. Defaults to unwritten (inherit).

Examples

{{notice|file=Example.jpg|header=Under Construction|content=This article is under construction.}}

Fichier:Example.jpg

Under Construction

This article is under construction.

{{notice|file=Example.jpg|header=Notice with header text only.}}

Fichier:Example.jpg

Notice with header text only.

{{notice|file=Example.jpg|content=Small notice without a header.}}

Fichier:Example.jpg

Small notice without a header.

{{notice|file=Example.jpg|header=Green notice|color=green}}

Fichier:Example.jpg

Green notice

{{notice|file=Example.jpg|header=Blue notice with custom width|width=30%|color=blue}}

Fichier:Example.jpg

Blue notice with custom width

{{notice|file=Example.jpg|header=Teal notice|color=teal}}

Fichier:Example.jpg

Teal notice

{{notice|file=Example.jpg|header=Orange notice|color=orange}}

Fichier:Example.jpg

Orange notice

{{notice|file=Example.jpg|header=Yellow notice|color=yellow}}

Fichier:Example.jpg

Yellow notice

{{notice|file=Example.jpg|header=Red notice|color=red}}

Fichier:Example.jpg

Red notice

{{notice|file=Example.jpg|header=Maroon notice|color=maroon}}

Fichier:Example.jpg

Maroon notice

{{notice|file=Example.jpg|header=Pink notice|color=pink}}

Fichier:Example.jpg

Pink notice

{{notice|file=Example.jpg|header=Gray notice|color=gray}}

Fichier:Example.jpg

Gray notice

{{notice|file=Example.jpg|header=Custom color notice|color=slateblue|text-align=center}}

Fichier:Example.jpg

Custom color notice

---

local p = {}

function p.getStyleForColor(color)
    result = {
        ["green"] = "rgb(170, 220, 0)",
        ["teal"] = "rgb(47, 172, 172)",
        ["blue"] = "rgb(0, 153, 255)",
        ["orange"] = "rgb(255, 128, 0)",
        ["yellow"] = "rgb(235, 238, 61)",
        ["red"] = "rgb(217, 0, 0)",
        ["pink"] = "rgb(240, 60, 120)",
        ["maroon"] = "rgb(174, 21, 102)",
        ["gray"] = "rgb(201, 201, 201)",
    }

    return result[color] or color
end

-- Entry point for the module
function p.main(frame)
    local args = frame:getParent().args
    local color = args.color or 'green'
    local align = args.align or ''
    local textAlign = args['text-align'] or 'left'
    local width = args.width or ''
    local file = args.file or ''
    local fileSize = args.filesize or '48px'
    local header = args.header or ''
    local content = args.content or ''

    local root = mw.html.create('div')
        :addClass('notice')
        :attr('align', align)
        :css('text-align', textAlign)
        :css('border-color', p.getStyleForColor(color))
        :css('border-radius', "5px 5px 5px 5px")
        :css('border-style', "solid")
        :css('border-width', "1px 5px 1px 5px")
        :css('column-gap', "1em")
        :css('display', "flex")
        :css('flex-direction', "row")
        :css('margin', ".5em 0")
        :css('padding', ".5em")


    if width ~= '' then
        root:css('width', width)
    end

    if file ~= '' then
        root:tag('div')
            :addClass('notice-image')
            :css('position', "relative")
            :css('top', "50%")
            :wikitext(string.format('[[File:%s|%s|alt=|link=]]', file, fileSize))
    end

    local contentDiv = root:tag('div')
            :addClass('notice-content')
            :css('flex-grow', 1)

    if header ~= '' then
        contentDiv:tag('div')
            :addClass('notice-header')
            :css('font-weight', 600)
            :wikitext(header)
    end

    contentDiv:tag('div')
            :addClass('notice-description')
            :css('font-size', "9pt")
            :wikitext(content)

    return tostring(root)
end

return p