Template:DidYouKnow/doc

This template is used to display a mobile-friendly "did you know" button with an accompanying popup. Currently, only English is supported.


 * See installation instructions or the template shall not work.
 * Version 2.1.0

Installation
This template relies on CSS to function. Before copying-away, make sure to have an Administrator add this line to the top of MediaWiki:Common.css:

Note: Don't confuse this import for MediaWiki:DidYouKnow.css, which is legacy CSS for version 1.3.0 or earlier. MediaWiki:DidYouKnow.2.css is for versions 2.0.0-3.0.0.

Example


Parameter notes

 * short — This template will transform long inputs into a "page"-format that can extend as far downward as desired, but it does this purely by detecting the amount of characters in the main parameter. If, for example, your input is short but uses a lot of wikitext (such as piped links or markup), then it can trigger the page format when you may prefer it to be smaller. To do this, simply use the format.
 * Note: When true, if the input exceeds the "short" height, then the template will transform into a scrollbox. You may desire to use this parameter purely for the scroll function, such as if the DidYouKnow content is longer than the page itself and is at risk of being clipped; however, it is still strongly recommended that DidYouKnow only contain useful tidbit information, and should be considerably shorter than the article in which it is utilized.
 * 1 — the main parameter, if the input is over 300 characters long, the "page" format will gain a folded corner at the bottom right, purely for style.
 * mode — set one or more modes by adding the key-phrase for each, e.g. "mode=push", "mode=trunc", "mode=truncated,push", mode="push trunc paper", etc.
 * If set to, e.g.  , the popup displays like a piece of paper rather than the usual ThemeDesigner-based aesthetics.
 * If set to, e.g.  , then the popup will display at half-width unless inside an infobox. Combining it with the "push" mode will cause the popup to appear as a right-floated container, similar to an infobox, when expanded.
 * If set to, e.g.  , then all other length settings and parameters are overridden; the page-layout with folded corner is forced always. Further, this element makes the entire element more portable, able to fit inside containers such as Portable Infobox fields by pushing content down to accommodate it, rather than serving its data via popup.
 * Note: If used inside Portable Infoboxes, this mode is forced always regardless of whether it is specified via template parameter. Additionally, within Portable Infoboxes a max-height is force-applied so that the element doesn't get too big when clicked, turning the element into a scrollbox.
 * sponsor — Name a sponsoring company with plain wikitext. Any images passed through this parameter will be shrunk down to an icon with maximum dimensions of 20x20px, aspect ratio preserved.

Options
For those who dislike the default "pulsing" behavior of the button, you may edit the core template to add " " to the  parameter of the parent  ; ergo, the attribute should look like   if done properly. Instead of pulsing, the template will now "grow" slightly on hover. Simply remove " " to restore the pulse mode.

Desktop vs mobile
In desktop, the button is a right-floated icon-element that pulses to draw the eye (unless changed with settings), drawing its coloration from ThemeDesigner CSSVariables. Inside Portable Infoboxes, or when declared via parameter, this icon will push content downward ("push" mode) in order to display the entirety of its content; otherwise, & by default, the content will be served via popup.

In mobile, the button always appears as a  which can be clicked to display the content directly beneath the button, which is surrounded by   tags. Rather than using an icon, the text "Did you know?" is displayed in the button, & content is always pushed down to display the content on click.

CSS class documentation
{   "params": { "1": {           "label": "main content", "description": "Main parameter, the popup text itself.", "type": "content", "required": true },       "short": { "description": "If \"true\", the template will not expand to accommodate long-form content, instead using a scrollbox.", "type": "boolean", "label": "short" },       "mode": { "description": "If set to \"push\", transforms into a more portable version of the existing functionality. If set to \"trunc\", makes the container narrower outside of infoboxes. If set to \"paper\", changes the aesthetics of the popup container to universally appear like a piece of vellum rather than the usual ThemeDesigner-based container.", "label": "mode", "type": "string" },       "sponsor": { "label": "sponsor file", "description": "Sponsor file name", "example": "Fandom.svg", "type": "wiki-file-name" },       "slink": { "label": "sponsor link", "description": "Icon link for the sponsor icon", "type": "url" }   },    "description": "Creates a mobile-friendly \"Did you know?\" button that will display a popup of text when clicked. Floated to the right in desktop.", "format": "inline" }
 * This is only useful if you wish to theme this template.
 * — parent class.
 * — changes desktop pulsation behavior.
 * — changes desktop aesthetics to resemble vellum.
 * — changes desktop behavior to be slimmer.
 * — changes desktop behavior to be more portable.
 * — parent class of the button that is clicked, the "outer" button.
 * — inner button, containing its text.
 * — sibling of, absolutely positioned flex parent that allows its sibling classes to expand leftward as more text is added, up to a maximum width.
 * — contains the absolutely positioned text.
 * — contains a "copy" of the output that doesn't appear in mobile and is hidden in desktop, "beneath" the regular output on the z-axis. This allows its parent contains to maintain the proper dimensionality even while the regular output is raised upward on the z-axis with absolute positioning.
 * — the main output, absolutely positioned so that it can spill over the body class if it needs to.