View source for Global Lua Modules/Mbox

<noinclude>{{LangSelect}}</noinclude><includeonly>
{{Languages}}
{{Infobox Lua
| description = {{{description|Module for creating mboxes}}}
| type        = global
| status      = stable
| author      = [[User:Technobliterator|Technobliterator]] ({{{lua-convertion|Lua conversion}}})<br>[[User:Jak Himself|Jak Himself]] ({{{html-css|HTML and CSS}}})
| code        = Mbox
|dependencies = [[MediaWiki:Global Lua Modules/Mbox.css|Mbox.css]]
}}
{{tocright}}
{{{intro|'''Mbox''' is a module for creating message boxes.}}}

== {{{header-features|Features}}} ==
* {{{feature-customizable|Highly customizable with classes, inline styles, and provided CSS selectors.}}}
* {{{feature-optional|Optional features such as an image, left border, right-side text (for e.g. shortcuts), and a dismiss function.}}}

== {{{header-installation|{{#invoke:I18n|getMsg|Documentation|installation}}}}} ==
=== {{{header-module|Module}}} ===
{{{installation-module|First thing is the module itself. You don't need to copy the code. Just create a module titled '''Module:Mbox''' (or any other—just remember to adjust <code>#invoke</code> calls) and put this in the code.}}}
<syntaxhighlight lang="lua">
return require('Dev:Mbox')
</syntaxhighlight>

=== CSS ===
{{{installation-css|Next, add the following to your [[w:Help:Community CSS and JS#Common.css|Common.css]].

There are two types of CSS rules for Mbox. The first type is the structural/functionality CSS which should not be changed, lest it break the Mbox. The second type is the ''design'' of the Mbox, which should be modified to fit your community's needs. For the design-related selectors you should use, see [[#Design]].

The following CSS represents the base, and can be found at [[MediaWiki:Global Lua Modules/Mbox.css]].}}}
<syntaxhighlight lang="css" class="mw-collapsible">
.mbox {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
    display: flex;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #d6d6d6;
    border-left-width: 8px;
    border-left-color: #d6d6d6;
    border-radius: 3px;
    margin-bottom: 5px;
    min-height: 32px;
}

.mbox.mbox-type-important {
    border-left-color: var(--type-important);
}

.mbox.mbox-type-moderate {
    border-left-color: var(--type-moderate);
}

.mbox.mbox-type-minor {
    border-left-color: var(--type-minor);
}

.mbox__content {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 15px;
}

.mbox__content__image {
    display: table-cell;
    width: 40px;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding-right: 15px;
}

.mbox__content__wrapper {
    display: table-cell;
    vertical-align: middle;
}

.mbox__content__header {
    display: block;
    font-weight: bold;
}

.mbox__content__text {
    display: block;
}

.mbox__content__text__comment {
    font-size: small;
}

.mbox__content__aside {
    display: table-cell;
    width: 100px;
    vertical-align: middle;
    text-align: center;
    padding-left: 15px;
    border-left: 1px solid #d6d6d6;
}

.mbox__close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 7px;
    font-weight: bold;
    font-size: 16px;
    color: #bbb;
    cursor: pointer;
    transition: all .15s ease-in;
}

.mbox__close:hover {
    color: #777;
}

.mbox__close:after {
    content: '×';
}

.mw-collapsed + .mbox__close {
    transform: rotate(45deg);
    padding: 4px 7px 5px 2px;
}

/* Ensure text is readable in the FandomDesktop dark theme. */
.theme-fandomdesktop-dark .mbox {
    background-color: var(--theme-page-background-color--secondary);
    border-color: var(--theme-border-color);
}
</syntaxhighlight>

=== {{{header-template|Template}}} ===
{{{installation-template|The module is designed to be used as [[w:c:starter:Template:MessageBox|a regular template]]. To do that just create a template (ex: '''Template:Mbox''') with following content:

<pre>{{#invoke:Mbox|main}}</pre>

Now the template you created will accept parameters documented [[#Parameters|below]].

These parameters can also be passed directly to the <code>#invoke</code> and will act as defaults. Their values will be overridden by same ones passed to the template.}}}

{{clear}}

== {{{header-parameters|{{#invoke:I18n|getMsg|Documentation|parameters}}}}} ==
{{{parameters-text|For examples of how to use these parameters, see [[#Examples]].}}}
{{#vardefine:no|{{{no|No}}}}}
{{#vardefine:yes|{{{yes|Yes}}}}}
{{#vardefine:stylesheet|{{{param-def-stylesheet|Stylesheet default}}}}}
{| class="article-table" style="width: 100%"
! {{{param-name|Parameter name}}}
! {{{param-desc|Description}}}
! {{{param-required|Required?}}}
! {{{param-default|Default value}}}
|-
| <code>class</code>
| {{{param-class-desc|Additional classes to the root <code>.mbox</code> element.}}}
| {{#var:no}}
| —
|-
| <code>bordercolor</code>
| {{{param-bordercolor-desc|The color of the thick left-most border.}}}
| {{#var:no}}
| {{#var:stylesheet}}
|-
| <code>type</code>
| {{{param-type-desc|Type of mbox as declared as in CSS with variables. Affects color of the thick left-most border.}}}
| {{#var:no}}
| —
|-
| <code>bgcolor</code>
| {{{param-bgcolor-desc|The color of the mbox's background.}}}
| {{#var:no}}
| {{#var:stylesheet}}
|-
| <code>style</code>
| {{{param-style-desc|Additional inline styles to the root <code>.mbox</code> element.}}}
| {{#var:no}}
| —
|-
| <code>image</code>
| {{{param-image-desc|An image to be added to the left of all text content.}}}
| {{#var:no}}
| —
|-
| <code>imagewidth</code>
| {{{param-imagewidth-desc|The width of the image (height automatically adjusts).}}}
| {{#var:no}}
| <code>80px</code>
|-
| <code>imageadjust</code>
| {{{param-imageadjust-desc|For center/left/right/thumb}}}
| {{#var:no}}
| —
|-
| <code>imagelink</code>
| {{{param-imagelink-desc|The link to which the image points (could link to the relevant maintenance category, per example). If not included, the image will be un-clickable.}}}
| {{#var:no}}
| —
|-
| <code>header</code>
| {{{param-header-desc|The header (bold text placed at the top). This is typically used to very briefly explain the subject of the mbox itself, as when the mbox is closed, only the header will show.}}}
| {{#var:no}}
| —
|-
| <code>text</code>
| {{{param-text-desc|Non-bold text placed below the header, typically used to explain the subject of the mbox in further or additional detail. When the mbox is closed, this text will be hidden.}}}
| {{#var:no}}
| —
|-
| <code>comment</code>
| {{{param-comment-desc|Smaller non-bold text placed below the main text, typically used to add additional links or context about the notice. When the mbox is closed, this text will be hidden.}}}
| {{#var:no}}
| —
|-
| <code>aside</code>
| {{{param-aside-desc|Text placed within a small allocation on the right side separated by a light gray border. Most commonly used to show shortcuts to the page in question (such as on policy pages). When the mbox is closed, this text will be hidden.}}}
| {{#var:no}}
| —
|-
| <code>id</code>
| {{{param-id-desc|By default, one close button will close all mboxes on the page. However, to change this, this parameter may be used, given as the name of the mbox implementation (e.g., "Template:Cleanup" would have <code><nowiki>|id=cleanup</nowiki></code>).}}}
| {{#var:no}}
| —
|-
| <code>collapsed</code>
| {{{param-collapsed-desc|By default, the mbox will be uncollapsed, and the full contents will be shown. However, to change this, this parameter may be used to set an mbox as collapsed by default (e.g., <code><nowiki>|collapsed=true</nowiki></code> would set the mbox to be collapsed by default).}}}
| {{#var:no}}
| —
|}

== {{{header-design|Design}}} ==
{{{design-text|Some communities may wish to customize the appearance of the mboxes. The most common styling options are provided below:}}}

{{#tag:syntaxhighlight
| .mbox {
    /* {{{design-comment-background|the background of the entire box}}} */;
    background-color: ;

    /* {{{design-comment-border-color|the border color of the entire box}}} */
    border-color: ;

    /* {{{design-comment-border-width|the border thickness of the entire box}}} */
    border-width: ;

    /* {{{design-comment-border-left-color|the default thick left border color; note this can be changed from within the template implementations using the "color" parameter}}} */
    border-left-color: ;

    /* {{{design-comment-border-radius|the rounded-ness of the corners}}} */;
    border-radius: ;

    /* {{{design-comment-font-size|the baseline font-size of the mbox}}} */
    font-size: ;
}

.mbox__content {
    /* {{{design-comment-content-padding|the padding inside the mbox}}} */
    padding: ;
}

.mbox__content__image {
    /* {{{design-comment-image-width|the minimum width of the mbox's image (if bigger, use the "imagewidth" parameter in the template)}}} */
    width: ;

    /* {{{design-comment-image-padding-right|the spacing to the left of the text (i.e., the right of the image)}}} */
    padding-right: ;
}

.mbox__content__text__comment {
    /* {{{design-comment-comment-font-size|the size of the text in the "comment" parameter}}} */
    font-size: ;
}

.mbox__content__aside {
    /* {{{design-comment-aside|any particular modifications to the "aside" area can go here}}} */

    /* {{{design-comment-aside-width|the maximum width of the aside area}}} */
    width: ;
}

.mbox__close {
    /* {{{design-comment-close|the appearance of the close symbol here}}} */
}

.mbox__close:after {
    /* {{{design-comment-close-after|overwrite "content" here if you do not wish for the close symbol to be ×}}} */
    content: "";
}

.mw-collapsed + .mbox__close {
   /* {{{design-comment-close-closed|modifications to the close symbol when the box is closed}}} */
}

.mw-collapsed + .mbox__close:after {
   /* {{{design-comment-close-closed-after|overwrite "content" here if you do not wish for the close symbol to be + when the box is closed}}} */
   content: "";
}
| lang  = css
| class = mw-collapsible
}}

; {{{tech-notes|Technical notes}}}
* {{{design-tech-note-1|The mbox module uses the BEM selector convention for readability and to make future additions to the HTML structure easier.}}}
* {{{design-tech-note-2|Additional inline styles to the root <code>.mbox</code> element can be achieved via the <code>style</code> parameter in the template.}}}

== {{{header-examples|Examples}}} ==
=== {{{header-examples-different-params|Different parameters}}} ===
==== {{{header-examples-basic|Basic mbox}}} ====
{{#vardefine:produces|{{{example-produces|Produces:}}}}}
{{#vardefine:text-normal|{{{example-text-text|Normal text here}}}}}
{{#vardefine:text-header|{{{example-text-header|Header text here}}}}}
{{#vardefine:text-aside|{{{example-text-aside|Aside text here}}}}}
{{#vardefine:text-comment|{{{example-text-comment|Comment text here}}}}}
{{#tag:pre
|&#x7B;&#x7B;mbox
{{!}}header      = {{#var:text-header}}
{{!}}text        = {{#var:text-normal}}
{{!}}bordercolor = red
{{!}}id          = test1
&#x7D;&#x7D;
}}

{{#var:produces}}

{{#invoke:Mbox|main
|header      = {{#var:text-header}}
|text        = {{#var:text-normal}}
|bordercolor = red
|id          = test1
}}

==== {{{header-examples-types|Using types}}} ====
{{{examples-types|To use types, CSS variables and helper classes must be added, such as:}}}
{{#tag:syntaxhighlight
| :root {
    --type-important: rgba(200, 0, 0, 0.8);
    --type-moderate: rgba(233, 124, 47, 0.8);
    --type-minor: rgba(241, 197, 37, 0.8);
}

/* {{{examples-comment-classes|NB: The following helper classes are required after &lt;<nowiki>https://github.com/Wikia/app/commit/db84dac8d9bcaaf5d0bee993b11dc77c6792dc79</nowiki>&gt;.}}} */

.mbox.mbox-type-important {
    border-left-color: var(--type-important);
}

.mbox.mbox-type-moderate {
    border-left-color: var(--type-moderate);
}

.mbox.mbox-type-minor {
    border-left-color: var(--type-minor);
}
| lang = css
}}

{{{example-if-added|If added:}}}

{{#tag:pre|
&#x7B;&#x7B;mbox
{{!}}header = {{#var:text-header}}
{{!}}type   = important
{{!}}text   = {{#var:text-normal}}
{{!}}id     = test2
&#x7D;&#x7D;
}}

{{#var:produces}}

{{#invoke:Mbox|main
|header = {{#var:text-header}}
|type   = important
|text   = {{#var:text-normal}}
|id     = test2
}}

==== {{{header-examples-image|Image}}} ====
{{#tag:pre|
&#x7B;&#x7B;mbox
{{!}}header     = {{#var:text-header}}
{{!}}text       = {{#var:text-normal}}
{{!}}image      = Wiki.png
{{!}}imagelink  = Global Lua Modules
{{!}}imagewidth = 50px
{{!}}id         = test3
&#x7D;&#x7D;
}}

{{#var:produces}}

{{#invoke:Mbox|main
|header     = {{#var:text-header}}
|text       = {{#var:text-normal}}
|image      = Wiki.png
|imagelink  = Global Lua Modules
|imagewidth = 50px
|id         = test3
}}

==== {{{header-examples-aside|Aside}}} ====
{{#tag:pre|
&#x7B;&#x7B;mbox
{{!}}header = {{#var:text-header}}
{{!}}type   = important
{{!}}text   = {{#var:text-normal}}
{{!}}aside  = {{#var:text-aside}}
{{!}}id     = test4
&#x7D;&#x7D;
}}

{{#var:produces}}

{{#invoke:Mbox|main
|header = {{#var:text-header}}
|type   = important
|text   = {{#var:text-normal}}
|aside  = {{#var:text-aside}}
|id     = test4
}}

==== {{{header-examples-everything|Bit of everything}}} ====
{{#tag:pre|
&#x7B;&#x7B;mbox
{{!}}header    = {{#var:text-header}}
{{!}}text      = {{#var:text-normal}}
{{!}}comment   = {{#var:text-comment}}
{{!}}image     = Wiki.png
{{!}}aside     = {{#var:text-aside}}
{{!}}id        = test5
{{!}}collapsed = true
&#x7D;&#x7D;
}}

{{#var:produces}}

{{#invoke:Mbox|main
|header    = {{#var:text-header}}
|text      = {{#var:text-normal}}
|comment   = {{#var:text-comment}}
|image     = Wiki.png
|aside     = {{#var:text-aside}}
|id        = test5
|collapsed = true
}}

=== {{{header-examples-restyled|Restyled mboxes}}} ===
==== {{{header-examples-default-style|Standard/default style}}} ====
{{#tag:pre|
&#x7B;&#x7B;mbox
{{!}}header  = {{#var:text-header}}
{{!}}text    = {{#var:text-normal}}
{{!}}comment = {{#var:text-comment}}
{{!}}image   = Wiki.png
{{!}}aside   = {{#var:text-aside}}
{{!}}id      = standard
&#x7D;&#x7D;
}}

{{#var:produces}}

{{#invoke:Mbox|main
|header  = {{#var:text-header}}
|text    = {{#var:text-normal}}
|comment = {{#var:text-comment}}
|image   = Wiki.png
|aside   = {{#var:text-aside}}
|id      = standard
}}

==== {{{header-examples-wookieepedia|Wookieepedia style}}} ====
{{{example-wookieepedia|Reproducing [[w:c:starwars:Template:Citation]].}}}
{{#invoke:Mbox|main
|class      = mbox--wook 
|header     = {{{example-wookieepedia-header|Help me &lt;username&gt;, you're my only hope}}}
|text       = {{{example-wookieepedia-text|This article or section is in need of referencing per Wookieepedia's sourcing guidelines.}}}
|comment    = {{{example-wookieepedia-comment|This article needs appropriate citations. Help us improve this article by referencing valid resource material. Remove this notice when finished.}}}
|image      = Leia holo.png
|imagewidth = 120px
|id         = wook
}}

; CSS:
<pre class="mw-collapsible mw-collapsed">
.mbox {
    background-color: #7bb0d8;
    border: none;
    border-radius: 10px;
}
 
.mbox__close {
    color: #0c8787;
    font-weight: normal;
    font-size: 13px;
}
 
.mbox__close:after {
    content: '[hide]';
}
 
.mw-collapsed + .mbox__close {
    transform: none;
    padding: 2px 7px;
}
 
.mw-collapsed + .mbox__close:after {
    content: '[show]';
}
</pre>

==== {{{header-examples-final-fantasy|Final Fantasy Wiki style}}} ====
{{{example-final-fantasy|Reproducing [[w:c:finalfantasy:Template:Rename]].}}}
{{#invoke:Mbox|main
|class  = mbox--ff
|header = {{{example-final-fantasy-header|Auron: Once Rename fixes its title, we leave.}}}
|text   = {{{example-final-fantasy-text|This page is named incorrectly according to policy. Administrators should retitle it and pages that link to it should be relinked to the new title.}}}
|image  = Auron Avatar.png
|id     = ff
}}

; CSS:
<pre class="mw-collapsible mw-collapsed">
.theme-fandomdesktop-light .mbox {
    border-top: 1px solid #afaa84;
    border-radius: 10px;
    background: linear-gradient(180deg,rgba(255,255,246,1) 0,rgba(247,219,185,1) 40px);
}

.theme-fandomdesktop-dark .mbox {
    border-top: 3px solid #1e9de3 !important;
    border: 0;
    background: linear-gradient(180deg,rgba(5,37,78,.5) 0,rgba(5,37,78,.5) 75%,rgba(5,37,78,0));
}
</pre>

== {{{header-technical|Technical and miscellaneous}}} ==
* {{{technical-note-1|There is no <code>category</code> parameter. In order to inject a category onto an article using a certain mbox implementation, simply add <code><nowiki>&lt;includeonly>[[Category:{{{category}}}]]</includeonly&gt;</nowiki></code>. If you wish to make the injection of the category optional, add <code><nowiki>&lt;includeonly>{{#ifeq: {{{1|}}} | nocat | | [[Category:{{{category}}}]] }}</includeonly&gt;</nowiki></code>.}}}

== {{{header-also|{{#invoke:I18n|getMsg|Documentation|see_also}}}}} ==
* [[Global Lua Modules/Cbox]] - {{{see-also-cbox|Rounded corner and different layout}}}
{{See also|w:c:templates:Module:Mbox|w:c:templates:template:Mbox}}
</includeonly>