Module:Notice

Documentation

[purge]

An Module to create a Notice box with image (optional).

Usage

Use this template to create other Notice Templates.

Syntax: {{notice|color=|colorBack=|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.
colorBack	Named, optional	The color preset for the background color. Defined options are green, blue, teal, orange, yellow, red, maroon, pink, and gray with 0.2 for alpha channel. However, if a color is a known CSS color, it can be used. Defaults to none.
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=Beans.png|header=Under Construction|content=This article is under construction.}}

Under Construction

This article is under construction.

{{notice|file=Beans.png|header=Notice with header text only.}}

Notice with header text only.

{{notice|file=Beans.png|content=Small notice without a header.}}

Small notice without a header.

{{notice|file=Beans.png|header=Green notice|color=green}}

Green notice

{{notice|file=Beans.png|header=Green notice with green background|color=green|colorBack=green}}

Green notice

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

Blue notice with custom width

{{notice|file=Beans.png|header=Teal notice|color=teal}}

Teal notice

{{notice|file=Beans.png|header=Orange notice|color=orange}}

Orange notice

{{notice|file=Beans.png|header=Yellow notice|color=yellow}}

Yellow notice

{{notice|file=Beans.png|header=Red notice|color=red}}

Red notice

{{notice|file=Beans.png|header=Maroon notice|color=maroon}}

Maroon notice

{{notice|file=Beans.png|header=Pink notice|color=pink}}

Pink notice

{{notice|file=Beans.png|header=Gray notice|color=gray}}

Gray notice

{{notice|file=Beans.png|header=Custom color notice|color=slateblue|text-align=center}}

Custom color notice

The above documentation is transcluded from Module:Notice/doc. (edit | history)

---

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

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


-- Entry point for the module
function p.main(frame)
    local args = frame:getParent().args
    local color = args.color or 'green'
    local colorBack = args.colorBack or ''
    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')
        :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', "auto")
        :css('padding', ".5em")
        
    if colorBack ~= '' then
    	root:css('background-color', p.getStyleForColorBack(colorBack))
    end


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


    if file ~= '' then
        root:tag('div')
            :addClass('notice-image')
            :css('position', "relative")
            --:css('top', "50%")
            :css("margin", "auto")
            :wikitext(string.format('[[File:%s|%s|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